diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index e963669..faae808 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/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 ({ + 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/l10n/en-us.yaml b/dashboard/pkg/epinio/l10n/en-us.yaml index f8ca260..62fd273 100644 --- a/dashboard/pkg/epinio/l10n/en-us.yaml +++ b/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 diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue index 80beaab..9ea9b59 100644 --- 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({ components: { DashboardCard, ConsumptionGauge }, @@ -56,7 +63,8 @@ export default Vue.extend({ 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({ 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({ target="_blank" rel="noopener noreferrer nofollow" >{{ t('epinio.intro.issues') }} + + {{ t('epinio.intro.about') }} +
@@ -239,7 +252,7 @@ export default Vue.extend({ :to="service.link" class="link" > - {{ service.shortId }} + {{ service.name }} + @@ -247,7 +260,7 @@ export default Vue.extend({ v-if="!service.isEnabled" class="link disabled" > - {{ service.shortId }} + {{ service.name }} + @@ -288,7 +301,7 @@ export default Vue.extend({ 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 index 092be47..1644ec4 100644 --- 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 index 2f531eb..c3d5875 100644 --- 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 = { [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, query?: Object): Location => { + const rootParams = rootEpinioRoute().params || {}; + + return { + name: `${ rootEpinioRoute().name }-${ name }`, + params: { + ...rootParams, + ...params + }, + ...query + }; +}; diff --git a/docs/developer/README.md b/docs/developer/README.md index c64cb08..e8cbe36 100644 --- a/docs/developer/README.md +++ b/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= 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`