fix: Fix custom monitoring styles

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

Hide file tree

Showing 8 changed files with 76 additions and 42 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/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 {
       >
         <div className={styles.wrapper}>
           <FormGroupCard label={t('GRAPH_TYPES')}>
-            {Object.entries(this.typeConfig).map(([key, Message]) => (
+            {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/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
@@ -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) {