feat(web): 更换页面框架为pro-layout

service-web/client/src/pages/overview/Queue.tsx

@@ -0,0 +1,96 @@
+import {
+  amisRender,
+  commonInfo,
+  copyField,
+  crudCommonOptions,
+  paginationCommonOptions,
+  time,
+  yarnQueueCrud,
+} from '../../util/amis.ts'
+
+const queueCrud = (name: string) => {
+  return {
+    type: 'crud',
+    title: name,
+    api: `\${base}/queue/all?name=${name}`,
+    ...crudCommonOptions(),
+    interval: 10000,
+    loadDataOnce: true,
+    perPage: 5,
+    headerToolbar: [
+      'reload',
+      'filter-toggler',
+      {
+        type: 'tpl',
+        tpl: '共 <span class=\'text-primary font-bold\'>${total|default:0}</span> 个任务',
+      },
+      paginationCommonOptions(false),
+    ],
+    footerToolbar: [],
+    columns: [
+      {
+        name: 'data.flinkJobId',
+        label: '任务 ID',
+        width: 190,
+        ...copyField('data.flinkJobId'),
+      },
+      {
+        name: 'data.alias',
+        label: '别名',
+        className: 'nowrap',
+        ...copyField('data.alias'),
+      },
+      {
+        name: 'data.batch',
+        label: '批次',
+        width: 100,
+        type: 'tpl',
+        tpl: '<span class="label label-warning">${data.batch}</span>',
+      },
+      {
+        name: 'priority',
+        label: '优先级',
+        width: 60,
+        align: 'center',
+        type: 'tpl',
+        tpl: '<span class="label bg-info">${priority}</span>',
+      },
+      {
+        name: 'data.comment',
+        label: '备注',
+        className: 'nowrap',
+      },
+      {
+        name: 'createTime',
+        label: '任务提交时间',
+        ...time('createTime'),
+        width: 160,
+        fixed: 'right',
+      },
+    ],
+  }
+}
+
+const Queue = () => {
+  let items = []
+  for (let name of Object.keys(commonInfo.clusters.compaction)) {
+    // @ts-ignore
+    items.push(yarnQueueCrud(name, commonInfo.clusters.compaction[name]))
+    items.push(queueCrud(`compaction-queue-${name}`))
+  }
+  return (
+    <div className="hudi-queue bg-white overflow-y-scroll">
+      {amisRender(
+        {
+          type: 'wrapper',
+          body: [
+            queueCrud('compaction-queue-pre'),
+            ...items,
+          ],
+        },
+      )}
+    </div>
+  )
+}
+
+export default Queue