🎸 Optimize all table page (#84)

src/pages/alert/rule/index.css

@@ -56,3 +56,56 @@
     margin-left: auto;
     padding-left: 20px; /* 增加间距以使内容更易读 */
 }
+
+/* 状态容器 */
+.status-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* 小圆点 */
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    position: relative;
+}
+
+/* 启用状态的小圆点 */
+.status-enabled {
+    background-color: #52c41a; /* 绿色 */
+    animation: pulse-enabled 1.5s infinite;
+}
+
+/* 禁用状态的小圆点 */
+.status-disabled {
+    background-color: #ff4d4f; /* 红色 */
+    animation: pulse-disabled 1.5s infinite;
+}
+
+/* 启用状态动态效果 */
+@keyframes pulse-enabled {
+    0% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+    }
+}
+
+/* 禁用状态动态效果 */
+@keyframes pulse-disabled {
+    0% {
+        box-shadow: 0 0 0 0 rgba(196, 26, 26, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+    }
+}

src/pages/alert/rule/index.jsx

@@ -103,9 +103,12 @@ export const AlertRuleList = () => {
             key: 'enabled',
             width: 'auto',
             render: enabled => (
-                enabled ?
-                    <Tag color="success">启用</Tag> :
-                    <Tag color="error">禁用</Tag>
+                <div className="status-container">
+                    <div
+                        className={`status-dot ${enabled ? 'status-enabled' : 'status-disabled'}`}
+                    />
+                    <span>{enabled ? '启用' : '禁用'}</span>
+                </div>
             ),
         },
         {
@@ -244,6 +247,7 @@ export const AlertRuleList = () => {
     }
 
     const changeStatus = async ({ target: { value } }) => {
+        setPagination({ ...pagination, index: 1, size: pagination.size });
         setSelectRuleStatus(value)
     }
 
@@ -340,8 +344,12 @@ export const AlertRuleList = () => {
                     }}
                     onChange={handlePageChange}
                     scroll={{
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </>

src/pages/alert/ruleGroup/index.jsx

@@ -223,8 +223,12 @@ export const AlertRuleGroup = ({ }) => {
                     }}
                     onChange={handlePageChange}
                     scroll={{
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </>

src/pages/alert/tmpl/index.jsx

@@ -276,7 +276,13 @@ export const RuleTemplate = () => {
                 <Table
                     columns={columns}
                     dataSource={list}
-                    scroll={{ x: 1000, y: height - 400 }}
+                    scroll={{
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
+                    }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </>

src/pages/alert/tmplGroup/index.jsx

@@ -261,7 +261,13 @@ export const RuleTemplateGroup = () => {
                     <Table
                         columns={columns}
                         dataSource={list}
-                        scroll={{ y: height - 400 }}
+                        scroll={{
+                            y: height - 400, // 动态设置滚动高度
+                            x: 'max-content', // 水平滚动
+                        }}
+                        bordered // 添加表格边框
+                        style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                        rowKey={(record) => record.id} // 设置行唯一键
                     />
                 </div>
             </div>

src/pages/audit/index.jsx

@@ -254,8 +254,12 @@ export const AuditLog = () => {
                     }}
                     onChange={handlePageChange}
                     scroll={{
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </div>

src/pages/dashboards/folder/index.jsx

@@ -172,9 +172,12 @@ export const DashboardFolder = () => {
                     columns={columns}
                     dataSource={list}
                     scroll={{
-                        x: 1000,
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </>

src/pages/datasources/index.css

@@ -0,0 +1,53 @@
+
+/* 状态容器 */
+.status-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* 小圆点 */
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    position: relative;
+}
+
+/* 启用状态的小圆点 */
+.status-enabled {
+    background-color: #52c41a; /* 绿色 */
+    animation: pulse-enabled 1.5s infinite;
+}
+
+/* 禁用状态的小圆点 */
+.status-disabled {
+    background-color: #ff4d4f; /* 红色 */
+    animation: pulse-disabled 1.5s infinite;
+}
+
+/* 启用状态动态效果 */
+@keyframes pulse-enabled {
+    0% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+    }
+}
+
+/* 禁用状态动态效果 */
+@keyframes pulse-disabled {
+    0% {
+        box-shadow: 0 0 0 0 rgba(196, 26, 26, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+    }
+}

src/pages/datasources/index.jsx

@@ -10,6 +10,7 @@ import { ReactComponent as LokiImg } from "../alert/rule/img/L.svg"
 import { ReactComponent as VMImg } from "../alert/rule/img/victoriametrics.svg"
 import { ReactComponent as K8sImg } from "../alert/rule/img/Kubernetes.svg"
 import { ReactComponent as ESImg } from "../alert/rule/img/ElasticSearch.svg"
+import './index.css'
 
 export const Datasources = () => {
     const { Search } = Input
@@ -75,9 +76,12 @@ export const Datasources = () => {
             dataIndex: 'enabled',
             key: 'enabled',
             render: enabled => (
-                enabled ?
-                    <Tag color="success">启用</Tag> :
-                    <Tag color="error">禁用</Tag>
+                <div className="status-container">
+                    <div
+                        className={`status-dot ${enabled ? 'status-enabled' : 'status-disabled'}`}
+                    />
+                    <span>{enabled ? '启用' : '禁用'}</span>
+                </div>
             ),
         },
         {
@@ -208,9 +212,12 @@ export const Datasources = () => {
                     dataSource={list}
                     columns={columns}
                     scroll={{
-                        x: 1000,
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
 

src/pages/duty/index.jsx

@@ -200,8 +200,12 @@ export const DutyManage = () => {
                     columns={columns}
                     dataSource={list}
                     scroll={{
-                        y: height-400
+                        y: height - 400, // 动态设置滚动高度
+                        x: 'max-content', // 水平滚动
                     }}
+                    bordered // 添加表格边框
+                    style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                    rowKey={(record) => record.id} // 设置行唯一键
                 />
             </div>
         </>

src/pages/event/index.jsx

@@ -22,6 +22,12 @@ export const AlertEvent = () => {
             key: 'rule_name',
             width: 'auto',
         },
+        {
+            title: '告警指纹',
+            dataIndex: 'fingerprint',
+            key: 'fingerprint',
+            width: 'auto',
+        },
         {
             title: '数据源',
             dataIndex: 'datasourceId',
@@ -42,8 +48,8 @@ export const AlertEvent = () => {
                 <div style={{display: 'flex', alignItems: 'center'}}>
                     <div
                         style={{
-                            width: '10px',
-                            height: '10px',
+                            width: '8px',
+                            height: '8px',
                             backgroundColor: severityColors[text],
                             borderRadius: '50%',
                             marginRight: '8px',
@@ -57,7 +63,7 @@ export const AlertEvent = () => {
             title: '事件标签',
             dataIndex: 'metric',
             key: 'metric',
-            width: 350,
+            width: 250,
             render: (text, record) => (
                 <span>{showMoreTags([], record)}</span>
             ),
@@ -94,7 +100,7 @@ export const AlertEvent = () => {
             title: '操作',
             dataIndex: 'operation',
             fixed: 'right',
-            width: 200,
+            width: 100,
             render: (_, record) =>
                 currentEventList.length >= 1 ? (
                     <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
@@ -118,6 +124,12 @@ export const AlertEvent = () => {
             key: 'rule_name',
             width: 'auto',
         },
+        {
+            title: '告警指纹',
+            dataIndex: 'fingerprint',
+            key: 'fingerprint',
+            width: 'auto',
+        },
         {
             title: '数据源',
             dataIndex: 'datasourceId',
@@ -138,8 +150,8 @@ export const AlertEvent = () => {
                 <div style={{display: 'flex', alignItems: 'center'}}>
                     <div
                         style={{
-                            width: '10px',
-                            height: '10px',
+                            width: '8px',
+                            height: '8px',
                             backgroundColor: severityColors[text],
                             borderRadius: '50%',
                             marginRight: '8px',
@@ -153,7 +165,7 @@ export const AlertEvent = () => {
             title: '事件标签',
             dataIndex: 'metric',
             key: 'metric',
-            width: 350,
+            width: 250,
             render: (text, record) => (
                 <span>{showMoreTags([], record)}</span>
             ),
@@ -167,7 +179,7 @@ export const AlertEvent = () => {
                 <span>
                     {record.annotations && (
                         <span>
-                            {record.annotations.substring(0, 100)}
+                            {record.annotations.substring(0, 50)}
                             <Button type="link" onClick={() => { showDrawer(record.annotations) }}>
                                 查看详情
                             </Button>
@@ -679,8 +691,12 @@ export const AlertEvent = () => {
                         }}
                         onChange={handleCurrentPageChange}
                         scroll={{
-                            y: height-380
+                            y: height - 400, // 动态设置滚动高度
+                            x: 'max-content', // 水平滚动
                         }}
+                        bordered // 添加表格边框
+                        style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                        rowKey={(record) => record.id} // 设置行唯一键
                     />
                 ) || (
                     <Table
@@ -695,8 +711,12 @@ export const AlertEvent = () => {
                         }}
                         onChange={handleHistoryPageChange}
                         scroll={{
-                            y: height-380
+                            y: height - 400, // 动态设置滚动高度
+                            x: 'max-content', // 水平滚动
                         }}
+                        bordered // 添加表格边框
+                        style={{ backgroundColor: '#fff' }} // 设置表格背景色
+                        rowKey={(record) => record.id} // 设置行唯一键
                     />
                 )}
             </div>