From 080a58c31d22998cfab58c9ee6886b027fd32b5a Mon Sep 17 00:00:00 2001 From: Cairry Date: Sun, 29 Dec 2024 14:33:54 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=B8=20Optimize=20all=20table=20page=20?= =?UTF-8?q?(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/alert/rule/index.css | 53 ++++++++++++++++++++ src/pages/alert/rule/index.jsx | 16 ++++-- src/pages/alert/ruleGroup/index.jsx | 6 ++- src/pages/alert/tmpl/index.jsx | 8 ++- src/pages/alert/tmplGroup/index.jsx | 8 ++- src/pages/audit/index.jsx | 6 ++- src/pages/dashboards/folder/index.jsx | 7 ++- src/pages/datasources/index.css | 53 ++++++++++++++++++++ src/pages/datasources/index.jsx | 17 +++++-- src/pages/duty/index.jsx | 6 ++- src/pages/event/index.jsx | 40 +++++++++++---- src/pages/members/role/index.jsx | 7 ++- src/pages/members/user/index.jsx | 8 ++- src/pages/notice/history.jsx | 21 +++++--- src/pages/notice/index.jsx | 7 ++- src/pages/notice/tmpl/index.jsx | 7 ++- src/pages/probing/index.jsx | 24 +++++++-- src/pages/silence/SilenceRuleCreateModal.jsx | 7 ++- src/pages/silence/index.jsx | 7 ++- src/pages/subscribe/index.jsx | 6 ++- src/pages/tenant/index.jsx | 7 ++- 21 files changed, 270 insertions(+), 51 deletions(-) create mode 100644 src/pages/datasources/index.css diff --git a/src/pages/alert/rule/index.css b/src/pages/alert/rule/index.css index 6aefcb8..37bed27 100644 --- a/src/pages/alert/rule/index.css +++ b/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); + } +} \ No newline at end of file diff --git a/src/pages/alert/rule/index.jsx b/src/pages/alert/rule/index.jsx index b37fd66..aa780b0 100644 --- a/src/pages/alert/rule/index.jsx +++ b/src/pages/alert/rule/index.jsx @@ -103,9 +103,12 @@ export const AlertRuleList = () => { key: 'enabled', width: 'auto', render: enabled => ( - enabled ? - 启用 : - 禁用 +
+
+ {enabled ? '启用' : '禁用'} +
), }, { @@ -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} // 设置行唯一键 />
diff --git a/src/pages/alert/ruleGroup/index.jsx b/src/pages/alert/ruleGroup/index.jsx index 08011f0..27a4f69 100644 --- a/src/pages/alert/ruleGroup/index.jsx +++ b/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} // 设置行唯一键 /> diff --git a/src/pages/alert/tmpl/index.jsx b/src/pages/alert/tmpl/index.jsx index 77239e4..78d27b8 100644 --- a/src/pages/alert/tmpl/index.jsx +++ b/src/pages/alert/tmpl/index.jsx @@ -276,7 +276,13 @@ export const RuleTemplate = () => { record.id} // 设置行唯一键 /> diff --git a/src/pages/alert/tmplGroup/index.jsx b/src/pages/alert/tmplGroup/index.jsx index e5c6531..667420f 100644 --- a/src/pages/alert/tmplGroup/index.jsx +++ b/src/pages/alert/tmplGroup/index.jsx @@ -261,7 +261,13 @@ export const RuleTemplateGroup = () => {
record.id} // 设置行唯一键 /> diff --git a/src/pages/audit/index.jsx b/src/pages/audit/index.jsx index 692a85f..f3364b5 100644 --- a/src/pages/audit/index.jsx +++ b/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} // 设置行唯一键 /> diff --git a/src/pages/dashboards/folder/index.jsx b/src/pages/dashboards/folder/index.jsx index cc6dc19..abaf23f 100644 --- a/src/pages/dashboards/folder/index.jsx +++ b/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} // 设置行唯一键 /> diff --git a/src/pages/datasources/index.css b/src/pages/datasources/index.css new file mode 100644 index 0000000..1ac5800 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/pages/datasources/index.jsx b/src/pages/datasources/index.jsx index 5318dfe..6c37fc3 100644 --- a/src/pages/datasources/index.jsx +++ b/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 ? - 启用 : - 禁用 +
+
+ {enabled ? '启用' : '禁用'} +
), }, { @@ -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} // 设置行唯一键 />
diff --git a/src/pages/duty/index.jsx b/src/pages/duty/index.jsx index 2babc1e..ef08f3c 100644 --- a/src/pages/duty/index.jsx +++ b/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} // 设置行唯一键 /> diff --git a/src/pages/event/index.jsx b/src/pages/event/index.jsx index 82fbe97..ee079bc 100644 --- a/src/pages/event/index.jsx +++ b/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 = () => {
{ title: '事件标签', dataIndex: 'metric', key: 'metric', - width: 350, + width: 250, render: (text, record) => ( {showMoreTags([], record)} ), @@ -94,7 +100,7 @@ export const AlertEvent = () => { title: '操作', dataIndex: 'operation', fixed: 'right', - width: 200, + width: 100, render: (_, record) => currentEventList.length >= 1 ? (
@@ -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 = () => {
{ title: '事件标签', dataIndex: 'metric', key: 'metric', - width: 350, + width: 250, render: (text, record) => ( {showMoreTags([], record)} ), @@ -167,7 +179,7 @@ export const AlertEvent = () => { {record.annotations && ( - {record.annotations.substring(0, 100)} + {record.annotations.substring(0, 50)} @@ -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} // 设置行唯一键 /> ) || (
{ }} onChange={handleHistoryPageChange} scroll={{ - y: height-380 + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> )} diff --git a/src/pages/members/role/index.jsx b/src/pages/members/role/index.jsx index 125c3ed..904b793 100644 --- a/src/pages/members/role/index.jsx +++ b/src/pages/members/role/index.jsx @@ -146,9 +146,12 @@ export const UserRole = () => { columns={columns} dataSource={list} scroll={{ - x: 1000, - y: height-400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/members/user/index.jsx b/src/pages/members/user/index.jsx index 154b1d4..b449f3c 100644 --- a/src/pages/members/user/index.jsx +++ b/src/pages/members/user/index.jsx @@ -194,7 +194,13 @@ export const User = () => { columns={columns} dataSource={list} rowKey="userid" - scroll={{ x: 1500, y: height - 400 }} + scroll={{ + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 + }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/notice/history.jsx b/src/pages/notice/history.jsx index 31c3c21..52470c3 100644 --- a/src/pages/notice/history.jsx +++ b/src/pages/notice/history.jsx @@ -340,14 +340,19 @@ export const NoticeRecords = () => { }} /> -
+
+
record.id} // 设置行唯一键 + /> + ); diff --git a/src/pages/notice/index.jsx b/src/pages/notice/index.jsx index 99f2460..ca0694d 100644 --- a/src/pages/notice/index.jsx +++ b/src/pages/notice/index.jsx @@ -196,9 +196,12 @@ export const NoticeObjects = () => { columns={columns} dataSource={list} scroll={{ - x: 1000, - y: height-400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/notice/tmpl/index.jsx b/src/pages/notice/tmpl/index.jsx index d73ab5b..04d8046 100644 --- a/src/pages/notice/tmpl/index.jsx +++ b/src/pages/notice/tmpl/index.jsx @@ -186,9 +186,12 @@ export const NoticeTemplate = () => { columns={columns} dataSource={list} scroll={{ - x: 1000, - y: height-400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/probing/index.jsx b/src/pages/probing/index.jsx index 9616d53..8ac3c08 100644 --- a/src/pages/probing/index.jsx +++ b/src/pages/probing/index.jsx @@ -514,8 +514,12 @@ export const Probing = () => { dataSource={httpMonList} loading={loading} scroll={{ - y: height - 400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> )} @@ -525,8 +529,12 @@ export const Probing = () => { dataSource={icmpMonList} loading={loading} scroll={{ - y: height - 400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> )} @@ -536,8 +544,12 @@ export const Probing = () => { dataSource={tcpMonList} loading={loading} scroll={{ - y: height - 400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> )} {probingType === "SSL" && ( @@ -546,8 +558,12 @@ export const Probing = () => { dataSource={sslMonList} loading={loading} scroll={{ - y: height - 400, + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> )} diff --git a/src/pages/silence/SilenceRuleCreateModal.jsx b/src/pages/silence/SilenceRuleCreateModal.jsx index 5e3c443..bb69a36 100644 --- a/src/pages/silence/SilenceRuleCreateModal.jsx +++ b/src/pages/silence/SilenceRuleCreateModal.jsx @@ -30,6 +30,7 @@ export const CreateSilenceModal = ({ visible, onClose, selectedRow, type, handle form.setFieldsValue({ datasource_type: selectedRow.datasource_type, fingerprint: selectedRow.fingerprint, + comment: selectedRow.comment, }) } }, [selectedRow, form]) @@ -180,7 +181,11 @@ export const CreateSilenceModal = ({ visible, onClose, selectedRow, type, handle /> - + diff --git a/src/pages/silence/index.jsx b/src/pages/silence/index.jsx index 2cf3a77..8c5bb48 100644 --- a/src/pages/silence/index.jsx +++ b/src/pages/silence/index.jsx @@ -319,9 +319,12 @@ export const Silences = () => { columns={columns} dataSource={list} scroll={{ - x: 1500, - y: height-400 + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/subscribe/index.jsx b/src/pages/subscribe/index.jsx index 1b84c23..fadc7cd 100644 --- a/src/pages/subscribe/index.jsx +++ b/src/pages/subscribe/index.jsx @@ -195,8 +195,12 @@ export const Subscribe = () => { columns={columns} dataSource={list} scroll={{ - y: height-400 + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 /> diff --git a/src/pages/tenant/index.jsx b/src/pages/tenant/index.jsx index cb827ac..669872d 100644 --- a/src/pages/tenant/index.jsx +++ b/src/pages/tenant/index.jsx @@ -160,9 +160,12 @@ export const Tenants = () => { columns={columns} dataSource={list} scroll={{ - x: 1000, - y: height-400 + y: height - 400, // 动态设置滚动高度 + x: 'max-content', // 水平滚动 }} + bordered // 添加表格边框 + style={{ backgroundColor: '#fff' }} // 设置表格背景色 + rowKey={(record) => record.id} // 设置行唯一键 />