feat: can favorite cards and list items

krumIO · Mar 7, 2024 · 35a2ae4 · 35a2ae4
1 parent 1c18b8a
commit 35a2ae4
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 35 deletions.
diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -8,45 +8,15 @@ export default {
     Card,
     ButtonDropDown,
   },
-  computed: {
-    endpoints() {
-      return (
-        this.service?.spec.ports?.map((port) => {
-          const endpoint = `${
-            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${this.service.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`,
-          };
-        }) ?? []
-      );
-    },
-    computedServiceName() {
-      return (
-        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
-        this.service?.metadata.name
-      );
-    },
-    helmChart() {
-      return this.service?.metadata.labels?.['helm.sh/chart'];
-    },
-    kubernetesVersion() {
-      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
-    },
-    name() {
-      return this.service?.metadata.name;
-    },
-    namespace() {
-      return this.service?.metadata.namespace;
-    },
-  },
   props: {
     clusterId: {
       type: String,
       required: true,
     },
+    favoritedServices: {
+      type: Array,
+      required: true,
+    },
     service: {
       type: Object,
       required: true,
@@ -95,6 +65,50 @@ export default {
     openLink(link) {
       window.open(link);
     },
+    toggleFavorite() {
+      this.$emit('toggle-favorite', this.service);
+    },
+  },
+  computed: {
+    endpoints() {
+      return (
+        this.service?.spec.ports?.map((port) => {
+          const endpoint = `${
+            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
+          }:${this.service.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`,
+          };
+        }) ?? []
+      );
+    },
+    computedServiceName() {
+      return (
+        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
+        this.service?.metadata.name
+      );
+    },
+    helmChart() {
+      return this.service?.metadata.labels?.['helm.sh/chart'];
+    },
+    kubernetesVersion() {
+      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
+    },
+    name() {
+      return this.service?.metadata.name;
+    },
+    namespace() {
+      return this.service?.metadata.namespace;
+    },
+    isFavorited() {
+      return this.favoritedServices.some(
+        (favoritedService) =>
+          favoritedService.clusterId === this.clusterId &&
+          favoritedService.service.id === this.service.id
+      );
+    },
   },
   name: 'AppLauncherCard',
   layout: 'plain',
@@ -129,6 +143,9 @@ export default {
       <p>{{ namespace }}/{{ name }}</p>
     </template>
     <template #actions>
+      <button class="icon-button" @click="toggleFavorite">
+        <i :class="['icon', isFavorited ? 'icon-star' : 'icon-star-open']" />
+      </button>
       <a
         v-if="(endpoints?.length ?? 0) <= 1"
         :disabled="!endpoints?.length"
@@ -156,3 +173,17 @@ export default {
     </template>
   </Card>
 </template>
+
+<style lang="scss" scoped>
+@import "@shell/assets/styles/fonts/_icons.scss";
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--primary);
+  font-size: 1.8rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/pkg/app-launcher/l10n/en-us.yaml b/pkg/app-launcher/l10n/en-us.yaml
@@ -10,3 +10,4 @@ appLauncher:
   loading: Loading...
   loadingServices: Loading services...
   selectCluster: Select a cluster
+  globalApps: Global Apps
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
@@ -25,6 +25,7 @@ export default {
       selectedCluster: null,
       clusterOptions: [],
       selectedView: 'grid',
+      favoritedServices: [],
       tableHeaders: [
         {
           name: 'name',
@@ -146,6 +147,31 @@ 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
+      );
+      if (index !== -1) {
+        this.favoritedServices.splice(index, 1);
+      } else {
+        this.favoritedServices.push({
+          clusterId: this.selectedCluster,
+          service,
+        });
+      }
+    },
+    isFavorited(service, favoritedServices) {
+      return favoritedServices.some(
+        (favoritedService) =>
+          favoritedService.clusterId === this.selectedCluster &&
+          favoritedService.service.id === service.id
+      );
+    },
   },
   computed: {
     selectedClusterData() {
@@ -173,6 +199,19 @@ export default {
 <template>
   <Loading v-if="loading" :label="$store.getters['i18n/t']('appLauncher.loading')" />
   <div v-else>
+    <div v-if="favoritedServices.length > 0">
+      <h2>{{ t('appLauncher.globalApps') }}</h2>
+      <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"
+        />
+      </div>
+    </div>
     <div class="cluster-header">
       <h1>{{ selectedCluster ? getClusterName(selectedCluster) : $store.getters['i18n/t']('appLauncher.selectCluster') }}</h1>
       <div class="cluster-actions">
@@ -205,6 +244,8 @@ export default {
           :key="service.id"
           :cluster-id="selectedCluster"
           :service="service"
+          :favorited-services="favoritedServices"
+          @toggle-favorite="toggleFavorite"
         />
       </div>
       <div v-else-if="selectedView === 'list'">
@@ -231,6 +272,9 @@ export default {
           </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, favoritedServices) ? 'icon-star' : 'icon-star-open']" />
+              </button>
               <a
                 v-if="getEndpoints(row)?.length <= 1"
                 :href="getEndpoints(row)[0]?.value"
@@ -277,6 +321,7 @@ export default {
   height: var(--header-height);
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
 .cluster-actions {
@@ -291,7 +336,11 @@ export default {
   cursor: pointer;
   padding: 0;
   color: var(--primary);
-  font-size: 1.25rem;
+  font-size: 1.8rem;
+}
+
+.favorite-icon {
+  margin-right: 1rem;
 }
 
 .icon-button:hover {