handle missing readme & values for chart versions

dashboard/src/actions/charts.ts

@@ -1,6 +1,7 @@
 import { Dispatch } from "redux";
 import { createAction, getReturnOfExpression } from "typesafe-actions";
 
+import Chart from "../shared/Chart";
 import { IChart, IChartVersion, IStoreState } from "../shared/types";
 import * as url from "../shared/url";
 
@@ -23,10 +24,17 @@ export const selectChartVersion = createAction(
     type: "SELECT_CHART_VERSION",
   }),
 );
+export const resetChartVersion = createAction("RESET_CHART_VERSION", () => ({
+  type: "RESET_CHART_VERSION",
+}));
 export const selectReadme = createAction("SELECT_README", (readme: string) => ({
   readme,
   type: "SELECT_README",
 }));
+export const errorReadme = createAction("ERROR_README", (message: string) => ({
+  message,
+  type: "ERROR_README",
+}));
 export const selectValues = createAction("SELECT_VALUES", (values: string) => ({
   type: "SELECT_VALUES",
   values,
@@ -37,7 +45,9 @@ const allActions = [
   receiveCharts,
   receiveChartVersions,
   selectChartVersion,
+  resetChartVersion,
   selectReadme,
+  errorReadme,
   selectValues,
 ].map(getReturnOfExpression);
 export type ChartsAction = typeof allActions[number];
@@ -81,15 +91,13 @@ 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 selectChartVersionAndGetFiles(cv: IChartVersion) {
-  return (dispatch: Dispatch<IStoreState>): Promise<{}> => {
+  return (dispatch: Dispatch<IStoreState>): Promise<any> => {
     const id = `${cv.relationships.chart.data.repo.name}/${cv.relationships.chart.data.name}`;
     dispatch(selectChartVersion(cv));
     dispatch(getChartValues(id, cv.attributes.version));
@@ -98,18 +106,27 @@ export function selectChartVersionAndGetFiles(cv: IChartVersion) {
 }
 
 export function getChartReadme(id: string, version: string) {
-  return (dispatch: Dispatch<IStoreState>): Promise<{}> => {
-    return fetch(url.api.charts.getReadme(id, version))
-      .then(response => response.text())
-      .then(text => dispatch(selectReadme(text)));
+  return async (dispatch: Dispatch<IStoreState>) => {
+    try {
+      const readme = await Chart.getReadme(id, version);
+      dispatch(selectReadme(readme));
+      return readme;
+    } catch (e) {
+      return dispatch(errorReadme(e.toString()));
+    }
   };
 }
 
 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)));
+  return async (dispatch: Dispatch<IStoreState>) => {
+    try {
+      const values = await Chart.getValues(id, version);
+      dispatch(selectValues(values));
+      return values;
+    } catch (e) {
+      dispatch(selectValues(""));
+      return "";
+    }
   };
 }
 

dashboard/src/components/ChartView/ChartReadme.css

@@ -1,3 +1,8 @@
+.ChartReadme--error {
+  height: 100%;
+  flex-direction: column;
+}
+
 .ChartReadme p {
   margin: 0.625em 0;
 }

dashboard/src/components/ChartView/ChartReadme.tsx

@@ -1,21 +1,44 @@
 import * as React from "react";
+import { FileText } from "react-feather";
 import * as ReactMarkdown from "react-markdown";
 
 import "./ChartReadme.css";
 
 interface IChartReadmeProps {
-  markdown?: string;
+  getChartReadme: (version: string) => void;
+  hasError: boolean;
+  readme?: string;
+  version: string;
 }
 
 class ChartReadme extends React.Component<IChartReadmeProps> {
+  public componentWillMount() {
+    const { getChartReadme, version } = this.props;
+    getChartReadme(version);
+  }
+
+  public componentWillReceiveProps(nextProps: IChartReadmeProps) {
+    const { getChartReadme, version } = nextProps;
+    if (version !== this.props.version) {
+      getChartReadme(version);
+    }
+  }
+
   public render() {
-    let { markdown } = this.props;
-    if (markdown === "") {
-      markdown = "No README for this chart";
+    const { hasError, readme } = this.props;
+    if (hasError) {
+      return this.renderError();
     }
     return (
-      <div className="ChartReadme">
-        {markdown ? <ReactMarkdown source={markdown} /> : "Loading"}
+      <div className="ChartReadme">{readme ? <ReactMarkdown source={readme} /> : "Loading"}</div>
+    );
+  }
+
+  public renderError() {
+    return (
+      <div className="ChartReadme ChartReadme--error flex align-center text-c">
+        <FileText size={64} />
+        <h4>No README found</h4>
       </div>
     );
   }

dashboard/src/components/ChartView/ChartView.tsx

@@ -13,7 +13,9 @@ interface IChartViewProps {
   fetchChartVersionsAndSelectVersion: (id: string, version?: string) => Promise<{}>;
   isFetching: boolean;
   selected: IChartState["selected"];
-  selectChartVersionAndGetFiles: (version: IChartVersion) => Promise<{}>;
+  selectChartVersion: (version: IChartVersion) => any;
+  resetChartVersion: () => any;
+  getChartReadme: (version: string) => any;
   version: string | undefined;
 }
 
@@ -24,21 +26,25 @@ class ChartView extends React.Component<IChartViewProps> {
   }
 
   public componentWillReceiveProps(nextProps: IChartViewProps) {
-    const { selectChartVersionAndGetFiles, version } = this.props;
+    const { selectChartVersion, version } = this.props;
     const { versions } = this.props.selected;
     if (nextProps.version !== version) {
       const cv = versions.find(v => v.attributes.version === nextProps.version);
       if (cv) {
-        selectChartVersionAndGetFiles(cv);
+        selectChartVersion(cv);
       } else {
         throw new Error("could not find chart");
       }
     }
   }
 
+  public componentWillUnmount() {
+    this.props.resetChartVersion();
+  }
+
   public render() {
-    const { isFetching } = this.props;
-    const { version, readme, versions } = this.props.selected;
+    const { isFetching, getChartReadme } = this.props;
+    const { version, readme, readmeError, versions } = this.props.selected;
     if (isFetching || !version) {
       return <div>Loading</div>;
     }
@@ -56,7 +62,12 @@ class ChartView extends React.Component<IChartViewProps> {
           <div className="container container-fluid">
             <div className="row">
               <div className="col-9 ChartView__readme-container">
-                <ChartReadme markdown={readme} />
+                <ChartReadme
+                  getChartReadme={getChartReadme}
+                  readme={readme}
+                  hasError={!!readmeError}
+                  version={version.attributes.version}
+                />
               </div>
               <div className="col-3 ChartView__sidebar-container">
                 <aside className="ChartViewSidebar bg-light margin-v-big padding-h-normal padding-b-normal">

dashboard/src/components/DeploymentForm/DeploymentForm.tsx

@@ -23,7 +23,7 @@ interface IDeploymentFormProps {
   fetchChartVersions: (id: string) => Promise<{}>;
   getBindings: () => Promise<IServiceBinding[]>;
   getChartVersion: (id: string, chartVersion: string) => Promise<{}>;
-  getChartValues: (id: string, chartVersion: string) => Promise<{}>;
+  getChartValues: (id: string, chartVersion: string) => Promise<any>;
   selectChartVersionAndGetFiles: (version: IChartVersion) => Promise<{}>;
 }
 
@@ -85,7 +85,7 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
     const { selected, bindings } = this.props;
     const { version, versions } = selected;
     const { appValues, selectedBinding } = this.state;
-    if (!version || !appValues || !versions.length) {
+    if (!version || !versions.length) {
       return <div>Loading</div>;
     }
     let bindingDetail = <div />;
@@ -232,7 +232,7 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
     const { selected, deployChart, push } = this.props;
     this.setState({ isDeploying: true });
     const { releaseName, namespace, appValues } = this.state;
-    if (selected.version && appValues) {
+    if (selected.version) {
       deployChart(selected.version, releaseName, namespace, appValues)
         .then(() => push(`/apps/${namespace}/${namespace}-${releaseName}`))
         .catch(err => this.setState({ isDeploying: false, error: err.toString() }));

dashboard/src/containers/ChartViewContainer/ChartViewContainer.tsx

@@ -17,20 +17,27 @@ interface IRouteProps {
 
 function mapStateToProps({ charts }: IStoreState, { match: { params } }: IRouteProps) {
   return {
-    chartID: `${params.repo}/${params.id}`,
+    chartID: chartID(params),
     isFetching: charts.isFetching,
     selected: charts.selected,
     version: params.version,
   };
 }
 
-function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
+function mapDispatchToProps(dispatch: Dispatch<IStoreState>, { match: { params } }: IRouteProps) {
   return {
     fetchChartVersionsAndSelectVersion: (id: string, version?: string) =>
       dispatch(actions.charts.fetchChartVersionsAndSelectVersion(id, version)),
-    selectChartVersionAndGetFiles: (version: IChartVersion) =>
-      dispatch(actions.charts.selectChartVersionAndGetFiles(version)),
+    getChartReadme: (version: string) =>
+      dispatch(actions.charts.getChartReadme(chartID(params), version)),
+    resetChartVersion: () => dispatch(actions.charts.resetChartVersion()),
+    selectChartVersion: (version: IChartVersion) =>
+      dispatch(actions.charts.selectChartVersion(version)),
   };
 }
 
+function chartID(params: IRouteProps["match"]["params"]) {
+  return `${params.repo}/${params.id}`;
+}
+
 export default connect(mapStateToProps, mapDispatchToProps)(ChartView);

dashboard/src/reducers/charts.ts

@@ -18,16 +18,26 @@ const chartsSelectedReducer = (
 ): IChartState["selected"] => {
   switch (action.type) {
     case getType(actions.charts.selectChartVersion):
-      return { ...state, version: action.chartVersion };
+      return {
+        ...state,
+        readme: undefined,
+        readmeError: undefined,
+        values: undefined,
+        version: action.chartVersion,
+      };
     case getType(actions.charts.receiveChartVersions):
       return {
         ...state,
         versions: action.versions,
       };
     case getType(actions.charts.selectReadme):
-      return { ...state, readme: action.readme };
+      return { ...state, readme: action.readme, readmeError: undefined };
+    case getType(actions.charts.errorReadme):
+      return { ...state, readmeError: action.message };
     case getType(actions.charts.selectValues):
       return { ...state, values: action.values };
+    case getType(actions.charts.resetChartVersion):
+      return initialState.selected;
     default:
   }
   return state;
@@ -51,8 +61,12 @@ const chartsReducer = (state: IChartState = initialState, action: ChartsAction):
         isFetching: false,
         selected: chartsSelectedReducer(state.selected, action),
       };
+    case getType(actions.charts.resetChartVersion):
+      return { ...state, selected: chartsSelectedReducer(state.selected, action) };
     case getType(actions.charts.selectReadme):
       return { ...state, selected: chartsSelectedReducer(state.selected, action) };
+    case getType(actions.charts.errorReadme):
+      return { ...state, selected: chartsSelectedReducer(state.selected, action) };
     case getType(actions.charts.selectValues):
       return { ...state, selected: chartsSelectedReducer(state.selected, action) };
     default:

dashboard/src/shared/Chart.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+// import { IFunction, IFunctionList, IResource, IStatus } from "./types";
+
+export default class Chart {
+  public static async getReadme(id: string, version: string) {
+    const url = `${Chart.APIEndpoint}/assets/${id}/versions/${version}/README.md`;
+    const { data } = await axios.get<string>(url);
+    return data;
+  }
+
+  public static async getValues(id: string, version: string) {
+    const url = `${Chart.APIEndpoint}/assets/${id}/versions/${version}/values.yaml`;
+    const { data } = await axios.get<string>(url);
+    return data;
+  }
+
+  private static APIEndpoint: string = "/api/chartsvc/v1";
+}

dashboard/src/shared/types.ts

@@ -54,6 +54,7 @@ export interface IChartState {
     version?: IChartVersion;
     versions: IChartVersion[];
     readme?: string;
+    readmeError?: string;
     values?: string;
   };
   items: IChart[];