From c4dececfa23ff8c1be067738b0ddbbc2cb3f2e10 Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Fri, 25 Sep 2020 01:25:59 -0700 Subject: [PATCH] Yaml preview for chart installs --- pages/c/_cluster/apps/install.vue | 148 ++++++++++++------------------ 1 file changed, 58 insertions(+), 90 deletions(-) diff --git a/pages/c/_cluster/apps/install.vue b/pages/c/_cluster/apps/install.vue index b47bb1e560..d15dc61d22 100644 --- a/pages/c/_cluster/apps/install.vue +++ b/pages/c/_cluster/apps/install.vue @@ -23,7 +23,7 @@ import YamlEditor, { EDITOR_MODES } from '@/components/YamlEditor'; import { CATALOG, MANAGEMENT } from '@/config/types'; import { - REPO_TYPE, REPO, CHART, VERSION, NAMESPACE, NAME, DESCRIPTION as DESCRIPTION_QUERY, _CREATE, _EDIT, PREVIEW, _UNFLAG, _FLAGGED + REPO_TYPE, REPO, CHART, VERSION, NAMESPACE, NAME, DESCRIPTION as DESCRIPTION_QUERY, _CREATE, _EDIT, } from '@/config/query-params'; import { CATALOG as CATALOG_ANNOTATIONS, DESCRIPTION as DESCRIPTION_ANNOTATION } from '@/config/labels-annotations'; import { exceptionToErrorsArray, stringify } from '@/utils/error'; @@ -219,6 +219,7 @@ export default { chart: null, chartValues: null, originalYamlValues: null, + previousYamlValues: null, errors: null, existing: null, forceNamespace: null, @@ -242,8 +243,10 @@ export default { resetValues: false, selectedTabName: 'readme', showPreview: false, - showValuesComponent: false, - valuesTabs: false, + showDiff: false, + showValuesComponent: true, + showQuestions: true, + componentHasTabs: false, wait: true, historyMax: 5, @@ -286,18 +289,14 @@ export default { return out; }, - isEntryTab() { - const { tabName } = this; + isValuesTab() { + const tabName = this.selectedTabName; - if (tabName === 'values-form' || tabName === 'values-yaml') { - return true; + if (tabName === 'helm' || tabName === 'readme') { + return false; } - return false; - }, - - tabName() { - return this.selectedTabName; + return true; }, charts() { @@ -324,18 +323,6 @@ export default { return this.chart?.versions.length > 1; }, - showBackButton() { - const { selectedTabName, showValuesComponent, valuesComponent } = this; - - if (isEmpty(valuesComponent)) { - return false; - } else if (selectedTabName === 'values-yaml' && !showValuesComponent) { - return true; - } - - return false; - }, - targetNamespace() { if ( this.forceNamespace ) { return this.forceNamespace; @@ -347,7 +334,7 @@ export default { }, editorMode() { - if ( this.showPreview ) { + if ( this.showDiff ) { return EDITOR_MODES.DIFF_CODE; } @@ -361,7 +348,7 @@ export default { watch: { '$route.query'(neu, old) { - if ( !isEqual(neu, old) && !has(neu, 'preview') ) { + if ( !isEqual(neu, old) ) { this.$fetch(); } }, @@ -392,15 +379,15 @@ export default { const loaded = await this.valuesComponent(); this.showValuesComponent = true; - this.valuesTabs = loaded?.default?.hasTabs || false; + this.componentHasTabs = loaded?.default?.hasTabs || false; } else { this.valuesComponent = null; - this.valuesTabs = false; + this.componentHasTabs = false; this.showValuesComponent = false; } } else { this.valuesComponent = null; - this.valuesTabs = false; + this.componentHasTabs = false; this.showValuesComponent = false; } }, @@ -420,47 +407,41 @@ export default { this.$router.applyQuery({ [VERSION]: version }); }, - showPreviewYaml() { - const { - chartValues, - originalYamlValues, - showValuesComponent, - valuesYaml, - valuesComponent, - } = this; - - if (!!valuesComponent) { - if (!originalYamlValues) { - this.originalYamlValues = valuesYaml; - } - - // seed the yaml with any entered info - this.valuesYaml = jsyaml.safeDump(chartValues); - - if (showValuesComponent) { - this.tabChanged({ tab: { name: 'values-yaml' } }); - this.showValuesComponent = false; - } else { - this.tabChanged({ tab: { name: 'values-form' } }); - this.showValuesComponent = true; - } - } - }, - preview() { - this.showPreview = true; + this.valuesYaml = jsyaml.safeDump(this.chartValues); + this.previousYamlValues = this.valuesYaml; - return this.$router.applyQuery({ [PREVIEW]: _FLAGGED }); + this.showPreview = true; + this.showValuesComponent = false; + this.showQuestions = false; + + this.tabChanged({ tab: { name: 'values-yaml' } }); + + this.$nextTick(() => { + window.location.hash = '#values-yaml'; + if ( this.$refs.yaml ) { + this.$refs.yaml.refresh(); + this.$refs.yaml.focus(); + } + }); }, unpreview() { this.showPreview = false; + this.showValuesComponent = true; + this.showQuestions = true; + }, - return this.$router.applyQuery({ [PREVIEW]: _UNFLAG }); + diff() { + this.showDiff = true; + }, + + undiff() { + this.showDiff = false; }, cancel(reallyCancel) { - if (!reallyCancel && !this.showValuesComponent) { + if (!reallyCancel && this.showPreview) { return this.resetFromBack(); } @@ -472,13 +453,9 @@ export default { }, async resetFromBack() { - this.showValuesComponent = true; - - if (has(this.$route.query, PREVIEW)) { - await this.unpreview(); - } - - this.valuesYaml = this.originalYamlValues; + await this.unpreview(); + await this.undiff(); + this.valuesYaml = this.previousYamlValues; }, done() { @@ -575,7 +552,7 @@ export default { actionInput(isUpgrade) { const fromChart = this.versionInfo?.values || {}; - if ( !this.valuesComponent && !this.hasQuestions ) { + if ( this.showPreview || ( !this.valuesComponent && !this.hasQuestions )) { try { this.chartValues = jsyaml.safeLoad(this.valuesYaml); } catch (err) { @@ -586,7 +563,7 @@ export default { // Only save the values that differ from the chart's standard values.yaml const values = diff(fromChart, this.chartValues); - // Add our special global values + // Add our special blend of 11 herbs and global values this.addGlobalValuesTo(values); const form = JSON.parse(JSON.stringify(this.value)); @@ -675,15 +652,6 @@ export default { window.scrollTop = 0; this.selectedTabName = tab.name; - - if ( tab.name === 'values-yaml' ) { - this.$nextTick(() => { - if ( this.$refs.yaml ) { - this.$refs.yaml.refresh(); - this.$refs.yaml.focus(); - } - }); - } }, } }; @@ -776,6 +744,7 @@ export default { @@ -785,7 +754,7 @@ export default {