diff --git a/src/assets/bar-chart.svg b/src/assets/bar-chart.svg deleted file mode 100644 index d0ff0d8564f..00000000000 --- a/src/assets/bar-chart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/line-chart.svg b/src/assets/line-chart.svg deleted file mode 100644 index b37bad66a12..00000000000 --- a/src/assets/line-chart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/new-custom-monitor-position-right.png b/src/assets/new-custom-monitor-position-right.png deleted file mode 100644 index fbefbd3004c..00000000000 Binary files a/src/assets/new-custom-monitor-position-right.png and /dev/null differ diff --git a/src/assets/table-chart.svg b/src/assets/table-chart.svg deleted file mode 100644 index 0787acef391..00000000000 --- a/src/assets/table-chart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.jsx b/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.jsx index 476b1ff93dc..ff89399973e 100644 --- a/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.jsx +++ b/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.jsx @@ -20,12 +20,7 @@ import React, { Component } from 'react' import classnames from 'classnames' import { Modal } from 'components/Base' - -import { ReactComponent as BarIcon } from 'src/assets/bar-chart.svg' -import { ReactComponent as LineIcon } from 'src/assets/line-chart.svg' -// import { ReactComponent as TableIcon } from 'src/assets/table-chart.svg' - -import positionPreviewRight from 'src/assets/new-custom-monitor-position-right.png' +import { Icon } from '@pitrix/lego-ui' import FormGroupCard from '../FormGroupCard' import styles from './index.scss' @@ -40,7 +35,7 @@ export default class GraphTypeSelectModal extends Component { */ typeConfig = { line: { - Icon: LineIcon, + icon: 'linechart', name: t('LINE_CHART'), desc: [ { @@ -56,10 +51,9 @@ export default class GraphTypeSelectModal extends Component { description: t('STACK_LINE_CHART_DESC'), }, ], - postionIMG: positionPreviewRight, }, bar: { - Icon: BarIcon, + icon: 'barchart', name: t('BAR_CHART'), desc: [ { @@ -75,7 +69,6 @@ export default class GraphTypeSelectModal extends Component { description: t('STACK_BAR_CHART_DESC'), }, ], - postionIMG: positionPreviewRight, }, } @@ -105,7 +98,7 @@ export default class GraphTypeSelectModal extends Component { >
- {Object.entries(this.typeConfig).map(([key, Message]) => ( + {Object.entries(this.typeConfig).map(([key, message]) => (
- -

{Message.name}

+ +

{message.name}

))} @@ -132,7 +130,20 @@ export default class GraphTypeSelectModal extends Component { ))}
- right +
+
+
+
+
+
+
+ +
+ {t('EMPTY_CHART_PLACEHOLDER')} +
+
+
+
diff --git a/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.scss b/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.scss index 0a6d374afac..167ec38a18c 100644 --- a/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.scss +++ b/src/components/Modals/CustomMonitoring/components/GraphTypeSelectModal/index.scss @@ -19,31 +19,16 @@ display: inline-block; } - .select { - .icon { - path { - fill: $white; - } - } - } - - .icon { - width: 40px; - height: 40px; - path { - fill: $dark-color06; - } - } - .typeOpt { flex: 1; margin-right: 12px; height: 80px; text-align: center; display: flex; - align-items: center; + align-items: center; flex-direction: column; justify-content: center; + transition: all $trans-speed ease-in-out; img { width: 40px; height: 40px; @@ -52,6 +37,10 @@ @include TypographySymbolText($dark-color06); } + &:hover { + background-color: $light-color07; + } + &.select { h4 { color: $white; @@ -61,6 +50,48 @@ } .position { + display: flex; height: 240px; + padding: 20px; + padding-bottom: 0px; + margin: -8px; + background-color: $light-color02; + + .navs { + width: 140px; + & > div { + margin-bottom: 8px; + height: 20px; + border-radius: 1px; + + &:nth-child(1) { + width: 78px; + background-color: $dark-color01; + } + &:nth-child(2) { + width: 140px; + background-color: $light-color06; + } + } + } + + .placeholderWrapper { + flex: 1; + padding: 20px; + margin-left: 20px; + background-color: $white; + + .placeholder { + display: flex; + width: 100%; + height: 180px; + border-radius: 1px; + border: dashed 1px $blue-color03; + background-color: rgba(199, 222, 239, 0.4); + justify-content: center; + align-items: center; + @include TypographySymbolText(); + } + } } -} \ No newline at end of file +} diff --git a/src/locales/zh/monitoring.js b/src/locales/zh/monitoring.js index 478bd4f401a..a8348b606d7 100644 --- a/src/locales/zh/monitoring.js +++ b/src/locales/zh/monitoring.js @@ -175,6 +175,7 @@ export default { '堆叠柱状图是柱状图的扩展，不同的是，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比，因此非常适合处理部分与整体的关系。', SELECT_CHART_TYPE: '选择图表类型', SELECT_CHART_TYPE_MODAL_DESC: '选择您要添加的自定义图表类型', + EMPTY_CHART_PLACEHOLDER: '图表将显示在此区域', DISPLAY_POSITION: '图表布局位置', DISPLAY_FORMAT: '显示格式', FIELD_NAME: '字段名称', diff --git a/src/utils/status.js b/src/utils/status.js index 5e1cd17364a..aba288f1591 100644 --- a/src/utils/status.js +++ b/src/utils/status.js @@ -71,7 +71,7 @@ export const getStatefulSetStatus = ({ spec = {}, status = {} }) => { } export const getDaemonSetStatus = ({ status }) => { - if (status.numberAvailable === 0) { + if (status.desiredNumberScheduled === 0) { return 'Stopped' } if (status.numberAvailable === status.desiredNumberScheduled) {