feat(console): show chart icon and readme

jianzzz · Sep 25, 2020 · c45ef42 · c45ef42
1 parent c0e409a
commit c45ef42
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 28 deletions.
diff --git a/web/console/public/static/image/chart-icon-48x48.png b/web/console/public/static/image/chart-icon-48x48.png
diff --git a/web/console/src/modules/application/components/app/ChartTablePanel.tsx b/web/console/src/modules/application/components/app/ChartTablePanel.tsx
@@ -118,26 +118,45 @@ export class ChartTablePanel extends React.Component<Props, ChartTableState> {
  <Card.Body
  title={
  <div style={{ cursor: 'pointer' }} onClick={e => {}}>
- {chart.spec.chartGroupName +
- ' / ' +
- chart.spec.name +
- '(' +
- (cgMap[chart.spec.chartGroupName]
- ? typeMap[cgMap[chart.spec.chartGroupName].spec.type]
- : '-') +
- ')'}
+ <Justify
+ className={`app-tke-fe-apply__card-hd`}
+ left={
+ <MediaObject
+ media={
+ <img
+ style={{ height: '48px' }}
+ src={
+ chart.lastVersion && chart.lastVersion.icon
+ ? chart.lastVersion.icon
+ : '/static/image/chart-icon-48x48.png'
+ }
+ alt=""
+ />
+ }
+ align="middle"
+ >
+ {''}
+ </MediaObject>
+ }
+ />
+ {chart.spec.chartGroupName + ' / ' + chart.spec.name}
  </div>
  }
  subtitle={
  <React.Fragment>
- <Tag key={chart.lastVersion ? chart.lastVersion.version : 'empty'}>
- {chart.lastVersion ? chart.lastVersion.version : t('空')}
- </Tag>
- <Tag key={'visibility'}>
+ <Tag style={{ marginLeft: '-5px' }} theme="primary" key={'visibility'}>
  {cgMap[chart.spec.chartGroupName]
  ? visibilityMap[cgMap[chart.spec.chartGroupName].spec.visibility]
  : '-'}
  </Tag>
+ <Tag theme="primary" key={'type'}>
+ {cgMap[chart.spec.chartGroupName]
+ ? typeMap[cgMap[chart.spec.chartGroupName].spec.type]
+ : '-'}
+ </Tag>
+ <Tag theme="primary" key={chart.lastVersion ? chart.lastVersion.version : 'version'}>
+ {chart.lastVersion ? chart.lastVersion.version : t('空')}
+ </Tag>
  </React.Fragment>
  }
  >

diff --git a/web/console/src/modules/application/models/Chart.ts b/web/console/src/modules/application/models/Chart.ts
@@ -32,6 +32,8 @@ export interface ChartVersion {
  description?: string;
  timeCreated?: string;
  version?: string;
+ icon?: string;
+ appVersion?: string;
 }
 
 export interface ChartFilter {

diff --git a/web/console/src/modules/registry/actions/chart/detailActions.ts b/web/console/src/modules/registry/actions/chart/detailActions.ts
@@ -218,7 +218,7 @@ const fetchChartActions = createFFObjectActions<Chart, ChartDetailFilter>({
 
  let { route } = getState(),
  urlParam = router.resolve(route);
- if (urlParam['tab'] && urlParam['tab'] === 'file') {
+ if (!urlParam['tab'] || urlParam['tab'] === 'detail' || urlParam['tab'] === 'file') {
  //请求文件目录树
  dispatch(
  detailActions.chartInfo.applyFilter({

diff --git a/web/console/src/modules/registry/components/chart/detail/BasicInfoPanel.tsx b/web/console/src/modules/registry/components/chart/detail/BasicInfoPanel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { RootProps } from '../ChartApp';
 import { FormPanel } from '@tencent/ff-component';
-import { TipInfo, getWorkflowError, InputField } from '../../../../../modules/common';
+import { TipInfo, getWorkflowError, InputField, Markdown } from '../../../../../modules/common';
 import { Button, Tabs, TabPanel, Card, Bubble, Icon, ContentView, Drawer } from '@tea/component';
 import { dateFormat } from '../../../../../../helpers/dateUtil';
 import { t, Trans } from '@tencent/tea-app/lib/i18n';
@@ -31,8 +31,7 @@ export class BasicInfoPanel extends React.Component<RootProps, AppCreateState> {
  }
 
  render() {
- let { actions, chartEditor, appCreation, route, chartValidator } = this.props;
-
+ let { actions, chartEditor, chartInfo, appCreation, route, chartValidator } = this.props;
  let action = actions.chart.detail.updateChartWorkflow;
  const { chartUpdateWorkflow } = this.props;
  const workflow = chartUpdateWorkflow;
@@ -131,6 +130,21 @@ export class BasicInfoPanel extends React.Component<RootProps, AppCreateState> {
  projectID: route.queries['prj']
  }}
  />
+ {chartInfo &&
+ chartInfo.object &&
+ chartInfo.object.data &&
+ chartInfo.object.data.spec &&
+ chartInfo.object.data.spec.readme &&
+ JSON.stringify(chartInfo.object.data.spec.readme) !== '{}' && (
+ <Card>
+ <Card.Body>
+ <Markdown
+ style={{ maxHeight: 700, overflow: 'auto' }}
+ text={Object.values(chartInfo.object.data.spec.readme)[0] || t('空')}
+ />
+ </Card.Body>
+ </Card>
+ )}
  </ContentView.Body>
  </ContentView>
  );

diff --git a/web/console/src/modules/registry/components/chart/list/TablePanel.tsx b/web/console/src/modules/registry/components/chart/list/TablePanel.tsx
@@ -111,26 +111,43 @@ export class TablePanel extends React.Component<RootProps, ChartTableState> {
  );
  }}
  >
- {chart.spec.chartGroupName +
- ' / ' +
- chart.spec.name +
- '(' +
- (cgMap[chart.spec.chartGroupName]
- ? typeMap[cgMap[chart.spec.chartGroupName].spec.type]
- : '-') +
- ')'}
+ <Justify
+ className={`app-tke-fe-apply__card-hd`}
+ left={
+ <MediaObject
+ media={
+ <img
+ style={{ height: '48px' }}
+ src={
+ chart.lastVersion && chart.lastVersion.icon
+ ? chart.lastVersion.icon
+ : '/static/image/chart-icon-48x48.png'
+ }
+ alt=""
+ />
+ }
+ align="middle"
+ >
+ {''}
+ </MediaObject>
+ }
+ />
+ {chart.spec.chartGroupName + ' / ' + chart.spec.name}
  </div>
  }
  subtitle={
  <React.Fragment>
- <Tag key={chart.lastVersion ? chart.lastVersion.version : 'empty'}>
- {chart.lastVersion ? chart.lastVersion.version : t('空')}
- </Tag>
- <Tag key={'visibility'}>
+ <Tag style={{ marginLeft: '-5px' }} theme="primary" key={'visibility'}>
  {cgMap[chart.spec.chartGroupName]
  ? visibilityMap[cgMap[chart.spec.chartGroupName].spec.visibility]
  : '-'}
  </Tag>
+ <Tag theme="primary" key={'type'}>
+ {cgMap[chart.spec.chartGroupName] ? typeMap[cgMap[chart.spec.chartGroupName].spec.type] : '-'}
+ </Tag>
+ <Tag theme="primary" key={chart.lastVersion ? chart.lastVersion.version : 'version'}>
+ {chart.lastVersion ? chart.lastVersion.version : t('空')}
+ </Tag>
  </React.Fragment>
  }
  >

diff --git a/web/console/src/modules/registry/models/Chart.ts b/web/console/src/modules/registry/models/Chart.ts
@@ -32,6 +32,8 @@ export interface ChartVersion extends Identifiable {
  description?: string;
  timeCreated?: string;
  version?: string;
+ icon?: string;
+ appVersion?: string;
 }
 
 export interface RemovedChartVersions {