perf: 证书直接查看

packages/ui/certd-client/src/views/certd/pipeline/cert-view.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="cert-view">
+    <a-list item-layout="vertical" :data-source="certFiles">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.key">
+          <a-list-item-meta>
+            <template #title>
+              <div class="title">
+                <div>{{ item.name }}({{ item.fileName }})</div>
+                <fs-copyable :model-value="item.content" :button="{ show: false }">
+                  <a-tag type="success">复制</a-tag>
+                </fs-copyable>
+              </div>
+            </template>
+          </a-list-item-meta>
+          <div>
+            <a-textarea :value="item.content" rows="5" />
+          </div>
+        </a-list-item>
+      </template>
+    </a-list>
+  </div>
+</template>
+<script setup lang="ts">
+import { CertInfo } from "/@/views/certd/pipeline/api";
+import { ref } from "vue";
+
+const props = defineProps<{
+  cert: CertInfo;
+}>();
+
+const certFiles = ref([
+  { name: "证书", fileName: "fullchain.pem", key: "crt", content: props.cert.crt },
+  { name: "私钥", fileName: "private.pem", key: "key", content: props.cert.key },
+  { name: "中间证书", fileName: "chain.pem", key: "ic", content: props.cert.ic }
+]);
+</script>
+
+<style lang="less">
+.cert-view {
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+  .ant-list-item-meta {
+    margin-block-end: 0px !important;
+    margin-top: 10px;
+  }
+}
+</style>

packages/ui/certd-client/src/views/certd/pipeline/crud.tsx

@@ -11,7 +11,9 @@ import { useUserStore } from "/@/store/modules/user";
 import dayjs from "dayjs";
 import { useSettingStore } from "/@/store/modules/settings";
 import _ from "lodash-es";
-
+import { useModal } from "/@/use/use-modal";
+import CertView from "./cert-view.vue";
+import { eachRunnable, eachStages } from "./utils";
 export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const router = useRouter();
   const { t } = useI18n();
@@ -149,6 +151,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
     });
   }
 
+  const model = useModal();
   const viewCert = async (row: any) => {
     const cert = await api.GetCert(row.id);
     if (!cert) {
@@ -156,34 +159,20 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
       return;
     }
 
-    Modal.success({
+    model.success({
       title: "查看证书",
       maskClosable: true,
       okText: "关闭",
+      width: 800,
       content: () => {
-        return (
-          <div class={"view-cert"}>
-            <div class={"cert-txt"}>
-              <h3>fullchain.pem</h3>
-              <div>{cert.crt}</div>
-            </div>
-            <div class={"cert-txt"}>
-              <h3>private.pem</h3>
-              <div>{cert.key}</div>
-            </div>
-            <div class={"cert-txt"}>
-              <h3>中间证书.pem</h3>
-              <div>{cert.ic}</div>
-            </div>
-          </div>
-        );
+        return <CertView cert={cert}></CertView>;
       }
     });
   };
 
   const downloadCert = async (row: any) => {
     const files = await api.GetFiles(row.id);
-    Modal.success({
+    model.success({
       title: "文件下载",
       maskClosable: true,
       okText: "↑↑↑ 点击上面链接下载",
@@ -198,11 +187,6 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
                   {file.filename}
                 </a>
               </div>
-              <div>
-                <a-button type={"primary"} onClick={viewCert}>
-                  直接查看证书
-                </a-button>
-              </div>
             </div>
           );
         }
@@ -253,7 +237,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
         buttons: {
           play: {
             order: -999,
-            title: null,
+            title: "运行流水线",
             type: "link",
             icon: "ant-design:play-circle-outlined",
             click({ row }) {
@@ -268,6 +252,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
             }
           },
           view: {
+            show: false,
             click({ row }) {
               router.push({ path: "/certd/pipeline/detail", query: { id: row.id, editMode: "false" } });
             }
@@ -289,7 +274,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
           },
           config: {
             order: 1,
-            title: null,
+            title: "修改流水线内容",
             type: "link",
             icon: "ant-design:edit-outlined",
             click({ row }) {
@@ -298,12 +283,22 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
           },
           edit: {
             order: 2,
+            title: "修改流水线运行配置",
             icon: "ant-design:setting-outlined"
           },
-          download: {
+          viewCert: {
             order: 3,
-            title: null,
+            title: "查看证书",
             type: "link",
+            icon: "ph:certificate",
+            async click({ row }) {
+              viewCert(row);
+            }
+          },
+          download: {
+            order: 4,
+            type: "link",
+            title: "下载证书",
             icon: "ant-design:download-outlined",
             async click({ row }) {
               downloadCert(row);
@@ -373,32 +368,53 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
           }
         },
         content: {
-          title: "定时任务数",
-          type: "number",
+          title: "流水线内容",
+          form: { show: false },
           column: {
-            align: "center",
-            width: 100,
-            cellRender({ value }) {
-              if (value && value.triggers) {
-                return value.triggers?.length > 0 ? value.triggers.length : "-";
-              }
-              return "-";
-            }
+            show: false
           },
           valueBuilder({ row }) {
             if (row.content) {
               row.content = JSON.parse(row.content);
+              const pipeline = row.content;
+              let stepCount = 0;
+              eachStages(pipeline.stages, (item, runnableType) => {
+                if (runnableType === "step") {
+                  stepCount++;
+                }
+              });
+              row._stepCount = stepCount;
+              if (pipeline.triggers) {
+                row._triggerCount = pipeline.triggers?.length > 0 ? pipeline.triggers.length : "-";
+              }
             }
           },
           valueResolve({ row }) {
             if (row.content) {
               row.content = JSON.stringify(row.content);
             }
+          }
+        },
+        _triggerCount: {
+          title: "定时任务数",
+          type: "number",
+          column: {
+            align: "center",
+            width: 100
           },
           form: {
             show: false
           }
         },
+        _stepCount: {
+          title: "部署任务数",
+          type: "number",
+          form: { show: false },
+          column: {
+            align: "center",
+            width: 100
+          }
+        },
         lastVars: {
           title: "到期剩余",
           type: "number",
@@ -418,18 +434,6 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
             width: 150
           }
         },
-        lastHistoryTime: {
-          title: "最后运行",
-          type: "datetime",
-          form: {
-            show: false
-          },
-          column: {
-            sorter: true,
-            width: 150,
-            align: "center"
-          }
-        },
         status: {
           title: "状态",
           type: "dict-select",
@@ -445,7 +449,18 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
             align: "center"
           }
         },
-
+        lastHistoryTime: {
+          title: "最后运行",
+          type: "datetime",
+          form: {
+            show: false
+          },
+          column: {
+            sorter: true,
+            width: 150,
+            align: "center"
+          }
+        },
         disabled: {
           title: "启用",
           type: "dict-switch",

packages/ui/certd-client/src/views/certd/pipeline/utils.ts

@@ -0,0 +1,15 @@
+import { forEach } from "lodash-es";
+
+export function eachStages(list: any[], exec: (item: any, runnableType: string) => void, runnableType: string = "stage") {
+  if (!list || list.length <= 0) {
+    return;
+  }
+  forEach(list, (item) => {
+    exec(item, runnableType);
+    if (runnableType === "stage") {
+      eachStages(item.tasks, exec, "task");
+    } else if (runnableType === "task") {
+      eachStages(item.steps, exec, "step");
+    }
+  });
+}