diff --git a/ui/src/i18n/locales/zh/nls.dashboard.json b/ui/src/i18n/locales/zh/nls.dashboard.json index 471ebfce..badd7cb8 100644 --- a/ui/src/i18n/locales/zh/nls.dashboard.json +++ b/ui/src/i18n/locales/zh/nls.dashboard.json @@ -13,7 +13,6 @@ "dashboard.quick_actions": "快捷操作", "dashboard.quick_actions.create_workflow": "新建工作流", "dashboard.quick_actions.change_login_password": "修改登录密码", - "dashboard.quick_actions.notification_settings": "消息推送设置", - "dashboard.quick_actions.certificate_authority_configuration": "证书颁发机构配置" + "dashboard.quick_actions.cofigure_notification": "消息推送设置", + "dashboard.quick_actions.configure_ca": "证书颁发机构配置" } - diff --git a/ui/src/pages/dashboard/Dashboard.tsx b/ui/src/pages/dashboard/Dashboard.tsx index b9870850..a98d08f3 100644 --- a/ui/src/pages/dashboard/Dashboard.tsx +++ b/ui/src/pages/dashboard/Dashboard.tsx @@ -29,31 +29,54 @@ import { ClientResponseError } from "pocketbase"; import { get as getStatistics } from "@/api/statistics"; import WorkflowRunDetailDrawer from "@/components/workflow/WorkflowRunDetailDrawer"; import { type Statistics } from "@/domain/statistics"; -import { WORKFLOW_TRIGGERS } from "@/domain/workflow"; import { WORKFLOW_RUN_STATUSES, type WorkflowRunModel } from "@/domain/workflowRun"; import { list as listWorkflowRuns } from "@/repository/workflowRun"; import { getErrMsg } from "@/utils/error"; -const { useBreakpoint } = Grid; - const Dashboard = () => { const navigate = useNavigate(); - const screens = useBreakpoint(); - const { t } = useTranslation(); const { token: themeToken } = theme.useToken(); + const breakpoints = Grid.useBreakpoint(); const [notificationApi, NotificationContextHolder] = notification.useNotification(); + const statisticsGridSpans = { + xs: { flex: "50%" }, + md: { flex: "50%" }, + lg: { flex: "33.3333%" }, + xl: { flex: "33.3333%" }, + xxl: { flex: "20%" }, + }; + const [statistics, setStatistics] = useState(); + const { loading: statisticsLoading } = useRequest( + () => { + return getStatistics(); + }, + { + onSuccess: (res) => { + setStatistics(res.data); + }, + onError: (err) => { + if (err instanceof ClientResponseError && err.isAbort) { + return; + } + + console.error(err); + notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) }); + }, + } + ); + const tableColumns: TableProps["columns"] = [ { key: "$index", align: "center", fixed: "left", width: 50, - render: (_, __, index) => (page - 1) * pageSize + index + 1, + render: (_, __, index) => index + 1, }, { key: "name", @@ -98,20 +121,6 @@ const Dashboard = () => { return <>; }, }, - { - key: "trigger", - title: t("workflow_run.props.trigger"), - ellipsis: true, - render: (_, record) => { - if (record.trigger === WORKFLOW_TRIGGERS.AUTO) { - return t("workflow_run.props.trigger.auto"); - } else if (record.trigger === WORKFLOW_TRIGGERS.MANUAL) { - return t("workflow_run.props.trigger.manual"); - } - - return <>; - }, - }, { key: "startedAt", title: t("workflow_run.props.started_at"), @@ -139,7 +148,6 @@ const Dashboard = () => { { key: "$action", align: "end", - fixed: "right", width: 120, render: (_, record) => ( @@ -149,52 +157,17 @@ const Dashboard = () => { }, ]; const [tableData, setTableData] = useState([]); - const [_tableTotal, setTableTotal] = useState(0); - - const [page, _setPage] = useState(1); - const [pageSize, _setPageSize] = useState(3); - - const { loading: loadingWorkflowRun } = useRequest( + const { loading: tableLoading } = useRequest( () => { return listWorkflowRuns({ - page: page, - perPage: pageSize, + page: 1, + perPage: 5, expand: true, }); }, { - refreshDeps: [page, pageSize], onSuccess: (res) => { setTableData(res.items); - setTableTotal(res.totalItems > 3 ? 3 : res.totalItems); - }, - onError: (err) => { - if (err instanceof ClientResponseError && err.isAbort) { - return; - } - - console.error(err); - notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) }); - }, - } - ); - - const statisticsGridSpans = { - xs: { flex: "50%" }, - md: { flex: "50%" }, - lg: { flex: "33.3333%" }, - xl: { flex: "33.3333%" }, - xxl: { flex: "20%" }, - }; - const [statistics, setStatistics] = useState(); - - const { loading } = useRequest( - () => { - return getStatistics(); - }, - { - onSuccess: (res) => { - setStatistics(res.data); }, onError: (err) => { if (err instanceof ClientResponseError && err.isAbort) { @@ -218,7 +191,7 @@ const Dashboard = () => { } label={t("dashboard.statistics.all_certificates")} - loading={loading} + loading={statisticsLoading} value={statistics?.certificateTotal ?? "-"} suffix={t("dashboard.statistics.unit")} onClick={() => navigate("/certificates")} @@ -228,7 +201,7 @@ const Dashboard = () => { } label={t("dashboard.statistics.expire_soon_certificates")} - loading={loading} + loading={statisticsLoading} value={statistics?.certificateExpireSoon ?? "-"} suffix={t("dashboard.statistics.unit")} onClick={() => navigate("/certificates?state=expireSoon")} @@ -238,7 +211,7 @@ const Dashboard = () => { } label={t("dashboard.statistics.expired_certificates")} - loading={loading} + loading={statisticsLoading} value={statistics?.certificateExpired ?? "-"} suffix={t("dashboard.statistics.unit")} onClick={() => navigate("/certificates?state=expired")} @@ -248,7 +221,7 @@ const Dashboard = () => { } label={t("dashboard.statistics.all_workflows")} - loading={loading} + loading={statisticsLoading} value={statistics?.workflowTotal ?? "-"} suffix={t("dashboard.statistics.unit")} onClick={() => navigate("/workflows")} @@ -258,7 +231,7 @@ const Dashboard = () => { } label={t("dashboard.statistics.enabled_workflows")} - loading={loading} + loading={statisticsLoading} value={statistics?.workflowEnabled ?? "-"} suffix={t("dashboard.statistics.unit")} onClick={() => navigate("/workflows?state=enabled")} @@ -268,34 +241,32 @@ const Dashboard = () => { - - -
{t("dashboard.quick_actions")}
-
- - - - -
+
- -
{t("dashboard.latest_workflow_run")}
+ - className="mt-5" columns={tableColumns} dataSource={tableData} - loading={loadingWorkflowRun} + loading={tableLoading} locale={{ emptyText: , }} + pagination={false} rowKey={(record: WorkflowRunModel) => record.id} scroll={{ x: "max(100%, 960px)" }} />