From 63699e02781896b692ec58e81e377f7ba10a376f Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Fri, 12 Apr 2024 08:23:51 -0400
Subject: [PATCH 1/9] feat: for APPLAUNCHER-28 various data fixes

---
 .../components/AppLauncherCard.vue            | 61 ++++++++++----
 pkg/app-launcher/pages/index.vue              | 83 ++++++++++++-------
 2 files changed, 97 insertions(+), 47 deletions(-)

diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
index 9e19477..93dab38 100644
--- a/pkg/app-launcher/components/AppLauncherCard.vue
+++ b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -14,6 +14,10 @@ export default {
       type: String,
       required: true,
     },
+    clusterName: {
+      type: String,
+      required: false,
+    },
     favoritedServices: {
       type: Array,
       required: true,
@@ -26,29 +30,48 @@ export default {
       type: Object,
       default: null,
     },
+    metadata: {
+      type: Object,
+      default: null,
+    },
   },
   methods: {
     openLink(link) {
       window.open(link);
     },
     toggleFavorite() {
-      this.$emit('toggle-favorite', this.service);
+      this.$emit('toggle-favorite', this.app)
     },
   },
   computed: {
     app() {
-      return this.service || this.ingress;
+      if (this.service) {
+        return {
+          ...this.service,
+          kind: 'Service',
+          clusterId: this.clusterId,
+          clusterName: this.clusterName
+        };
+      } else if (this.ingress) {
+        return {
+          ...this.ingress,
+          kind: 'Ingress',
+          clusterId: this.clusterId,
+          clusterName: this.clusterName
+        };
+      }
+      return null;
     },
     endpoints() {
       return (
         this.service?.spec?.ports?.map((port) => {
           const endpoint = `${
             isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${this.service?.metadata?.name}:${port.port}`;
+          }:${this.app.metadata?.name}:${port.port}`;
 
           return {
             label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.metadata.namespace}/services/${endpoint}/proxy`,
+            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.namespace}/services/${endpoint}/proxy`,
           };
         }) ?? []
       );
@@ -56,30 +79,30 @@ export default {
     computedServiceName() {
       return (
         this.service?.metadata?.labels?.['app.kubernetes.io/component'] ??
-        this.service?.metadata?.name
+        this.serice?.metadata?.name
       );
     },
     helmChart() {
-      return this.service?.metadata?.labels?.['helm.sh/chart'];
+      return this.app?.metadata?.labels?.['helm.sh/chart'];
     },
     kubernetesVersion() {
-      return this.service?.metadata?.labels?.['app.kubernetes.io/version'];
+      return this.app?.metadata?.labels?.['app.kubernetes.io/version'];
     },
     name() {
-      return this.service?.metadata?.name;
+      return this.app?.metadata?.name;
     },
     namespace() {
-      return this.service?.metadata?.namespace;
+      return this.app?.metadata?.namespace;
     },
     isFavorited() {
       return this.favoritedServices.some(
         (favoritedService) =>
-          favoritedService?.clusterId === this.clusterId &&
-          favoritedService?.service?.id === this.service?.id
+          favoritedService?.app?.id === this.app?.id &&
+          favoritedService?.app?.kind === this.app?.kind
       );
     },
     isGlobalApp() {
-      return this.service?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
+      return this.app?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
     },
     ingressPath() {
       return ingressFullPath(this.ingress, this.ingress?.spec?.rules?.[0]);
@@ -98,21 +121,25 @@ export default {
           {{ service ? service?.metadata?.name : ingress?.metadata?.name }}
         </p>
         <div style="color: var(--input-label); display: flex; justify-content: space-between; margin-top: 4px;">
-          <p v-if="app.type === 'service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
+          <p v-if="app.kind === 'Service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
             {{ kubernetesVersion }}
           </p>
-          <p v-if="app.type === 'service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
+          <p v-if="app.kind === 'Service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
             {{ helmChart }}
           </p>
-          <p v-if="app.type === 'ingress'">
+          <p v-if="app.kind === 'Ingress'">
             Ingress
           </p>
         </div>
       </div>
     </template>
     <template #body>
-      <p v-if="app.type === 'service'">{{ namespace }}/{{ name }}</p>
-      <p v-if="app.type === 'ingress'">{{ ingressPath }}</p>
+      <p v-if="app.kind === 'Service'">
+        {{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ namespace }}/{{ name }}
+      </p>
+      <p v-if="app.Kind === 'Ingress'">
+        {{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ ingressPath }}
+      </p>
     </template>
     <template #actions>
       <button v-if="!isGlobalApp" class="icon-button" @click="toggleFavorite">
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index a086ec4..079942a 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -24,7 +24,7 @@ export default {
       selectedCluster: null,
       clusterOptions: [],
       selectedView: 'grid',
-      favoritedServices: [],
+      favoritedApps: [],
       searchQuery: '',
       tableHeaders: [
         {
@@ -70,22 +70,34 @@ export default {
       }
       this.generateClusterOptions();
 
-      // Retrieve global apps based on annotations
+      // Retrieve global services based on annotations
       this.servicesByCluster.forEach((cluster) => {
         cluster.services.forEach((service) => {
           if (service.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
-            this.favoritedServices.push({
+            this.favoritedApps.push({
               clusterId: cluster.id,
-              service,
+              app: service,
+            });
+          }
+        });
+      });
+
+      // Retrieve global ingresses based on annotations
+      this.ingressesByCluster.forEach((cluster) => {
+        cluster.ingresses.forEach((ingress) => {
+          if (ingress.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
+            this.favoritedApps.push({
+              clusterId: cluster.id,
+              app: ingress,
             });
           }
         });
       });
 
       // Retrieve favorites from localStorage
-      const storedFavorites = localStorage.getItem('favoritedServices');
+      const storedFavorites = localStorage.getItem('favoritedApps');
       if (storedFavorites) {
-        this.favoritedServices.push(...JSON.parse(storedFavorites));
+        this.favoritedApps.push(...JSON.parse(storedFavorites));
       }
     } catch (error) {
       console.error('Error fetching clusters', error);
@@ -104,7 +116,7 @@ export default {
       return cluster ? cluster.name : '';
     },
     getCluster(clusterId) {
-      return this.servicesByCluster.find(c => c.id === clusterId);
+      return this.servicesByCluster.find(c => c.id === clusterId) || null;
     },
     async getServicesByCluster(allClusters) {
       return await Promise.all(
@@ -190,28 +202,30 @@ export default {
     openLink(link) {
       window.open(link, '_blank');
     },
-    toggleFavorite(service) {
-      const index = this.favoritedServices.findIndex(
-        (favoritedService) =>
-          favoritedService.clusterId === this.selectedCluster &&
-          favoritedService.service.id === service.id
+    toggleFavorite(item) {
+      const index = this.favoritedApps.findIndex(
+        (favoritedApp) =>
+          favoritedApp.app.id === item.id &&
+          favoritedApp.app.kind === item.kind
       );
+      
       if (index !== -1) {
-        this.favoritedServices.splice(index, 1);
+        this.favoritedApps.splice(index, 1);
       } else {
-        this.favoritedServices.push({
-          clusterId: this.selectedCluster,
-          service,
+        this.favoritedApps.push({
+          clusterId: item.clusterId,
+          app: item,
         });
       }
+
       // Store updated favorites in localStorage
-      localStorage.setItem('favoritedServices', JSON.stringify(this.favoritedServices.filter((s) => (s.service.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true'))));
+      const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.app.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
+      localStorage.setItem('favoritedApps', favsToStore);
     },
-    isFavorited(service, favoritedServices) {
-      return favoritedServices.some(
+    isFavorited(app, favoritedApps) {
+      return favoritedApps.some(
         (favoritedService) =>
-          favoritedService.clusterId === this.selectedCluster &&
-          favoritedService.service.id === service.id
+          favoritedService.app.id === app.id
       );
     },
   },
@@ -245,6 +259,8 @@ export default {
           ingresses,
           filteredApps,
         };
+      } else {
+        console.error('Cluster not found:', this.selectedCluster);
       }
       return null;
     },
@@ -354,15 +370,20 @@ export default {
         <i class="icon icon-list-flat" />
       </button>
     </div>
-    <div v-if="favoritedServices.length > 0">
+    <div v-if="favoritedApps.length > 0">
       <div class="cluster-header">
         <h2>{{ t('appLauncher.globalApps') }}</h2>
       </div>
       <div class="services-by-cluster-grid">
-        <AppLauncherCard v-for="favoritedService in favoritedServices"
-          :key="`${favoritedService.clusterId}-${favoritedService.service.id}`" :cluster-id="favoritedService.clusterId"
-          :service="favoritedService.service" :favorited-services="favoritedServices"
-          @toggle-favorite="toggleFavorite" />
+        <AppLauncherCard v-for="favoritedService in favoritedApps"
+          :key="`${favoritedService.clusterId}-${favoritedService.app.id}-${favoritedService.app.kind}`"
+          :cluster-id="favoritedService.clusterId"
+          :cluster-name="getClusterName(favoritedService.clusterId)"
+          :service="favoritedService.app.kind === 'Service' ? favoritedService.app : null"
+          :ingress="favoritedService.app.kind === 'Ingress' ? favoritedService.app : null"
+          :favorited-services="favoritedApps"
+          @toggle-favorite="toggleFavorite"
+        />
       </div>
     </div>
     <div v-if="selectedCluster">
@@ -378,9 +399,11 @@ export default {
               v-for="app in clusterData.filteredApps"
               :key="app.uniqueId"
               :cluster-id="clusterData.id"
-              :service="app.type === 'service' ? app : null"
-              :ingress="app.type === 'ingress' ? app : null"
-              :favorited-services="favoritedServices"
+              :cluster-name="clusterData.name"
+              :metadata="app.metadata"
+              :service="app.kind === 'Service' ? app : null"
+              :ingress="app.kind === 'Ingress' ? app : null"
+              :favorited-services="favoritedApps"
               @toggle-favorite="toggleFavorite"
             />
           </div>
@@ -417,7 +440,7 @@ export default {
             <template #cell:actions="{row}">
               <div style="display: flex; justify-content: flex-end;">
                 <button class="icon-button favorite-icon" @click="toggleFavorite(row)">
-                  <i :class="['icon', isFavorited(row, favoritedServices) ? 'icon-star' : 'icon-star-open']" />
+                  <i :class="['icon', isFavorited(row, favoritedApps) ? 'icon-star' : 'icon-star-open']" />
                 </button>
                 <a v-if="getEndpoints(row)?.length <= 1" :href="getEndpoints(row)[0]?.value" target="_blank"
                   rel="noopener noreferrer nofollow" class="btn role-primary">

From 6bfb7d0d90a1ded3a716ecf31caba301ba360687 Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Fri, 12 Apr 2024 14:05:05 -0400
Subject: [PATCH 2/9] feat: for APPLAUNCHER-28 finished up with data change

---
 .../components/AppLauncherCard.vue            | 68 ++++---------
 pkg/app-launcher/pages/index.vue              | 99 +++++++++----------
 2 files changed, 67 insertions(+), 100 deletions(-)

diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
index 93dab38..d07b533 100644
--- a/pkg/app-launcher/components/AppLauncherCard.vue
+++ b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -10,29 +10,17 @@ export default {
     ButtonDropDown,
   },
   props: {
-    clusterId: {
-      type: String,
-      required: true,
-    },
-    clusterName: {
-      type: String,
-      required: false,
-    },
-    favoritedServices: {
+    favoritedApps: {
       type: Array,
       required: true,
     },
-    service: {
+    app: {
       type: Object,
       default: null,
     },
-    ingress: {
-      type: Object,
-      default: null,
-    },
-    metadata: {
-      type: Object,
-      default: null,
+    isInGlobalView: {
+      type: Boolean,
+      default: false,
     },
   },
   methods: {
@@ -44,42 +32,24 @@ export default {
     },
   },
   computed: {
-    app() {
-      if (this.service) {
-        return {
-          ...this.service,
-          kind: 'Service',
-          clusterId: this.clusterId,
-          clusterName: this.clusterName
-        };
-      } else if (this.ingress) {
-        return {
-          ...this.ingress,
-          kind: 'Ingress',
-          clusterId: this.clusterId,
-          clusterName: this.clusterName
-        };
-      }
-      return null;
-    },
     endpoints() {
       return (
-        this.service?.spec?.ports?.map((port) => {
+        this.app?.spec?.ports?.map((port) => {
           const endpoint = `${
             isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
           }:${this.app.metadata?.name}:${port.port}`;
 
           return {
             label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.namespace}/services/${endpoint}/proxy`,
+            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.app.namespace}/services/${endpoint}/proxy`,
           };
         }) ?? []
       );
     },
     computedServiceName() {
       return (
-        this.service?.metadata?.labels?.['app.kubernetes.io/component'] ??
-        this.serice?.metadata?.name
+        this.app?.metadata?.labels?.['app.kubernetes.io/component'] ??
+        this.app?.metadata?.name
       );
     },
     helmChart() {
@@ -95,17 +65,17 @@ export default {
       return this.app?.metadata?.namespace;
     },
     isFavorited() {
-      return this.favoritedServices.some(
-        (favoritedService) =>
-          favoritedService?.app?.id === this.app?.id &&
-          favoritedService?.app?.kind === this.app?.kind
+      return this.favoritedApps.some(
+        (favoritedApp) =>
+          favoritedApp?.id === this.app.id &&
+          favoritedApp?.kind === this.app.kind
       );
     },
     isGlobalApp() {
       return this.app?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
     },
     ingressPath() {
-      return ingressFullPath(this.ingress, this.ingress?.spec?.rules?.[0]);
+      return ingressFullPath(this.app, this.app?.spec?.rules?.[0]);
     }
   },
   name: 'AppLauncherCard',
@@ -118,7 +88,7 @@ export default {
     <template #title>
       <div style="width: 100%">
         <p style="font-size: 1.2rem">
-          {{ service ? service?.metadata?.name : ingress?.metadata?.name }}
+          {{ app.metadata?.name }}
         </p>
         <div style="color: var(--input-label); display: flex; justify-content: space-between; margin-top: 4px;">
           <p v-if="app.kind === 'Service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
@@ -135,10 +105,10 @@ export default {
     </template>
     <template #body>
       <p v-if="app.kind === 'Service'">
-        {{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ namespace }}/{{ name }}
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}` : '' }}/{{ namespace }}/{{ name }}
       </p>
       <p v-if="app.Kind === 'Ingress'">
-        {{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ ingressPath }}
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}` : '' }}/{{ ingressPath }}
       </p>
     </template>
     <template #actions>
@@ -147,7 +117,7 @@ export default {
       </button>
       <i v-else class="icon icon-globe icon-only" />
       <a
-        v-if="(endpoints?.length ?? 0) <= 1 && app.type === 'service'"
+        v-if="(endpoints?.length ?? 0) <= 1 && app.kind === 'Service'"
         :disabled="!endpoints?.length"
         :href="endpoints[0]?.value"
         target="_blank"
@@ -160,7 +130,7 @@ export default {
         {{ t('appLauncher.launch') }}
       </a>
       <a
-        v-else-if="app.type === 'ingress'"
+        v-else-if="app.kind === 'Ingress'"
         :href="ingressPath"
         target="_blank"
         rel="noopener noreferrer nofollow"
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 079942a..1a60548 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -63,11 +63,7 @@ export default {
       const allClusters = await this.getClusters();
       this.servicesByCluster = await this.getServicesByCluster(allClusters);
       this.ingressesByCluster = await this.getIngressesByCluster(allClusters);
-
-      // Set the first cluster as the selected cluster
-      if (this.servicesByCluster.length > 0) {
-        this.selectedCluster = "ALL_CLUSTERS";
-      }
+      this.selectedCluster = "ALL_CLUSTERS";
       this.generateClusterOptions();
 
       // Retrieve global services based on annotations
@@ -75,8 +71,9 @@ export default {
         cluster.services.forEach((service) => {
           if (service.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
             this.favoritedApps.push({
+              ...service,
               clusterId: cluster.id,
-              app: service,
+              clusterName: cluster.name,
             });
           }
         });
@@ -87,8 +84,9 @@ export default {
         cluster.ingresses.forEach((ingress) => {
           if (ingress.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
             this.favoritedApps.push({
+              ...ingress,
               clusterId: cluster.id,
-              app: ingress,
+              clusterName: cluster.name,
             });
           }
         });
@@ -136,7 +134,11 @@ export default {
                   url: `/k8s/clusters/${cluster.id}/v1/services`,
                 })
               ).data;
-              clusterData.services = services;
+              clusterData.services = services.map((service) => ({
+                ...service,
+                clusterId: cluster.id,
+                clusterName: cluster.spec.displayName,
+              }));
             } catch (error) {
               console.error(`Error fetching services for cluster ${cluster.id}:`, error);
               clusterData.error = true;
@@ -165,7 +167,11 @@ export default {
                   url: `/k8s/clusters/${cluster.id}/v1/networking.k8s.io.ingresses`,
                 })
               ).data;
-              clusterData.ingresses = ingresses;
+              clusterData.ingresses = ingresses.map((ingress) => ({
+                ...ingress,
+                clusterId: cluster.id,
+                clusterName: cluster.spec.displayName,
+              }));
             } catch (error) {
               console.error(`Error fetching ingresses for cluster ${cluster.id}:`, error);
               clusterData.error = true;
@@ -185,16 +191,16 @@ export default {
     toggleSortOrder() {
       this.tableHeaders[0].sortOrder = this.tableHeaders[0].sortOrder === 'asc' ? 'desc' : 'asc';
     },
-    getEndpoints(service) {
+    getEndpoints(app) {
       return (
-        service?.spec.ports?.map((port) => {
+        app?.spec.ports?.map((port) => {
           const endpoint = `${
             isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${service.metadata.name}:${port.port}`;
+          }:${app.metadata.name}:${port.port}`;
 
           return {
             label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.selectedCluster}/api/v1/namespaces/${service.metadata.namespace}/services/${endpoint}/proxy`,
+            value: `/k8s/clusters/${this.selectedCluster}/api/v1/namespaces/${app.metadata.namespace}/services/${endpoint}/proxy`,
           };
         }) ?? []
       );
@@ -205,27 +211,26 @@ export default {
     toggleFavorite(item) {
       const index = this.favoritedApps.findIndex(
         (favoritedApp) =>
-          favoritedApp.app.id === item.id &&
-          favoritedApp.app.kind === item.kind
+          favoritedApp.id === item.id &&
+          favoritedApp.kind === item.kind
       );
       
       if (index !== -1) {
         this.favoritedApps.splice(index, 1);
       } else {
         this.favoritedApps.push({
-          clusterId: item.clusterId,
-          app: item,
+          ...item
         });
       }
 
       // Store updated favorites in localStorage
-      const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.app.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
+      const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
       localStorage.setItem('favoritedApps', favsToStore);
     },
     isFavorited(app, favoritedApps) {
       return favoritedApps.some(
         (favoritedService) =>
-          favoritedService.app.id === app.id
+          favoritedService.id === app.id
       );
     },
   },
@@ -233,9 +238,14 @@ export default {
     selectedClusterData() {
       const cluster = this.getCluster(this.selectedCluster);
       if (cluster) {
-        const ingresses = this.ingressesByCluster.find(
+        let ingresses = this.ingressesByCluster.find(
           (ingressCluster) => ingressCluster.id === cluster.id
         )?.ingresses || [];
+        ingresses = ingresses.map((ingress) => ({
+          ...ingress,
+          clusterId: cluster.id,
+          clusterName: cluster.name,
+        }));
 
         const services = cluster.services.map((service) => {
           const relatedIngress = ingresses.find((ingress) =>
@@ -247,6 +257,8 @@ export default {
           );
           return {
             ...service,
+            clusterId: cluster.id,
+            clusterName: cluster.name,
             relatedIngress,
           };
         });
@@ -266,11 +278,13 @@ export default {
     },
     displayedClusterData() {
       if (this.selectedCluster === 'ALL_CLUSTERS') {
-        return this.servicesByCluster.map(cluster => ({
+        
+        const allClustersData = this.servicesByCluster.map(cluster => ({
           ...cluster,
           ingresses: this.ingressesByCluster.find(ingressCluster => ingressCluster.id === cluster.id)?.ingresses || [],
           filteredApps: this.filteredApps(cluster.services, this.ingressesByCluster.find(ingressCluster => ingressCluster.id === cluster.id)?.ingresses || []),
         }));
+        return allClustersData;
       } else {
         return [this.selectedClusterData]; // This just remakes use of selectedClusterData for single cluster view
       }
@@ -279,13 +293,15 @@ export default {
       if (this.selectedClusterData) {
         const services = this.selectedClusterData.services.map((service) => ({
           ...service,
-          type: 'service',
+          clusterId: this.selectedClusterData.id,
+          clusterName: this.selectedClusterData.name,
           uniqueId: `service-${service.id}`,
         }));
 
         const ingresses = this.selectedClusterData.ingresses.map((ingress) => ({
           ...ingress,
-          type: 'ingress',
+          clusterId: this.selectedClusterData.id,
+          clusterName: this.selectedClusterData.name,
           uniqueId: `ingress-${ingress.id}`,
         }));
 
@@ -327,20 +343,6 @@ export default {
         }
       };
     },
-    sortedServices() {
-      if (this.selectedClusterData) {
-        return [...this.selectedClusterData.services].sort((a, b) => {
-          const nameA = a.metadata.name.toLowerCase();
-          const nameB = b.metadata.name.toLowerCase();
-          if (this.tableHeaders[0].sortOrder === 'asc') {
-            return nameA.localeCompare(nameB);
-          } else {
-            return nameB.localeCompare(nameA);
-          }
-        });
-      }
-      return [];
-    },
   },
   layout: 'plain',
 };
@@ -375,13 +377,11 @@ export default {
         <h2>{{ t('appLauncher.globalApps') }}</h2>
       </div>
       <div class="services-by-cluster-grid">
-        <AppLauncherCard v-for="favoritedService in favoritedApps"
-          :key="`${favoritedService.clusterId}-${favoritedService.app.id}-${favoritedService.app.kind}`"
-          :cluster-id="favoritedService.clusterId"
-          :cluster-name="getClusterName(favoritedService.clusterId)"
-          :service="favoritedService.app.kind === 'Service' ? favoritedService.app : null"
-          :ingress="favoritedService.app.kind === 'Ingress' ? favoritedService.app : null"
-          :favorited-services="favoritedApps"
+        <AppLauncherCard v-for="favoritedApp in favoritedApps"
+          :key="`${favoritedApp.clusterId}-${favoritedApp.id}-${favoritedApp.kind}-fav`"
+          :app="favoritedApp"
+          :isInGlobalView="true"
+          :favorited-apps="favoritedApps"
           @toggle-favorite="toggleFavorite"
         />
       </div>
@@ -397,13 +397,10 @@ export default {
           <div class="services-by-cluster-grid">
             <AppLauncherCard
               v-for="app in clusterData.filteredApps"
-              :key="app.uniqueId"
-              :cluster-id="clusterData.id"
-              :cluster-name="clusterData.name"
-              :metadata="app.metadata"
-              :service="app.kind === 'Service' ? app : null"
-              :ingress="app.kind === 'Ingress' ? app : null"
-              :favorited-services="favoritedApps"
+              :key="`${app.clusterId}-${app.id}-${app.kind}`"
+              :app="app"
+              :isInGlobalView="false"
+              :favorited-apps="favoritedApps"
               @toggle-favorite="toggleFavorite"
             />
           </div>

From a426034e46e37f6ceb4c232f91196748883ddb07 Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Fri, 12 Apr 2024 14:30:16 -0400
Subject: [PATCH 3/9] feat: for APPLAUNCHER-28 typo

---
 pkg/app-launcher/components/AppLauncherCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
index d07b533..60245a9 100644
--- a/pkg/app-launcher/components/AppLauncherCard.vue
+++ b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -105,10 +105,10 @@ export default {
     </template>
     <template #body>
       <p v-if="app.kind === 'Service'">
-        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}` : '' }}/{{ namespace }}/{{ name }}
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}/` : '' }}{{ namespace }}/{{ name }}
       </p>
-      <p v-if="app.Kind === 'Ingress'">
-        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}` : '' }}/{{ ingressPath }}
+      <p v-if="app.kind === 'Ingress'">
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}: ` : '' }}{{ ingressPath }}
       </p>
     </template>
     <template #actions>

From f9b41a040f03377847c969dd8e4df13170adf01b Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 10:51:43 -0400
Subject: [PATCH 4/9] feat: for APPLAUNCHER-37 commit to see changes on new
 components

---
 .../components/ClusterActions.vue             | 80 +++++++++++++++++++
 pkg/app-launcher/components/ClusterView.vue   |  0
 pkg/app-launcher/pages/index.vue              | 17 +++-
 3 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 pkg/app-launcher/components/ClusterActions.vue
 create mode 100644 pkg/app-launcher/components/ClusterView.vue

diff --git a/pkg/app-launcher/components/ClusterActions.vue b/pkg/app-launcher/components/ClusterActions.vue
new file mode 100644
index 0000000..52c179b
--- /dev/null
+++ b/pkg/app-launcher/components/ClusterActions.vue
@@ -0,0 +1,80 @@
+<script>
+export default {
+    name: 'ClusterActions',
+    props: {
+        searchQuery: {
+            type: String,
+            required: true,
+        },
+        isGridView: {
+            type: Boolean,
+            required: true,
+        },
+        selectedCluster: {
+            type: String,
+            required: true,
+        },
+        clusterOptions: {
+            type: Array,
+            required: true,
+        },
+    },
+    emits: ['update:search-query', 'toggle-sort', 'update:selected-cluster', 'set-view'],
+};
+</script>
+
+<template>
+    <div class="cluster-actions">
+    <div class="search-input">
+        <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', searchQuery)" />
+    </div>
+    <button class="icon-button" @click="$emit('toggle-sort')" v-if="isGridView">
+        <i class="icon icon-sort" />
+    </button>
+    <div class="select-wrapper">
+        <select v-model="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', selectedCluster)">
+        <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
+            {{ option.label }}
+        </option>
+        </select>
+    </div>
+    <button class="icon-button" @click="$emit('set-view', 'grid')">
+        <i class="icon icon-apps" />
+    </button>
+    <button class="icon-button" @click="$emit('set-view', 'list')">
+        <i class="icon icon-list-flat" />
+    </button>
+    </div>
+</template>
+
+
+<style scoped>
+.cluster-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background-color: #f4f4f5;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.icon-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #333;
+    font-size: 1.6rem;
+}
+
+.search-input input {
+    padding: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.select-wrapper select {
+    padding: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/pkg/app-launcher/components/ClusterView.vue b/pkg/app-launcher/components/ClusterView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 1a60548..722b9ac 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -4,14 +4,15 @@ import Loading from '@shell/components/Loading';
 import SortableTable from '@shell/components/SortableTable';
 import ButtonDropDown from '@shell/components/ButtonDropdown';
 import { isMaybeSecure } from '@shell/utils/url';
-import { ingressFullPath } from '@shell/models/networking.k8s.io.ingress';
 
 import AppLauncherCard from '../components/AppLauncherCard.vue';
+import ClusterActions from '../components/ClusterActions.vue';
 
 export default {
   components: {
     Loading,
     AppLauncherCard,
+    ClusterActions,
     SortableTable,
     ButtonDropDown
   },
@@ -351,7 +352,17 @@ export default {
 <template>
   <Loading v-if="loading" :label="$store.getters['i18n/t']('appLauncher.loading')" />
   <div v-else class="main-container">
-    <div class="cluster-actions">
+    <ClusterActions
+      :search-query="searchQuery"
+      :is-grid-view="selectedView === 'grid'"
+      :selected-cluster="selectedCluster"
+      :cluster-options="clusterOptions"
+      @update:search-query="searchQuery = $event"
+      @toggle-sort="toggleSortOrder"
+      @update:selected-cluster="selectedCluster = $event"
+      @set-view="selectedView = $event"
+    />
+    <!-- <div class="cluster-actions">
       <div class="search-input">
         <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" />
       </div>
@@ -371,7 +382,7 @@ export default {
       <button class="icon-button" @click="selectedView = 'list'">
         <i class="icon icon-list-flat" />
       </button>
-    </div>
+    </div> -->
     <div v-if="favoritedApps.length > 0">
       <div class="cluster-header">
         <h2>{{ t('appLauncher.globalApps') }}</h2>

From 0ac30e85713a630634cc74e02c37a30d65af699a Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 11:12:31 -0400
Subject: [PATCH 5/9] feat: for APPLAUNCHER-37 ClusterActions component working

---
 .../components/ClusterActions.vue             | 74 ++++++++++++-------
 .../{ClusterView.vue => ClusterGridView.vue}  |  0
 .../components/ClusterListView.vue            |  0
 pkg/app-launcher/pages/index.vue              | 73 +++---------------
 4 files changed, 56 insertions(+), 91 deletions(-)
 rename pkg/app-launcher/components/{ClusterView.vue => ClusterGridView.vue} (100%)
 create mode 100644 pkg/app-launcher/components/ClusterListView.vue

diff --git a/pkg/app-launcher/components/ClusterActions.vue b/pkg/app-launcher/components/ClusterActions.vue
index 52c179b..7cb7b47 100644
--- a/pkg/app-launcher/components/ClusterActions.vue
+++ b/pkg/app-launcher/components/ClusterActions.vue
@@ -25,25 +25,25 @@ export default {
 
 <template>
     <div class="cluster-actions">
-    <div class="search-input">
-        <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', searchQuery)" />
-    </div>
-    <button class="icon-button" @click="$emit('toggle-sort')" v-if="isGridView">
-        <i class="icon icon-sort" />
-    </button>
-    <div class="select-wrapper">
-        <select v-model="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', selectedCluster)">
-        <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-        </option>
-        </select>
-    </div>
-    <button class="icon-button" @click="$emit('set-view', 'grid')">
-        <i class="icon icon-apps" />
-    </button>
-    <button class="icon-button" @click="$emit('set-view', 'list')">
-        <i class="icon icon-list-flat" />
-    </button>
+        <div class="search-input">
+            <input :value="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', $event.target.value)" />
+        </div>
+        <button class="icon-button" @click="$emit('toggle-sort')" v-if="isGridView">
+            <i class="icon icon-sort" />
+        </button>
+        <div class="select-wrapper">
+            <select :value="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', $event.target.value)">
+                <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                </option>
+            </select>
+        </div>
+        <button class="icon-button" @click="$emit('set-view', 'grid')">
+            <i class="icon icon-apps" />
+        </button>
+        <button class="icon-button" @click="$emit('set-view', 'list')">
+            <i class="icon icon-list-flat" />
+        </button>
     </div>
 </template>
 
@@ -53,23 +53,41 @@ export default {
     display: flex;
     align-items: center;
     gap: 1rem;
-    background-color: #f4f4f5;
-    padding: 1rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    right: 6.6rem;
+    top: 4.2rem;
+    z-index: 2;
+    padding-bottom: 0.425rem;
+    padding-right: 4.4rem;
+    background: rgb(27, 28, 33);
+    border-bottom: var(--header-border-size) solid var(--header-border);
 }
 
 .icon-button {
     background: none;
     border: none;
     cursor: pointer;
-    color: #333;
-    font-size: 1.6rem;
+    padding: 0;
+    color: var(--primary);
+    font-size: 1.8rem;
 }
 
-.search-input input {
-    padding: 0.8rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+.icon-button:hover {
+    color: var(--primary-hover);
+}
+
+.search-input {
+    text-align: right;
+    justify-content: flex-end;
+    display: flex;
+
+    input {
+        width: 190px;
+        padding: 11px;
+        font-size: 1rem;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+    }
 }
 
 .select-wrapper select {
diff --git a/pkg/app-launcher/components/ClusterView.vue b/pkg/app-launcher/components/ClusterGridView.vue
similarity index 100%
rename from pkg/app-launcher/components/ClusterView.vue
rename to pkg/app-launcher/components/ClusterGridView.vue
diff --git a/pkg/app-launcher/components/ClusterListView.vue b/pkg/app-launcher/components/ClusterListView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 722b9ac..87a323a 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -234,6 +234,15 @@ export default {
           favoritedService.id === app.id
       );
     },
+    updateSearchQuery(value) {
+      this.searchQuery = value;
+    },
+    updateSelectedCluster(value) {
+      this.selectedCluster = value;
+    },
+    updateSelectedView(value) {
+      this.selectedView = value;
+    },
   },
   computed: {
     selectedClusterData() {
@@ -357,32 +366,11 @@ export default {
       :is-grid-view="selectedView === 'grid'"
       :selected-cluster="selectedCluster"
       :cluster-options="clusterOptions"
-      @update:search-query="searchQuery = $event"
+      @update:search-query="updateSearchQuery"
       @toggle-sort="toggleSortOrder"
       @update:selected-cluster="selectedCluster = $event"
       @set-view="selectedView = $event"
     />
-    <!-- <div class="cluster-actions">
-      <div class="search-input">
-        <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" />
-      </div>
-      <button class="icon-button" @click="toggleSortOrder" v-if="selectedView === 'grid'">
-        <i class="icon icon-sort" />
-      </button>
-      <div class="select-wrapper">
-        <select v-model="selectedCluster" class="cluster-select">
-          <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </div>
-      <button class="icon-button" @click="selectedView = 'grid'">
-        <i class="icon icon-apps" />
-      </button>
-      <button class="icon-button" @click="selectedView = 'list'">
-        <i class="icon icon-list-flat" />
-      </button>
-    </div> -->
     <div v-if="favoritedApps.length > 0">
       <div class="cluster-header">
         <h2>{{ t('appLauncher.globalApps') }}</h2>
@@ -494,48 +482,7 @@ export default {
   z-index: 1;
 }
 
-.cluster-actions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  position: fixed;
-  right: 6rem;
-  top: 4.4rem;
-  z-index: 2;
-  padding-bottom: 0.425rem;
-  padding-right: 4.4rem;
-  background: rgb(27, 28, 33);
-  border-bottom: var(--header-border-size) solid var(--header-border);
-}
-
-.icon-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--primary);
-  font-size: 1.8rem;
-}
-
 .favorite-icon {
   margin-right: 1rem;
 }
-
-.icon-button:hover {
-  color: var(--primary-hover);
-}
-
-.search-input {
-  text-align: right;
-  justify-content: flex-end;
-  display: flex;
-
-  input {
-    width: 190px;
-    padding: 11px;
-    font-size: 1rem;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-  }
-}
 </style>

From 8b03c8b4893f31bfa738f4d4449281bd2e2fae1a Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 11:53:19 -0400
Subject: [PATCH 6/9] feat: for APPLAUNCHER-37 ClusterListView GTG

---
 .../components/ClusterGridView.vue            |  68 +++++++++
 .../components/ClusterListView.vue            | 114 +++++++++++++++
 pkg/app-launcher/pages/index.vue              | 133 ++++++------------
 3 files changed, 228 insertions(+), 87 deletions(-)

diff --git a/pkg/app-launcher/components/ClusterGridView.vue b/pkg/app-launcher/components/ClusterGridView.vue
index e69de29..f9c4863 100644
--- a/pkg/app-launcher/components/ClusterGridView.vue
+++ b/pkg/app-launcher/components/ClusterGridView.vue
@@ -0,0 +1,68 @@
+<script>
+import AppLauncherCard from './AppLauncherCard.vue';
+
+export default {
+    name: 'ClusterGridView',
+    components: {
+        AppLauncherCard,
+    },
+    props: {
+        displayedClusterData: {
+            type: Array,
+            required: true,
+        },
+        favoritedApps: {
+            type: Array,
+            required: true,
+        },
+    },
+    emits: ['toggle-favorite'],
+};
+</script>
+
+<template>
+    <div class="cluster-grid-view">
+        <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
+            <div class="cluster-header">
+                <h1>
+                    {{ clusterData.name }}
+                </h1>
+            </div>
+            <div class="services-by-cluster-grid">
+            <AppLauncherCard
+                v-for="app in clusterData.filteredApps"
+                :key="`${app.clusterId}-${app.id}-${app.kind}`"
+                :app="app"
+                :isInGlobalView="false"
+                :favorited-apps="favoritedApps"
+                @toggle-favorite="$emit('toggle-favorite', $event)"
+            />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.services-by-cluster-grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.cluster-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1rem 0;
+    background: var(--header-bg);
+    border-bottom: var(--header-border-size) solid var(--header-border);
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.favorite-icon {
+    margin-right: 1rem;
+}
+</style>
diff --git a/pkg/app-launcher/components/ClusterListView.vue b/pkg/app-launcher/components/ClusterListView.vue
index e69de29..4d6a2b0 100644
--- a/pkg/app-launcher/components/ClusterListView.vue
+++ b/pkg/app-launcher/components/ClusterListView.vue
@@ -0,0 +1,114 @@
+<script>
+import SortableTable from '@shell/components/SortableTable';
+import ButtonDropDown from '@shell/components/ButtonDropdown';
+import { isMaybeSecure } from '@shell/utils/url';
+
+export default {
+    name: 'ClusterListView',
+    components: {
+        SortableTable,
+        ButtonDropDown,
+    },
+    props: {
+        clusterData: {
+            type: Object,
+            required: true,
+        },
+        favoritedApps: {
+            type: Array,
+            required: true,
+        },
+        tableHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    methods: {
+        isFavorited(row, favoritedApps) {
+            return favoritedApps.some(
+                (favoritedService) =>
+                    favoritedService.id === row.id &&
+                    favoritedService.kind === row.kind
+            );
+        },
+        getEndpoints(row) {
+            return (
+                row?.spec.ports?.map((port) => {
+                    const endpoint = `${isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
+                        }:${row.metadata.name}:${port.port}`;
+
+                    return {
+                        label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
+                        value: `/k8s/clusters/${row.clusterId}/api/v1/namespaces/${row.metadata.namespace}/services/${endpoint}/proxy`,
+                    };
+                }) ?? []
+            );
+        },
+        openLink(option) {
+            window.open(option.value, '_blank');
+        },
+    },
+    emits: ['toggle-favorite'],
+};
+</script>
+
+<template>
+    <div class="cluster-list-view">
+        <div class="cluster-header">
+            <h1>
+                {{ clusterData.name }}
+            </h1>
+        </div>
+        <SortableTable
+            :rows="clusterData.filteredApps"
+            :headers="tableHeaders"
+            :row-key="'uniqueId'"
+            :search="false"
+            :table-actions="false"
+            :row-actions="false"
+            :no-rows-text="$store.getters['i18n/t']('appLauncher.noAppsFound')"
+        >
+            <template #cell:name="{ row }">
+                {{ row.metadata.name }}
+            </template>
+            <template #cell:namespace="{ row }">
+                {{ row.metadata.namespace }}
+            </template>
+            <template #cell:version="{ row }">
+                {{ row.metadata.labels?.['app.kubernetes.io/version'] }}
+            </template>
+            <template #cell:helmChart="{ row }">
+                {{ row.metadata.labels?.['helm.sh/chart'] }}
+            </template>
+            <template #cell:actions="{ row }">
+                <div style="display: flex; justify-content: flex-end;">
+                    <button class="icon-button favorite-icon" @click="$emit('toggle-favorite', row)">
+                        <i :class="['icon', isFavorited(row, favoritedApps) ? 'icon-star' : 'icon-star-open']" />
+                    </button>
+                    <a
+                        v-if="getEndpoints(row)?.length <= 1"
+                        :href="getEndpoints(row)[0]?.value" target="_blank"
+                        rel="noopener noreferrer nofollow" class="btn role-primary">
+                        {{ t('appLauncher.launch') }}
+                    </a>
+                    <ButtonDropDown
+                        v-else
+                        :button-label="t('appLauncher.launch')"
+                        :dropdown-options="getEndpoints(row)"
+                        :title="t('appLauncher.launchAnEndpointFromSelection')" @click-action="openLink"
+                    />
+                </div>
+            </template>
+        </SortableTable>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.cluster-list-view {
+    margin-bottom: 2rem;
+    .favorite-icon {
+        margin-right: 1rem;
+        background: none;
+    }
+}
+</style>
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 87a323a..3c47e4b 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -7,12 +7,16 @@ import { isMaybeSecure } from '@shell/utils/url';
 
 import AppLauncherCard from '../components/AppLauncherCard.vue';
 import ClusterActions from '../components/ClusterActions.vue';
+import ClusterGridView from '../components/ClusterGridView.vue';
+import ClusterListView from '../components/ClusterListView.vue';
 
 export default {
   components: {
     Loading,
     AppLauncherCard,
     ClusterActions,
+    ClusterGridView,
+    ClusterListView,
     SortableTable,
     ButtonDropDown
   },
@@ -28,35 +32,35 @@ export default {
       favoritedApps: [],
       searchQuery: '',
       tableHeaders: [
-        {
-          name: 'name',
-          label: 'Name',
-          value: 'metadata.name',
-          sort: 'metadata.name',
-          sortOrder: 'asc',
-        },
-        {
-          name: 'namespace',
-          label: 'Namespace',
-          value: 'metadata.namespace',
-        },
-        {
-          name: 'version',
-          label: 'Version',
-          value: 'metadata.labels["app.kubernetes.io/version"]',
-        },
-        {
-          name: 'helmChart',
-          label: 'Helm Chart',
-          value: 'metadata.labels["helm.sh/chart"]',
-        },
-        {
-          name: 'actions',
-          label: 'Actions',
-          value: 'actions',
-          align: 'right',
-        },
-      ],
+            {
+                name: 'name',
+                label: 'Name',
+                value: 'metadata.name',
+                sort: 'metadata.name',
+                sortOrder: 'asc',
+            },
+            {
+                name: 'namespace',
+                label: 'Namespace',
+                value: 'metadata.namespace',
+            },
+            {
+                name: 'version',
+                label: 'Version',
+                value: 'metadata.labels["app.kubernetes.io/version"]',
+            },
+            {
+                name: 'helmChart',
+                label: 'Helm Chart',
+                value: 'metadata.labels["helm.sh/chart"]',
+            },
+            {
+                name: 'actions',
+                label: 'Actions',
+                value: 'actions',
+                align: 'right',
+            },
+        ],
     };
   },
   async mounted() {
@@ -231,7 +235,8 @@ export default {
     isFavorited(app, favoritedApps) {
       return favoritedApps.some(
         (favoritedService) =>
-          favoritedService.id === app.id
+          favoritedService.id === app.id &&
+          favoritedService.kind === app.kind
       );
     },
     updateSearchQuery(value) {
@@ -387,66 +392,20 @@ export default {
     </div>
     <div v-if="selectedCluster">
       <div v-if="selectedView === 'grid'">
-        <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
-          <div class="cluster-header">
-            <h1>
-              {{ clusterData.name }}
-            </h1>
-          </div>
-          <div class="services-by-cluster-grid">
-            <AppLauncherCard
-              v-for="app in clusterData.filteredApps"
-              :key="`${app.clusterId}-${app.id}-${app.kind}`"
-              :app="app"
-              :isInGlobalView="false"
-              :favorited-apps="favoritedApps"
-              @toggle-favorite="toggleFavorite"
-            />
-          </div>
-        </div>
+        <ClusterGridView
+          :displayed-cluster-data="displayedClusterData"
+          :favorited-apps="favoritedApps"
+          @toggle-favorite="toggleFavorite"
+        />
       </div>
       <div v-else-if="selectedView === 'list'">
         <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
-          <div class="cluster-header">
-            <h1>
-              {{ clusterData.name }}
-            </h1>
-          </div>
-          <SortableTable
-            :rows="clusterData.filteredApps"
-            :headers="tableHeaders"
-            :row-key="'uniqueId'"
-            :search="false"
-            :table-actions="false"
-            :row-actions="false"
-            :no-rows-text="$store.getters['i18n/t']('appLauncher.noAppsFound')"
-          >
-            <template #cell:name="{row}">
-              {{ row.metadata.name }}
-            </template>
-            <template #cell:namespace="{row}">
-              {{ row.metadata.namespace }}
-            </template>
-            <template #cell:version="{row}">
-              {{ row.metadata.labels?.['app.kubernetes.io/version'] }}
-            </template>
-            <template #cell:helmChart="{row}">
-              {{ row.metadata.labels?.['helm.sh/chart'] }}
-            </template>
-            <template #cell:actions="{row}">
-              <div style="display: flex; justify-content: flex-end;">
-                <button class="icon-button favorite-icon" @click="toggleFavorite(row)">
-                  <i :class="['icon', isFavorited(row, favoritedApps) ? 'icon-star' : 'icon-star-open']" />
-                </button>
-                <a v-if="getEndpoints(row)?.length <= 1" :href="getEndpoints(row)[0]?.value" target="_blank"
-                  rel="noopener noreferrer nofollow" class="btn role-primary">
-                  {{ t('appLauncher.launch') }}
-                </a>
-                <ButtonDropDown v-else :button-label="t('appLauncher.launch')" :dropdown-options="getEndpoints(row)"
-                  :title="t('appLauncher.launchAnEndpointFromSelection')" @click-action="(o) => openLink(o.value)" />
-              </div>
-            </template>
-          </SortableTable>
+          <ClusterListView
+            :cluster-data="clusterData"
+            :favorited-apps="favoritedApps"
+            :table-headers="tableHeaders"
+            @toggle-favorite="toggleFavorite"
+          />
         </div>
       </div>
     </div>

From 2b5313b4dce1e928833ce4651e635f63a1f360dc Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 12:00:56 -0400
Subject: [PATCH 7/9] feat: for APPLAUNCHER-37 ClusterGridView GTG

---
 .../components/ClusterGridView.vue            | 22 ++++++++-----------
 pkg/app-launcher/pages/index.vue              | 12 +++++-----
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/pkg/app-launcher/components/ClusterGridView.vue b/pkg/app-launcher/components/ClusterGridView.vue
index f9c4863..d347d86 100644
--- a/pkg/app-launcher/components/ClusterGridView.vue
+++ b/pkg/app-launcher/components/ClusterGridView.vue
@@ -7,8 +7,8 @@ export default {
         AppLauncherCard,
     },
     props: {
-        displayedClusterData: {
-            type: Array,
+        clusterData: {
+            type: Object,
             required: true,
         },
         favoritedApps: {
@@ -22,22 +22,18 @@ export default {
 
 <template>
     <div class="cluster-grid-view">
-        <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
-            <div class="cluster-header">
-                <h1>
-                    {{ clusterData.name }}
-                </h1>
-            </div>
-            <div class="services-by-cluster-grid">
+        <div class="cluster-header">
+            <h1>
+                {{ clusterData.name }}
+            </h1>
+        </div>
+        <div class="services-by-cluster-grid">
             <AppLauncherCard
                 v-for="app in clusterData.filteredApps"
                 :key="`${app.clusterId}-${app.id}-${app.kind}`"
-                :app="app"
-                :isInGlobalView="false"
-                :favorited-apps="favoritedApps"
+                :app="app" :isInGlobalView="false" :favorited-apps="favoritedApps"
                 @toggle-favorite="$emit('toggle-favorite', $event)"
             />
-            </div>
         </div>
     </div>
 </template>
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 3c47e4b..46e2d65 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -392,11 +392,13 @@ export default {
     </div>
     <div v-if="selectedCluster">
       <div v-if="selectedView === 'grid'">
-        <ClusterGridView
-          :displayed-cluster-data="displayedClusterData"
-          :favorited-apps="favoritedApps"
-          @toggle-favorite="toggleFavorite"
-        />
+        <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
+          <ClusterGridView
+            :cluster-data="clusterData"
+            :favorited-apps="favoritedApps"
+            @toggle-favorite="toggleFavorite"
+          />
+        </div>
       </div>
       <div v-else-if="selectedView === 'list'">
         <div v-for="clusterData in displayedClusterData" :key="clusterData.id">

From 7b0ac0ce75d7139151a024ff17092b926ed38952 Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 12:09:10 -0400
Subject: [PATCH 8/9] feat: for APPLAUNCHER-37 cleaned up index

---
 pkg/app-launcher/pages/index.vue | 192 ++++++++-----------------------
 1 file changed, 48 insertions(+), 144 deletions(-)

diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 46e2d65..1118b3c 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -1,9 +1,6 @@
 <script>
 import { MANAGEMENT } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
-import SortableTable from '@shell/components/SortableTable';
-import ButtonDropDown from '@shell/components/ButtonDropdown';
-import { isMaybeSecure } from '@shell/utils/url';
 
 import AppLauncherCard from '../components/AppLauncherCard.vue';
 import ClusterActions from '../components/ClusterActions.vue';
@@ -17,14 +14,11 @@ export default {
     ClusterActions,
     ClusterGridView,
     ClusterListView,
-    SortableTable,
-    ButtonDropDown
   },
   data() {
     return {
       servicesByCluster: [],
       ingressesByCluster: [],
-      clusterLoading: {},
       loading: true,
       selectedCluster: null,
       clusterOptions: [],
@@ -32,35 +26,35 @@ export default {
       favoritedApps: [],
       searchQuery: '',
       tableHeaders: [
-            {
-                name: 'name',
-                label: 'Name',
-                value: 'metadata.name',
-                sort: 'metadata.name',
-                sortOrder: 'asc',
-            },
-            {
-                name: 'namespace',
-                label: 'Namespace',
-                value: 'metadata.namespace',
-            },
-            {
-                name: 'version',
-                label: 'Version',
-                value: 'metadata.labels["app.kubernetes.io/version"]',
-            },
-            {
-                name: 'helmChart',
-                label: 'Helm Chart',
-                value: 'metadata.labels["helm.sh/chart"]',
-            },
-            {
-                name: 'actions',
-                label: 'Actions',
-                value: 'actions',
-                align: 'right',
-            },
-        ],
+        {
+          name: 'name',
+          label: 'Name',
+          value: 'metadata.name',
+          sort: 'metadata.name',
+          sortOrder: 'asc',
+        },
+        {
+          name: 'namespace',
+          label: 'Namespace',
+          value: 'metadata.namespace',
+        },
+        {
+          name: 'version',
+          label: 'Version',
+          value: 'metadata.labels["app.kubernetes.io/version"]',
+        },
+        {
+          name: 'helmChart',
+          label: 'Helm Chart',
+          value: 'metadata.labels["helm.sh/chart"]',
+        },
+        {
+          name: 'actions',
+          label: 'Actions',
+          value: 'actions',
+          align: 'right',
+        },
+      ],
     };
   },
   async mounted() {
@@ -106,7 +100,7 @@ export default {
       console.error('Error fetching clusters', error);
     } finally {
       this.loading = false;
-    };
+    }
   },
   methods: {
     async getClusters() {
@@ -114,10 +108,6 @@ export default {
         type: MANAGEMENT.CLUSTER,
       });
     },
-    getClusterName(clusterId) {
-      const cluster = this.servicesByCluster.find(c => c.id === clusterId);
-      return cluster ? cluster.name : '';
-    },
     getCluster(clusterId) {
       return this.servicesByCluster.find(c => c.id === clusterId) || null;
     },
@@ -196,23 +186,6 @@ export default {
     toggleSortOrder() {
       this.tableHeaders[0].sortOrder = this.tableHeaders[0].sortOrder === 'asc' ? 'desc' : 'asc';
     },
-    getEndpoints(app) {
-      return (
-        app?.spec.ports?.map((port) => {
-          const endpoint = `${
-            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${app.metadata.name}:${port.port}`;
-
-          return {
-            label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.selectedCluster}/api/v1/namespaces/${app.metadata.namespace}/services/${endpoint}/proxy`,
-          };
-        }) ?? []
-      );
-    },
-    openLink(link) {
-      window.open(link, '_blank');
-    },
     toggleFavorite(item) {
       const index = this.favoritedApps.findIndex(
         (favoritedApp) =>
@@ -232,68 +205,13 @@ export default {
       const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
       localStorage.setItem('favoritedApps', favsToStore);
     },
-    isFavorited(app, favoritedApps) {
-      return favoritedApps.some(
-        (favoritedService) =>
-          favoritedService.id === app.id &&
-          favoritedService.kind === app.kind
-      );
-    },
     updateSearchQuery(value) {
       this.searchQuery = value;
     },
-    updateSelectedCluster(value) {
-      this.selectedCluster = value;
-    },
-    updateSelectedView(value) {
-      this.selectedView = value;
-    },
   },
   computed: {
-    selectedClusterData() {
-      const cluster = this.getCluster(this.selectedCluster);
-      if (cluster) {
-        let ingresses = this.ingressesByCluster.find(
-          (ingressCluster) => ingressCluster.id === cluster.id
-        )?.ingresses || [];
-        ingresses = ingresses.map((ingress) => ({
-          ...ingress,
-          clusterId: cluster.id,
-          clusterName: cluster.name,
-        }));
-
-        const services = cluster.services.map((service) => {
-          const relatedIngress = ingresses.find((ingress) =>
-            ingress.spec.rules.some((rule) =>
-              rule.http.paths.some((path) =>
-                path.backend.service?.name === service.metadata.name
-              )
-            )
-          );
-          return {
-            ...service,
-            clusterId: cluster.id,
-            clusterName: cluster.name,
-            relatedIngress,
-          };
-        });
-        
-        const filteredApps = this.filteredApps(services, ingresses);
-
-        return {
-          ...cluster,
-          services,
-          ingresses,
-          filteredApps,
-        };
-      } else {
-        console.error('Cluster not found:', this.selectedCluster);
-      }
-      return null;
-    },
     displayedClusterData() {
       if (this.selectedCluster === 'ALL_CLUSTERS') {
-        
         const allClustersData = this.servicesByCluster.map(cluster => ({
           ...cluster,
           ingresses: this.ingressesByCluster.find(ingressCluster => ingressCluster.id === cluster.id)?.ingresses || [],
@@ -301,40 +219,30 @@ export default {
         }));
         return allClustersData;
       } else {
-        return [this.selectedClusterData]; // This just remakes use of selectedClusterData for single cluster view
-      }
-    },
-    sortedApps() {
-      if (this.selectedClusterData) {
-        const services = this.selectedClusterData.services.map((service) => ({
-          ...service,
-          clusterId: this.selectedClusterData.id,
-          clusterName: this.selectedClusterData.name,
-          uniqueId: `service-${service.id}`,
-        }));
+        const cluster = this.getCluster(this.selectedCluster);
+        if (cluster) {
+          const ingresses = this.ingressesByCluster.find(
+            (ingressCluster) => ingressCluster.id === cluster.id
+          )?.ingresses || [];
 
-        const ingresses = this.selectedClusterData.ingresses.map((ingress) => ({
-          ...ingress,
-          clusterId: this.selectedClusterData.id,
-          clusterName: this.selectedClusterData.name,
-          uniqueId: `ingress-${ingress.id}`,
-        }));
+          const services = cluster.services;
+          
+          const filteredApps = this.filteredApps(services, ingresses);
 
-        return [...services, ...ingresses].sort((a, b) => {
-          const nameA = a.metadata.name.toLowerCase();
-          const nameB = b.metadata.name.toLowerCase();
-          if (this.tableHeaders[0].sortOrder === 'asc') {
-            return nameA.localeCompare(nameB);
-          } else {
-            return nameB.localeCompare(nameA);
-          }
-        });
+          return [{
+            ...cluster,
+            ingresses,
+            filteredApps,
+          }];
+        } else {
+          console.error('Cluster not found:', this.selectedCluster);
+        }
       }
       return [];
     },
     filteredApps() {
       return (services, ingresses) => {
-        const sortedApps = [...(services || []), ...(ingresses || {})].sort((a, b) => {
+        const sortedApps = [...(services || []), ...(ingresses || [])].sort((a, b) => {
           const nameA = a.metadata.name.toLowerCase();
           const nameB = b.metadata.name.toLowerCase();
           if (this.tableHeaders[0].sortOrder === 'asc') {
@@ -442,8 +350,4 @@ export default {
   top: 0;
   z-index: 1;
 }
-
-.favorite-icon {
-  margin-right: 1rem;
-}
-</style>
+</style>
\ No newline at end of file

From 1b5dc20438f30ff29b245956e840b148d47e68a1 Mon Sep 17 00:00:00 2001
From: John Gardner <john@ardea.io>
Date: Mon, 15 Apr 2024 12:51:35 -0400
Subject: [PATCH 9/9] feat: for APPLAUNCHER-37 small style fix

---
 pkg/app-launcher/components/ClusterActions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/app-launcher/components/ClusterActions.vue b/pkg/app-launcher/components/ClusterActions.vue
index 0637330..91789a6 100644
--- a/pkg/app-launcher/components/ClusterActions.vue
+++ b/pkg/app-launcher/components/ClusterActions.vue
@@ -54,8 +54,8 @@ export default {
     align-items: center;
     gap: 1rem;
     position: fixed;
-    right: 6.6rem;
-    top: 4.2rem;
+    right: 5.8%;
+    top: 4.3rem;
     z-index: 2;
     padding-bottom: 0.425rem;
     padding-right: 4.4rem;