feat: add metric detail panel (#113)

vesoft-inc · Aug 19, 2022 · 4cc0e62 · 4cc0e62
1 parent 2c3b436
commit 4cc0e62
Show file tree

Hide file tree

Showing 16 changed files with 607 additions and 276 deletions.
diff --git a/src/components/MachineDetail/index.less b/src/components/MachineDetail/index.less
diff --git a/src/components/MachineDetail/index.tsx b/src/components/MachineDetail/index.tsx
diff --git a/src/components/MetricsFilterPanel/index.tsx b/src/components/MetricsFilterPanel/index.tsx
@@ -142,6 +142,7 @@ const MetricsFilterPanel = (props: IProps, ref) => {
               allowClear
               className={styles.metricSelect} 
               mode="multiple" 
+              placeholder={intl.get('base.searchMetric')}
               onChange={handleMetricsSelectChange}
               style={{ minWidth: '250px', maxWidth: '500px' }}>
               {

diff --git a/src/config/locale/en-US/base.json b/src/config/locale/en-US/base.json
@@ -4,5 +4,8 @@
   "spaceChartInstance": "instance",
   "spaceChartDiskname": "Disk Name",
   "spaceChartMountpoint": "Mount Point",
-  "spaceChartDiskused": "Disk Used"
+  "spaceChartDiskused": "Disk Used",
+  "metricDetail": "Metric Detail",
+  "metricMonitor": "Metric Monitor",
+  "searchMetric": "Please Search Metric"
 }
diff --git a/src/config/locale/zh-CN/base.json b/src/config/locale/zh-CN/base.json
@@ -4,5 +4,8 @@
   "spaceChartInstance": "实例",
   "spaceChartDiskname": "磁盘名称",
   "spaceChartMountpoint": "挂载点",
-  "spaceChartDiskused": "已使用"
+  "spaceChartDiskused": "已使用",
+  "metricDetail": "指标详情",
+  "metricMonitor": "指标监控",
+  "searchMetric": "请搜索指标"
 }
diff --git a/src/pages/MachineDashboard/Detail/index.less b/src/pages/MachineDashboard/Detail/index.less
@@ -79,12 +79,6 @@
           justify-content: center;
         }
       }
-
-      >.base-line {
-        position: absolute;
-        top: 15px;
-        right: 24px;
-      }
     }
 
     @media screen and (max-width: 1960px) and (min-width: 1200px) {
@@ -111,4 +105,15 @@
   height: 16px;
   margin-left: 6px;
   width: 16px;
-}
+}
+
+.action-icons {
+  position: absolute;
+  top: 15px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+  justify-content: space-between;
+}
+