Add UI for deploying values.yaml for charts (#41)

* add values for installing charts * rebase * selectable version for values * yaml mode * modifying values * combine readme and values into selectChartVersionAndGetFiles * add yaml label to values
vmware-tanzu · Feb 5, 2018 · 450a042 · 450a042
1 parent fc09740
commit 450a042
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 19 deletions.
diff --git 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
@@ -21,7 +21,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <script src="//d1d5nb8vlsbujg.cloudfront.net/bitnami-ui/3.0.0-alpha-12/bitnami.ui.min.js"></script>
-  <title>React App</title>
+  <title>Kubeapps Dashboard</title>
 </head>
 
 <body>

diff --git 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
@@ -27,13 +27,18 @@ 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,
   receiveCharts,
   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<IStoreState>): 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<IStoreState>): 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<IStoreState>): 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
@@ -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<IChartDeployButtonProps, IChartD
     modalIsOpen: false,
     namespace: "default",
     releaseName: "",
+    values: "",
+    valuesModified: false,
   };
 
+  public componentWillReceiveProps(nextProps: IChartDeployButtonProps) {
+    if (!this.state.valuesModified) {
+      this.setState({
+        values: nextProps.values,
+      });
+    }
+  }
+
   public render() {
     return (
       <div className="ChartDeployButton">
@@ -64,6 +86,18 @@ class ChartDeployButton extends React.Component<IChartDeployButtonProps, IChartD
                 value={this.state.namespace}
               />
             </div>
+            <div style={{ marginBottom: "1em" }}>
+              <label htmlFor="values">Values (YAML)</label>
+              <AceEditor
+                mode="yaml"
+                theme="xcode"
+                name="values"
+                width="100%"
+                onChange={this.handleValuesChange}
+                setOptions={{ showPrintMargin: false }}
+                value={this.state.values}
+              />
+            </div>
             <div>
               <button className="button button-primary" type="submit">
                 Submit
@@ -94,8 +128,8 @@ class ChartDeployButton extends React.Component<IChartDeployButtonProps, IChartD
     e.preventDefault();
     const { version, deployChart, push } = this.props;
     this.setState({ isDeploying: true });
-    const { releaseName, namespace } = this.state;
-    deployChart(version, releaseName, namespace)
+    const { releaseName, namespace, values } = this.state;
+    deployChart(version, releaseName, namespace, values)
       .then(() => push(`/apps/${releaseName}`))
       .catch(err => this.setState({ isDeploying: false, error: err.toString() }));
   };
@@ -106,6 +140,9 @@ class ChartDeployButton extends React.Component<IChartDeployButtonProps, IChartD
   public handleNamespaceChange = (e: React.FormEvent<HTMLInputElement>) => {
     this.setState({ namespace: e.currentTarget.value });
   };
+  public handleValuesChange = (value: string) => {
+    this.setState({ values: value, valuesModified: true });
+  };
 }
 
 export default ChartDeployButton;
diff --git a/src/components/ChartView/ChartView.tsx b/src/components/ChartView/ChartView.tsx
@@ -12,11 +12,16 @@ import "./ChartView.css";
 interface IChartViewProps {
   chartID: string;
   fetchChartVersionsAndSelectVersion: (id: string, version?: string) => Promise<{}>;
-  deployChart: (version: IChartVersion, releaseName: string, namespace: string) => Promise<{}>;
+  deployChart: (
+    version: IChartVersion,
+    releaseName: string,
+    namespace: string,
+    values: string,
+  ) => Promise<{}>;
   push: (location: string) => RouterAction;
   isFetching: boolean;
   selected: IChartState["selected"];
-  selectChartVersionAndGetReadme: (version: IChartVersion) => Promise<{}>;
+  selectChartVersionAndGetFiles: (version: IChartVersion) => Promise<{}>;
   version: string | undefined;
 }
 
@@ -27,12 +32,12 @@ class ChartView extends React.Component<IChartViewProps> {
   }
 
   public componentWillReceiveProps(nextProps: IChartViewProps) {
-    const { selectChartVersionAndGetReadme, version } = this.props;
+    const { selectChartVersionAndGetFiles, version } = this.props;
     const { versions } = this.props.selected;
     if (nextProps.version !== version) {
       const cv = versions.find(v => v.attributes.version === nextProps.version);
       if (cv) {
-        selectChartVersionAndGetReadme(cv);
+        selectChartVersionAndGetFiles(cv);
       } else {
         throw new Error("could not find chart");
       }
@@ -41,7 +46,7 @@ class ChartView extends React.Component<IChartViewProps> {
 
   public render() {
     const { isFetching, deployChart, push } = this.props;
-    const { version, readme, versions } = this.props.selected;
+    const { version, readme, versions, values } = this.props.selected;
     if (isFetching || !version) {
       return <div>Loading</div>;
     }
@@ -65,7 +70,12 @@ class ChartView extends React.Component<IChartViewProps> {
                 <aside className="ChartViewSidebar bg-light margin-v-big padding-h-normal padding-b-normal">
                   <div className="ChartViewSidebar__section">
                     <h2>Usage</h2>
-                    <ChartDeployButton push={push} version={version} deployChart={deployChart} />
+                    <ChartDeployButton
+                      push={push}
+                      version={version}
+                      deployChart={deployChart}
+                      values={values || ""}
+                    />
                   </div>
                   <div className="ChartViewSidebar__section">
                     <h2>Chart Versions</h2>

diff --git a/src/containers/ChartViewContainer/ChartViewContainer.tsx b/src/containers/ChartViewContainer/ChartViewContainer.tsx
@@ -27,13 +27,13 @@ function mapStateToProps({ charts }: IStoreState, { match: { params } }: IRouteP
 
 function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
   return {
-    deployChart: (version: IChartVersion, releaseName: string, namespace: string) =>
-      dispatch(actions.charts.deployChart(version, releaseName, namespace)),
+    deployChart: (version: IChartVersion, releaseName: string, namespace: string, values: string) =>
+      dispatch(actions.charts.deployChart(version, releaseName, namespace, values)),
     fetchChartVersionsAndSelectVersion: (id: string, version?: string) =>
       dispatch(actions.charts.fetchChartVersionsAndSelectVersion(id, version)),
     push: (location: string) => dispatch(push(location)),
-    selectChartVersionAndGetReadme: (version: IChartVersion) =>
-      dispatch(actions.charts.selectChartVersionAndGetReadme(version)),
+    selectChartVersionAndGetFiles: (version: IChartVersion) =>
+      dispatch(actions.charts.selectChartVersionAndGetFiles(version)),
   };
 }
 

diff --git a/src/reducers/charts.ts b/src/reducers/charts.ts
@@ -26,6 +26,8 @@ const chartsSelectedReducer = (
       };
     case getType(actions.charts.selectReadme):
       return { ...state, readme: action.readme };
+    case getType(actions.charts.selectValues):
+      return { ...state, values: action.values };
     default:
   }
   return state;
@@ -51,6 +53,8 @@ const chartsReducer = (state: IChartState = initialState, action: ChartsAction):
       };
     case getType(actions.charts.selectReadme):
       return { ...state, selected: chartsSelectedReducer(state.selected, action) };
+    case getType(actions.charts.selectValues):
+      return { ...state, selected: chartsSelectedReducer(state.selected, action) };
     default:
   }
   return state;

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -47,6 +47,7 @@ export interface IChartState {
     version?: IChartVersion;
     versions: IChartVersion[];
     readme?: string;
+    values?: string;
   };
   items: IChart[];
 }

diff --git a/src/shared/url.ts b/src/shared/url.ts
@@ -15,6 +15,8 @@ export const api = {
     get: (id: string) => `${api.charts.base}/charts/${id}`,
     getReadme: (id: string, version: string) =>
       `${api.charts.base}/assets/${id}/versions/${version}/README.md`,
+    getValues: (id: string, version: string) =>
+      `${api.charts.base}/assets/${id}/versions/${version}/values.yaml`,
     list: (repo?: string) => `${api.charts.base}/charts${repo ? `/${repo}` : ""}`,
     listVersions: (id: string) => `${api.charts.get(id)}/versions`,
   },

diff --git a/yarn.lock b/yarn.lock
@@ -680,6 +680,10 @@ brace-expansion@^1.0.0, brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.0.tgz#155cd80607687dc8cb908f0df94e62a033c1d563"
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -3942,6 +3946,14 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
+lodash.isequal@^4.1.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.isfunction@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz#4db709fc81bc4a8fd7127a458a5346c5cdce2c6b"
@@ -5148,7 +5160,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -5291,6 +5303,15 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^5.9.0:
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-5.9.0.tgz#427a1cc4869b960a6f9748aa7eb169a9269fc336"
+  dependencies:
+    brace "^0.11.0"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.1.1"
+    prop-types "^15.5.8"
+
 react-dev-utils@4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"