flesh out chart view/details

package.json

@@ -8,6 +8,7 @@
     "raf": "^3.4.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-markdown": "^3.1.4",
     "react-modal": "^3.1.11",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",

src/actions/charts.ts

@@ -1,20 +1,37 @@
 import { Dispatch } from "redux";
 import { createAction, getReturnOfExpression } from "typesafe-actions";
 
-import { IChart, IStoreState } from "../shared/types";
+import { IChart, IChartVersion, IStoreState } from "../shared/types";
 import * as url from "../shared/url";
 
 export const requestCharts = createAction("REQUEST_CHARTS");
 export const receiveCharts = createAction("RECEIVE_CHARTS", (charts: IChart[]) => ({
   charts,
   type: "RECEIVE_CHARTS",
 }));
+export const receiveChartVersions = createAction(
+  "RECEIVE_CHART_VERSIONS",
+  (versions: IChartVersion[]) => ({
+    type: "RECEIVE_CHART_VERSIONS",
+    versions,
+  }),
+);
 export const selectChart = createAction("SELECT_CHART", (chart: IChart) => ({
   chart,
   type: "SELECT_CHART",
 }));
+export const selectReadme = createAction("SELECT_README", (readme: string) => ({
+  readme,
+  type: "SELECT_README",
+}));
 
-const allActions = [requestCharts, receiveCharts, selectChart].map(getReturnOfExpression);
+const allActions = [
+  requestCharts,
+  receiveCharts,
+  receiveChartVersions,
+  selectChart,
+  selectReadme,
+].map(getReturnOfExpression);
 export type ChartsAction = typeof allActions[number];
 
 export function fetchCharts(repo: string) {
@@ -31,7 +48,28 @@ export function getChart(id: string) {
     dispatch(requestCharts());
     return fetch(url.api.charts.get(id))
       .then(response => response.json())
-      .then(json => dispatch(selectChart(json.data)));
+      .then(json => {
+        const c: IChart = json.data;
+        dispatch(listChartVersions(c.id));
+        dispatch(getChartReadme(c.id, c.relationships.latestChartVersion.data.version));
+        return dispatch(selectChart(json.data));
+      });
+  };
+}
+
+export function listChartVersions(id: string) {
+  return (dispatch: Dispatch<IStoreState>): Promise<{}> => {
+    return fetch(url.api.charts.listVersions(id))
+      .then(response => response.json())
+      .then(json => dispatch(receiveChartVersions(json.data)));
+  };
+}
+
+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)));
   };
 }
 

src/components/ChartIcon/ChartIcon.css

@@ -0,0 +1,6 @@
+.ChartIcon {
+  height: 64px;
+}
+.ChartIcon__img {
+  max-height: 64px;
+}

src/components/ChartIcon/ChartIcon.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
+
 import placeholder from "../../placeholder.png";
+import "./ChartIcon.css";
 
 interface IChartIconProps {
   icon?: string;
@@ -11,8 +13,8 @@ class ChartIcon extends React.Component<IChartIconProps> {
     const iconSrc = icon ? `/api/chartsvc/${icon}` : placeholder;
 
     return (
-      <div className="ChartListItem__icon">
-        <img className="ChartListItem__icon" src={iconSrc} />
+      <div className="ChartIcon">
+        <img className="ChartIcon__img" src={iconSrc} />
       </div>
     );
   }

src/components/ChartList/ChartListItem.css

@@ -1,7 +1,3 @@
 .ChartListItem {
   width: 250px;
 }
-
-.ChartListItem__icon {
-  max-height: 64px;
-}

src/components/ChartView/ChartDeployButton.tsx

@@ -36,7 +36,7 @@ class ChartDeployButton extends React.Component<IChartDeployButtonProps, IChartD
           onClick={this.openModel}
           disabled={this.state.isDeploying}
         >
-          Deploy
+          Deploy using Helm
         </button>
         <Modal
           isOpen={this.state.modalIsOpen}

src/components/ChartView/ChartHeader.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import ChartIcon from "../ChartIcon";
+
+interface IChartHeaderProps {
+  appVersion?: string;
+  id: string;
+  icon: string;
+  repo: string;
+  description: string;
+}
+
+class ChartHeader extends React.Component<IChartHeaderProps> {
+  public render() {
+    const { appVersion, id, icon, repo, description } = this.props;
+    return (
+      <header>
+        <div className="ChartView__heading margin-normal">
+          <ChartIcon icon={icon} />
+          <div className="title margin-l-small">
+            <h1 className="margin-t-reset">{id}</h1>
+            <h5 className="subtitle margin-b-normal">
+              {appVersion && <span>{appVersion} - </span>}
+              <Link to={`/charts/${repo}`}>{repo}</Link>
+            </h5>
+            <h5 className="subtitle margin-b-reset">{description}</h5>
+          </div>
+        </div>
+        <hr />
+      </header>
+    );
+  }
+}
+
+export default ChartHeader;

src/components/ChartView/ChartReadme.css

@@ -0,0 +1,4 @@
+.ChartReadme pre {
+  overflow: scroll;
+  background: #f1f1f1;
+}

src/components/ChartView/ChartReadme.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as ReactMarkdown from "react-markdown";
+
+import "./ChartReadme.css";
+
+interface IChartReadmeProps {
+  markdown?: string;
+}
+
+class ChartReadme extends React.Component<IChartReadmeProps> {
+  public render() {
+    const { markdown } = this.props;
+    return (
+      <div className="ChartReadme">
+        {markdown ? <ReactMarkdown source={markdown} /> : "Loading"}
+      </div>
+    );
+  }
+}
+
+export default ChartReadme;

src/components/ChartView/ChartVersionsList.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { IChartVersion } from "../../shared/types";
+
+interface IChartVersionsListProps {
+  versions: IChartVersion[];
+}
+
+class ChartVersionsList extends React.Component<IChartVersionsListProps> {
+  public render() {
+    const items = this.props.versions.slice(0, 5).map(v => (
+      <li key={v.id}>
+        {v.attributes.version} - {this.formatDate(v.attributes.created)}
+      </li>
+    ));
+    return (
+      <div className="ChartVersionsList">
+        <ul className="remove-style padding-l-reset margin-b-reset">{items}</ul>
+        <span className="type-small">Show all...</span>
+      </div>
+    );
+  }
+
+  public formatDate(dateStr: string) {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  }
+}
+
+export default ChartVersionsList;

src/components/ChartView/ChartView.css

@@ -0,0 +1,17 @@
+.ChartView__heading {
+  display: flex;
+}
+
+.ChartView__readme-container {
+  /* for col-8 class */
+  width: 66.66%;
+}
+
+.ChartViewSidebar__section {
+  /* hack to make h2 margin work... */
+  padding-top: 0.1px;
+}
+
+.ChartViewSidebar__section > div {
+  margin-left: 1em;
+}

src/components/ChartView/ChartView.tsx

@@ -1,16 +1,20 @@
 import * as React from "react";
 import { RouterAction } from "react-router-redux";
-import { IChart, IChartVersion } from "../../shared/types";
+
+import { IChart, IChartState } from "../../shared/types";
 import ChartDeployButton from "./ChartDeployButton";
+import ChartHeader from "./ChartHeader";
+import ChartReadme from "./ChartReadme";
+import ChartVersionsList from "./ChartVersionsList";
+import "./ChartView.css";
 
 interface IChartViewProps {
   chartID: string;
   getChart: (id: string) => Promise<{}>;
   deployChart: (chart: IChart, releaseName: string, namespace: string) => Promise<{}>;
   push: (location: string) => RouterAction;
   isFetching: boolean;
-  chart: IChart;
-  version: IChartVersion;
+  selected: IChartState["selected"];
 }
 
 class ChartView extends React.Component<IChartViewProps> {
@@ -20,18 +24,57 @@ class ChartView extends React.Component<IChartViewProps> {
   }
 
   public render() {
-    const { isFetching, chart, deployChart, push } = this.props;
+    const { isFetching, deployChart, push } = this.props;
+    const { chart, readme, versions } = this.props.selected;
     if (isFetching || !chart) {
       return <div>Loading</div>;
     }
     return (
-      <section className="ChartListView">
-        <header className="ChartListView__header">
-          <h1>{chart.id}</h1>
-          <hr />
-        </header>
-        <main className="text-c">
-          <ChartDeployButton push={push} chart={chart} deployChart={deployChart} />
+      <section className="ChartView">
+        <ChartHeader
+          id={chart.id}
+          description={chart.attributes.description}
+          icon={chart.attributes.icon}
+          repo={chart.attributes.repo.name}
+          appVersion={chart.relationships.latestChartVersion.data.app_version}
+        />
+        <main>
+          <div className="container">
+            <div className="row">
+              <div className="col-8 ChartView__readme-container">
+                <ChartReadme markdown={readme} />
+              </div>
+              {/* TODO: fix when upgrading to bitnami-ui v3 - col-4 does not fit correctly in v2 */}
+              <div className="col-3">
+                <aside className="ChartViewSidebar bg-light margin-v-big padding-h-normal">
+                  <div className="ChartViewSidebar__section">
+                    <h2>Usage</h2>
+                    <ChartDeployButton push={push} chart={chart} deployChart={deployChart} />
+                  </div>
+                  <div className="ChartViewSidebar__section">
+                    <h2>Chart Versions</h2>
+                    <ChartVersionsList versions={versions} />
+                  </div>
+                  <div className="ChartViewSidebar__section">
+                    <h2>App Version</h2>
+                    <div>{chart.relationships.latestChartVersion.data.app_version}</div>
+                  </div>
+                  <div className="ChartViewSidebar__section">
+                    <h2>Home</h2>
+                    <div>{chart.attributes.home}</div>
+                  </div>
+                  <div className="ChartViewSidebar__section">
+                    <h2>Maintainers</h2>
+                    {chart.attributes.maintainers.map((m, i) => <div key={i}>{m.name}</div>)}
+                  </div>
+                  <div className="ChartViewSidebar__section">
+                    <h2>Related</h2>
+                    {chart.attributes.sources.map((s, i) => <div key={i}>{s}</div>)}
+                  </div>
+                </aside>
+              </div>
+            </div>
+          </div>
         </main>
       </section>
     );

src/components/Layout/Layout.css

@@ -0,0 +1,21 @@
+.Layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  flex-direction: column;
+}
+
+.Layout > main {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.Layout > main > .container {
+  width: 100%;
+}
+
+.Layout > main > .container > .row {
+  height: 100%;
+  width: 100%;
+}

src/components/Layout/Layout.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import Footer from "../Footer";
 import Header from "../Header";
 import Sidebar from "../Sidebar";
+import "./Layout.css";
 
 class Layout extends React.Component {
   public render() {

src/components/Sidebar/Sidebar.css

@@ -0,0 +1,3 @@
+.Sidebar {
+  height: 100%;
+}

src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
+
 import placeholder from "../../placeholder.png";
+import "./Sidebar.css";
 
 class Sidebar extends React.Component {
   public render() {
     return (
-      <aside className="bg-dark type-color-reverse-anchor-reset">
+      <aside className="Sidebar bg-dark type-color-reverse-anchor-reset">
         <ul className="remove-style margin-reset padding-h-normal text-c">
           <li className="padding-v-normal">
             <img src={placeholder} height="48" />

src/containers/ChartViewContainer/ChartViewContainer.tsx

@@ -17,10 +17,9 @@ interface IRouteProps {
 
 function mapStateToProps({ charts }: IStoreState, { match: { params } }: IRouteProps) {
   return {
-    chart: charts.selectedChart,
     chartID: `${params.repo}/${params.id}`,
     isFetching: charts.isFetching,
-    version: charts.selectedVersion,
+    selected: charts.selected,
   };
 }