fix service typing and 'version' colour

epinio · Jul 24, 2023 · 2ec8dad · 2ec8dad
1 parent a895d6f
commit 2ec8dad
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue
@@ -6,7 +6,9 @@ import CruResource from '@shell/components/CruResource.vue';
 import Loading from '@shell/components/Loading.vue';
 import { epinioExceptionToErrorsArray } from '../utils/errors';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
-import { EpinioCatalogServiceResource, EPINIO_TYPES, EpinioNamespace, EpinioCompRecord } from '../types';
+import {
+  EpinioCatalogServiceResource, EPINIO_TYPES, EpinioNamespace, EpinioCompRecord, EpinioCatalogService
+} from '../types';
 import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name';
 import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
 import EpinioBindAppsMixin from './bind-apps-mixin.js';
@@ -94,7 +96,7 @@ export default Vue.extend<Data, EpinioCompRecord, EpinioCompRecord, EpinioCompRe
     },
 
     catalogServiceOpts() {
-      return this.$store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE).map((cs: EpinioCatalogServiceResource) => ({
+      return this.$store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE).map((cs: EpinioCatalogService) => ({
         label: `${ cs.name } (${ cs.short_description })`,
         value: cs.name
       }));

diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -8,6 +8,13 @@ import Namespace from '@shell/models/namespace';
 import EpinioServiceModel from '../../../models/services';
 import isEqual from 'lodash/isEqual';
 import { sortBy } from 'lodash';
+import { Location } from 'vue-router';
+
+type ComponentService = {
+  name: string,
+  link: Location,
+  isEnabled: boolean
+}
 
 export default Vue.extend<any, any, any, any>({
   components: { DashboardCard, ConsumptionGauge },
@@ -113,21 +120,20 @@ export default Vue.extend<any, any, any, any>({
       const fetchServices: EpinioCatalogService[] = this.$store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE);
 
       // Try to find the desired services
-      const findDesiredServices = fetchServices?.filter((service) => service?.shortId === 'mysql-dev' || service?.shortId === 'redis-dev');
+      const findDesiredServices = fetchServices?.filter((service) => service.id === 'mysql-dev' || service.id === 'redis-dev');
 
       //  if not found, return the first two services from the catalog
-      const services: EpinioCatalogService[] | any =
-      findDesiredServices.length ? findDesiredServices : fetchServices.slice(0, 2);
+      const services: EpinioCatalogService[] = findDesiredServices.length ? findDesiredServices : fetchServices.slice(0, 2);
 
-      const s = services.reduce((acc: any[], service: { shortId: string; }) => {
+      const s = services.reduce((acc: ComponentService[], service: EpinioCatalogService) => {
         acc.push({
-          link:      createEpinioRoute('c-cluster-resource-create', { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service?.shortId }, { query: { service: service?.shortId } }),
-          shortId:   service?.shortId,
+          link:      createEpinioRoute('c-cluster-resource-create', { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service.id }, { query: { service: service.id } }),
+          name:      service.name,
           isEnabled: true
         });
 
         return acc;
-      }, []);
+      }, [] as ComponentService[]);
 
       return {
         servicesInstances: fetchServicesInstances.length,
@@ -239,15 +245,15 @@ export default Vue.extend<any, any, any, any>({
                     :to="service.link"
                     class="link"
                   >
-                    {{ service.shortId }}
+                    {{ service.name }}
                     <span>+</span>
                   </n-link>
 
                   <span
                     v-if="!service.isEnabled"
                     class="link disabled"
                   >
-                    {{ service.shortId }}
+                    {{ service.name }}
                     <span>+</span>
                   </span>
                 </li>
@@ -288,7 +294,7 @@ export default Vue.extend<any, any, any, any>({
 
       span {
         background: var(--primary);
-        color: var(--default);
+        color: var(--body-text);
         border-radius: var(--border-radius);
         padding: 4px 8px;
       }

diff --git a/dashboard/pkg/epinio/types.ts b/dashboard/pkg/epinio/types.ts
@@ -182,7 +182,7 @@ export interface EpinioHelmRepoResource {
 }
 
 export interface EpinioCatalogServiceResource {
-  name: string,
+  id: string,
   description: string,
   short_description: string, // eslint-disable-line camelcase
   chart: string,

diff --git a/dashboard/pkg/epinio/utils/custom-routing.ts b/dashboard/pkg/epinio/utils/custom-routing.ts
@@ -1,15 +1,22 @@
 import { EPINIO_PRODUCT_NAME } from '../types';
 
-export const rootEpinioRoute = () => ({
+import { Location } from 'vue-router';
+type Dictionary<T> = { [key: string]: T }
+
+export const rootEpinioRoute = (): Location => ({
   name:   EPINIO_PRODUCT_NAME,
   params: { product: EPINIO_PRODUCT_NAME }
 });
 
-export const createEpinioRoute = (name: string, params: Object, query?: Object) => ({
-  name:   `${ rootEpinioRoute().name }-${ name }`,
-  params: {
-    ...rootEpinioRoute().params,
-    ...params
-  },
-  ...query
-});
+export const createEpinioRoute = (name: string, params: Dictionary<string>, query?: Object): Location => {
+  const rootParams = rootEpinioRoute().params || {};
+
+  return {
+    name:   `${ rootEpinioRoute().name }-${ name }`,
+    params: {
+      ...rootParams,
+      ...params
+    },
+    ...query
+  };
+};