lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-04-24 04:17:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 站点监控支持监控IP

Browse Source
This commit is contained in:
xiaojunnuo
2025-05-28 00:57:52 +08:00
parent 88022747be
commit 9cc4c017ae
15 changed files with 999 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/certd-client/src/views/certd/monitor/site/crud.tsx
+51
View File
@@ -7,6 +7,7 @@ import { notification } from "ant-design-vue";
import { useSettingStore } from "/@/store/settings";
import { mySuiteApi } from "/@/views/certd/suite/mine/api";
import { mitter } from "/@/utils/util.mitt";
import { useSiteIpMonitor } from "./ip/use";
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const { t } = useI18n();
@@ -41,6 +42,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
{ label: "异常", value: "error", color: "red" },
],
});
const { openSiteIpMonitorDialog } = useSiteIpMonitor();
return {
crudOptions: {
request: {
@@ -116,6 +119,18 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
});
},
},
ipMonitor: {
order: 0,
type: "link",
text: null,
tooltip: {
title: "IP管理",
},
icon: "entypo:address",
click: async ({ row }) => {
openSiteIpMonitorDialog({ siteId: row.id });
},
},
},
},
columns: {
@@ -311,6 +326,42 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
align: "center",
},
},
ipCheck: {
title: "检查IP",
search: {
show: false,
},
type: "dict-switch",
dict: dict({
data: [
{ label: "启用", value: false, color: "green" },
{ label: "禁用", value: true, color: "red" },
],
}),
form: {
value: false,
},
column: {
width: 100,
sorter: true,
align: "center",
},
},
ipCount: {
title: "IP数量",
search: {
show: false,
},
type: "text",
form: {
show: false,
},
column: {
width: 100,
sorter: true,
align: "center",
},
},
checkStatus: {
title: "检查状态",
search: {
packages/ui/certd-client/src/views/certd/monitor/site/ip/api.ts
+71
View File
@@ -0,0 +1,71 @@
import { request } from "/src/api/service";
const apiPrefix = "/monitor/site/ip";
export const siteIpApi = {
async GetList(query: any) {
return await request({
url: apiPrefix + "/page",
method: "post",
data: query,
});
},
async AddObj(obj: any) {
return await request({
url: apiPrefix + "/add",
method: "post",
data: obj,
});
},
async UpdateObj(obj: any) {
return await request({
url: apiPrefix + "/update",
method: "post",
data: obj,
});
},
async DelObj(id: number) {
return await request({
url: apiPrefix + "/delete",
method: "post",
params: { id },
});
},
async GetObj(id: number) {
return await request({
url: apiPrefix + "/info",
method: "post",
params: { id },
});
},
async DoCheck(id: number) {
return await request({
url: apiPrefix + "/check",
method: "post",
data: { id },
});
},
async CheckAll(siteId: number) {
return await request({
url: apiPrefix + "/checkAll",
method: "post",
data: {
siteId,
},
});
},
async DoSync(siteId: number) {
return await request({
url: apiPrefix + "/sync",
method: "post",
data: {
siteId,
},
});
},
};
packages/ui/certd-client/src/views/certd/monitor/site/ip/crud.tsx
+324
View File
@@ -0,0 +1,324 @@
// @ts-ignore
import { useI18n } from "vue-i18n";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { siteIpApi } from "./api";
import dayjs from "dayjs";
import { Modal, notification } from "ant-design-vue";
import { useSettingStore } from "/@/store/settings";
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const { t } = useI18n();
const api = siteIpApi;
const { crudBinding } = crudExpose;
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async (req: EditReq) => {
const { form, row } = req;
form.id = row.id;
form.siteId = context.props.siteId;
const res = await api.UpdateObj(form);
return res;
};
const delRequest = async (req: DelReq) => {
const { row } = req;
return await api.DelObj(row.id);
};
const addRequest = async (req: AddReq) => {
const { form } = req;
const res = await api.AddObj(form);
return res;
};
const settingsStore = useSettingStore();
const checkStatusDict = dict({
data: [
{ label: "成功", value: "ok", color: "green" },
{ label: "检查中", value: "checking", color: "blue" },
{ label: "异常", value: "error", color: "red" },
],
});
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
form: {
labelCol: {
//固定label宽度
span: null,
style: {
width: "100px",
},
},
col: {
span: 22,
},
wrapper: {
width: 600,
},
},
actionbar: {
buttons: {
add: {
async click() {
await crudExpose.openAdd({});
},
},
load: {
text: "同步IP",
async click() {
Modal.confirm({
title: "同步IP",
content: "确定要同步IP吗？",
onOk: async () => {
await api.DoSync(context.props.siteId);
await crudExpose.doRefresh();
notification.success({
message: "同步完成",
});
},
});
},
},
},
},
rowHandle: {
fixed: "right",
width: 240,
buttons: {
check: {
order: 0,
type: "link",
text: null,
tooltip: {
title: "立即检查",
},
icon: "ion:play-sharp",
click: async ({ row }) => {
await api.DoCheck(row.id);
await crudExpose.doRefresh();
notification.success({
message: "检查完成",
});
},
},
},
},
columns: {
id: {
title: "ID",
key: "id",
type: "number",
search: {
show: false,
},
column: {
width: 80,
align: "center",
},
form: {
show: false,
},
},
ipAddress: {
title: "IP",
search: {
show: true,
},
type: "text",
form: {
rules: [{ required: true, message: "请输入IP" }],
},
column: {
width: 160,
},
},
certDomains: {
title: "证书域名",
search: {
show: false,
},
type: "text",
form: {
show: false,
},
column: {
width: 200,
sorter: true,
show: true,
cellRender({ value }) {
return (
<a-tooltip title={value} placement="left">
{value}
</a-tooltip>
);
},
},
},
certProvider: {
title: "颁发机构",
search: {
show: false,
},
type: "text",
form: {
show: false,
},
column: {
width: 200,
sorter: true,
cellRender({ value }) {
return <a-tooltip title={value}>{value}</a-tooltip>;
},
},
},
certStatus: {
title: "证书状态",
search: {
show: true,
},
type: "dict-select",
dict: dict({
data: [
{ label: "正常", value: "ok", color: "green" },
{ label: "过期", value: "expired", color: "red" },
],
}),
form: {
show: false,
},
column: {
width: 100,
sorter: true,
show: true,
align: "center",
},
},
certExpiresTime: {
title: "证书到期时间",
search: {
show: false,
},
type: "date",
form: {
show: false,
},
column: {
sorter: true,
cellRender({ value }) {
if (!value) {
return "-";
}
const expireDate = dayjs(value).format("YYYY-MM-DD");
const leftDays = dayjs(value).diff(dayjs(), "day");
const color = leftDays < 20 ? "red" : "#389e0d";
const percent = (leftDays / 90) * 100;
return <a-progress title={expireDate + "过期"} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}天`} />;
},
},
},
lastCheckTime: {
title: "上次检查时间",
search: {
show: false,
},
type: "datetime",
form: {
show: false,
},
column: {
sorter: true,
width: 155,
},
},
from: {
title: "来源",
search: {
show: false,
},
type: "dict-switch",
dict: dict({
data: [
{ label: "同步", value: "sync", color: "green" },
{ label: "手动", value: "manual", color: "blue" },
],
}),
form: {
value: false,
},
column: {
width: 100,
sorter: true,
align: "center",
},
},
disabled: {
title: "禁用启用",
search: {
show: false,
},
type: "dict-switch",
dict: dict({
data: [
{ label: "启用", value: false, color: "green" },
{ label: "禁用", value: true, color: "red" },
],
}),
form: {
value: false,
},
column: {
width: 100,
sorter: true,
align: "center",
},
},
checkStatus: {
title: "检查状态",
search: {
show: false,
},
type: "dict-select",
dict: checkStatusDict,
form: {
show: false,
},
column: {
width: 100,
align: "center",
sorter: true,
cellRender({ value, row, key }) {
return (
<a-tooltip title={row.error}>
<fs-values-format v-model={value} dict={checkStatusDict}></fs-values-format>
</a-tooltip>
);
},
},
},
remark: {
title: "备注",
search: {
show: false,
},
type: "text",
form: {
show: false,
},
column: {
width: 200,
sorter: true,
tooltip: true,
},
},
},
},
};
}
packages/ui/certd-client/src/views/certd/monitor/site/ip/index.vue
+46
View File
@@ -0,0 +1,46 @@
<template>
<div class="site-ip-dialog" style="height: 60vh">
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</div>
</template>
<script lang="ts" setup>
import { onActivated, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { siteIpApi } from "./api";
import { Modal, notification } from "ant-design-vue";
defineOptions({
name: "SiteIpCertMonitor",
});
const props = defineProps<{
siteId: number;
}>();
const { crudBinding, crudRef, crudExpose } = useFs({
createCrudOptions,
context: {
props,
},
});
function checkAll() {
Modal.confirm({
title: "确认",
content: "确认触发检查全部站点证书吗?",
onOk: async () => {
await siteIpApi.CheckAll();
notification.success({
message: "检查任务已提交",
description: "请稍后刷新页面查看结果",
});
},
});
}
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
</script>
packages/ui/certd-client/src/views/certd/monitor/site/ip/use.tsx
+40
View File
@@ -0,0 +1,40 @@
import { useFormWrapper } from "@fast-crud/fast-crud";
import { useRouter } from "vue-router";
import SiteIpCertMonitor from "./index.vue";
export function useSiteIpMonitor() {
const { openDialog } = useFormWrapper();
const router = useRouter();
async function openSiteIpMonitorDialog(opts: { siteId: number }) {
await openDialog({
wrapper: {
title: "站点IP监控",
width: "80%",
is: "a-modal",
footer: false,
buttons: {
cancel: {
show: false,
},
reset: {
show: false,
},
ok: {
show: false,
},
},
slots: {
"form-body-top": () => {
return <SiteIpCertMonitor siteId={opts.siteId} />;
},
},
},
});
}
return {
openSiteIpMonitorDialog,
};
}