Merge pull request #4828 from rohitkrai03/helm-readme

Add Helm Chart README to catalog page sidebar
openshift · Apr 16, 2020 · 106bc59 · 106bc59
2 parents c8fced6 + 8f9acc7
commit 106bc59
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 11 deletions.
diff --git a/frontend/public/components/catalog/catalog-item-details.jsx b/frontend/public/components/catalog/catalog-item-details.jsx
@@ -11,13 +11,20 @@ import { SyncMarkdownView } from '../markdown-view';
 export class CatalogTileDetails extends React.Component {
   state = {
     plans: [],
+    markdown: '',
   };
 
   componentDidMount() {
-    const { obj, kind } = this.props.item;
+    const { obj, kind, markdownDescription } = this.props.item;
     if (kind === 'ClusterServiceClass') {
       this.getPlans(obj);
     }
+
+    if (_.isFunction(markdownDescription)) {
+      markdownDescription().then((md) => this.setState({ markdown: md }));
+    } else {
+      this.setState({ markdown: markdownDescription });
+    }
   }
 
   getPlans(obj) {
@@ -35,14 +42,14 @@ export class CatalogTileDetails extends React.Component {
       obj,
       kind,
       tileProvider,
-      markdownDescription,
       tileDescription,
       supportUrl,
       longDescription,
       documentationUrl,
       sampleRepo,
+      customProperties,
     } = this.props.item;
-    const { plans } = this.state;
+    const { plans, markdown } = this.state;
 
     const creationTimestamp = _.get(obj, 'metadata.creationTimestamp');
 
@@ -67,6 +74,7 @@ export class CatalogTileDetails extends React.Component {
           <div className="modal-body-inner-shadow-covers">
             <div className="co-catalog-page__overlay-body">
               <PropertiesSidePanel>
+                {customProperties}
                 {tileProvider && <PropertyItem label="Provider" value={tileProvider} />}
                 {supportUrl && <PropertyItem label="Support" value={supportUrlLink} />}
                 {creationTimestamp && (
@@ -79,7 +87,7 @@ export class CatalogTileDetails extends React.Component {
               <div className="co-catalog-page__overlay-description">
                 <SectionHeading text="Description" />
                 {tileDescription && <p>{tileDescription}</p>}
-                {markdownDescription && <SyncMarkdownView content={markdownDescription} />}
+                {markdown && <SyncMarkdownView content={markdown} />}
                 {longDescription && <p>{longDescription}</p>}
                 {sampleRepo && <p>Sample repository: {sampleRepoLink}</p>}
                 {documentationUrl && (

diff --git a/frontend/public/components/catalog/catalog-page.tsx b/frontend/public/components/catalog/catalog-page.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import { Helmet } from 'react-helmet';
 import { safeLoad } from 'js-yaml';
 
+import { PropertyItem } from '@patternfly/react-catalog-view-extension';
 import { ANNOTATIONS, FLAGS, APIError } from '@console/shared';
 import { CatalogTileViewPage } from './catalog-items';
 import {
@@ -22,6 +23,7 @@ import {
   skeletonCatalog,
   StatusBox,
   FirehoseResult,
+  ExternalLink,
 } from '../utils';
 import { getAnnotationTags, getMostRecentBuilderTag, isBuilder } from '../image-stream';
 import {
@@ -33,7 +35,7 @@ import {
 } from './catalog-item-icon';
 import { ClusterServiceClassModel, TemplateModel } from '../../models';
 import * as plugins from '../../plugins';
-import { coFetch } from '../../co-fetch';
+import { coFetch, coFetchJSON } from '../../co-fetch';
 
 export class CatalogListPage extends React.Component<CatalogListPageProps, CatalogListPageState> {
   constructor(props: CatalogListPageProps) {
@@ -208,23 +210,67 @@ export class CatalogListPage extends React.Component<CatalogListPageProps, Catal
         charts.forEach((chart: HelmChart) => {
           const tags = chart.keywords;
           const chartName = chart.name;
+          const chartVersion = chart.version;
+          const appVersion = chart.appVersion;
           const tileName = `${_.startCase(chartName)} v${chart.version}`;
           const tileImgUrl = chart.icon || getImageForIconClass('icon-helm');
-          const chartURL = encodeURIComponent(_.get(chart, 'urls.0'));
+          const chartURL = _.get(chart, 'urls.0');
+          const encodedChartURL = encodeURIComponent(chartURL);
+          const markdownDescription = async () => {
+            let chartData;
+            try {
+              chartData = await coFetchJSON(`/api/helm/chart?url=${chartURL}`);
+            } catch {
+              return null;
+            }
+            const readmeFile = chartData?.files?.find((file) => file.name === 'README.md');
+            const readmeData = readmeFile?.data && atob(readmeFile?.data);
+            return readmeData && `## README\n${readmeData}`;
+          };
+
+          const maintainers = chart.maintainers?.length > 0 && (
+            <>
+              {chart.maintainers?.map((maintainer) => (
+                <>
+                  {maintainer.name}
+                  <br />
+                  <a href={`mailto:${maintainer.email}`}>{maintainer.email}</a>
+                  <br />
+                </>
+              ))}
+            </>
+          );
+
+          const homePage = (
+            <ExternalLink href={chart.home} additionalClassName="co-break-all" text={chart.home} />
+          );
+
+          const customProperties = (
+            <>
+              <PropertyItem label="Chart Version" value={chartVersion} />
+              <PropertyItem label="App Version" value={appVersion} />
+              <PropertyItem label="Home Page" value={homePage} />
+              {maintainers && <PropertyItem label="Maintainers" value={maintainers} />}
+            </>
+          );
+
+          const obj = {
+            ...chart,
+            ...{ metadata: { uid: chart.digest, creationTimestamp: chart.created } },
+          };
 
           normalizedCharts.push({
-            obj: { ...chart, ...{ metadata: { uid: chart.digest } } },
+            obj,
             kind: 'HelmChart',
             tileName,
             tileIconClass: null,
             tileImgUrl,
             tileDescription: chart.description,
             tags,
             createLabel: 'Install Helm Chart',
-            tileProvider: _.get(chart, 'maintainers.0.name'),
-            documentationUrl: chart.home,
-            supportUrl: chart.home,
-            href: `/catalog/helm-install?chartName=${chartName}&chartURL=${chartURL}&preselected-ns=${currentNamespace}`,
+            markdownDescription,
+            customProperties,
+            href: `/catalog/helm-install?chartName=${chartName}&chartURL=${encodedChartURL}&preselected-ns=${currentNamespace}`,
           });
         });
         return normalizedCharts;