fix: Fix custom monitoring styles

Signed-off-by: leoliu <leoliu@yunify.com>
kubesphere · Jul 27, 2020 · b9ba574 · b9ba574
1 parent 8e827fa
commit b9ba574
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 108 deletions.
diff --git a/src/assets/bar-chart.svg b/src/assets/bar-chart.svg
diff --git a/src/assets/line-chart.svg b/src/assets/line-chart.svg
diff --git a/src/assets/new-custom-monitor-position-right.png b/src/assets/new-custom-monitor-position-right.png
diff --git a/src/assets/table-chart.svg b/src/assets/table-chart.svg
diff --git a/src/components/Modals/CustomMonitoring/components/FormGroupCard/index.jsx b/src/components/Modals/CustomMonitoring/components/FormGroupCard/index.jsx
@@ -17,12 +17,13 @@
  */
 
 import React from 'react'
+import classNames from 'classnames'
 
 import styles from './index.scss'
 
-export default function FromGroupCard({ children, label }) {
+export default function FromGroupCard({ className, children, label }) {
   return (
-    <div className={styles.wrapper}>
+    <div className={classNames(styles.wrapper, className)}>
       <header>{label}</header>
       <div>{children}</div>
     </div>

diff --git a/src/components/Modals/CustomMonitoring/components/FormInput/GraphType/index.jsx b/src/components/Modals/CustomMonitoring/components/FormInput/GraphType/index.jsx
@@ -17,41 +17,37 @@
  */
 
 import React from 'react'
-import classnames from 'classnames'
 
-import { ReactComponent as BarIcon } from 'src/assets/bar-chart.svg'
-import { ReactComponent as TextIcon } from 'src/assets/single-stat-logo.svg'
-import { ReactComponent as LineIcon } from 'src/assets/line-chart.svg'
-import { ReactComponent as TableIcon } from 'src/assets/table-chart.svg'
+import { Icon } from '@pitrix/lego-ui'
 
 import styles from './index.scss'
 
 export default function GraphType({ type }) {
   const map = {
     singlestat: {
       i18n: t('SINGLE_STATE_CHART'),
-      Icon: TextIcon,
+      icon: 'text',
     },
     line: {
       i18n: t('LINE_CHART'),
-      Icon: LineIcon,
+      icon: 'linechart',
     },
     bar: {
       i18n: t('BAR_CHART'),
-      Icon: BarIcon,
+      icon: 'barchart',
     },
     table: {
       i18n: t('TABLE'),
-      Icon: TableIcon,
+      icon: 'table-chart',
     },
   }
-  const Icon = map[type].Icon
+  const icon = map[type].icon
   const title = map[type].i18n
   return (
-    <div className={classnames(styles.wrapper, styles[type])}>
-      <header>{t('GRAPH_TYPES')}</header>
+    <div className={styles.wrapper}>
+      <header>{t('CHART_TYPES')}</header>
       <div>
-        <Icon className={styles.icon} />
+        <Icon name={icon} type="light" size={40} />
         <h3>{title}</h3>
       </div>
     </div>

diff --git a/src/components/Modals/CustomMonitoring/components/FormInput/GraphType/index.scss b/src/components/Modals/CustomMonitoring/components/FormInput/GraphType/index.scss
@@ -19,54 +19,12 @@
     padding: 10px;
 
     h3 {
-      @include TypographySymbolText($white)
+      @include TypographySymbolText($white);
     }
     picture {
       display: inline-block;
       width: 40px;
       height: 40px;
     }
   }
-
-}
-
-.icon {
-  width: 40px;
-  height: 40px;
-  path {
-    fill: $white;
-  }
-}
-
-.singlestat {
-  // & > div {
-  //   background-image: url(/assets/single-stat-type-icon.svg);
-  // }
-  picture {
-    background-image: url(/assets/single-stat-logo.svg);
-  }
-}
-
-.line {
-  // & > div {
-  //   background-image: url(/assets/line-chart.svg);
-  // }
 }
-
-.bar {
-  picture {
-    background-image: url(/assets/bar-chart.svg);
-  }
-  picture {
-    background-image: url(/assets/bar-chart.svg);
-  }
-}
-
-.table {
-  & > div {
-    background-image: url(/assets/table-chart.svg);
-  }
-  picture {
-    background-image: url(/assets/table-chart.svg);
-  }
-}
diff --git 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,
     },
   }
 
@@ -104,8 +97,8 @@ export default class GraphTypeSelectModal extends Component {
         onOk={this.onOk}
       >
         <div className={styles.wrapper}>
-          <FormGroupCard label={t('GRAPH_TYPES')}>
-            {Object.entries(this.typeConfig).map(([key, Message]) => (
+          <FormGroupCard label={t('CHART_TYPES')}>
+            {Object.entries(this.typeConfig).map(([key, message]) => (
               <div
                 key={key}
                 data-type={key}
@@ -117,8 +110,13 @@ export default class GraphTypeSelectModal extends Component {
                     [styles.select]: key === type,
                   })}
                 >
-                  <Message.Icon className={styles.icon} />
-                  <h4>{Message.name}</h4>
+                  <Icon
+                    className={styles.icon}
+                    name={message.icon}
+                    size={40}
+                    type={key === type ? 'light' : 'dark'}
+                  />
+                  <h4>{message.name}</h4>
                 </div>
               </div>
             ))}
@@ -132,7 +130,20 @@ export default class GraphTypeSelectModal extends Component {
           ))}
           <FormGroupCard label={t('DISPLAY_POSITION')}>
             <div className={styles.position}>
-              <img src={config.postionIMG} alt="right" />
+              <div className={styles.navs}>
+                <div />
+                <div />
+              </div>
+              <div className={styles.placeholderWrapper}>
+                <div className={styles.placeholder}>
+                  <div className="text-center">
+                    <Icon name={config.icon} size={40} />
+                    <div className="margin-t12">
+                      {t('EMPTY_CHART_PLACEHOLDER')}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </FormGroupCard>
         </div>

diff --git 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();
+      }
+    }
   }
-}
+}
diff --git a/src/components/Modals/CustomMonitoring/containers/GraphMonitorForm.jsx b/src/components/Modals/CustomMonitoring/containers/GraphMonitorForm.jsx
@@ -84,7 +84,7 @@ export default class GraphMonitorForm extends Component {
         sidebar={
           <>
             <GraphTextInput type={this.monitor.config.lines ? 'line' : 'bar'} />
-            <FormGroupCard label={t('GRAPH_TYPES')}>
+            <FormGroupCard className="margin-t12" label={t('GRAPH_TYPES')}>
               <Form.Item>
                 <FormItemContainer name={'stack'} debounce={100}>
                   {({ onChange, value }) => (

diff --git a/src/components/Modals/CustomMonitoring/containers/TableMonitorForm.jsx b/src/components/Modals/CustomMonitoring/containers/TableMonitorForm.jsx
@@ -44,10 +44,7 @@ export default class TableMonitorForm extends Component {
   render() {
     return (
       <EditMonitorFormLayou
-        preview={
-          <div />
-          // <SingleStatGraph data={128} description={this.monitor.config.title} />
-        }
+        preview={<div />}
         sidebar={<GraphTextInput type={'table'} />}
         main={
           <>

diff --git a/src/locales/en/monitoring.js b/src/locales/en/monitoring.js
@@ -141,7 +141,8 @@ export default {
   ADD_MONITOR_ROW: 'Add Monitoring Group',
   SELECT_CHART_TYPE: 'Select a Chart Type',
   SELECT_CHART_TYPE_MODAL_DESC: 'Select a customized chart type',
-  GRAPH_TYPES: 'Chart Types',
+  CHART_TYPES: 'Chart Types',
+  GRAPH_TYPES: 'Graph Types',
   LINE_CHART: 'Line Chart',
   BAR_CHART: 'Bar Chart',
   SINGLE_STATE_CHART: 'Real-time Text',

diff --git a/src/locales/es/monitoring.js b/src/locales/es/monitoring.js
@@ -139,7 +139,7 @@ export default {
   ADD_MONITOR_ROW: 'Agregar grupo de monitorización',
   SELECT_CHART_TYPE: 'Selecciona un tipo de gráfico',
   SELECT_CHART_TYPE_MODAL_DESC: 'Selecciona un tipo de gráfico personalizado',
-  GRAPH_TYPES: 'Tipos de gráfico',
+  CHART_TYPES: 'Tipos de gráfico',
   LINE_CHART: 'Gráfico de línea',
   BAR_CHART: 'Gráfico de barras',
   SINGLE_STATE_CHART: 'Texto en tiempo real',

diff --git a/src/locales/tc/monitoring.js b/src/locales/tc/monitoring.js
@@ -137,6 +137,7 @@ export default {
   SINGLE_GRAPH_TYPE_NAME: '基礎圖',
   STACKED_GRAPH_TYPE: '堆疊圖',
   STACKED_GRAPH_TYPE_DESC: '適用於各大類總量及分量之間的對比顯示',
+  CHART_TYPES: '圖表類型',
   GRAPH_TYPES: '圖例類型',
   ADD_MONITOR_ITEM: '添加監控項',
   ADD_MONITOR_ROW: '添加監控組',

diff --git a/src/locales/zh/monitoring.js b/src/locales/zh/monitoring.js
@@ -137,6 +137,7 @@ export default {
   SINGLE_GRAPH_TYPE_NAME: '基础图',
   STACKED_GRAPH_TYPE: '堆叠图',
   STACKED_GRAPH_TYPE_DESC: '适用于各大类总量及分量之间的对比显示',
+  CHART_TYPES: '图表类型',
   GRAPH_TYPES: '图例类型',
   ADD_MONITOR_ITEM: '添加监控项',
   ADD_MONITOR_ROW: '添加监控组',
@@ -175,6 +176,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
@@ -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) {