Merge pull request #285 from richard-cox/add-about-link

Add about link

dashboard/pkg/epinio/edit/services.vue

@@ -6,7 +6,7 @@ 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 { 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 +94,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
       }));

dashboard/pkg/epinio/l10n/en-us.yaml

@@ -60,6 +60,7 @@ epinio:
     noNamespaces: Create a Namespace, then create your Applications
     getStarted: Get started
     issues: Issues
+    about: About
     cards:
       namespaces:
         linkText: Create Namespace

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 },
@@ -56,7 +63,8 @@ export default Vue.extend<any, any, any, any>({
       colorStops: {
         0: '--info', 30: '--info', 70: '--info'
       },
-      version: null
+      version:   null,
+      aboutLink: !this.$store.getters['isSingleProduct'] ? createEpinioRoute('c-cluster-about', { cluster: this.$store.getters['clusterId'] }) : null
     };
   },
   created() {
@@ -113,21 +121,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,
@@ -183,6 +190,12 @@ export default Vue.extend<any, any, any, any>({
           target="_blank"
           rel="noopener noreferrer nofollow"
         >{{ t('epinio.intro.issues') }}</a>
+        <n-link
+          v-if="aboutLink"
+          :to="aboutLink"
+        >
+          {{ t('epinio.intro.about') }}
+        </n-link>
       </div>
     </div>
     <div class="get-started">
@@ -239,15 +252,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 +301,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;
       }

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,

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
+  };
+};

docs/developer/README.md

@@ -12,6 +12,12 @@ The Epinio UI is currently served via the [Rancher Dashboard](https://github.com
 > Follow the Epinio docs or [this guide](install-epinio.md) to install an Epinio instance locally
 
 ##### Developer Flow
+Option A - Run the extension 'built-in'
+1. `cd dashboard`
+2. `API=<your rancher url> yarn mem-dev`
+
+Option B - Run the extension in a local Rancher
+1. Build and run the rancher dashboard locally. This should be from the `rancher/dashboard` repo (see README there)
 1. Build and serve the epinio extension
    - `cd dashboard`
    - `yarn build-pkg epinio`