diff --git a/dashboard/src/components/AppNew/AppNew.css b/dashboard/src/components/AppNew/AppNew.css new file mode 100644 index 00000000000..499b52cd1a1 --- /dev/null +++ b/dashboard/src/components/AppNew/AppNew.css @@ -0,0 +1,3 @@ +.container { + padding-bottom: 10px; +} diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index db5ae5f453f..0d8b8671077 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -5,6 +5,8 @@ import { RouterAction } from "react-router-redux"; import { IServiceBinding } from "../../shared/ServiceBinding"; import { IChartState, IChartVersion } from "../../shared/types"; +import "./AppNew.css"; + import "brace/mode/yaml"; import "brace/theme/xcode"; @@ -20,9 +22,11 @@ interface IAppNewProps { selected: IChartState["selected"]; chartVersion: string; push: (location: string) => RouterAction; + fetchChartVersions: (id: string) => Promise<{}>; getBindings: () => Promise; getChartVersion: (id: string, chartVersion: string) => Promise<{}>; getChartValues: (id: string, chartVersion: string) => Promise<{}>; + selectChartVersionAndGetFiles: (version: IChartVersion) => Promise<{}>; } interface IAppNewState { @@ -46,26 +50,46 @@ class AppNew extends React.Component { selectedBinding: undefined, valuesModified: false, }; + public componentDidMount() { - const { chartID, getBindings, getChartVersion, getChartValues, chartVersion } = this.props; + const { + chartID, + fetchChartVersions, + getBindings, + getChartVersion, + getChartValues, + chartVersion, + } = this.props; + fetchChartVersions(chartID); getBindings(); getChartVersion(chartID, chartVersion); getChartValues(chartID, chartVersion); } public componentWillReceiveProps(nextProps: IAppNewProps) { + const { selectChartVersionAndGetFiles, chartVersion } = this.props; + const { versions } = this.props.selected; const { version, values } = nextProps.selected; - if (version && values && !this.state.valuesModified) { + + if (nextProps.chartVersion !== chartVersion) { + const cv = versions.find(v => v.attributes.version === nextProps.chartVersion); + if (cv) { + selectChartVersionAndGetFiles(cv); + } else { + throw new Error("could not find chart"); + } + } else if (version && values && !this.state.valuesModified) { this.setState({ appValues: values }); } } public render() { - if (!this.props.selected.version && !this.state.appValues) { + const { selected, bindings } = this.props; + const { version, versions } = selected; + const { appValues, selectedBinding } = this.state; + if (!version || !appValues || !versions.length) { return
Loading
; } - const { bindings } = this.props; - const { selectedBinding } = this.state; let bindingDetail =
; if (selectedBinding) { const { @@ -111,6 +135,9 @@ class AppNew extends React.Component {
+
+

{this.props.chartID}

+
{ required={true} />
+
+ + +
{ width="100%" onChange={this.handleValuesChange} setOptions={{ showPrintMargin: false }} - value={this.state.appValues} + editorProps={{ $blockScrolling: Infinity }} + value={appValues} />
@@ -200,6 +243,9 @@ class AppNew extends React.Component { public handleReleaseNameChange = (e: React.FormEvent) => { this.setState({ releaseName: e.currentTarget.value }); }; + public handleChartVersionChange = (e: React.FormEvent) => { + this.props.push(`/apps/new/${this.props.chartID}/versions/${e.currentTarget.value}`); + }; public handleNamespaceChange = (e: React.FormEvent) => { this.setState({ namespace: e.currentTarget.value }); }; diff --git a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx index 0d2af123b3b..42c173e3470 100644 --- a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx +++ b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx @@ -36,12 +36,15 @@ function mapDispatchToProps(dispatch: Dispatch) { namespace: string, values?: string, ) => dispatch(actions.charts.deployChart(version, releaseName, namespace, values)), + fetchChartVersions: (id: string) => dispatch(actions.charts.fetchChartVersions(id)), getBindings: () => dispatch(actions.catalog.getBindings()), getChartValues: (id: string, version: string) => dispatch(actions.charts.getChartValues(id, version)), getChartVersion: (id: string, version: string) => dispatch(actions.charts.getChartVersion(id, version)), push: (location: string) => dispatch(push(location)), + selectChartVersionAndGetFiles: (version: IChartVersion) => + dispatch(actions.charts.selectChartVersionAndGetFiles(version)), }; }