From a58e4a6a70cb84845afa034f23e5b1e20fd6a58c Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Fri, 31 Jul 2020 19:50:01 -0700 Subject: [PATCH] Load custom chart values components --- chart/example.vue | 18 ++++++++++++ config/labels-annotations.js | 6 ++++ edit/chartInstallAction.vue | 39 +++++++++++++++++++++---- nuxt.config.js | 4 ++- pages/c/_cluster/apps/index.vue | 51 +++++++++++++++++++++++++++++---- store/catalog.js | 17 +++++++++++ 6 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 chart/example.vue diff --git a/chart/example.vue b/chart/example.vue new file mode 100644 index 0000000000..a98dc37540 --- /dev/null +++ b/chart/example.vue @@ -0,0 +1,18 @@ + + + diff --git a/config/labels-annotations.js b/config/labels-annotations.js index 94df2b14b4..86a3418008 100644 --- a/config/labels-annotations.js +++ b/config/labels-annotations.js @@ -29,6 +29,12 @@ export const CATALOG = { EXPERIMENTAL: 'catalog.cattle.io/experimental', NAMESPACE: 'catalog.cattle.io/namespace', RELEASE_NAME: 'catalog.cattle.io/release-name', + + REQUIRES: 'catalog.cattle.io/requires-gvr', + PROVIDES: 'catalog.cattle.io/provides-gvr', + AUTO_INSTALL: 'catalog.cattle.io/auto-install-gvr', + + COMPONENT: 'catalog.cattle.io/ui-component', }; export const RKE = { EXTERNAL_IP: 'rke.cattle.io/external-ip' }; diff --git a/edit/chartInstallAction.vue b/edit/chartInstallAction.vue index b5d44fad5e..36cf088843 100644 --- a/edit/chartInstallAction.vue +++ b/edit/chartInstallAction.vue @@ -96,8 +96,23 @@ export default { this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', { repoType, repoName, chartName, version }); - this.mergeValues(this.versionInfo.values); - this.valuesYaml = jsyaml.safeDump(this.value.values); + + const component = this.version?.annotations?.[CATALOG.COMPONENT]; + + if ( component ) { + if ( this.$store.getters['catalog/haveComponent'](component) ) { + this.valuesComponent = this.$store.getters['catalog/importComponent'](component); + } else { + this.valuesComponent = null; + } + } else { + this.valuesComponent = null; + } + + if ( !this.value.values ) { + this.mergeValues(this.versionInfo.values); + this.valuesYaml = jsyaml.safeDump(this.value.values); + } } }, @@ -116,7 +131,8 @@ export default { forceNamespace: null, nameDisabled: false, - errors: null, + errors: null, + valuesComponent: null, }; }, @@ -166,6 +182,12 @@ export default { // If there's nothing on page 1, go to page 2 this.$router.applyQuery({ [STEP]: 2 }); } + + // For easy access debugging... + if ( typeof window !== 'undefined' ) { + window.v = v; + window.c = this; + } }, methods: { @@ -177,7 +199,7 @@ export default { this.value.values = merge({}, neu, this.value.values || {}); }, - valuesChanged(value) { + yamlChanged(value) { try { jsyaml.safeLoad(value); @@ -281,11 +303,16 @@ export default { diff --git a/nuxt.config.js b/nuxt.config.js index eded462b13..b550fff348 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -140,6 +140,7 @@ module.exports = { // } // } // }, + extend(config, { isClient, isDev }) { if ( isDev ) { config.devtool = 'eval-source-map'; @@ -167,7 +168,8 @@ module.exports = { }); } }, - // extractCSS: true, + + // extractCSS: true, cssSourceMap: true, babel: { presets({ isServer }) { diff --git a/pages/c/_cluster/apps/index.vue b/pages/c/_cluster/apps/index.vue index dabc88c178..b17eaa1bc2 100644 --- a/pages/c/_cluster/apps/index.vue +++ b/pages/c/_cluster/apps/index.vue @@ -3,7 +3,9 @@ import AsyncButton from '@/components/AsyncButton'; import Loading from '@/components/Loading'; import Banner from '@/components/Banner'; import { CATALOG } from '@/config/types'; -import { REPO_TYPE, REPO, CHART, VERSION } from '@/config/query-params'; +import { + REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, _FLAGGED, _UNFLAG +} from '@/config/query-params'; import { CATALOG as CATALOG_ANNOTATIONS } from '@/config/labels-annotations'; import { ensureRegex } from '@/utils/string'; import { sortBy } from '@/utils/sort'; @@ -28,13 +30,25 @@ export default { }, data() { + const query = this.$route.query; + + let showRancher = query['rancher'] === _FLAGGED; + let showPartner = query['partner'] === _FLAGGED; + let showOther = query['other'] === _FLAGGED; + + if ( !showRancher && !showPartner && !showOther ) { + showRancher = true; + showPartner = true; + showOther = true; + } + return { - searchQuery: '', + searchQuery: query[SEARCH_QUERY] || '', sortField: 'certifiedSort', showDeprecated: false, - showRancher: true, - showPartner: true, - showOther: true, + showRancher, + showPartner, + showOther, }; }, @@ -73,7 +87,34 @@ export default { }, }, + watch: { + searchQuery(q) { + this.$router.applyQuery({ [SEARCH_QUERY]: q || undefined }); + }, + + showRancher: 'updateShowFlags', + showPartner: 'updateShowFlags', + showOther: 'updateShowFlags', + }, + methods: { + updateShowFlags() { + if ( (!this.showRancher && !this.showPartner && !this.showOther) || + ( this.showRancher && this.showPartner && this.showOther) ) { + this.$router.applyQuery({ + rancher: _UNFLAG, + partner: _UNFLAG, + other: _UNFLAG, + }); + } else { + this.$router.applyQuery({ + rancher: this.showRancher ? _FLAGGED : _UNFLAG, + partner: this.showPartner ? _FLAGGED : _UNFLAG, + other: this.showOther ? _FLAGGED : _UNFLAG, + }); + } + }, + selectChart(chart) { this.$router.push({ name: 'c-cluster-product-resource-create', diff --git a/store/catalog.js b/store/catalog.js index d47fd0ec54..0b828830aa 100644 --- a/store/catalog.js +++ b/store/catalog.js @@ -75,6 +75,23 @@ export const getters = { errors(state) { return state.errors || []; }, + + haveComponent(state, getters) { + return (name) => { + try { + require.resolve(`@/chart/${ name }`); + return true; + } catch (e) { + return false; + } + }; + }, + + importComponent(state, getters) { + return (name) => { + return () => import(`@/chart/${ name }`); + }; + }, }; export const mutations = {