diff --git a/package.json b/package.json index d1e3e6cceb5..f788683c423 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "enzyme-adapter-react-16": "^1.1.1", "raf": "^3.4.0", "react": "^16.2.0", + "react-ace": "^5.9.0", "react-dom": "^16.2.0", "react-markdown": "^3.1.4", "react-modal": "^3.1.11", diff --git a/public/index.html b/public/index.html index 8985d6d15d6..1a032c0b64f 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,7 @@ Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Kubeapps Dashboard diff --git a/public/manifest.json b/public/manifest.json index be607e41771..e0859126399 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Kubeapps Dashboard", + "name": "Kubeapps Dashboard", "icons": [ { "src": "favicon.ico", diff --git a/src/actions/charts.ts b/src/actions/charts.ts index 8299595bf6a..0047473e721 100644 --- a/src/actions/charts.ts +++ b/src/actions/charts.ts @@ -27,6 +27,10 @@ export const selectReadme = createAction("SELECT_README", (readme: string) => ({ readme, type: "SELECT_README", })); +export const selectValues = createAction("SELECT_VALUES", (values: string) => ({ + type: "SELECT_VALUES", + values, +})); const allActions = [ requestCharts, @@ -34,6 +38,7 @@ const allActions = [ receiveChartVersions, selectChartVersion, selectReadme, + selectValues, ].map(getReturnOfExpression); export type ChartsAction = typeof allActions[number]; @@ -68,15 +73,17 @@ export function fetchChartVersionsAndSelectVersion(id: string, version?: string) cv = found; } dispatch(getChartReadme(id, cv.attributes.version)); + dispatch(getChartValues(id, cv.attributes.version)); return dispatch(selectChartVersion(cv)); }); }; } -export function selectChartVersionAndGetReadme(cv: IChartVersion) { +export function selectChartVersionAndGetFiles(cv: IChartVersion) { return (dispatch: Dispatch): Promise<{}> => { const id = `${cv.relationships.chart.data.repo.name}/${cv.relationships.chart.data.name}`; dispatch(selectChartVersion(cv)); + dispatch(getChartValues(id, cv.attributes.version)); return dispatch(getChartReadme(id, cv.attributes.version)); }; } @@ -89,7 +96,20 @@ export function getChartReadme(id: string, version: string) { }; } -export function deployChart(chartVersion: IChartVersion, releaseName: string, namespace: string) { +export function getChartValues(id: string, version: string) { + return (dispatch: Dispatch): Promise<{}> => { + return fetch(url.api.charts.getValues(id, version)) + .then(response => response.text()) + .then(text => dispatch(selectValues(text))); + }; +} + +export function deployChart( + chartVersion: IChartVersion, + releaseName: string, + namespace: string, + values: string, +) { return (dispatch: Dispatch): Promise<{}> => { const chartAttrs = chartVersion.relationships.chart.data; return fetch(url.api.helmreleases.create(namespace), { @@ -105,6 +125,7 @@ export function deployChart(chartVersion: IChartVersion, releaseName: string, na spec: { chartName: chartAttrs.name, repoUrl: chartAttrs.repo.url, + values, version: chartVersion.attributes.version, }, }), diff --git a/src/components/ChartView/ChartDeployButton.tsx b/src/components/ChartView/ChartDeployButton.tsx index abfcc3f9c14..56d94b9f77a 100644 --- a/src/components/ChartView/ChartDeployButton.tsx +++ b/src/components/ChartView/ChartDeployButton.tsx @@ -1,12 +1,22 @@ import * as React from "react"; +import AceEditor from "react-ace"; import * as Modal from "react-modal"; import { RouterAction } from "react-router-redux"; import { IChartVersion } from "../../shared/types"; +import "brace/mode/yaml"; +import "brace/theme/xcode"; + interface IChartDeployButtonProps { version: IChartVersion; - deployChart: (chartVersion: IChartVersion, releaseName: string, namespace: string) => Promise<{}>; + deployChart: ( + chartVersion: IChartVersion, + releaseName: string, + namespace: string, + values: string, + ) => Promise<{}>; push: (location: string) => RouterAction; + values: string; } interface IChartDeployButtonState { @@ -15,6 +25,8 @@ interface IChartDeployButtonState { // deployment options releaseName: string; namespace: string; + values: string; + valuesModified: boolean; error: string | null; } @@ -25,8 +37,18 @@ class ChartDeployButton extends React.Component @@ -64,6 +86,18 @@ class ChartDeployButton extends React.Component +
+ + +