rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Yaml preview for chart installs

This commit is contained in:
Vincent Fiduccia 2020-09-25 01:25:59 -07:00
parent 4e325b7d07
commit c4dececfa2
No known key found for this signature in database
GPG Key ID: 2B29AD6BB2BB2582
1 changed files with 58 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
pages/c/_cluster/apps/install.vue
View File

@ -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 {
<Tabbed
:side-tabs="true"
:class="{'with-name': showNameEditor}"
:default-tab="selectedTabName"
@changed="tabChanged($event)"
>
<Tab v-if="showReadme" name="readme" :label="t('catalog.install.section.readme')" :weight="100">
@ -785,7 +754,7 @@ export default {
<template v-if="valuesComponent && showValuesComponent">
<component
:is="valuesComponent"
v-if="valuesTabs"
v-if="componentHasTabs"
v-model="chartValues"
:chart="chart"
:version="version"
@ -830,7 +799,7 @@ export default {
</tab>
</template>
<Questions
v-else-if="hasQuestions"
v-else-if="hasQuestions && showQuestions"
v-model="chartValues"
:chart="chart"
:version="version"
@ -881,43 +850,42 @@ export default {
done-route="c-cluster-apps"
:mode="mode"
:finish-button-mode="(existing ? 'upgrade' : 'install')"
:is-form="!!showValuesComponent"
:is-form="true"
@cancel-confirmed="cancel"
>
<template #default="{checkCancel}">
<template v-if="!showValuesComponent">
<template v-if="(!!valuesComponent || hasQuestions) && !showValuesComponent && !showQuestions">
<button
v-if="showPreview && isEntryTab"
v-if="showDiff"
type="button"
class="btn role-secondary"
@click="unpreview"
@click="undiff"
>
<t k="resourceYaml.buttons.continue" />
</button>
<button
v-if="isEntryTab && !showPreview"
v-else
:disabled="valuesYaml === originalYamlValues"
type="button"
class="btn role-secondary"
@click="preview"
@click="diff"
>
<t k="resourceYaml.buttons.diff" />
</button>
</template>
<button
v-if="isEntryTab && showValuesComponent"
v-if="(showValuesComponent || hasQuestions) && isValuesTab"
type="button"
class="btn role-secondary"
@click="showPreviewYaml"
@click="preview"
>
{{ t("cruResource.previewYaml") }}
</button>
<div>
<button
v-if="showBackButton"
v-if="showPreview && !showDiff"
type="button"
class="btn role-secondary"
@click="valuesYaml === originalYamlValues ? resetFromBack() : checkCancel(false)"