chore: optimize UI for copying metric requests (#155)

* chore: optimize UI for copying metric requests

* chore: update release notes

docs/content.en/docs/release-notes/_index.md

@@ -24,6 +24,7 @@ Information about release notes of INFINI Console is provided here.
 - Update agent config with cluster name (#148)
 - Optimize UI of histogram and datepicker in discover (#151)
 - Support viewing logs for cluster, node, index health change events (#150)
+- Optimize UI for copying metric requests (#155)
 
 ## 1.28.2 (2025-02-15)
 

docs/content.zh/docs/release-notes/_index.md

@@ -24,6 +24,7 @@ title: "版本历史"
 - 优化下发给 Agent 的配置，增加集群名称 (#148)
 - 优化柱状图和时间选择器的 UI (#151)
 - 集群，节点，索引健康状态变更支持查看日志 (#150)
+- 优化监控报表里拷贝指标请求的 UI (#155)
 
 ## 1.28.2 (2025-02-15)
 

web/src/pages/Platform/Overview/components/MetricChart.jsx

@@ -324,6 +324,19 @@ export default (props) => {
   
     return (
       <div key={metricKey} ref={containerRef} className={className} style={style}>
+        {
+                metric?.request && (
+                  <CopyToClipboard text={`GET .infini_metrics/_search\n${metric.request}`}>
+                    <Tooltip title={formatMessage({id: "cluster.metrics.request.copy"})}>
+                      <Icon 
+                        className="copyReq"
+                        type="copy" 
+                        onClick={() => message.success(formatMessage({id: "cluster.metrics.request.copy.success"}))}
+                      />
+                    </Tooltip>
+                  </CopyToClipboard>
+                )
+              }
         <Spin spinning={loading}>
         <div className={styles.vizChartItemTitle}>
           <span>
@@ -339,20 +352,6 @@ export default (props) => {
                   </Tooltip>
                 )
               }
-              {
-                metric?.request && (
-                  <CopyToClipboard text={`GET .infini_metrics/_search\n${metric.request}`}>
-                    <Tooltip title={formatMessage({id: "cluster.metrics.request.copy"})}>
-                      <Icon 
-                        className={styles.copy}
-                        style={{ marginRight: 12 }} 
-                        type="copy" 
-                        onClick={() => message.success(formatMessage({id: "cluster.metrics.request.copy.success"}))}
-                      />
-                    </Tooltip>
-                  </CopyToClipboard>
-                )
-              }
               <Tooltip title={formatMessage({id: "form.button.refresh"})}>
                 <Icon className={styles.copy} type="sync" onClick={() => fetchData(...observerRef.current.deps, true)}/>
               </Tooltip>

web/src/pages/Platform/Overview/components/Metrics.scss

@@ -25,6 +25,28 @@
   }
 }
 
+.vizChartContainer{
+  position: relative;
+  .copyReq {
+    cursor: pointer;
+    position: absolute;
+    display: none;
+    right: 3px;
+    bottom: 0px;
+    width: 24px;
+    height: 24px;
+    z-index: 11;
+    &:hover {
+      color: #1890ff;
+    }
+  }
+  &:hover {
+    .copyReq {
+        display: block;
+    }
+}
+}
+
 .vizChartItem {
   background: white !important;