From 5169942cbde9732975245b562b7c487c31776678 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Wed, 11 Dec 2024 01:06:13 +0800
Subject: [PATCH 01/39] feat: init cluster

---
 .../src/assets/images/svg/success.svg         | 29 +++++++++++++++
 .../pages/cluster-manage/cluster/index.vue    | 35 +++++++++++++++++--
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/success.svg

diff --git a/bigtop-manager-ui/src/assets/images/svg/success.svg b/bigtop-manager-ui/src/assets/images/svg/success.svg
new file mode 100644
index 000000000..c02bc2347
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/success.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+    viewBox="0 0 16 16" fill="none">
+    <path
+        d="M7.99967 14.6667C9.84061 14.6667 11.5073 13.9205 12.7137 12.7141C13.9201 11.5076 14.6663 9.84097 14.6663 8.00004C14.6663 6.15911 13.9201 4.49244 12.7137 3.28599C11.5073 2.07957 9.84061 1.33337 7.99967 1.33337C6.15874 1.33337 4.49207 2.07957 3.28563 3.28599C2.0792 4.49244 1.33301 6.15911 1.33301 8.00004C1.33301 9.84097 2.0792 11.5076 3.28563 12.7141C4.49207 13.9205 6.15874 14.6667 7.99967 14.6667Z"
+        stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+    </path>
+    <path stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+        d="M5.33301 8L7.33301 10L11.333 6">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index d78ec09f2..58726dcba 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -21,8 +21,39 @@
 
 <template>
   <div>
-    <a-card>{{ $route.params }}</a-card>
+    <!-- <a-card>{{ $route.params }}</a-card> -->
+
+    <a-row class="option-card">
+      <a-col :span="10">
+        <a-space :size="16">
+          <a-avatar shape="square" :size="54" />
+          <div>
+            <a-typography-title :level="5">{{ $route.params.cluster }}</a-typography-title>
+            <a-typography-text type="secondary">暂无描述</a-typography-text>
+          </div>
+          <div class="option-card-status">
+            <svg-icon name="success" />
+          </div>
+        </a-space>
+      </a-col>
+      <a-col :span="14">
+        <a-space :size="16"> </a-space>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .option-card {
+    @include flexbox($align: center);
+    height: 102px;
+    padding: $space-md;
+    background-color: $color-white;
+    :deep(.ant-avatar) {
+      border-radius: 4px;
+    }
+    &-status {
+      align-items: flex-start;
+    }
+  }
+</style>

From 0f9021cf32e3b6dd428b6b104dc30e72352793bc Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 12 Dec 2024 18:05:25 +0800
Subject: [PATCH 02/39] feat: add dashoard page

---
 bigtop-manager-ui/.env.development            |   1 +
 .../src/components/ai-assistant/index.vue     |   2 +-
 .../components/common/button-group/index.vue  |  72 +++++++---
 .../components/common/button-group/types.ts   |  10 +-
 .../components/common/header-card/index.vue   | 101 ++++++++++++++
 .../src/components/common/main-card/index.vue |  64 +++++++++
 .../src/components/common/main-card/types.ts  |  23 ++++
 .../cluster-manage/cluster/dashboard.vue      | 128 ++++++++++++++++++
 .../pages/cluster-manage/cluster/index.vue    | 111 ++++++++++-----
 bigtop-manager-ui/src/types/components.d.ts   |  30 ++++
 10 files changed, 487 insertions(+), 55 deletions(-)
 create mode 100644 bigtop-manager-ui/src/components/common/header-card/index.vue
 create mode 100644 bigtop-manager-ui/src/components/common/main-card/index.vue
 create mode 100644 bigtop-manager-ui/src/components/common/main-card/types.ts
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
 create mode 100644 bigtop-manager-ui/src/types/components.d.ts

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 6346532b1..67a2cdff8 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,5 +17,6 @@ NODE_ENV=development
 
 VITE_APP_BASE='/'
 VITE_APP_BASE_URL='http://localhost:8080'
+# VITE_APP_BASE_URL='http://bmdebug.s7.tunnelfrp.com'
 VITE_APP_BASE_API='/api'
 VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
diff --git a/bigtop-manager-ui/src/components/ai-assistant/index.vue b/bigtop-manager-ui/src/components/ai-assistant/index.vue
index 871d5c13e..7b0e04963 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/index.vue
+++ b/bigtop-manager-ui/src/components/ai-assistant/index.vue
@@ -170,7 +170,7 @@
       <template #extra>
         <button-group i18n="aiAssistant" :groups="checkActions" @on-click="onActions">
           <template #icon="{ item }">
-            <svg-icon :name="item.icon" />
+            <svg-icon v-if="item.icon" :name="item.icon" />
           </template>
         </button-group>
       </template>
diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index bc2b6d500..23e1b801c 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -19,7 +19,8 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
-  import type { Props } from './types'
+  import type { GroupItem, Props } from './types'
+  import { useI18n } from 'vue-i18n'
 
   const props = withDefaults(defineProps<Props>(), {
     i18n: '',
@@ -30,27 +31,64 @@
     }
   })
 
+  const { t } = useI18n()
   const { groups, groupShape, groupType } = toRefs(props)
+
+  const checkTitle = (item: GroupItem) => {
+    if (props.i18n) {
+      if (item.tip) {
+        return t(`${props.i18n}.${item.tip}`)
+      } else if (item.text) {
+        return t(`${props.i18n}.${item.text}`)
+      }
+    } else {
+      return item.tip ? item.tip : item.text ? item.text : undefined
+    }
+  }
 </script>
 
 <template>
   <a-space>
-    <a-button
-      v-for="(item, idx) in groups"
-      :key="idx"
-      :disabled="item.disabled"
-      :shape="item.shape || groupShape || 'default'"
-      :type="item.type || groupType || 'default'"
-      :title="(item.tip && $t(`${$props.i18n}.${item.tip}`)) || (item.text && $t(`${$props.i18n}.${item.text}`))"
-      @click="item.clickEvent ? item.clickEvent(item) : () => {}"
-    >
-      <template #icon>
-        <slot name="icon" :item="item" />
-      </template>
-      <span v-if="item.text">
-        {{ item.text && $t(`${$props.i18n}.${item.text}`) }}
-      </span>
-    </a-button>
+    <template v-for="(item, idx) in groups" :key="idx">
+      <a-dropdown v-if="item.dropdownMenu">
+        <a-button
+          :disabled="item.disabled"
+          :shape="item.shape || groupShape || 'default'"
+          :type="item.type || groupType || 'default'"
+          :title="checkTitle(item)"
+          @click="item.clickEvent ? item.clickEvent(item) : () => {}"
+        >
+          <template #icon>
+            <slot name="icon" :item="item" />
+          </template>
+          <span v-if="item.text">
+            {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+          </span>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="item.dropdownMenuClickEvent">
+            <a-menu-item v-for="actionItem in item.dropdownMenu" :key="actionItem.action">
+              {{ actionItem.text }}
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+      <a-button
+        v-else
+        :disabled="item.disabled"
+        :shape="item.shape || groupShape || 'default'"
+        :type="item.type || groupType || 'default'"
+        :title="checkTitle(item)"
+        @click="item.clickEvent ? item.clickEvent(item) : () => {}"
+      >
+        <template #icon>
+          <slot name="icon" :item="item" />
+        </template>
+        <span v-if="item.text">
+          {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+        </span>
+      </a-button>
+    </template>
   </a-space>
 </template>
 
diff --git a/bigtop-manager-ui/src/components/common/button-group/types.ts b/bigtop-manager-ui/src/components/common/button-group/types.ts
index ae481660d..f2a50aff2 100644
--- a/bigtop-manager-ui/src/components/common/button-group/types.ts
+++ b/bigtop-manager-ui/src/components/common/button-group/types.ts
@@ -17,9 +17,15 @@
  * under the License.
  */
 
+import { MenuItemProps, MenuProps } from 'ant-design-vue'
+
 type BtnType = 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
 type ShapeType = 'default' | 'circle' | 'round'
 
+export interface DropdownMenu extends MenuItemProps {
+  action: string
+  text: string
+}
 export interface GroupItem<T = string> {
   icon?: string
   tip?: string
@@ -28,11 +34,13 @@ export interface GroupItem<T = string> {
   type?: BtnType
   shape?: ShapeType
   disabled?: boolean
+  dropdownMenu?: DropdownMenu[]
   clickEvent?: (item?: GroupItem, ...args: any[]) => void
+  dropdownMenuClickEvent?: MenuProps['onClick']
 }
 
 export interface Props {
-  i18n: string
+  i18n?: string
   groups: GroupItem[]
   groupType?: BtnType
   groupShape?: ShapeType
diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
new file mode 100644
index 000000000..71a08eb4b
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -0,0 +1,101 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { GroupItem } from '../button-group/types'
+
+  interface Props {
+    showAvatar?: boolean
+    showStatus?: boolean
+    title: string
+    desc?: string
+    status?: string
+    actionGroups?: GroupItem[]
+  }
+
+  interface Emits {
+    (event: 'onClick', item: GroupItem): void
+  }
+
+  withDefaults(defineProps<Props>(), {
+    showAvatar: true,
+    showStatus: true,
+    title: '',
+    desc: '暂无描述',
+    status: 'success',
+    actionGroups: () => {
+      return []
+    }
+  })
+
+  const emits = defineEmits<Emits>()
+
+  const onActions = (item: GroupItem) => {
+    emits('onClick', item)
+  }
+</script>
+
+<template>
+  <div class="header-card">
+    <div class="header-card-info">
+      <a-avatar v-if="showAvatar" shape="square" :size="54" />
+      <div class="card-info-title">
+        <div class="card-info-status">
+          <a-typography-title :level="5">{{ $props.title }}</a-typography-title>
+          <svg-icon v-if="showStatus" :name="status" />
+        </div>
+        <a-typography-text type="secondary">{{ $props.desc }}</a-typography-text>
+      </div>
+    </div>
+    <div class="header-card-action">
+      <slot name="actions">
+        <button-group :groups="$props.actionGroups" @on-click="onActions" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header-card {
+    width: 100%;
+    height: 102px;
+    @include flexbox($justify: space-between, $align: center);
+    background-color: $color-white;
+    padding: $space-md;
+    margin-bottom: $space-md;
+    &-info {
+      @include flexbox($align: center);
+      gap: $space-md;
+      :deep(.ant-avatar) {
+        border-radius: 4px;
+      }
+    }
+  }
+  .card-info {
+    &-title {
+      @include flexbox($direction: column, $align: space-between, $gap: $space-sm);
+    }
+    &-status {
+      @include flexbox($align: center, $gap: 2px);
+      .ant-typography {
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
new file mode 100644
index 000000000..4329e185b
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -0,0 +1,64 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { TabsProps } from 'ant-design-vue'
+  import { TabItem } from './types'
+
+  interface Props {
+    activeKey: string
+    tabs: TabItem[]
+  }
+
+  withDefaults(defineProps<Props>(), {
+    tabs: () => {
+      return []
+    }
+  })
+
+  const emits = defineEmits(['update:activeKey'])
+
+  const handleChange: TabsProps['onChange'] = (activeKey) => {
+    emits('update:activeKey', activeKey)
+  }
+</script>
+
+<template>
+  <div class="main-card">
+    <a-tabs v-mode:active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
+      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
+        <slot></slot>
+      </a-tab-pane>
+      <template #renderTabBar="{ DefaultTabBar, ...props }">
+        <component :is="DefaultTabBar" v-bind="props" />
+      </template>
+    </a-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .main-card {
+    background-color: $color-white;
+    padding-inline: $space-md;
+    padding-bottom: $space-md;
+    :deep(.ant-tabs-tab) {
+      padding-inline: 16px;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/main-card/types.ts b/bigtop-manager-ui/src/components/common/main-card/types.ts
new file mode 100644
index 000000000..abc7c4dae
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/main-card/types.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface TabItem {
+  key: string
+  title: string
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
new file mode 100644
index 000000000..28aabe80a
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
@@ -0,0 +1,128 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  const baseConfig = {
+    clusterStatus: '集群状态',
+    clusterName: '集群名',
+    clusterDesc: '集群备注',
+    hostCount: '主机数',
+    serviceCount: '服务数',
+    memory: '内存',
+    coreCount: '核心数',
+    diskSize: '磁盘大小',
+    creater: '创建人'
+  } as any
+
+  const baseInfo = {
+    clusterStatus: 'succsss',
+    clusterName: '集群名',
+    clusterDesc: '集群备注',
+    hostCount: '15个主机',
+    serviceCount: '15个服务',
+    memory: '内存',
+    coreCount: '15个核心',
+    diskSize: '磁盘大小',
+    creater: '创建人'
+  } as any
+</script>
+
+<template>
+  <div class="dashboard">
+    <div class="left">
+      <a-descriptions layout="vertical" bordered>
+        <template #title>
+          <a-typography-text strong>基本信息</a-typography-text>
+        </template>
+        <a-descriptions-item>
+          <template #title>
+            <a-typography-text strong>详情</a-typography-text>
+          </template>
+          <div class="desc-sub-wrp">
+            <div class="desc-sub-item">
+              <a-typography-text v-for="(base, idx) in Object.keys(baseInfo)" :key="idx" type="secondary">
+                {{ baseConfig[base] }}
+              </a-typography-text>
+            </div>
+            <div class="desc-sub-item">
+              <div v-for="(base, idx) in Object.keys(baseInfo)" :key="idx">{{ baseInfo[base] }}</div>
+            </div>
+          </div>
+        </a-descriptions-item>
+      </a-descriptions>
+
+      <a-descriptions layout="vertical" bordered :column="1">
+        <template #title>
+          <a-typography-text strong>服务信息</a-typography-text>
+        </template>
+        <a-descriptions-item>
+          <template #label>
+            <div class="desc-sub-label">
+              <a-typography-text strong>Bigtop Stack</a-typography-text>
+              <a-typography-text type="secondary">bigtop-3.3.0</a-typography-text>
+            </div>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item>
+          <template #label>
+            <div class="desc-sub-label">
+              <a-typography-text strong>Extra Stack</a-typography-text>
+              <a-typography-text type="secondary">extra-1.0.0</a-typography-text>
+            </div>
+          </template>
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .dashboard {
+    display: flex;
+  }
+  .left {
+    display: grid;
+    width: 357px;
+    gap: 24px;
+    :deep(.ant-descriptions-item-content) {
+      padding: $space-md;
+      span {
+        @include flexbox($direction: column, $gap: $space-md);
+      }
+    }
+    :deep(.ant-descriptions-item-label) {
+      padding: $space-md;
+    }
+    .desc-sub-wrp {
+      display: flex;
+      gap: $space-md;
+    }
+    .desc-sub-item {
+      display: flex;
+      flex-direction: column;
+      gap: $space-md;
+    }
+    .desc-sub-label {
+      @include flexbox($align: center, $gap: $space-sm);
+      :deep(.a-typography-text:last-child) {
+        font-size: 12px;
+      }
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 58726dcba..581a14d69 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -17,43 +17,82 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { useRoute } from 'vue-router'
+  import type { GroupItem } from '@/components/common/button-group/types'
+  import type { TabItem } from '@/components/common/main-card/types'
+  import Dashboard from './dashboard.vue'
 
-<template>
-  <div>
-    <!-- <a-card>{{ $route.params }}</a-card> -->
-
-    <a-row class="option-card">
-      <a-col :span="10">
-        <a-space :size="16">
-          <a-avatar shape="square" :size="54" />
-          <div>
-            <a-typography-title :level="5">{{ $route.params.cluster }}</a-typography-title>
-            <a-typography-text type="secondary">暂无描述</a-typography-text>
-          </div>
-          <div class="option-card-status">
-            <svg-icon name="success" />
-          </div>
-        </a-space>
-      </a-col>
-      <a-col :span="14">
-        <a-space :size="16"> </a-space>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .option-card {
-    @include flexbox($align: center);
-    height: 102px;
-    padding: $space-md;
-    background-color: $color-white;
-    :deep(.ant-avatar) {
-      border-radius: 4px;
+  const route = useRoute()
+  const title = computed(() => route.params.cluster as string)
+  const desc = ref('我是描述')
+  const activeKey = ref('1')
+  const tabs = ref<TabItem[]>([
+    {
+      key: '1',
+      title: '概览'
+    },
+    {
+      key: '2',
+      title: '服务'
+    },
+    {
+      key: '3',
+      title: '主机'
+    },
+    {
+      key: '4',
+      title: '用户'
+    },
+    {
+      key: '5',
+      title: '作业'
     }
-    &-status {
-      align-items: flex-start;
+  ])
+  const actionGroup = computed<GroupItem[]>(() => [
+    {
+      shape: 'default',
+      type: 'primary',
+      text: '添加服务',
+      clickEvent: () => addService && addService()
+    },
+    {
+      shape: 'default',
+      type: 'default',
+      text: '其他操作',
+      dropdownMenu: [
+        {
+          action: 'start',
+          text: '启动集群'
+        },
+        {
+          action: 'restart',
+          text: '重启集群'
+        },
+        {
+          action: 'stop',
+          text: '停止集群'
+        }
+      ],
+      dropdownMenuClickEvent: (info) => dropdownMenuClick && dropdownMenuClick(info)
     }
+  ])
+
+  const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = ({ key }) => {
+    console.log('key :>> ', key)
   }
-</style>
+
+  const addService: GroupItem['clickEvent'] = () => {
+    console.log('add :>> ')
+  }
+</script>
+
+<template>
+  <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
+  <main-card :active-key="activeKey" :tabs="tabs">
+    <component :is="Dashboard"></component>
+  </main-card>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/types/components.d.ts b/bigtop-manager-ui/src/types/components.d.ts
new file mode 100644
index 000000000..ff6195061
--- /dev/null
+++ b/bigtop-manager-ui/src/types/components.d.ts
@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    HeaderCard: (typeof import('@/components/common/header-card/index.vue'))['default']
+    MainCard: (typeof import('@/components/common/main-card/index.vue'))['default']
+    AutoForm: (typeof import('@/components/common/auto-form/index.vue'))['default']
+    ButtonGroup: (typeof import('@/components/common/button-group/index.vue'))['default']
+    MarkdownView: (typeof import('@/components/common/markdown-view/index.vue'))['default']
+    SvgIcon: (typeof import('@/components/common/svg-icon/index.vue'))['default']
+  }
+}

From 7796407beaa8b00b955dc0c12fd5639f48b9739f Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Wed, 18 Dec 2024 18:19:18 +0800
Subject: [PATCH 03/39] feat: add chart for cluster

---
 .../components/common/header-card/index.vue   |   1 +
 .../src/components/common/main-card/index.vue |   1 +
 .../cluster/components/category-chart.vue     | 113 +++++++++
 .../cluster/components/gauge-chart.vue        | 134 +++++++++++
 .../cluster-manage/cluster/dashboard.vue      | 227 +++++++++++++-----
 5 files changed, 421 insertions(+), 55 deletions(-)
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue

diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
index 71a08eb4b..8f8c13614 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -74,6 +74,7 @@
 <style lang="scss" scoped>
   .header-card {
     width: 100%;
+    min-width: 389px;
     height: 102px;
     @include flexbox($justify: space-between, $align: center);
     background-color: $color-white;
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
index 4329e185b..378685017 100644
--- a/bigtop-manager-ui/src/components/common/main-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -54,6 +54,7 @@
 
 <style lang="scss" scoped>
   .main-card {
+    min-width: 389px;
     background-color: $color-white;
     padding-inline: $space-md;
     padding-bottom: $space-md;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
new file mode 100644
index 000000000..321c1b469
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
@@ -0,0 +1,113 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { onMounted } from 'vue'
+  import * as echarts from 'echarts/core'
+  import { GridComponent, GridComponentOption } from 'echarts/components'
+  import { LineChart, LineSeriesOption } from 'echarts/charts'
+  import { UniversalTransition } from 'echarts/features'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
+
+  type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>
+
+  const props = defineProps<{
+    chartId: string
+    title: string
+  }>()
+
+  const generateTimeLabels = () => {
+    const times = []
+    for (let h = 0; h < 24; h++) {
+      for (let m = 0; m < 60; m += 15) {
+        const hour = h.toString().padStart(2, '0')
+        const minute = m.toString().padStart(2, '0')
+        times.push(`${hour}:${minute}`)
+      }
+    }
+    return times
+  }
+
+  const initCharts = () => {
+    const chartDom = document.getElementById(`${props.chartId}`)
+    const myChart = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio,
+      renderer: 'svg'
+    })
+    const option: EChartsOption = {
+      grid: {
+        top: '12%',
+        bottom: '12%',
+        left: '12%',
+        right: '12%'
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      xAxis: {
+        type: 'category',
+        data: generateTimeLabels().slice(7, 14),
+        axisLabel: {
+          fontSize: 12,
+          interval: 0
+        }
+      },
+      yAxis: {
+        type: 'value',
+        interval: 20,
+        axisLabel: {
+          fontSize: 12,
+          formatter: '{value} %'
+        }
+      },
+      series: [
+        {
+          name: '数据',
+          type: 'line',
+          data: Array.from({ length: 96 }, () => Math.floor(Math.random() * 100))
+        }
+      ]
+    }
+    option && myChart.setOption(option)
+  }
+
+  onMounted(() => {
+    initCharts()
+  })
+</script>
+
+<template>
+  <div class="chart">
+    <div class="chart-title">{{ $props.title }}</div>
+    <canvas :id="$props.chartId" style="width: 100%; height: 100%; padding: 16px"></canvas>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .chart {
+    text-align: center;
+    &-title {
+      text-align: start;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
new file mode 100644
index 000000000..1ce32da37
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
@@ -0,0 +1,134 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { onMounted } from 'vue'
+  import * as echarts from 'echarts/core'
+  import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  echarts.use([GaugeChart, CanvasRenderer])
+
+  type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>
+
+  const props = defineProps<{
+    chartId: string
+    title: string
+  }>()
+
+  const initCharts = () => {
+    const chartDom = document.getElementById(`${props.chartId}`)
+    const myChart = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio,
+      renderer: 'svg'
+    })
+    const option: EChartsOption = {
+      series: [
+        {
+          type: 'gauge',
+          radius: '90%',
+          center: ['50%', '56%'],
+          axisLine: {
+            lineStyle: {
+              width: 14,
+              color: [
+                [0.3, '#67e0e3'],
+                [0.7, '#37a2da'],
+                [1, '#fd666d']
+              ]
+            }
+          },
+          pointer: {
+            itemStyle: {
+              color: 'auto'
+            }
+          },
+          axisTick: {
+            distance: -50,
+            length: 40,
+            lineStyle: {
+              color: '#fff',
+              width: 1
+            }
+          },
+          splitLine: {
+            distance: -28,
+            length: 28,
+            lineStyle: {
+              color: '#fff',
+              width: 4
+            }
+          },
+          axisLabel: {
+            color: 'inherit',
+            distance: 28,
+            fontSize: 14
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value} %',
+            color: 'inherit',
+            fontSize: 18
+          },
+          data: [
+            {
+              value: 80
+            }
+          ]
+        }
+      ]
+    }
+
+    myChart.setOption<echarts.EChartsCoreOption>({
+      series: [
+        {
+          data: [
+            {
+              value: +(Math.random() * 100).toFixed(2)
+            }
+          ]
+        }
+      ]
+    })
+
+    option && myChart.setOption(option)
+  }
+
+  onMounted(() => {
+    initCharts()
+  })
+</script>
+
+<template>
+  <div class="chart">
+    <div class="chart-title">{{ $props.title }}</div>
+    <canvas :id="$props.chartId" style="width: 100%; height: 100%"></canvas>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .chart {
+    text-align: center;
+    &-title {
+      text-align: start;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
index 28aabe80a..d5cc09c98 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
@@ -18,6 +18,8 @@
 -->
 
 <script setup lang="ts">
+  import type { MenuProps } from 'ant-design-vue'
+
   const baseConfig = {
     clusterStatus: '集群状态',
     clusterName: '集群名',
@@ -32,7 +34,7 @@
 
   const baseInfo = {
     clusterStatus: 'succsss',
-    clusterName: '集群名',
+    clusterName: '集群名集群名集群名集群名集群名集群名集群名',
     clusterDesc: '集群备注',
     hostCount: '15个主机',
     serviceCount: '15个服务',
@@ -41,85 +43,200 @@
     diskSize: '磁盘大小',
     creater: '创建人'
   } as any
+
+  const serviceStack = [
+    {
+      stackId: 1,
+      stackName: 'Bigtop Stack',
+      stackVersion: 'bigtop-3.3.0',
+      services: [
+        {
+          id: 1,
+          name: 'HDFS'
+        },
+        {
+          id: 2,
+          name: 'Hive'
+        }
+      ]
+    },
+    {
+      stackId: 2,
+      stackName: 'Extra Stack',
+      stackVersion: 'extra-1.0.0',
+      services: [
+        {
+          id: 1,
+          name: 'Doris'
+        },
+        {
+          id: 2,
+          name: 'SeaTunnel'
+        }
+      ]
+    }
+  ]
+
+  const serviceOperates = [
+    {
+      action: 'start',
+      text: '启动服务'
+    },
+    {
+      action: 'restart',
+      text: '重启服务'
+    },
+    {
+      action: 'stop',
+      text: '停止服务'
+    }
+  ]
+
+  const handleServiceOperate: MenuProps['onClick'] = (item) => {
+    console.log('item :>> ', item.key)
+  }
+
+  import GaugeChart from './components/gauge-chart.vue'
+  import CategoryChart from './components/category-chart.vue'
 </script>
 
 <template>
   <div class="dashboard">
-    <div class="left">
-      <a-descriptions layout="vertical" bordered>
-        <template #title>
-          <a-typography-text strong>基本信息</a-typography-text>
-        </template>
-        <a-descriptions-item>
+    <a-row :gutter="[50, 16]" :wrap="true">
+      <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" style="display: flex; flex-direction: column; gap: 24px">
+        <!-- base info -->
+        <a-descriptions layout="vertical" bordered>
           <template #title>
-            <a-typography-text strong>详情</a-typography-text>
+            <a-typography-text strong content="基本信息" />
           </template>
-          <div class="desc-sub-wrp">
-            <div class="desc-sub-item">
-              <a-typography-text v-for="(base, idx) in Object.keys(baseInfo)" :key="idx" type="secondary">
-                {{ baseConfig[base] }}
-              </a-typography-text>
+          <a-descriptions-item>
+            <template #label>
+              <div class="desc-sub-label">
+                <a-typography-text strong content="详情" />
+              </div>
+            </template>
+            <div class="desc-sub-item-wrp">
+              <div class="desc-sub-item">
+                <template v-for="base in Object.keys(baseInfo)" :key="base">
+                  <div class="desc-sub-item-desc">
+                    <a-typography-text type="secondary" :content="baseConfig[base]" />
+                    <a-typography-text :content="baseInfo[base]" />
+                  </div>
+                </template>
+              </div>
             </div>
-            <div class="desc-sub-item">
-              <div v-for="(base, idx) in Object.keys(baseInfo)" :key="idx">{{ baseInfo[base] }}</div>
+          </a-descriptions-item>
+        </a-descriptions>
+        <!-- service info -->
+        <a-descriptions layout="vertical" bordered :column="1">
+          <template #title>
+            <a-typography-text strong content="服务信息" />
+          </template>
+          <template v-for="stack in serviceStack" :key="stack.stackId">
+            <a-descriptions-item>
+              <template #label>
+                <div class="desc-sub-label">
+                  <a-typography-text strong :content="stack.stackName" />
+                  <a-typography-text type="secondary" :content="stack.stackVersion" />
+                </div>
+              </template>
+              <div v-for="service in stack.services" :key="service.id" class="service-item">
+                <a-avatar shape="square" :size="16" />
+                <a-typography-text :content="service.name" />
+
+                <a-dropdown :trigger="['click']">
+                  <a-button type="text" shape="circle" size="small">
+                    <svg-icon name="more" style="margin: 0" />
+                  </a-button>
+                  <template #overlay>
+                    <a-menu @click="handleServiceOperate">
+                      <a-menu-item v-for="operate in serviceOperates" :key="operate.action">
+                        <span>{{ operate.text }}</span>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </div>
+            </a-descriptions-item>
+          </template>
+        </a-descriptions>
+      </a-col>
+      <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
+        <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }">
+          <template #title>
+            <a-typography-text strong content="图表" />
+          </template>
+          <a-descriptions-item>
+            <div class="chart-item-wrp">
+              <gauge-chart chart-id="chart1" title="内存使用率" />
             </div>
-          </div>
-        </a-descriptions-item>
-      </a-descriptions>
-
-      <a-descriptions layout="vertical" bordered :column="1">
-        <template #title>
-          <a-typography-text strong>服务信息</a-typography-text>
-        </template>
-        <a-descriptions-item>
-          <template #label>
-            <div class="desc-sub-label">
-              <a-typography-text strong>Bigtop Stack</a-typography-text>
-              <a-typography-text type="secondary">bigtop-3.3.0</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item>
+            <div class="chart-item-wrp">
+              <gauge-chart chart-id="chart2" title="CUP 使用率" />
             </div>
-          </template>
-        </a-descriptions-item>
-        <a-descriptions-item>
-          <template #label>
-            <div class="desc-sub-label">
-              <a-typography-text strong>Extra Stack</a-typography-text>
-              <a-typography-text type="secondary">extra-1.0.0</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item>
+            <div class="chart-item-wrp">
+              <category-chart chart-id="chart3" title="内存使用率" />
             </div>
-          </template>
-        </a-descriptions-item>
-      </a-descriptions>
-    </div>
+          </a-descriptions-item>
+          <a-descriptions-item>
+            <div class="chart-item-wrp">
+              <category-chart chart-id="chart4" title="CUP 使用率" />
+            </div>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .dashboard {
-    display: flex;
-  }
-  .left {
-    display: grid;
-    width: 357px;
-    gap: 24px;
-    :deep(.ant-descriptions-item-content) {
+    .service-item {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: $space-md;
+      align-items: center;
       padding: $space-md;
-      span {
-        @include flexbox($direction: column, $gap: $space-md);
-      }
+      border-bottom: 1px solid #e5e5e5;
     }
-    :deep(.ant-descriptions-item-label) {
-      padding: $space-md;
+
+    .chart-item-wrp {
+      padding: 10px;
+    }
+
+    :deep(.ant-descriptions-view) {
+      overflow: hidden;
+      .ant-descriptions-item-label {
+        padding: 0;
+      }
+      .ant-descriptions-item-content {
+        padding: 0;
+      }
     }
-    .desc-sub-wrp {
+
+    .desc-sub-item-wrp {
       display: flex;
       gap: $space-md;
+      padding: $space-md;
     }
+
     .desc-sub-item {
-      display: flex;
-      flex-direction: column;
-      gap: $space-md;
+      @include flexbox($direction: column, $gap: $space-md);
+      &-desc {
+        display: grid;
+        grid-template-columns: 56px auto;
+        gap: 30px;
+      }
     }
+
     .desc-sub-label {
       @include flexbox($align: center, $gap: $space-sm);
+      background-color: $color-border-secondary;
+      padding: $space-md;
+
       :deep(.a-typography-text:last-child) {
         font-size: 12px;
       }

From 0c336124a27cf63fba53cccfb2a0a9316c2be86a Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 19 Dec 2024 17:29:06 +0800
Subject: [PATCH 04/39] feat: Add overview page for Cluster

---
 .../cluster/components/category-chart.vue     | 108 ++++++++++----
 .../cluster/components/gauge-chart.vue        |  32 +++--
 .../pages/cluster-manage/cluster/index.vue    |   4 +-
 .../cluster/{dashboard.vue => overview.vue}   | 132 +++++++++++++++---
 4 files changed, 216 insertions(+), 60 deletions(-)
 rename bigtop-manager-ui/src/pages/cluster-manage/cluster/{dashboard.vue => overview.vue} (73%)

diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
index 321c1b469..c9abfd99c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
@@ -18,22 +18,24 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted } from 'vue'
+  import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
   import * as echarts from 'echarts/core'
-  import { GridComponent, GridComponentOption } from 'echarts/components'
+  import { GridComponent, GridComponentOption, TooltipComponent, TooltipComponentOption } from 'echarts/components'
   import { LineChart, LineSeriesOption } from 'echarts/charts'
   import { UniversalTransition } from 'echarts/features'
   import { CanvasRenderer } from 'echarts/renderers'
 
-  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
+  echarts.use([GridComponent, LineChart, TooltipComponent, CanvasRenderer, UniversalTransition])
 
-  type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>
+  type EChartsOption = echarts.ComposeOption<GridComponentOption | TooltipComponentOption | LineSeriesOption>
 
   const props = defineProps<{
     chartId: string
     title: string
   }>()
 
+  const myChart = shallowRef<echarts.ECharts | null>(null)
+
   const generateTimeLabels = () => {
     const times = []
     for (let h = 0; h < 24; h++) {
@@ -48,62 +50,106 @@
 
   const initCharts = () => {
     const chartDom = document.getElementById(`${props.chartId}`)
-    const myChart = echarts.init(chartDom, null, {
-      devicePixelRatio: window.devicePixelRatio,
-      renderer: 'svg'
+    myChart.value = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio
     })
     const option: EChartsOption = {
       grid: {
-        top: '12%',
-        bottom: '12%',
-        left: '12%',
-        right: '12%'
+        top: '20px',
+        left: '40px',
+        right: '30px',
+        bottom: '20px'
       },
       tooltip: {
-        trigger: 'axis'
-      },
-      xAxis: {
-        type: 'category',
-        data: generateTimeLabels().slice(7, 14),
-        axisLabel: {
-          fontSize: 12,
-          interval: 0
+        trigger: 'axis',
+        backgroundColor: '#000',
+        borderColor: 'rgba(236,236,236,0.1)',
+        // formatter: (params) => {
+        //   console.log('params :>> ', params)
+        //   return ''
+        // },
+        textStyle: {
+          color: '#fff'
+        },
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999'
+          }
         }
       },
-      yAxis: {
-        type: 'value',
-        interval: 20,
-        axisLabel: {
-          fontSize: 12,
-          formatter: '{value} %'
+      xAxis: [
+        {
+          type: 'category',
+          data: generateTimeLabels(),
+          axisPointer: {
+            type: 'line'
+          },
+          axisLabel: {
+            interval: 14,
+            fontSize: 8
+          }
         }
-      },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              formatter: '{value} %'
+            }
+          },
+          min: 0,
+          max: 100,
+          interval: 20,
+          axisLabel: {
+            fontSize: 8,
+            formatter: '{value} %'
+          }
+        }
+      ],
       series: [
         {
-          name: '数据',
+          name: props.title,
           type: 'line',
-          data: Array.from({ length: 96 }, () => Math.floor(Math.random() * 100))
+          data: Array.from({ length: generateTimeLabels().length }, () => Math.floor(Math.random() * 0)),
+          lineStyle: {
+            color: '#49A4FF',
+            width: 2
+          }
         }
       ]
     }
-    option && myChart.setOption(option)
+    option && myChart.value.setOption(option)
+  }
+
+  const resizeChart = () => {
+    myChart.value?.resize()
   }
 
   onMounted(() => {
     initCharts()
+    window.addEventListener('resize', resizeChart, true)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart, true)
   })
 </script>
 
 <template>
   <div class="chart">
     <div class="chart-title">{{ $props.title }}</div>
-    <canvas :id="$props.chartId" style="width: 100%; height: 100%; padding: 16px"></canvas>
+    <div :id="$props.chartId" style="height: 260px; width: 100%"></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .chart {
-    text-align: center;
+    height: 300px;
+    box-sizing: border-box;
+    padding: 10px;
     &-title {
       text-align: start;
       font-size: 12px;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
index 1ce32da37..d2d2dcaae 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted } from 'vue'
+  import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
   import * as echarts from 'echarts/core'
   import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
   import { CanvasRenderer } from 'echarts/renderers'
@@ -32,18 +32,19 @@
     title: string
   }>()
 
+  const myChart = shallowRef<echarts.ECharts | null>(null)
+
   const initCharts = () => {
     const chartDom = document.getElementById(`${props.chartId}`)
-    const myChart = echarts.init(chartDom, null, {
-      devicePixelRatio: window.devicePixelRatio,
-      renderer: 'svg'
+    myChart.value = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio
     })
     const option: EChartsOption = {
       series: [
         {
           type: 'gauge',
           radius: '90%',
-          center: ['50%', '56%'],
+          center: ['50%', '50%'],
           axisLine: {
             lineStyle: {
               width: 14,
@@ -95,7 +96,7 @@
       ]
     }
 
-    myChart.setOption<echarts.EChartsCoreOption>({
+    myChart.value?.setOption<echarts.EChartsCoreOption>({
       series: [
         {
           data: [
@@ -107,24 +108,37 @@
       ]
     })
 
-    option && myChart.setOption(option)
+    option && myChart.value.setOption(option)
+  }
+
+  const resizeChart = async () => {
+    setTimeout(() => {
+      myChart.value?.resize()
+    })
   }
 
   onMounted(() => {
     initCharts()
+    window.addEventListener('resize', resizeChart, true)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart, true)
   })
 </script>
 
 <template>
   <div class="chart">
     <div class="chart-title">{{ $props.title }}</div>
-    <canvas :id="$props.chartId" style="width: 100%; height: 100%"></canvas>
+    <div :id="$props.chartId" style="height: 260px; width: 100%"></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .chart {
-    text-align: center;
+    height: 300px;
+    box-sizing: border-box;
+    padding: 10px;
     &-title {
       text-align: start;
       font-size: 12px;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 581a14d69..97975dc56 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -22,7 +22,7 @@
   import { useRoute } from 'vue-router'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { TabItem } from '@/components/common/main-card/types'
-  import Dashboard from './dashboard.vue'
+  import Overview from './overview.vue'
 
   const route = useRoute()
   const title = computed(() => route.params.cluster as string)
@@ -91,7 +91,7 @@
 <template>
   <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
   <main-card :active-key="activeKey" :tabs="tabs">
-    <component :is="Dashboard"></component>
+    <component :is="Overview"></component>
   </main-card>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
similarity index 73%
rename from bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
rename to bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index d5cc09c98..a9d826e8a 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/dashboard.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -18,7 +18,10 @@
 -->
 
 <script setup lang="ts">
+  import { ref } from 'vue'
   import type { MenuProps } from 'ant-design-vue'
+  import GaugeChart from './components/gauge-chart.vue'
+  import CategoryChart from './components/category-chart.vue'
 
   const baseConfig = {
     clusterStatus: '集群状态',
@@ -92,12 +95,47 @@
     }
   ]
 
+  type TimeRangeText = '1m' | '15m' | '30m' | '1h' | '6h' | '30h'
+  type TimeRangeItem = {
+    text: TimeRangeText
+    time: string
+  }
+  const timeRanges: TimeRangeItem[] = [
+    {
+      text: '1m',
+      time: ''
+    },
+    {
+      text: '15m',
+      time: ''
+    },
+    {
+      text: '30m',
+      time: ''
+    },
+    {
+      text: '1h',
+      time: ''
+    },
+    {
+      text: '6h',
+      time: ''
+    },
+    {
+      text: '30h',
+      time: ''
+    }
+  ]
+
+  const currTimeRange = ref<TimeRangeText>('15m')
+
   const handleServiceOperate: MenuProps['onClick'] = (item) => {
     console.log('item :>> ', item.key)
   }
 
-  import GaugeChart from './components/gauge-chart.vue'
-  import CategoryChart from './components/category-chart.vue'
+  const handleTimeRange = (time: TimeRangeItem) => {
+    currTimeRange.value = time.text
+  }
 </script>
 
 <template>
@@ -162,31 +200,43 @@
         </a-descriptions>
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
-        <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }">
-          <template #title>
-            <a-typography-text strong content="图表" />
-          </template>
-          <a-descriptions-item>
+        <div class="chart-title">
+          <a-typography-text strong content="图表" />
+          <a-space :size="12">
+            <div
+              v-for="time in timeRanges"
+              :key="time.text"
+              tabindex="0"
+              class="time-range"
+              :class="{ 'time-range-actived': currTimeRange === time.text }"
+              @click="handleTimeRange(time)"
+            >
+              {{ time.text }}
+            </div>
+          </a-space>
+        </div>
+        <a-row class="chart-wrp">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
               <gauge-chart chart-id="chart1" title="内存使用率" />
             </div>
-          </a-descriptions-item>
-          <a-descriptions-item>
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
               <gauge-chart chart-id="chart2" title="CUP 使用率" />
             </div>
-          </a-descriptions-item>
-          <a-descriptions-item>
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart3" title="内存使用率" />
+              <category-chart chart-id="chart4" title="CPU 使用率" />
             </div>
-          </a-descriptions-item>
-          <a-descriptions-item>
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart4" title="CUP 使用率" />
+              <category-chart chart-id="chart3" title="内存使用率" />
             </div>
-          </a-descriptions-item>
-        </a-descriptions>
+          </a-col>
+        </a-row>
       </a-col>
     </a-row>
   </div>
@@ -203,8 +253,54 @@
       border-bottom: 1px solid #e5e5e5;
     }
 
+    .chart-title {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+
+    .time-range {
+      padding-inline: 6px;
+      border-radius: 4px;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      outline: none;
+      transition: background-color 0.3s;
+
+      &:hover {
+        color: $color-primary-text-hover;
+      }
+      &-actived {
+        color: $color-primary-text;
+      }
+    }
+
+    .chart-wrp {
+      border-radius: 8px;
+      overflow: hidden;
+      box-sizing: border-box;
+      border: 1px solid $color-border;
+    }
+
     .chart-item-wrp {
-      padding: 10px;
+      border: 1px solid $color-border;
+      margin-right: -1px;
+      margin-bottom: -1px;
+
+      &:first-child {
+        border-left: 0;
+        border-top: 0;
+      }
+
+      &:not(:last-child) {
+        border-right: 0;
+      }
+
+      &:nth-child(n + 3):not(:nth-child(4)) {
+        border-bottom: 0;
+        border-left: 0;
+      }
     }
 
     :deep(.ant-descriptions-view) {

From 6492e17752283555fec97aa3ad1dc7a28f900471 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 19 Dec 2024 17:42:33 +0800
Subject: [PATCH 05/39] feat: Add service for Cluster

---
 .../src/components/common/main-card/index.vue |  2 +-
 .../pages/cluster-manage/cluster/index.vue    |  2 +-
 .../pages/cluster-manage/cluster/service.vue  | 29 +++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue

diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
index 378685017..9ad73b5de 100644
--- a/bigtop-manager-ui/src/components/common/main-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -41,7 +41,7 @@
 
 <template>
   <div class="main-card">
-    <a-tabs v-mode:active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
+    <a-tabs :active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
       <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
         <slot></slot>
       </a-tab-pane>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 97975dc56..ea7655cc5 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -90,7 +90,7 @@
 
 <template>
   <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
-  <main-card :active-key="activeKey" :tabs="tabs">
+  <main-card v-model:active-key="activeKey" :tabs="tabs">
     <component :is="Overview"></component>
   </main-card>
 </template>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
new file mode 100644
index 000000000..96f922c0c
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -0,0 +1,29 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div class="service"> </div>
+</template>
+
+<style lang="scss" scoped>
+  .service {
+  }
+</style>

From f41518599d425ab6c191414fa85f1a6deffcba8e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 19 Dec 2024 18:05:37 +0800
Subject: [PATCH 06/39] feat: Update cluster create

---
 .../components/common/header-card/index.vue   | 30 ++++++++++---------
 .../pages/cluster-manage/cluster/create.vue   | 27 +++++++++++++++--
 .../pages/cluster-manage/cluster/index.vue    | 11 ++++++-
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
index 8f8c13614..15b6b9f51 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -53,21 +53,23 @@
 
 <template>
   <div class="header-card">
-    <div class="header-card-info">
-      <a-avatar v-if="showAvatar" shape="square" :size="54" />
-      <div class="card-info-title">
-        <div class="card-info-status">
-          <a-typography-title :level="5">{{ $props.title }}</a-typography-title>
-          <svg-icon v-if="showStatus" :name="status" />
+    <slot>
+      <div class="header-card-info">
+        <a-avatar v-if="showAvatar" shape="square" :size="54" />
+        <div class="card-info-title">
+          <div class="card-info-status">
+            <a-typography-title :level="5">{{ $props.title }}</a-typography-title>
+            <svg-icon v-if="showStatus" :name="status" />
+          </div>
+          <a-typography-text type="secondary">{{ $props.desc }}</a-typography-text>
         </div>
-        <a-typography-text type="secondary">{{ $props.desc }}</a-typography-text>
       </div>
-    </div>
-    <div class="header-card-action">
-      <slot name="actions">
-        <button-group :groups="$props.actionGroups" @on-click="onActions" />
-      </slot>
-    </div>
+      <div class="header-card-action">
+        <slot name="actions">
+          <button-group :groups="$props.actionGroups" @on-click="onActions" />
+        </slot>
+      </div>
+    </slot>
   </div>
 </template>
 
@@ -75,7 +77,7 @@
   .header-card {
     width: 100%;
     min-width: 389px;
-    height: 102px;
+    min-height: 102px;
     @include flexbox($justify: space-between, $align: center);
     background-color: $color-white;
     padding: $space-md;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index a1f074d6b..774827d77 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
+  import { shallowRef } from 'vue'
   const menuStore = useMenuStore()
 
   const onSave = () => {
@@ -28,14 +29,36 @@
   const onDel = () => {
     menuStore.updateSiderMenu(true)
   }
+
+  const stepItems = shallowRef([
+    {
+      title: '集群管理'
+    },
+    {
+      title: '组件信息'
+    },
+    {
+      title: '主机配置'
+    },
+    {
+      title: '创建集群'
+    }
+  ])
 </script>
 
 <template>
-  <div>
+  <div class="cluster-create">
+    <header-card>
+      <a-steps style="margin-inline: 6%" :current="1" :items="stepItems"></a-steps>
+    </header-card>
     <div> create & del</div>
     <a-button @click="onSave">create</a-button>
     <a-button @click="onDel">delete</a-button>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .cluster-create {
+    min-width: 600px;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index ea7655cc5..115f72b82 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -23,6 +23,7 @@
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { TabItem } from '@/components/common/main-card/types'
   import Overview from './overview.vue'
+  import Service from './service.vue'
 
   const route = useRoute()
   const title = computed(() => route.params.cluster as string)
@@ -79,6 +80,14 @@
     }
   ])
 
+  const getCompName = computed(() => {
+    if (activeKey.value === '1') {
+      return Overview
+    } else {
+      return Service
+    }
+  })
+
   const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = ({ key }) => {
     console.log('key :>> ', key)
   }
@@ -91,7 +100,7 @@
 <template>
   <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
   <main-card v-model:active-key="activeKey" :tabs="tabs">
-    <component :is="Overview"></component>
+    <component :is="getCompName"></component>
   </main-card>
 </template>
 

From 46e214c774fae499bb6b1b918b26e6c990ab6a47 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 19 Dec 2024 23:43:05 +0800
Subject: [PATCH 07/39] feat: Add cluster locale

---
 .../src/components/common/auto-form/index.vue |  18 ++-
 .../src/components/common/main-card/index.vue |  27 ++--
 .../src/locales/en_US/cluster.ts              |  26 ++++
 bigtop-manager-ui/src/locales/en_US/index.ts  |   4 +-
 .../src/locales/zh_CN/cluster.ts              |  26 ++++
 bigtop-manager-ui/src/locales/zh_CN/index.ts  |   4 +-
 .../cluster/components/cluster-base.vue       | 118 ++++++++++++++++++
 .../pages/cluster-manage/cluster/create.vue   |  53 ++++++--
 .../pages/cluster-manage/cluster/index.vue    |   4 +-
 9 files changed, 253 insertions(+), 27 deletions(-)
 create mode 100644 bigtop-manager-ui/src/locales/en_US/cluster.ts
 create mode 100644 bigtop-manager-ui/src/locales/zh_CN/cluster.ts
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue

diff --git a/bigtop-manager-ui/src/components/common/auto-form/index.vue b/bigtop-manager-ui/src/components/common/auto-form/index.vue
index 9d924006c..399846ce7 100644
--- a/bigtop-manager-ui/src/components/common/auto-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/auto-form/index.vue
@@ -20,13 +20,15 @@
 <script lang="ts" setup>
   import { computed, onMounted, ref, toRaw, toRefs, watch } from 'vue'
   import { Emits, FormState, Props } from './types'
+  import { useLocaleStore } from '@/store/locale'
+  import { storeToRefs } from 'pinia'
 
   const props = withDefaults(defineProps<Props>(), {
     showButton: true,
     disabledItems: null, // Has higher priority than controlProps of formItems
     hiddenItems: () => [],
     labelCol: () => {
-      return { span: 7 }
+      return { span: 5 }
     },
     wrapperCol: () => {
       return { span: 14 }
@@ -43,6 +45,8 @@
 
   const emits = defineEmits<Emits>()
 
+  const localeStore = useLocaleStore()
+  const { locale } = storeToRefs(localeStore)
   const formRef = ref()
   const formState = ref<FormState>({})
   const tmpCacheFormState = ref<FormState>({})
@@ -71,6 +75,10 @@
     }
   )
 
+  watch(locale, () => {
+    formRef.value.clearValidate()
+  })
+
   const initForm = () => {
     const newForm: FormState = {}
     props.formItems.forEach((item) => {
@@ -155,7 +163,7 @@
               v-if="item.type == 'input'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             />
 
@@ -164,7 +172,7 @@
               v-if="item.type == 'textarea'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             />
 
@@ -173,7 +181,7 @@
               v-if="item.type == 'select'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             >
               <a-select-option
@@ -190,7 +198,7 @@
               v-if="item.type == 'radio'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             >
               <a-radio
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
index 9ad73b5de..f5efb7a78 100644
--- a/bigtop-manager-ui/src/components/common/main-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -22,11 +22,12 @@
   import { TabItem } from './types'
 
   interface Props {
-    activeKey: string
-    tabs: TabItem[]
+    activeKey?: string
+    tabs?: TabItem[]
   }
 
   withDefaults(defineProps<Props>(), {
+    activeKey: '',
     tabs: () => {
       return []
     }
@@ -41,14 +42,16 @@
 
 <template>
   <div class="main-card">
-    <a-tabs :active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
-      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
-        <slot></slot>
-      </a-tab-pane>
-      <template #renderTabBar="{ DefaultTabBar, ...props }">
-        <component :is="DefaultTabBar" v-bind="props" />
-      </template>
-    </a-tabs>
+    <slot>
+      <a-tabs :active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
+        <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
+          <slot name="tab-item"></slot>
+        </a-tab-pane>
+        <template #renderTabBar="{ DefaultTabBar, ...props }">
+          <component :is="DefaultTabBar" v-bind="props" />
+        </template>
+      </a-tabs>
+    </slot>
   </div>
 </template>
 
@@ -56,9 +59,9 @@
   .main-card {
     min-width: 389px;
     background-color: $color-white;
-    padding-inline: $space-md;
-    padding-bottom: $space-md;
+    padding: $space-md;
     :deep(.ant-tabs-tab) {
+      padding-top: 0;
       padding-inline: 16px;
     }
   }
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
new file mode 100644
index 000000000..ecfa16db9
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default {
+  base_info: 'Basic information',
+  cluster_config: 'Cluster configuration',
+  cluster_management: 'Cluster management',
+  component_info: 'Component information',
+  host_config: 'Host configuration',
+  create_cluster: 'Create Cluster'
+}
diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index 804d309c4..c79d8617f 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -23,6 +23,7 @@ import login from '@/locales/en_US/login'
 import user from '@/locales/en_US/user.ts'
 import llmConfig from '@/locales/en_US/llm-config.ts'
 import aiAssistant from '@/locales/en_US/ai-assistant.ts'
+import cluster from '@/locales/en_US/cluster.ts'
 
 export default {
   common,
@@ -30,5 +31,6 @@ export default {
   login,
   user,
   llmConfig,
-  aiAssistant
+  aiAssistant,
+  cluster
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
new file mode 100644
index 000000000..e1979c840
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default {
+  base_info: '基本信息',
+  cluster_config: '集群配置',
+  cluster_management: '集群管理',
+  component_info: '组件信息',
+  host_config: '主机管理',
+  create_cluster: '创建集群'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index 2cc7eeb31..31b28a5e5 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -23,6 +23,7 @@ import login from '@/locales/zh_CN/login'
 import user from '@/locales/zh_CN/user.ts'
 import llmConfig from '@/locales/zh_CN/llm-config.ts'
 import aiAssistant from '@/locales/zh_CN/ai-assistant.ts'
+import cluster from '@/locales/zh_CN/cluster.ts'
 
 export default {
   common,
@@ -30,5 +31,6 @@ export default {
   login,
   user,
   llmConfig,
-  aiAssistant
+  aiAssistant,
+  cluster
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
new file mode 100644
index 000000000..b1ae02e09
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -0,0 +1,118 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import type { FormItemState } from '@/components/common/auto-form/types'
+  import { computed, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+  const activeKey = ref(['1'])
+  const formLayout = computed(() => ({
+    labelCol: { span: 4 },
+    wrapperCol: { span: 6 }
+  }))
+  const baseInfoFormItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'name',
+      formItemProps: {
+        name: 'name',
+        label: '集群名',
+        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error')
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'remark',
+      formItemProps: {
+        name: 'remark',
+        label: '集群描述',
+        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error')
+      }
+    }
+  ])
+  const clusterConfigFormItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'name',
+      formItemProps: {
+        name: 'name',
+        label: '集群根目录',
+        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error')
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'remark',
+      formItemProps: {
+        name: 'remark',
+        label: '集群用户组',
+        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error')
+      }
+    }
+  ])
+  const collapses = ref([
+    {
+      title: computed(() => t('cluster.base_info')),
+      formValue: {},
+      formItems: baseInfoFormItems.value
+    },
+    {
+      title: computed(() => t('cluster.cluster_config')),
+      formValue: {},
+      formItems: clusterConfigFormItems.value
+    }
+  ])
+</script>
+
+<template>
+  <div class="cluster-base">
+    <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
+      <a-collapse-panel v-for="(collapse, idx) in collapses" :key="`${idx + 1}`" :header="collapse.title">
+        <auto-form
+          v-bind="formLayout"
+          v-model:form-value="collapse.formValue"
+          :form-items="collapse.formItems"
+          :show-button="false"
+        />
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-base {
+    :deep(.ant-collapse-header) {
+      background-color: $color-fill-quaternary;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 774827d77..66316eac3 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -19,8 +19,11 @@
 
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
-  import { shallowRef } from 'vue'
+  import { computed, ref } from 'vue'
+  import ClusterBase from './components/cluster-base.vue'
+  import { useI18n } from 'vue-i18n'
   const menuStore = useMenuStore()
+  const { t } = useI18n()
 
   const onSave = () => {
     menuStore.updateSiderMenu()
@@ -30,27 +33,53 @@
     menuStore.updateSiderMenu(true)
   }
 
-  const stepItems = shallowRef([
+  const current = ref(0)
+  const steps = computed(() => [
     {
-      title: '集群管理'
+      title: t('cluster.cluster_management')
     },
     {
-      title: '组件信息'
+      title: t('cluster.component_info')
     },
     {
-      title: '主机配置'
+      title: t('cluster.host_config')
     },
     {
-      title: '创建集群'
+      title: t('cluster.create_cluster')
     }
   ])
+  const getCompName = computed(() => {
+    if (current.value === 0) {
+      return ClusterBase
+    } else {
+      return ClusterBase
+    }
+  })
 </script>
 
 <template>
   <div class="cluster-create">
     <header-card>
-      <a-steps style="margin-inline: 6%" :current="1" :items="stepItems"></a-steps>
+      <a-steps style="margin-inline: 6%" :current="current" :items="steps"></a-steps>
     </header-card>
+    <main-card>
+      <template v-for="stepItem in steps" :key="stepItem.title">
+        <div v-show="steps[current].title === stepItem.title">
+          <a-typography-text strong :content="stepItem.title" />
+          <section class="step-content">
+            <component :is="getCompName" />
+          </section>
+        </div>
+      </template>
+      <div class="step-action">
+        <a-space>
+          <a-button>退出</a-button>
+          <a-button type="primary">上一步</a-button>
+          <a-button type="primary">下一步</a-button>
+          <a-button type="primary">完成</a-button>
+        </a-space>
+      </div>
+    </main-card>
     <div> create & del</div>
     <a-button @click="onSave">create</a-button>
     <a-button @click="onDel">delete</a-button>
@@ -60,5 +89,15 @@
 <style lang="scss" scoped>
   .cluster-create {
     min-width: 600px;
+    .header-card {
+      min-height: 80px;
+    }
+  }
+  .step-content {
+    padding-block: $space-md;
+  }
+  .step-action {
+    text-align: end;
+    margin-top: $space-md;
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 115f72b82..eca02247b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -100,7 +100,9 @@
 <template>
   <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
   <main-card v-model:active-key="activeKey" :tabs="tabs">
-    <component :is="getCompName"></component>
+    <template #tab-item>
+      <component :is="getCompName"></component>
+    </template>
   </main-card>
 </template>
 

From 7715b1feb66bd492d3016563043ea4ff4195d378 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 20 Dec 2024 15:29:34 +0800
Subject: [PATCH 08/39] feat: Add host-chonfig page

---
 .../components/common/button-group/index.vue  |  17 +-
 .../components/common/button-group/types.ts   |   4 +
 .../src/composables/use-base-table.ts         |   7 +-
 .../src/locales/en_US/cluster.ts              |   9 +-
 bigtop-manager-ui/src/locales/en_US/common.ts |   6 +-
 .../src/locales/zh_CN/cluster.ts              |   9 +-
 bigtop-manager-ui/src/locales/zh_CN/common.ts |   6 +-
 .../cluster/components/cluster-base.vue       |  52 +++--
 .../cluster/components/component-info.vue     | 101 +++++++++
 .../cluster/components/host-config.vue        | 193 ++++++++++++++++++
 .../cluster-manage/cluster/components/mock.ts |  51 +++++
 .../pages/cluster-manage/cluster/create.vue   |  54 +++--
 12 files changed, 465 insertions(+), 44 deletions(-)
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts

diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index 23e1b801c..cd37ed8c4 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -24,15 +24,17 @@
 
   const props = withDefaults(defineProps<Props>(), {
     i18n: '',
+    textCompact: false,
     groupShape: 'circle',
     groupType: 'text',
+    space: 8,
     groups: () => {
       return []
     }
   })
 
   const { t } = useI18n()
-  const { groups, groupShape, groupType } = toRefs(props)
+  const { groups, groupShape, groupType, space, args } = toRefs(props)
 
   const checkTitle = (item: GroupItem) => {
     if (props.i18n) {
@@ -48,7 +50,7 @@
 </script>
 
 <template>
-  <a-space>
+  <a-space :size="space" :wrap="true" :class="{ 'text-compact': $props.textCompact }">
     <template v-for="(item, idx) in groups" :key="idx">
       <a-dropdown v-if="item.dropdownMenu">
         <a-button
@@ -75,11 +77,12 @@
       </a-dropdown>
       <a-button
         v-else
+        :danger="item.danger"
         :disabled="item.disabled"
         :shape="item.shape || groupShape || 'default'"
         :type="item.type || groupType || 'default'"
         :title="checkTitle(item)"
-        @click="item.clickEvent ? item.clickEvent(item) : () => {}"
+        @click="item.clickEvent ? item.clickEvent(item, args) : () => {}"
       >
         <template #icon>
           <slot name="icon" :item="item" />
@@ -92,4 +95,10 @@
   </a-space>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .text-compact {
+    button {
+      padding: 0;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/button-group/types.ts b/bigtop-manager-ui/src/components/common/button-group/types.ts
index f2a50aff2..31ef0fb07 100644
--- a/bigtop-manager-ui/src/components/common/button-group/types.ts
+++ b/bigtop-manager-ui/src/components/common/button-group/types.ts
@@ -34,6 +34,7 @@ export interface GroupItem<T = string> {
   type?: BtnType
   shape?: ShapeType
   disabled?: boolean
+  danger?: boolean
   dropdownMenu?: DropdownMenu[]
   clickEvent?: (item?: GroupItem, ...args: any[]) => void
   dropdownMenuClickEvent?: MenuProps['onClick']
@@ -41,7 +42,10 @@ export interface GroupItem<T = string> {
 
 export interface Props {
   i18n?: string
+  textCompact?: boolean
   groups: GroupItem[]
   groupType?: BtnType
   groupShape?: ShapeType
+  space?: number
+  args?: any
 }
diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index f1010693d..3ba656959 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -19,13 +19,15 @@
 
 import { ref, onUnmounted } from 'vue'
 import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
-export interface UseBaseTableProps<T> {
+import { useI18n } from 'vue-i18n'
+export interface UseBaseTableProps<T = any> {
   columns: TableColumnType[]
   rows?: T[]
   pagination?: TablePaginationConfig | false | undefined
 }
 const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const { columns, rows, pagination } = props
+  const { t } = useI18n()
   const loading = ref(false)
   const dataSource = ref<T[]>(rows || [])
   const columnsProp = ref<TableColumnType[]>(columns)
@@ -35,7 +37,8 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
     total: dataSource.value.length,
     size: 'small',
     showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50']
+    pageSizeOptions: ['10', '20', '30', '40', '50'],
+    showTotal: (total) => `${t('common.total', [total])}`
   })
 
   // merge pagination config
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index ecfa16db9..560f61d3b 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -22,5 +22,12 @@ export default {
   cluster_management: 'Cluster management',
   component_info: 'Component information',
   host_config: 'Host configuration',
-  create_cluster: 'Create Cluster'
+  create: 'Create cluster',
+  name: 'Name',
+  description: 'Description',
+  root_directory: 'Root directory',
+  user_group: 'User group',
+  config_source: 'Configuration source',
+  install_dependencies: 'Install dependencies',
+  add_host: 'Add host'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index 7765f2ea0..5b8e970ce 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -27,6 +27,7 @@ export default {
   edit: 'Edit',
   rename: 'Rename',
   delete: 'Delete',
+  bulk_remove: 'Bulk remove',
   disable: 'Disable',
   enable: 'Enable',
   submit: 'Submit',
@@ -49,6 +50,8 @@ export default {
   service: 'Service',
   stack: 'Stack',
   stage: 'Stage',
+  search: 'Search',
+  reset: 'Reset',
   progress: 'Progress',
   status_change_success: 'Status changed successfully',
   test_success: 'Test successful !',
@@ -74,5 +77,6 @@ export default {
   loading_text_verifying: 'Verifying',
   enter_error: 'Please enter {0}',
   select_error: 'Please select {0}',
-  delete_msg: 'Are you sure you want to delete this?'
+  delete_msg: 'Are you sure you want to delete this?',
+  total: 'Total {0} items'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index e1979c840..a9ddd6ac0 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -22,5 +22,12 @@ export default {
   cluster_management: '集群管理',
   component_info: '组件信息',
   host_config: '主机管理',
-  create_cluster: '创建集群'
+  create: '创建集群',
+  name: '集群名',
+  description: '集群描述',
+  root_directory: '集群根目录',
+  user_group: '集群用户组',
+  config_source: '配置源',
+  install_dependencies: '安装依赖',
+  add_host: '新增主机'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 65cea43ca..07a2e0c88 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -26,6 +26,7 @@ export default {
   status: '状态',
   edit: '编辑',
   delete: '删除',
+  bulk_remove: '批量删除',
   rename: '重命名',
   disable: '停用',
   enable: '使用',
@@ -49,6 +50,8 @@ export default {
   service: '服务',
   stack: '组件栈',
   stage: '阶段',
+  search: '搜索',
+  reset: '重置',
   progress: '进度',
   created: '创建成功',
   status_change_success: '状态更新成功',
@@ -74,5 +77,6 @@ export default {
   loading_text_verifying: '校验中',
   enter_error: '请输入{0}',
   select_error: '请选择{0}',
-  delete_msg: '确认要删除该记录吗？'
+  delete_msg: '确认要删除该记录吗？',
+  total: '共{0}数据'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index b1ae02e09..488673b0f 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -19,14 +19,15 @@
 
 <script setup lang="ts">
   import type { FormItemState } from '@/components/common/auto-form/types'
-  import { computed, ref } from 'vue'
+  import { computed, ref, shallowRef } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
-  const activeKey = ref(['1'])
+  const activeKey = ref(['1', '2'])
+  const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
   const formLayout = computed(() => ({
-    labelCol: { span: 4 },
-    wrapperCol: { span: 6 }
+    labelCol: { xs: 5, sm: 5, md: 5, lg: 4, xl: 3 },
+    wrapperCol: { xs: 10, sm: 10, md: 10, lg: 10, xl: { xl: 10, pull: 1 } }
   }))
   const baseInfoFormItems = computed((): FormItemState[] => [
     {
@@ -34,7 +35,7 @@
       field: 'name',
       formItemProps: {
         name: 'name',
-        label: '集群名',
+        label: t('cluster.name'),
         rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
       },
       controlProps: {
@@ -43,10 +44,10 @@
     },
     {
       type: 'textarea',
-      field: 'remark',
+      field: 'desc',
       formItemProps: {
-        name: 'remark',
-        label: '集群描述',
+        name: 'desc',
+        label: t('cluster.description'),
         rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
       },
       controlProps: {
@@ -57,10 +58,10 @@
   const clusterConfigFormItems = computed((): FormItemState[] => [
     {
       type: 'input',
-      field: 'name',
+      field: 'rootDirectory',
       formItemProps: {
-        name: 'name',
-        label: '集群根目录',
+        name: 'rootDirectory',
+        label: t('cluster.root_directory'),
         rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
       },
       controlProps: {
@@ -69,10 +70,10 @@
     },
     {
       type: 'textarea',
-      field: 'remark',
+      field: 'userGroup',
       formItemProps: {
-        name: 'remark',
-        label: '集群用户组',
+        name: 'userGroup',
+        label: t('cluster.user_group'),
         rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
       },
       controlProps: {
@@ -92,6 +93,22 @@
       formItems: clusterConfigFormItems.value
     }
   ])
+
+  const collectAutoFormRefs = (el: any, title: string) => {
+    if (!autoFormRefMap.value.has(title)) {
+      autoFormRefMap.value.set(title, el)
+    }
+  }
+
+  const check = () => {
+    const autoFormRefs = [...autoFormRefMap.value.values()]
+    autoFormRefs.forEach(async (formRef, idx) => {
+      const res = await formRef.getFormValidation()
+      if (!res) {
+        !activeKey.value.includes(`${idx + 1}`) && activeKey.value.push(`${idx + 1}`)
+      }
+    })
+  }
 </script>
 
 <template>
@@ -99,6 +116,12 @@
     <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
       <a-collapse-panel v-for="(collapse, idx) in collapses" :key="`${idx + 1}`" :header="collapse.title">
         <auto-form
+          :key="collapse.title"
+          :ref="
+            (el) => {
+              collectAutoFormRefs(el, collapse.title)
+            }
+          "
           v-bind="formLayout"
           v-model:form-value="collapse.formValue"
           :form-items="collapse.formItems"
@@ -106,6 +129,7 @@
         />
       </a-collapse-panel>
     </a-collapse>
+    <a-button @click="check">校验</a-button>
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
new file mode 100644
index 000000000..44d2392b8
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -0,0 +1,101 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { generateTestData } from './mock'
+  import { ref, shallowRef } from 'vue'
+  import type { TableColumnType } from 'ant-design-vue'
+  import useBaseTable from '@/composables/use-base-table'
+  const columns: TableColumnType[] = [
+    {
+      title: '#',
+      width: '48px',
+      key: 'index',
+      customRender: ({ index }) => {
+        return `${index + 1}`
+      }
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '版本',
+      dataIndex: 'version',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      title: '组件栈',
+      dataIndex: 'compStack',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'descrip',
+      ellipsis: true
+    }
+  ]
+  const data = ref<any[]>(generateTestData(50))
+  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+    columns,
+    rows: data.value
+  })
+  const componentSelected = ref(0)
+  const components = shallowRef([
+    {
+      id: 0,
+      name: 'Bigtop'
+    },
+    {
+      id: 1,
+      name: 'Extra'
+    }
+  ])
+</script>
+
+<template>
+  <div class="component-info">
+    <header>
+      <a-radio-group v-model:value="componentSelected" button-style="solid">
+        <a-radio-button v-for="comp in components" :key="comp.id" :value="comp.id">{{ comp.name }}</a-radio-button>
+      </a-radio-group>
+      <a-button type="primary">{{ $t('cluster.config_source') }}</a-button>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columnsProp"
+      :pagination="paginationProps"
+      @change="onChange"
+    ></a-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .component-info {
+    header {
+      @include flexbox($justify: space-between);
+      margin-bottom: $space-md;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
new file mode 100644
index 000000000..af2a3c88c
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -0,0 +1,193 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { TableColumnType } from 'ant-design-vue'
+  import { SearchOutlined } from '@ant-design/icons-vue'
+  import { computed, reactive, ref } from 'vue'
+  import { generateTableHostData } from './mock'
+  import useBaseTable from '@/composables/use-base-table'
+  import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
+  import type { GroupItem } from '@/components/common/button-group/types'
+
+  const searchInputRef = ref()
+  const data = ref<any[]>(generateTableHostData(50))
+  const state = reactive({
+    searchText: '',
+    searchedColumn: ''
+  })
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: '主机名',
+      dataIndex: 'name',
+      key: 'name',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.name, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'address',
+      key: 'address',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.address, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '260px',
+      ellipsis: true
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      width: '160px',
+      fixed: 'right'
+    }
+  ])
+  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+    columns: columns.value,
+    rows: data.value
+  })
+
+  const operations = computed((): GroupItem[] => [
+    {
+      text: 'edit',
+      clickEvent: (_item, args) => handleEdit(args)
+    },
+    {
+      text: 'delete',
+      danger: true,
+      clickEvent: (_item, args) => handleDelet(args)
+    }
+  ])
+
+  const isContain = (source: string, target: string) => {
+    return source.toString().toLowerCase().includes(target.toLowerCase())
+  }
+
+  const onFilterDropdownOpenChange = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => {
+        searchInputRef.value.focus()
+      }, 100)
+    }
+  }
+
+  const handleSearch = (selectedKeys: string[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
+    confirm()
+    state.searchText = selectedKeys[0] as string
+    state.searchedColumn = dataIndex as string
+  }
+
+  const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
+    clearFilters({ confirm: true })
+    state.searchText = ''
+  }
+
+  const handleEdit = (row: any) => {
+    console.log('row :>> ', row)
+  }
+
+  const handleDelet = (row: any) => {
+    console.log('row :>> ', row)
+  }
+</script>
+
+<template>
+  <div class="host-config">
+    <header>
+      <a-button type="primary">{{ $t('cluster.install_dependencies') }}</a-button>
+      <a-space :size="16">
+        <a-button type="primary" danger>{{ $t('common.bulk_remove') }}</a-button>
+        <a-button type="primary">{{ $t('cluster.add_host') }}</a-button>
+      </a-space>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columnsProp"
+      :pagination="paginationProps"
+      @change="onChange"
+    >
+      <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+        <div class="search">
+          <a-input
+            ref="searchInputRef"
+            :placeholder="$t('common.enter_error', [column.title])"
+            :value="selectedKeys[0]"
+            @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
+            @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          />
+          <a-space :size="16">
+            <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
+              <template #icon><SearchOutlined /></template>
+              {{ $t('common.search') }}
+            </a-button>
+            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
+          </a-space>
+        </div>
+      </template>
+      <template #customFilterIcon="{ filtered }">
+        <search-outlined :style="{ color: filtered ? 'var(--color-primary)' : undefined }" />
+      </template>
+      <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'operation'">
+          <button-group
+            i18n="common"
+            :text-compact="true"
+            :space="24"
+            :groups="operations"
+            :args="record"
+            group-shape="default"
+            group-type="link"
+          ></button-group>
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .host-config {
+    header {
+      @include flexbox($justify: space-between);
+      margin-bottom: $space-md;
+    }
+  }
+  .search {
+    display: grid;
+    gap: $space-sm;
+    padding: $space-sm;
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
new file mode 100644
index 000000000..94aeedbc6
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -0,0 +1,51 @@
+export function generateTestData(count = 100) {
+  // 定义字段
+  const names = ['组件A', '组件B', '组件C', '组件D', '组件E']
+  const versions = ['1.0.0', '2.3.1', '3.2.4', '4.0.0', '5.1.2']
+  const compStacks = [
+    'React, Redux, Webpack',
+    'Vue, Vuex, Vite',
+    'Angular, RxJS, NgRx',
+    'Node.js, Express, MongoDB',
+    'Svelte, Rollup, Firebase'
+  ]
+  const descriptions = [
+    '这是一个用于状态管理的组件',
+    '这是一个用于数据展示的组件',
+    '这是一个用于实时数据处理的组件',
+    '这是一个后端服务组件',
+    '这是一个前端开发框架'
+  ]
+
+  // 生成测试数据
+  const testData = Array.from({ length: count }, (_, i) => ({
+    key: (i + 1).toString(),
+    name: names[Math.floor(Math.random() * names.length)],
+    version: versions[Math.floor(Math.random() * versions.length)],
+    compStack: compStacks[Math.floor(Math.random() * compStacks.length)],
+    descrip: descriptions[Math.floor(Math.random() * descriptions.length)]
+  }))
+
+  return testData
+}
+
+export function generateTableHostData(numRows = 100) {
+  const hostnames = ['Server-A', 'Server-B', 'Server-C', 'Server-D', 'Server-E']
+  const ipAddresses = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4', '192.168.1.5']
+  const remarks = ['Main server', 'Backup server', 'Database server', 'Web server', 'Test server']
+  const statuses = ['Online', 'Offline', 'Maintenance', 'Active', 'Inactive']
+
+  const tableData = []
+
+  for (let i = 0; i < numRows; i++) {
+    tableData.push({
+      key: i + 1,
+      name: hostnames[Math.floor(Math.random() * hostnames.length)],
+      address: ipAddresses[Math.floor(Math.random() * ipAddresses.length)],
+      remark: remarks[Math.floor(Math.random() * remarks.length)],
+      status: statuses[Math.floor(Math.random() * statuses.length)]
+    })
+  }
+
+  return tableData
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 66316eac3..a24cffa70 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -18,20 +18,21 @@
 -->
 
 <script setup lang="ts">
-  import { useMenuStore } from '@/store/menu'
+  // import { useMenuStore } from '@/store/menu'
   import { computed, ref } from 'vue'
   import ClusterBase from './components/cluster-base.vue'
+  import ComponentInfo from './components/component-info.vue'
+  import HostConfig from './components/host-config.vue'
   import { useI18n } from 'vue-i18n'
-  const menuStore = useMenuStore()
-  const { t } = useI18n()
-
-  const onSave = () => {
-    menuStore.updateSiderMenu()
-  }
 
-  const onDel = () => {
-    menuStore.updateSiderMenu(true)
-  }
+  const { t } = useI18n()
+  // const menuStore = useMenuStore()
+  // const onSave = () => {
+  //   menuStore.updateSiderMenu()
+  // }
+  // const onDel = () => {
+  //   menuStore.updateSiderMenu(true)
+  // }
 
   const current = ref(0)
   const steps = computed(() => [
@@ -45,22 +46,38 @@
       title: t('cluster.host_config')
     },
     {
-      title: t('cluster.create_cluster')
+      title: t('cluster.create')
     }
   ])
+  const stepsLimit = computed(() => steps.value.length - 1)
   const getCompName = computed(() => {
     if (current.value === 0) {
       return ClusterBase
+    } else if (current.value === 1) {
+      return ComponentInfo
+    } else if (current.value === 2) {
+      return HostConfig
     } else {
-      return ClusterBase
+      return HostConfig
     }
   })
+
+  const previousStep = () => {
+    if (current.value > 0) {
+      current.value = current.value - 1
+    }
+  }
+  const nextStep = () => {
+    if (current.value < stepsLimit.value) {
+      current.value = current.value + 1
+    }
+  }
 </script>
 
 <template>
   <div class="cluster-create">
     <header-card>
-      <a-steps style="margin-inline: 6%" :current="current" :items="steps"></a-steps>
+      <a-steps :current="current" :items="steps"></a-steps>
     </header-card>
     <main-card>
       <template v-for="stepItem in steps" :key="stepItem.title">
@@ -73,16 +90,13 @@
       </template>
       <div class="step-action">
         <a-space>
-          <a-button>退出</a-button>
-          <a-button type="primary">上一步</a-button>
-          <a-button type="primary">下一步</a-button>
-          <a-button type="primary">完成</a-button>
+          <a-button>{{ $t('common.exit') }}</a-button>
+          <a-button type="primary" @click="previousStep">{{ $t('common.prev') }}</a-button>
+          <a-button type="primary" @click="nextStep">{{ $t('common.next') }}</a-button>
+          <a-button type="primary">{{ $t('common.done') }}</a-button>
         </a-space>
       </div>
     </main-card>
-    <div> create & del</div>
-    <a-button @click="onSave">create</a-button>
-    <a-button @click="onDel">delete</a-button>
   </div>
 </template>
 

From d02d2560d7cc97e643a074fac01b07897960ea21 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 20 Dec 2024 17:20:19 +0800
Subject: [PATCH 09/39] feat: Add check-workflow page

---
 .../src/assets/images/svg/error.svg           | 32 +++++++
 .../src/assets/images/svg/loading.svg         | 58 +++++++++++++
 .../src/assets/images/svg/loading_light.svg   | 28 ++++++
 .../src/assets/images/svg/success.svg         | 16 ++--
 .../src/assets/images/svg/uninstall.svg       | 29 +++++++
 .../src/assets/images/svg/unknow.svg          | 33 +++++++
 .../src/locales/en_US/cluster.ts              |  3 +-
 .../src/locales/zh_CN/cluster.ts              |  3 +-
 .../cluster/components/check-workflow.vue     | 85 +++++++++++++++++++
 .../cluster-manage/cluster/components/mock.ts | 33 +++++++
 .../pages/cluster-manage/cluster/create.vue   | 16 +++-
 11 files changed, 323 insertions(+), 13 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/error.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/loading.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/loading_light.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/uninstall.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/unknow.svg
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue

diff --git a/bigtop-manager-ui/src/assets/images/svg/error.svg b/bigtop-manager-ui/src/assets/images/svg/error.svg
new file mode 100644
index 000000000..44d3bf63c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/error.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.88549 6.11438L6.11426 9.88561">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.11426 6.11438L9.88549 9.88561">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/loading.svg b/bigtop-manager-ui/src/assets/images/svg/loading.svg
new file mode 100644
index 000000000..a51ec2056
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/loading.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 1.33337L8 2.66671">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M11.3332 2.22656L10.6665 3.38126">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M13.7734 4.66663L12.6187 5.33329">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M14.6668 8L13.3335 8">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M13.7734 11.3333L12.6187 10.6666">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M11.3332 13.7735L10.6665 12.6188">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 14.6667L8 13.3334">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M4.6665 13.7735L5.33317 12.6188">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2.22656 11.3333L3.38127 10.6666">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M1.3335 8L2.66683 8">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2.22656 4.66663L3.38127 5.33329">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M4.6665 2.22656L5.33317 3.38126">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/loading_light.svg b/bigtop-manager-ui/src/assets/images/svg/loading_light.svg
new file mode 100644
index 000000000..015797f81
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/loading_light.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M12 8C12 5.79087 10.2091 4 8 4C5.79087 4 4 5.79087 4 8C4 10.2091 5.79087 12 8 12">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/success.svg b/bigtop-manager-ui/src/assets/images/svg/success.svg
index c02bc2347..4b1e36274 100644
--- a/bigtop-manager-ui/src/assets/images/svg/success.svg
+++ b/bigtop-manager-ui/src/assets/images/svg/success.svg
@@ -18,12 +18,12 @@
   ~ under the License.
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
-    viewBox="0 0 16 16" fill="none">
-    <path
-        d="M7.99967 14.6667C9.84061 14.6667 11.5073 13.9205 12.7137 12.7141C13.9201 11.5076 14.6663 9.84097 14.6663 8.00004C14.6663 6.15911 13.9201 4.49244 12.7137 3.28599C11.5073 2.07957 9.84061 1.33337 7.99967 1.33337C6.15874 1.33337 4.49207 2.07957 3.28563 3.28599C2.0792 4.49244 1.33301 6.15911 1.33301 8.00004C1.33301 9.84097 2.0792 11.5076 3.28563 12.7141C4.49207 13.9205 6.15874 14.6667 7.99967 14.6667Z"
-        stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
-    </path>
-    <path stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
-        d="M5.33301 8L7.33301 10L11.333 6">
-    </path>
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M7.99967 14.6667C9.84061 14.6667 11.5073 13.9205 12.7137 12.7141C13.9201 11.5076 14.6663 9.84097 14.6663 8.00004C14.6663 6.15911 13.9201 4.49244 12.7137 3.28599C11.5073 2.07957 9.84061 1.33337 7.99967 1.33337C6.15874 1.33337 4.49207 2.07957 3.28563 3.28599C2.0792 4.49244 1.33301 6.15911 1.33301 8.00004C1.33301 9.84097 2.0792 11.5076 3.28563 12.7141C4.49207 13.9205 6.15874 14.6667 7.99967 14.6667Z"
+    stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M5.33301 8L7.33301 10L11.333 6">
+  </path>
 </svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/uninstall.svg b/bigtop-manager-ui/src/assets/images/svg/uninstall.svg
new file mode 100644
index 000000000..1adf2461c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/uninstall.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6819 14.6668 7.99998C14.6668 4.31808 11.6821 1.33331 8.00016 1.33331C4.31826 1.33331 1.3335 4.31808 1.3335 7.99998C1.3335 11.6819 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round">
+  </path>
+  <path stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M5 5L11 11">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/unknow.svg b/bigtop-manager-ui/src/assets/images/svg/unknow.svg
new file mode 100644
index 000000000..2bb5e7912
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/unknow.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M8.00016 14.6666C9.8411 14.6666 11.5078 13.9204 12.7142 12.714C13.9206 11.5075 14.6668 9.84085 14.6668 7.99992C14.6668 6.15899 13.9206 4.49232 12.7142 3.28587C11.5078 2.07945 9.8411 1.33325 8.00016 1.33325C6.15923 1.33325 4.49256 2.07945 3.28612 3.28587C2.07969 4.49232 1.3335 6.15899 1.3335 7.99992C1.3335 9.84085 2.07969 11.5075 3.28612 12.714C4.49256 13.9204 6.15923 14.6666 8.00016 14.6666Z"
+    stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 9.54159L8 8.20825C9.10457 8.20825 10 7.31282 10 6.20825C10 5.10369 9.10457 4.20825 8 4.20825C6.89543 4.20825 6 5.10369 6 6.20825">
+  </path>
+  <path
+    d="M7.99984 12.5417C8.46007 12.5417 8.83317 12.1686 8.83317 11.7083C8.83317 11.2481 8.46007 10.875 7.99984 10.875C7.5396 10.875 7.1665 11.2481 7.1665 11.7083C7.1665 12.1686 7.5396 12.5417 7.99984 12.5417Z"
+    fill-rule="evenodd" fill="#FAAD14">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 560f61d3b..fc74e77d7 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -29,5 +29,6 @@ export default {
   user_group: 'User group',
   config_source: 'Configuration source',
   install_dependencies: 'Install dependencies',
-  add_host: 'Add host'
+  add_host: 'Add host',
+  view_log: 'View log'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index a9ddd6ac0..c5eb84350 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -29,5 +29,6 @@ export default {
   user_group: '集群用户组',
   config_source: '配置源',
   install_dependencies: '安装依赖',
-  add_host: '新增主机'
+  add_host: '新增主机',
+  view_log: '查看日志'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
new file mode 100644
index 000000000..b7135d9fa
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -0,0 +1,85 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { getCheckWorkflows } from './mock'
+
+  const activeKey = ref(['1', '2'])
+  const stages = ref(getCheckWorkflows(4, 5, 5))
+  const status = ['', 'success', 'error', 'loading', 'loading_light', 'uninstall']
+</script>
+
+<template>
+  <div class="check-workflow">
+    <div class="retry">
+      <a-button type="link">{{ $t('common.retry') }}</a-button>
+    </div>
+    <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
+      <a-collapse-panel v-for="(stage, idx) in stages" :key="`${idx + 1}`">
+        <template #header>
+          <div class="stage-item">
+            <span>{{ stage.name }}</span>
+            <svg-icon :name="status[stage.status]"></svg-icon>
+          </div>
+        </template>
+        <div v-for="task in stage.tasks" :key="task.id" class="task-item">
+          <span>{{ task.name }}</span>
+          <a-space :size="16">
+            <svg-icon :name="status[task.status]"></svg-icon>
+            <a-button type="link">{{ $t('cluster.view_log') }}</a-button>
+          </a-space>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .check-workflow {
+    button {
+      padding: 0;
+    }
+    :deep(.ant-collapse-header) {
+      background-color: $color-fill-quaternary;
+    }
+    :deep(.ant-collapse-content-box) {
+      padding: 0 !important;
+    }
+    .retry {
+      text-align: end;
+      margin-bottom: $space-sm;
+    }
+  }
+  .stage-item {
+    @include flexbox($justify: space-between, $align: center);
+    padding-right: 65px;
+  }
+  .task-item {
+    height: 45px;
+    padding: 10px;
+    box-sizing: border-box;
+    padding-left: $space-lg;
+    border-top: 1px solid $color-border-secondary;
+    @include flexbox($justify: space-between, $align: center);
+    &:last-child {
+      border-bottom: 1px solid $color-border-secondary;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 94aeedbc6..b89acee95 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -49,3 +49,36 @@ export function generateTableHostData(numRows = 100) {
 
   return tableData
 }
+
+/**
+ * 生成随机数据
+ * @param {*} stageCount - 需要生成的 stage 数量
+ * @param {*} maxTasksPerStage - 每个 stage 中最大任务数量
+ * @param {*} maxStatus - 最大 status 值（从 1 开始）
+ * @returns {Array} - 生成的数据数组
+ */
+export function getCheckWorkflows(stageCount: number, maxTasksPerStage: number, maxStatus: number): Array<any> {
+  const data = []
+
+  for (let i = 0; i < stageCount; i++) {
+    const taskCount = Math.floor(Math.random() * maxTasksPerStage) + 1 // 随机任务数量
+    const tasks = []
+
+    for (let j = 0; j < taskCount; j++) {
+      tasks.push({
+        id: j,
+        name: `task${j + 1}`,
+        status: Math.floor(Math.random() * maxStatus) + 1
+      })
+    }
+
+    data.push({
+      id: i,
+      name: `stage${i + 1}`,
+      status: Math.floor(Math.random() * maxStatus) + 1,
+      tasks
+    })
+  }
+
+  return data
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index a24cffa70..c633d54ca 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -23,6 +23,7 @@
   import ClusterBase from './components/cluster-base.vue'
   import ComponentInfo from './components/component-info.vue'
   import HostConfig from './components/host-config.vue'
+  import CheckWorkflow from './components/check-workflow.vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
@@ -57,8 +58,10 @@
       return ComponentInfo
     } else if (current.value === 2) {
       return HostConfig
+    } else if (current.value === 3) {
+      return CheckWorkflow
     } else {
-      return HostConfig
+      return CheckWorkflow
     }
   })
 
@@ -77,13 +80,15 @@
 <template>
   <div class="cluster-create">
     <header-card>
-      <a-steps :current="current" :items="steps"></a-steps>
+      <div class="steps-wrp">
+        <a-steps :current="current" :items="steps" />
+      </div>
     </header-card>
     <main-card>
       <template v-for="stepItem in steps" :key="stepItem.title">
         <div v-show="steps[current].title === stepItem.title">
           <a-typography-text strong :content="stepItem.title" />
-          <section class="step-content">
+          <section :class="{ 'step-content': current < stepsLimit }">
             <component :is="getCompName" />
           </section>
         </div>
@@ -106,6 +111,11 @@
     .header-card {
       min-height: 80px;
     }
+    .steps-wrp {
+      width: 100%;
+      height: 100%;
+      padding-inline: 6%;
+    }
   }
   .step-content {
     padding-block: $space-md;

From 3f2bd7bebb68283dc6afdcabba0912e07319723e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 20 Dec 2024 18:04:24 +0800
Subject: [PATCH 10/39] feat: Add set-source page

---
 .../components/common/header-card/index.vue   |  2 +-
 .../src/locales/en_US/cluster.ts              |  3 +-
 .../src/locales/zh_CN/cluster.ts              |  3 +-
 .../cluster/components/cluster-base.vue       |  2 +-
 .../cluster/components/component-info.vue     | 10 +++-
 .../cluster/components/set-source.vue         | 59 +++++++++++++++++++
 .../pages/cluster-manage/cluster/create.vue   | 25 ++++----
 .../src/styles/ant-design-vue.scss            |  2 +
 bigtop-manager-ui/src/styles/index.scss       |  5 ++
 9 files changed, 94 insertions(+), 17 deletions(-)
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue

diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
index 15b6b9f51..06c6bbbb8 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -23,7 +23,7 @@
   interface Props {
     showAvatar?: boolean
     showStatus?: boolean
-    title: string
+    title?: string
     desc?: string
     status?: string
     actionGroups?: GroupItem[]
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index fc74e77d7..7ed48d9b8 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -30,5 +30,6 @@ export default {
   config_source: 'Configuration source',
   install_dependencies: 'Install dependencies',
   add_host: 'Add host',
-  view_log: 'View log'
+  view_log: 'View log',
+  source: 'source'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index c5eb84350..5bd8615d5 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -30,5 +30,6 @@ export default {
   config_source: '配置源',
   install_dependencies: '安装依赖',
   add_host: '新增主机',
-  view_log: '查看日志'
+  view_log: '查看日志',
+  source: '配置源'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index 488673b0f..a71631e85 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -129,7 +129,7 @@
         />
       </a-collapse-panel>
     </a-collapse>
-    <a-button @click="check">校验</a-button>
+    <a-button @click="check">check</a-button>
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index 44d2392b8..38d79f357 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -22,6 +22,8 @@
   import { ref, shallowRef } from 'vue'
   import type { TableColumnType } from 'ant-design-vue'
   import useBaseTable from '@/composables/use-base-table'
+  import SetSource from './set-source.vue'
+
   const columns: TableColumnType[] = [
     {
       title: '#',
@@ -56,6 +58,7 @@
     }
   ]
   const data = ref<any[]>(generateTestData(50))
+  const setSourceRef = ref<InstanceType<typeof SetSource>>()
   const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
     columns,
     rows: data.value
@@ -71,6 +74,10 @@
       name: 'Extra'
     }
   ])
+
+  const handleSetSource = () => {
+    setSourceRef.value?.handleOpen()
+  }
 </script>
 
 <template>
@@ -79,7 +86,7 @@
       <a-radio-group v-model:value="componentSelected" button-style="solid">
         <a-radio-button v-for="comp in components" :key="comp.id" :value="comp.id">{{ comp.name }}</a-radio-button>
       </a-radio-group>
-      <a-button type="primary">{{ $t('cluster.config_source') }}</a-button>
+      <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
     </header>
     <a-table
       :loading="loading"
@@ -88,6 +95,7 @@
       :pagination="paginationProps"
       @change="onChange"
     ></a-table>
+    <set-source ref="setSourceRef" />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
new file mode 100644
index 000000000..4f7143177
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -0,0 +1,59 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const open = ref(false)
+
+  const handleOpen = () => {
+    open.value = true
+  }
+
+  const handleOk = () => {
+    open.value = false
+  }
+
+  const handleCancel = () => {
+    open.value = false
+  }
+
+  defineExpose({
+    handleOpen
+  })
+</script>
+
+<template>
+  <div class="set-source">
+    <a-modal
+      v-model:open="open"
+      :width="700"
+      :centered="true"
+      :mask="false"
+      :title="$t('cluster.source')"
+      :mask-closable="false"
+      :destroy-on-close="true"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+    </a-modal>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index c633d54ca..12ce35d08 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  // import { useMenuStore } from '@/store/menu'
+  import { useMenuStore } from '@/store/menu'
   import { computed, ref } from 'vue'
   import ClusterBase from './components/cluster-base.vue'
   import ComponentInfo from './components/component-info.vue'
@@ -27,13 +27,7 @@
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
-  // const menuStore = useMenuStore()
-  // const onSave = () => {
-  //   menuStore.updateSiderMenu()
-  // }
-  // const onDel = () => {
-  //   menuStore.updateSiderMenu(true)
-  // }
+  const menuStore = useMenuStore()
 
   const current = ref(0)
   const steps = computed(() => [
@@ -75,6 +69,9 @@
       current.value = current.value + 1
     }
   }
+  const onSave = () => {
+    menuStore.updateSiderMenu()
+  }
 </script>
 
 <template>
@@ -95,10 +92,14 @@
       </template>
       <div class="step-action">
         <a-space>
-          <a-button>{{ $t('common.exit') }}</a-button>
-          <a-button type="primary" @click="previousStep">{{ $t('common.prev') }}</a-button>
-          <a-button type="primary" @click="nextStep">{{ $t('common.next') }}</a-button>
-          <a-button type="primary">{{ $t('common.done') }}</a-button>
+          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
+          <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="previousStep">
+            {{ $t('common.prev') }}
+          </a-button>
+          <a-button v-show="current >= 0 && current <= stepsLimit - 1" type="primary" @click="nextStep">
+            {{ $t('common.next') }}
+          </a-button>
+          <a-button v-show="current === stepsLimit" type="primary" @click="onSave">{{ $t('common.done') }}</a-button>
         </a-space>
       </div>
     </main-card>
diff --git a/bigtop-manager-ui/src/styles/ant-design-vue.scss b/bigtop-manager-ui/src/styles/ant-design-vue.scss
index a23e7d2f9..dda4a10c5 100644
--- a/bigtop-manager-ui/src/styles/ant-design-vue.scss
+++ b/bigtop-manager-ui/src/styles/ant-design-vue.scss
@@ -381,3 +381,5 @@ $box-shadow-tabs-overflow-top: var(--box-shadow-tabs-overflow-top);
 $box-shadow-tabs-overflow-bottom: var(--box-shadow-tabs-overflow-bottom);
 $_token-key: var(--_token-key);
 $_hash-id: var(--_hash-id);
+
+
diff --git a/bigtop-manager-ui/src/styles/index.scss b/bigtop-manager-ui/src/styles/index.scss
index 7e114fdfa..4b2f6f4df 100644
--- a/bigtop-manager-ui/src/styles/index.scss
+++ b/bigtop-manager-ui/src/styles/index.scss
@@ -45,3 +45,8 @@
     height: 20px;
   }
 }
+
+// temp resolve error on console
+.ant-modal div[aria-hidden="true"] {
+  display: none !important;
+}
\ No newline at end of file

From e0df4a9e2863ba717730d8d6ad035e797def4652 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Sun, 22 Dec 2024 16:56:45 +0800
Subject: [PATCH 11/39] feat: Update set-source page

---
 .../src/composables/use-base-table.ts         | 13 ++-
 .../cluster/components/set-source.vue         | 86 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 7 deletions(-)

diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index 3ba656959..43051373d 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -20,10 +20,12 @@
 import { ref, onUnmounted } from 'vue'
 import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
+
+type PaginationProps = TablePaginationConfig | false | undefined
 export interface UseBaseTableProps<T = any> {
   columns: TableColumnType[]
   rows?: T[]
-  pagination?: TablePaginationConfig | false | undefined
+  pagination?: PaginationProps
 }
 const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const { columns, rows, pagination } = props
@@ -31,7 +33,7 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const loading = ref(false)
   const dataSource = ref<T[]>(rows || [])
   const columnsProp = ref<TableColumnType[]>(columns)
-  const paginationProps = ref<TablePaginationConfig>({
+  const paginationProps = ref<PaginationProps>({
     current: 1,
     pageSize: 10,
     total: dataSource.value.length,
@@ -42,11 +44,16 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   })
 
   // merge pagination config
-  if (pagination) {
+  if (pagination === undefined && paginationProps.value) {
     paginationProps.value = Object.assign(paginationProps.value, pagination)
+  } else {
+    paginationProps.value = false
   }
 
   const onChange = (pagination: TablePaginationConfig) => {
+    if (!paginationProps.value) {
+      return
+    }
     paginationProps.value = Object.assign(paginationProps.value, pagination)
   }
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
index 4f7143177..0372c6001 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -18,22 +18,69 @@
 -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import type { FormInstance, TableColumnType } from 'ant-design-vue'
+  import { ref, watch } from 'vue'
 
   const open = ref(false)
+  const loading = ref(false)
+  const columns: TableColumnType[] = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: '架构',
+      dataIndex: 'architecture',
+      ellipsis: true
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      ellipsis: true
+    }
+  ]
+  const formRef = ref<FormInstance>()
+  const formRule = ref({
+    list: [] as any[]
+  })
 
   const handleOpen = () => {
     open.value = true
   }
 
   const handleOk = () => {
-    open.value = false
+    formRef.value
+      ?.validateFields()
+      .then((values) => {
+        console.log('Received values of form: ', values)
+        formRef.value?.resetFields()
+        open.value = false
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info)
+      })
   }
 
   const handleCancel = () => {
     open.value = false
   }
 
+  function generateMockData(rowCount = 10) {
+    return Array.from({ length: rowCount }, (_, i) => ({
+      id: i + 1,
+      name: `名称_${i + 1}`,
+      architecture: `架构_${i + 1}`,
+      address: `https://example.com/${i + 1}`
+    }))
+  }
+
+  watch(open, (val) => {
+    if (val) {
+      formRule.value.list = generateMockData(12)
+    }
+  })
+
   defineExpose({
     handleOpen
   })
@@ -43,7 +90,7 @@
   <div class="set-source">
     <a-modal
       v-model:open="open"
-      :width="700"
+      width="50%"
       :centered="true"
       :mask="false"
       :title="$t('cluster.source')"
@@ -52,8 +99,39 @@
       @ok="handleOk"
       @cancel="handleCancel"
     >
+      <a-form ref="formRef" :model="formRule">
+        <a-table
+          :loading="loading"
+          :scroll="{ y: 340 }"
+          :data-source="formRule.list"
+          :columns="columns"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record, index }">
+            <template v-if="column.dataIndex == 'address'">
+              <a-form-item
+                class="custom-form-item"
+                label=" "
+                :colon="false"
+                :name="`list[${index}].address`"
+                :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]"
+              >
+                <a-input v-model:value="record[column.dataIndex]" style="width: 100%"></a-input>
+              </a-form-item>
+            </template>
+          </template>
+        </a-table>
+      </a-form>
+      <a-typography-text class="set-source-tip" type="danger">*注: 源地址的改动对所有集群生效</a-typography-text>
     </a-modal>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .set-source {
+    &-tip {
+      margin-top: $space-sm;
+      font-size: 12px;
+    }
+  }
+</style>

From 4707a214df358cae9a9e0bec96cb218421ad261b Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 23 Dec 2024 10:44:20 +0800
Subject: [PATCH 12/39] feat: Update set-source page

---
 .../svg/{loading.svg => installing.svg}       |  0
 .../src/assets/images/svg/search.svg          | 37 +++++++++++++
 .../src/assets/images/svg/search_active.svg   | 37 +++++++++++++
 .../cluster/components/check-workflow.vue     |  5 ++
 .../cluster/components/host-config.vue        | 53 ++++++++++++++-----
 .../cluster-manage/cluster/components/mock.ts |  2 +-
 .../cluster/components/set-source.vue         | 47 ++++++++++------
 7 files changed, 150 insertions(+), 31 deletions(-)
 rename bigtop-manager-ui/src/assets/images/svg/{loading.svg => installing.svg} (100%)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/search.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/search_active.svg

diff --git a/bigtop-manager-ui/src/assets/images/svg/loading.svg b/bigtop-manager-ui/src/assets/images/svg/installing.svg
similarity index 100%
rename from bigtop-manager-ui/src/assets/images/svg/loading.svg
rename to bigtop-manager-ui/src/assets/images/svg/installing.svg
diff --git a/bigtop-manager-ui/src/assets/images/svg/search.svg b/bigtop-manager-ui/src/assets/images/svg/search.svg
new file mode 100644
index 000000000..cbaaf37f2
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/search.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 2.33331L14.6663 2.33331">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 7.66669L4.99967 7.66669">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round" d="M1.33301 13L4.99967 13">
+  </path>
+  <path
+    d="M10.5003 11.3334C12.0651 11.3334 13.3337 10.0648 13.3337 8.50002C13.3337 6.93522 12.0651 5.66669 10.5003 5.66669C8.93553 5.66669 7.66699 6.93522 7.66699 8.50002C7.66699 10.0648 8.93553 11.3334 10.5003 11.3334Z"
+    stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M12.333 10.6667L14.6663 13.0169">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/search_active.svg b/bigtop-manager-ui/src/assets/images/svg/search_active.svg
new file mode 100644
index 000000000..4f830254a
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/search_active.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 2.33331L14.6663 2.33331">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 7.66669L4.99967 7.66669">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round" d="M1.33301 13L4.99967 13">
+  </path>
+  <path
+    d="M10.5003 11.3334C12.0651 11.3334 13.3337 10.0648 13.3337 8.50002C13.3337 6.93522 12.0651 5.66669 10.5003 5.66669C8.93553 5.66669 7.66699 6.93522 7.66699 8.50002C7.66699 10.0648 8.93553 11.3334 10.5003 11.3334Z"
+    stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M12.333 10.6667L14.6663 13.0169">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
index b7135d9fa..86d872692 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -55,6 +55,7 @@
   .check-workflow {
     button {
       padding: 0;
+      margin-top: -4px;
     }
     :deep(.ant-collapse-header) {
       background-color: $color-fill-quaternary;
@@ -65,6 +66,10 @@
     .retry {
       text-align: end;
       margin-bottom: $space-sm;
+      button {
+        height: auto;
+        line-height: normal;
+      }
     }
   }
   .stage-item {
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index af2a3c88c..2b2b317be 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -19,19 +19,28 @@
 
 <script setup lang="ts">
   import { TableColumnType } from 'ant-design-vue'
-  import { SearchOutlined } from '@ant-design/icons-vue'
   import { computed, reactive, ref } from 'vue'
   import { generateTableHostData } from './mock'
   import useBaseTable from '@/composables/use-base-table'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
 
+  type Key = string | number
+  interface TableState {
+    selectedRowKeys: Key[]
+    searchText: string
+    searchedColumn: string
+  }
+
   const searchInputRef = ref()
+  // const checkAllHostIsSuccessfull = ref(false)
   const data = ref<any[]>(generateTableHostData(50))
-  const state = reactive({
+  const state = reactive<TableState>({
     searchText: '',
-    searchedColumn: ''
+    searchedColumn: '',
+    selectedRowKeys: []
   })
+
   const columns = computed((): TableColumnType[] => [
     {
       title: '主机名',
@@ -70,7 +79,8 @@
       fixed: 'right'
     }
   ])
-  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+
+  const { loading, paginationProps, onChange } = useBaseTable({
     columns: columns.value,
     rows: data.value
   })
@@ -83,7 +93,7 @@
     {
       text: 'delete',
       danger: true,
-      clickEvent: (_item, args) => handleDelet(args)
+      clickEvent: (_item, args) => handleDelete(args)
     }
   ])
 
@@ -99,7 +109,15 @@
     }
   }
 
-  const handleSearch = (selectedKeys: string[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
+  const onSelectChange = (selectedRowKeys: Key[]) => {
+    state.selectedRowKeys = selectedRowKeys
+  }
+
+  const handleInstallDependencies = () => {
+    console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+  }
+
+  const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
     confirm()
     state.searchText = selectedKeys[0] as string
     state.searchedColumn = dataIndex as string
@@ -114,25 +132,30 @@
     console.log('row :>> ', row)
   }
 
-  const handleDelet = (row: any) => {
-    console.log('row :>> ', row)
+  const handleDelete = (row?: any) => {
+    if (!row) {
+      console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+    } else {
+      console.log('row :>> ', row)
+    }
   }
 </script>
 
 <template>
   <div class="host-config">
     <header>
-      <a-button type="primary">{{ $t('cluster.install_dependencies') }}</a-button>
+      <a-button type="primary" @click="handleInstallDependencies">{{ $t('cluster.install_dependencies') }}</a-button>
       <a-space :size="16">
-        <a-button type="primary" danger>{{ $t('common.bulk_remove') }}</a-button>
+        <a-button type="primary" danger @click="handleDelete">{{ $t('common.bulk_remove') }}</a-button>
         <a-button type="primary">{{ $t('cluster.add_host') }}</a-button>
       </a-space>
     </header>
     <a-table
       :loading="loading"
-      :data-source="dataSource"
-      :columns="columnsProp"
+      :data-source="data"
+      :columns="columns"
       :pagination="paginationProps"
+      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
       @change="onChange"
     >
       <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
@@ -146,7 +169,6 @@
           />
           <a-space :size="16">
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-              <template #icon><SearchOutlined /></template>
               {{ $t('common.search') }}
             </a-button>
             <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
@@ -154,9 +176,12 @@
         </div>
       </template>
       <template #customFilterIcon="{ filtered }">
-        <search-outlined :style="{ color: filtered ? 'var(--color-primary)' : undefined }" />
+        <svg-icon :name="filtered ? 'search_active' : 'search'" />
       </template>
       <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'status'">
+          <svg-icon :name="record.status" />
+        </template>
         <template v-if="column.key === 'operation'">
           <button-group
             i18n="common"
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index b89acee95..6c0ab8dcf 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -33,7 +33,7 @@ export function generateTableHostData(numRows = 100) {
   const hostnames = ['Server-A', 'Server-B', 'Server-C', 'Server-D', 'Server-E']
   const ipAddresses = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4', '192.168.1.5']
   const remarks = ['Main server', 'Backup server', 'Database server', 'Web server', 'Test server']
-  const statuses = ['Online', 'Offline', 'Maintenance', 'Active', 'Inactive']
+  const statuses = ['installing', 'success', 'error', 'unknow']
 
   const tableData = []
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
index 0372c6001..167213df2 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
   import type { FormInstance, TableColumnType } from 'ant-design-vue'
-  import { ref, watch } from 'vue'
+  import { reactive, ref, toRefs, watch } from 'vue'
 
   const open = ref(false)
   const loading = ref(false)
@@ -27,26 +27,31 @@
     {
       title: '名称',
       dataIndex: 'name',
+      key: 'name',
       ellipsis: true
     },
     {
       title: '架构',
       dataIndex: 'architecture',
+      key: 'architecture',
       ellipsis: true
     },
     {
       title: '地址',
       dataIndex: 'address',
+      key: 'address',
       ellipsis: true
     }
   ]
   const formRef = ref<FormInstance>()
-  const formRule = ref({
+  const form = reactive({
     list: [] as any[]
   })
+  const { list } = toRefs(form)
 
   const handleOpen = () => {
     open.value = true
+    Object.assign(form, { list: [] })
   }
 
   const handleOk = () => {
@@ -75,9 +80,23 @@
     }))
   }
 
-  watch(open, (val) => {
+  const getSourceList = () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(generateMockData(12))
+      }, 500)
+    })
+  }
+
+  watch(open, async (val) => {
     if (val) {
-      formRule.value.list = generateMockData(12)
+      loading.value = true
+      try {
+        form.list = (await getSourceList()) as any
+        loading.value = false
+      } catch (error) {
+        console.log('error :>> ', error)
+      }
     }
   })
 
@@ -99,24 +118,17 @@
       @ok="handleOk"
       @cancel="handleCancel"
     >
-      <a-form ref="formRef" :model="formRule">
-        <a-table
-          :loading="loading"
-          :scroll="{ y: 340 }"
-          :data-source="formRule.list"
-          :columns="columns"
-          :pagination="false"
-        >
-          <template #bodyCell="{ column, record, index }">
+      <a-form ref="formRef" :model="form">
+        <a-table :loading="loading" :scroll="{ y: 340 }" :data-source="list" :columns="columns" :pagination="false">
+          <template #bodyCell="{ index, column, record }">
             <template v-if="column.dataIndex == 'address'">
               <a-form-item
-                class="custom-form-item"
                 label=" "
                 :colon="false"
-                :name="`list[${index}].address`"
+                :name="['list', index, 'address']"
                 :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]"
               >
-                <a-input v-model:value="record[column.dataIndex]" style="width: 100%"></a-input>
+                <a-input v-model:value="record[column.key]"></a-input>
               </a-form-item>
             </template>
           </template>
@@ -134,4 +146,7 @@
       font-size: 12px;
     }
   }
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+  }
 </style>

From 35547d09185ff30b0546b3718eff0ea4fc6c6554 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 23 Dec 2024 11:03:53 +0800
Subject: [PATCH 13/39] feat: Update set-source page

---
 .../cluster/components/check-workflow.vue           |  8 +++++---
 .../src/pages/cluster-manage/cluster/create.vue     | 13 +++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
index 86d872692..73f874307 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -55,7 +55,6 @@
   .check-workflow {
     button {
       padding: 0;
-      margin-top: -4px;
     }
     :deep(.ant-collapse-header) {
       background-color: $color-fill-quaternary;
@@ -65,10 +64,13 @@
     }
     .retry {
       text-align: end;
+      line-height: 14px;
       margin-bottom: $space-sm;
       button {
-        height: auto;
-        line-height: normal;
+        margin: 0;
+        padding: 0;
+        line-height: inherit;
+        height: 0;
       }
     }
   }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 12ce35d08..4e602a1ab 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -83,8 +83,8 @@
     </header-card>
     <main-card>
       <template v-for="stepItem in steps" :key="stepItem.title">
-        <div v-show="steps[current].title === stepItem.title">
-          <a-typography-text strong :content="stepItem.title" />
+        <div v-show="steps[current].title === stepItem.title" class="step-title">
+          <h5>{{ stepItem.title }}</h5>
           <section :class="{ 'step-content': current < stepsLimit }">
             <component :is="getCompName" />
           </section>
@@ -118,6 +118,15 @@
       padding-inline: 6%;
     }
   }
+  .step-title {
+    h5 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: 0px;
+      line-height: 16px;
+    }
+  }
   .step-content {
     padding-block: $space-md;
   }

From 1f6766dfb94d9929375162a67eae795eb2ebfc70 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 23 Dec 2024 13:36:23 +0800
Subject: [PATCH 14/39] feat: Add service page

---
 .../src/pages/cluster-manage/cluster/host.vue | 29 ++++++++
 .../pages/cluster-manage/cluster/service.vue  | 72 ++++++++++++++++++-
 .../src/pages/cluster-manage/cluster/task.vue | 29 ++++++++
 .../src/pages/cluster-manage/cluster/user.vue | 29 ++++++++
 4 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
 create mode 100644 bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue

diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
new file mode 100644
index 000000000..e69fa233f
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -0,0 +1,29 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div class="host"> </div>
+</template>
+
+<style lang="scss" scoped>
+  .host {
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 96f922c0c..4de8022ab 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -17,13 +17,81 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const data = ref(
+    Array.from({ length: 20 }, (_, i) => ({
+      key: i,
+      title: `title${i + 1}wwwwwwwwwww`
+    }))
+  )
+</script>
 
 <template>
-  <div class="service"> </div>
+  <div class="service">
+    <div v-for="item in data" :key="item.key" class="item">
+      <div class="item-header">
+        <div class="item-header-title-wrp">
+          <a-avatar :size="42" class="item-header-icon" />
+          <div class="item-header-title">
+            <a-typography-text
+              class="item-header-title-tip"
+              :ellipsis="item.title ? { tooltip: item.title } : false"
+              :content="`${item.title}`"
+            />
+            <a-typography-text
+              class="item-header-title-tip"
+              type="secondary"
+              :ellipsis="{ tooltip: 'flink-1.16.2-1' }"
+              content="flink-1.16.2-1"
+            />
+          </div>
+        </div>
+        <div>
+          <a-typography-text type="secondary" content="需要重启：是" />
+        </div>
+      </div>
+      <div class="item-content"> content </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
   .service {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .item {
+    flex-shrink: 0;
+    width: 280px;
+    height: 150px;
+    border: 1px solid $color-border-secondary;
+    border-radius: $space-sm;
+    &-header {
+      display: grid;
+      gap: 10px;
+      padding: $space-md;
+      border-bottom: 1px solid $color-border-secondary;
+      &-title-wrp {
+        display: flex;
+        gap: $space-sm;
+      }
+      &-title {
+        display: grid;
+        &-tip {
+          width: 200px;
+        }
+      }
+      &-icon {
+        flex-shrink: 0;
+        border-radius: 0;
+      }
+    }
+
+    &-content {
+      padding: $space-md;
+    }
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
new file mode 100644
index 000000000..e781a0b71
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
@@ -0,0 +1,29 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div class="task"> </div>
+</template>
+
+<style lang="scss" scoped>
+  .task {
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
new file mode 100644
index 000000000..9a8cd30c1
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
@@ -0,0 +1,29 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div class="user"> </div>
+</template>
+
+<style lang="scss" scoped>
+  .user {
+  }
+</style>

From 573d43715ae8d3a3b54c4ef23ccef205c3317cb9 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 26 Dec 2024 13:53:38 +0800
Subject: [PATCH 15/39] feat: Add pang images

---
 bigtop-manager-ui/src/assets/images/cluster.png | Bin 0 -> 3241 bytes
 bigtop-manager-ui/src/assets/images/flink.png   | Bin 0 -> 16446 bytes
 bigtop-manager-ui/src/assets/images/grafana.png | Bin 0 -> 4573 bytes
 bigtop-manager-ui/src/assets/images/hadoop.png  | Bin 0 -> 14012 bytes
 bigtop-manager-ui/src/assets/images/hbase.png   | Bin 0 -> 6740 bytes
 bigtop-manager-ui/src/assets/images/hive.png    | Bin 0 -> 20960 bytes
 bigtop-manager-ui/src/assets/images/host.png    | Bin 0 -> 5658 bytes
 bigtop-manager-ui/src/assets/images/kafka.png   | Bin 0 -> 6266 bytes
 bigtop-manager-ui/src/assets/images/mysql.png   | Bin 0 -> 4660 bytes
 .../src/assets/images/prometheus.png            | Bin 0 -> 5830 bytes
 .../src/assets/images/seatunnel.png             | Bin 0 -> 22214 bytes
 bigtop-manager-ui/src/assets/images/solr.png    | Bin 0 -> 8528 bytes
 bigtop-manager-ui/src/assets/images/spark.png   | Bin 0 -> 9759 bytes
 bigtop-manager-ui/src/assets/images/tez.png     | Bin 0 -> 11497 bytes
 .../src/assets/images/zookeeper.png             | Bin 0 -> 32788 bytes
 .../src/components/common/header-card/index.vue |   9 +++++++--
 .../src/pages/cluster-manage/cluster/index.vue  |   2 +-
 17 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/cluster.png
 create mode 100644 bigtop-manager-ui/src/assets/images/flink.png
 create mode 100644 bigtop-manager-ui/src/assets/images/grafana.png
 create mode 100644 bigtop-manager-ui/src/assets/images/hadoop.png
 create mode 100644 bigtop-manager-ui/src/assets/images/hbase.png
 create mode 100644 bigtop-manager-ui/src/assets/images/hive.png
 create mode 100644 bigtop-manager-ui/src/assets/images/host.png
 create mode 100644 bigtop-manager-ui/src/assets/images/kafka.png
 create mode 100644 bigtop-manager-ui/src/assets/images/mysql.png
 create mode 100644 bigtop-manager-ui/src/assets/images/prometheus.png
 create mode 100644 bigtop-manager-ui/src/assets/images/seatunnel.png
 create mode 100644 bigtop-manager-ui/src/assets/images/solr.png
 create mode 100644 bigtop-manager-ui/src/assets/images/spark.png
 create mode 100644 bigtop-manager-ui/src/assets/images/tez.png
 create mode 100644 bigtop-manager-ui/src/assets/images/zookeeper.png

diff --git a/bigtop-manager-ui/src/assets/images/cluster.png b/bigtop-manager-ui/src/assets/images/cluster.png
new file mode 100644
index 0000000000000000000000000000000000000000..142077657627c3236e162ba80f1e424d5dfee421
GIT binary patch
literal 3241
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/flink.png b/bigtop-manager-ui/src/assets/images/flink.png
new file mode 100644
index 0000000000000000000000000000000000000000..c508e1e770ebe10ddac58a149b186f8cf1e0c2e9
GIT binary patch
literal 16446
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
T@|*ws(Jv_~CsHG%AMk$w4@YlD

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/grafana.png b/bigtop-manager-ui/src/assets/images/grafana.png
new file mode 100644
index 0000000000000000000000000000000000000000..307d392d0cafdd4b49c9e35a5e5a3f52cfc883fd
GIT binary patch
literal 4573
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
P4T~|{%%DQ=9`64D)jZ7T

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/hadoop.png b/bigtop-manager-ui/src/assets/images/hadoop.png
new file mode 100644
index 0000000000000000000000000000000000000000..176856a96634e32ace03eb57b083753c820c5812
GIT binary patch
literal 14012
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/hbase.png b/bigtop-manager-ui/src/assets/images/hbase.png
new file mode 100644
index 0000000000000000000000000000000000000000..c975a8d68cf8d96934d5dbbf30f63b72b6d7b35c
GIT binary patch
literal 6740
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/hive.png b/bigtop-manager-ui/src/assets/images/hive.png
new file mode 100644
index 0000000000000000000000000000000000000000..095282218e4968c716c6902061bc752cf328e400
GIT binary patch
literal 20960
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
TBQS<+00000NkvXXu0mjfc7;ma

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/host.png b/bigtop-manager-ui/src/assets/images/host.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e7040303ef9d9ac18912f38a9d46b68ee30520b
GIT binary patch
literal 5658
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
AVgLXD

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/kafka.png b/bigtop-manager-ui/src/assets/images/kafka.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f18c3dd9ce2ba511ced046d5d179af21296184e
GIT binary patch
literal 6266
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/mysql.png b/bigtop-manager-ui/src/assets/images/mysql.png
new file mode 100644
index 0000000000000000000000000000000000000000..a37ef476e1d9b8f41e64e7a24a0922ee0cd66edf
GIT binary patch
literal 4660
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
Sh!FiZL{Iy%R*lB9@c#p6d(9*O

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/prometheus.png b/bigtop-manager-ui/src/assets/images/prometheus.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b87345f96b60e3857ac1bcc21d1064dc044ce70
GIT binary patch
literal 5830
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
YFjjCH`UqN5f@y$>G1REu-~s%90KiOKPXGV_

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/seatunnel.png b/bigtop-manager-ui/src/assets/images/seatunnel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e859ebea5d6ad1311d63e3a53fc6ec157cdbee0
GIT binary patch
literal 22214
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/solr.png b/bigtop-manager-ui/src/assets/images/solr.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d0d02daa648ea103ac851770878f7613054ea85
GIT binary patch
literal 8528
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
KMNUMnLSTXbPJ3hk

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/spark.png b/bigtop-manager-ui/src/assets/images/spark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a3cede971af70173329ea1addb691d9368b4b2d
GIT binary patch
literal 9759
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/tez.png b/bigtop-manager-ui/src/assets/images/tez.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcceea0ee476ba1345f3e76ad563a98fdaf1597e
GIT binary patch
literal 11497
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
P00000NkvXXu0mjfeTV||

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/assets/images/zookeeper.png b/bigtop-manager-ui/src/assets/images/zookeeper.png
new file mode 100644
index 0000000000000000000000000000000000000000..080dd55edf0133e8b0a59c5d1d33c62a1e38fe1c
GIT binary patch
literal 32788
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%0A@VtSPvoNad+4JnHi!3vs=M{_UFj-l%C}yBbhPTD
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

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
index 06c6bbbb8..d11d81bb3 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -18,11 +18,14 @@
 -->
 
 <script setup lang="ts">
+  import { usePngImage } from '@/utils/tools'
   import { GroupItem } from '../button-group/types'
+  import { computed } from 'vue'
 
   interface Props {
     showAvatar?: boolean
     showStatus?: boolean
+    avatar?: string
     title?: string
     desc?: string
     status?: string
@@ -33,9 +36,10 @@
     (event: 'onClick', item: GroupItem): void
   }
 
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     showAvatar: true,
     showStatus: true,
+    avatar: '',
     title: '',
     desc: '暂无描述',
     status: 'success',
@@ -45,6 +49,7 @@
   })
 
   const emits = defineEmits<Emits>()
+  const avatarSrc = computed(() => props.avatar && usePngImage(props.avatar))
 
   const onActions = (item: GroupItem) => {
     emits('onClick', item)
@@ -55,7 +60,7 @@
   <div class="header-card">
     <slot>
       <div class="header-card-info">
-        <a-avatar v-if="showAvatar" shape="square" :size="54" />
+        <a-avatar v-if="showAvatar" :src="avatarSrc" shape="square" :size="54" />
         <div class="card-info-title">
           <div class="card-info-status">
             <a-typography-title :level="5">{{ $props.title }}</a-typography-title>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index eca02247b..810a0944c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -98,7 +98,7 @@
 </script>
 
 <template>
-  <header-card :title="title" :desc="desc" :action-groups="actionGroup" />
+  <header-card :title="title" avatar="cluster" :desc="desc" :action-groups="actionGroup" />
   <main-card v-model:active-key="activeKey" :tabs="tabs">
     <template #tab-item>
       <component :is="getCompName"></component>

From 41c7fee9ac6d8dda57ba55332fdf68b8fc55c061 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 26 Dec 2024 18:13:02 +0800
Subject: [PATCH 16/39] feat: Add common component is status-dot

---
 .../src/assets/images/svg/more_line.svg       |  32 ++++
 .../src/assets/images/svg/restart.svg         |  31 ++++
 .../src/assets/images/svg/start.svg           |  30 ++++
 .../src/assets/images/svg/stop.svg            |  32 ++++
 .../components/common/button-group/index.vue  |   7 +-
 .../components/common/button-group/types.ts   |   1 +
 .../components/common/search-form/index.vue   |  57 +++++++
 .../components/common/status-dot/index.vue    |  63 ++++++++
 bigtop-manager-ui/src/locales/en_US/common.ts |   6 +
 bigtop-manager-ui/src/locales/zh_CN/common.ts |   6 +
 .../cluster-manage/cluster/components/mock.ts |  51 ++++++
 .../pages/cluster-manage/cluster/service.vue  | 150 +++++++++++++-----
 bigtop-manager-ui/src/styles/variables.scss   |  10 ++
 13 files changed, 431 insertions(+), 45 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/more_line.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/restart.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/start.svg
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/stop.svg
 create mode 100644 bigtop-manager-ui/src/components/common/search-form/index.vue
 create mode 100644 bigtop-manager-ui/src/components/common/status-dot/index.vue

diff --git a/bigtop-manager-ui/src/assets/images/svg/more_line.svg b/bigtop-manager-ui/src/assets/images/svg/more_line.svg
new file mode 100644
index 000000000..0fa0cca82
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/more_line.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <circle cx="4.66650390625" cy="8" r="1" fill="#333333">
+  </circle>
+  <circle cx="8" cy="8" r="1" fill="#333333">
+  </circle>
+  <circle cx="11.33349609375" cy="8" r="1" fill="#333333">
+  </circle>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/restart.svg b/bigtop-manager-ui/src/assets/images/svg/restart.svg
new file mode 100644
index 000000000..4d6466755
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/restart.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path d="M7 8L7 6L8.66667 7L10.3333 8L8.66667 9L7 10L7 8Z" stroke="rgba(51, 51, 51, 1)"
+    stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M3.75737 12.2426C4.84313 13.3284 6.34313 14 8 14C11.3137 14 14 11.3137 14 8C14 4.6863 11.3137 2 8 2C6.34313 2 4.84313 2.67157 3.75737 3.75737C3.2047 4.31003 2 5.66667 2 5.66667">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2 3L2 5.66667L4.66667 5.66667">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/start.svg b/bigtop-manager-ui/src/assets/images/svg/start.svg
new file mode 100644
index 000000000..e24b7ae02
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/start.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path
+    d="M6.66675 8.00007L6.66675 5.69067L8.66675 6.84537L10.6667 8.00007L8.66675 9.15477L6.66675 10.3095L6.66675 8.00007Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/stop.svg b/bigtop-manager-ui/src/assets/images/svg/stop.svg
new file mode 100644
index 000000000..48249fa5d
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/stop.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.33325 6L6.33325 10">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.66675 6L9.66675 10">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index cd37ed8c4..11ae4104f 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -50,7 +50,7 @@
 </script>
 
 <template>
-  <a-space :size="space" :wrap="true" :class="{ 'text-compact': $props.textCompact }">
+  <a-space :size="space" :wrap="true" :class="{ 'text-compact': $props.textCompact, 'btn-auto': $props.auto }">
     <template v-for="(item, idx) in groups" :key="idx">
       <a-dropdown v-if="item.dropdownMenu">
         <a-button
@@ -101,4 +101,9 @@
       padding: 0;
     }
   }
+  .btn-auto {
+    width: 100%;
+    @include flexbox($align: center, $justify: space-between);
+    margin-bottom: 0 !important;
+  }
 </style>
diff --git a/bigtop-manager-ui/src/components/common/button-group/types.ts b/bigtop-manager-ui/src/components/common/button-group/types.ts
index 31ef0fb07..7f2d17d43 100644
--- a/bigtop-manager-ui/src/components/common/button-group/types.ts
+++ b/bigtop-manager-ui/src/components/common/button-group/types.ts
@@ -48,4 +48,5 @@ export interface Props {
   groupShape?: ShapeType
   space?: number
   args?: any
+  auto?: boolean
 }
diff --git a/bigtop-manager-ui/src/components/common/search-form/index.vue b/bigtop-manager-ui/src/components/common/search-form/index.vue
new file mode 100644
index 000000000..d8a7b9a12
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/search-form/index.vue
@@ -0,0 +1,57 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { DownOutlined } from '@ant-design/icons-vue'
+
+  const searchItems = ['服务名', '需要重启', '状态']
+  // const searchDropOptions = []
+</script>
+
+<template>
+  <div class="search-form">
+    <template v-for="item in searchItems" :key="item">
+      <a-dropdown>
+        <span style="margin-right: 16px" @click.prevent>
+          {{ item }}
+          <DownOutlined />
+        </span>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item>
+              <a href="javascript:;">1st menu item</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">2nd menu item</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">3rd menu item</a>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .search-form {
+    width: 100%;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/common/status-dot/index.vue
new file mode 100644
index 000000000..1d47b781c
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/status-dot/index.vue
@@ -0,0 +1,63 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  interface StatusDot {
+    width?: string
+    height?: string
+    color?: keyof typeof Colors
+    margin?: string
+  }
+
+  enum Colors {
+    success = 'var(--color-success)',
+    error = 'var(--color-error)',
+    warning = 'var(--color-warning)',
+    default = 'var(--color-primary)'
+  }
+
+  const props = withDefaults(defineProps<StatusDot>(), {
+    color: 'default',
+    width: '9px',
+    height: '9px',
+    margin: '0 6px'
+  })
+
+  const dotStyle = computed(() => ({
+    width: props.width,
+    height: props.height,
+    backgroundColor: Colors[props.color],
+    margin: props.margin
+  }))
+</script>
+
+<template>
+  <div class="status-dot-item" :style="dotStyle"> </div>
+</template>
+
+<style lang="scss" scoped>
+  .status-dot-item {
+    display: inline-block;
+    border-radius: 50%;
+    line-height: 0;
+    font-size: 0;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index 5b8e970ce..be7fbff4b 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -24,6 +24,9 @@ export default {
   exit: 'Exit',
   action: 'Action',
   status: 'Status',
+  healthy: 'Healthy',
+  unhealthy: 'Unhealthy',
+  unknown: 'Unknown',
   edit: 'Edit',
   rename: 'Rename',
   delete: 'Delete',
@@ -52,6 +55,9 @@ export default {
   stage: 'Stage',
   search: 'Search',
   reset: 'Reset',
+  restart: 'Restart {0}',
+  required: 'Required',
+  not_required: 'Not required',
   progress: 'Progress',
   status_change_success: 'Status changed successfully',
   test_success: 'Test successful !',
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 07a2e0c88..5a957c7dc 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -24,6 +24,9 @@ export default {
   exit: '退出',
   action: '操作',
   status: '状态',
+  healthy: '健康',
+  unhealthy: '不健康',
+  unknown: '未知',
   edit: '编辑',
   delete: '删除',
   bulk_remove: '批量删除',
@@ -52,6 +55,9 @@ export default {
   stage: '阶段',
   search: '搜索',
   reset: '重置',
+  restart: '重启{0}',
+  required: '需重启',
+  not_required: '无需重启',
   progress: '进度',
   created: '创建成功',
   status_change_success: '状态更新成功',
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 6c0ab8dcf..2e776082e 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -82,3 +82,54 @@ export function getCheckWorkflows(stageCount: number, maxTasksPerStage: number,
 
   return data
 }
+
+// Restart ? Required/Not required
+// 健康/不健康/未知
+
+export enum StatusColors {
+  success = 'success',
+  error = 'error',
+  unknow = 'warning'
+}
+
+export enum StatusTexts {
+  success = 'healthy',
+  error = 'unhealthy',
+  unknow = 'unknown'
+}
+
+export type ServiceStatus = keyof typeof StatusColors
+
+export interface ServiceItem {
+  key: string | number
+  serviceName: string
+  version: string
+  restart: boolean
+  status: ServiceStatus
+}
+
+export function getServices(): ServiceItem[] {
+  const statusList = ['success', 'error', 'unknow']
+  const serviceNames = [
+    'GraFana',
+    'Flink',
+    'Kafka',
+    'ZooKeeper',
+    'Hadoop',
+    'Hbase',
+    'Hive',
+    'MySQL',
+    'Spark',
+    'Solr',
+    'Seatunnel',
+    'Tez',
+    'Prometheus'
+  ]
+  return Array.from({ length: 17 }, (_, i) => ({
+    key: i,
+    serviceName: serviceNames[Math.floor(Math.random() * serviceNames.length)],
+    version: `${serviceNames[Math.floor(Math.random() * serviceNames.length)].toLowerCase()}1.0.${i}`,
+    restart: Math.floor(Math.random() * 2) == 0,
+    status: statusList[Math.floor(Math.random() * statusList.length)] as ServiceStatus
+  }))
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 4de8022ab..e5a3752cc 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -18,80 +18,142 @@
 -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { onMounted, ref, shallowRef } from 'vue'
+  import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
+  import { usePngImage } from '@/utils/tools'
+  import StatusDot from '@/components/common/status-dot/index.vue'
+  import SearchForm from '@/components/common/search-form/index.vue'
+  import type { GroupItem } from '@/components/common/button-group/types'
 
-  const data = ref(
-    Array.from({ length: 20 }, (_, i) => ({
-      key: i,
-      title: `title${i + 1}wwwwwwwwwww`
-    }))
-  )
+  const data = ref<ServiceItem[]>([])
+  const actionGroups = shallowRef<GroupItem[]>([
+    {
+      action: 'start',
+      icon: 'start',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'stop',
+      icon: 'stop',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'restart',
+      icon: 'restart',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'more',
+      icon: 'more_line',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    }
+  ])
+  onMounted(() => {
+    data.value = getServices()
+  })
 </script>
 
 <template>
   <div class="service">
+    <search-form />
     <div v-for="item in data" :key="item.key" class="item">
       <div class="item-header">
         <div class="item-header-title-wrp">
-          <a-avatar :size="42" class="item-header-icon" />
+          <a-avatar
+            v-if="item.serviceName"
+            :src="usePngImage(item.serviceName.toLowerCase())"
+            :size="42"
+            class="item-header-icon"
+          />
           <div class="item-header-title">
-            <a-typography-text
-              class="item-header-title-tip"
-              :ellipsis="item.title ? { tooltip: item.title } : false"
-              :content="`${item.title}`"
-            />
-            <a-typography-text
-              class="item-header-title-tip"
-              type="secondary"
-              :ellipsis="{ tooltip: 'flink-1.16.2-1' }"
-              content="flink-1.16.2-1"
-            />
+            <a-typography-text :content="`${item.serviceName}`" />
+            <a-typography-text class="small-font" type="secondary" :content="item.version" />
+          </div>
+          <div class="item-header-status">
+            <a-tag :color="StatusColors[item.status]">
+              <status-dot margin="0 4px 0 0" :color="StatusColors[item.status]" />
+              <span class="small-font">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
+            </a-tag>
           </div>
         </div>
-        <div>
-          <a-typography-text type="secondary" content="需要重启：是" />
+        <div class="small-font">
+          <span>{{ `${$t('common.restart')}:` }}</span>
+          <status-dot :color="StatusColors[item.status]" />
+          <span>{{ `${item.restart ? $t('common.required') : $t('common.not_required')}` }}</span>
         </div>
       </div>
-      <div class="item-content"> content </div>
+      <div class="item-content">
+        <button-group :auto="true" :space="0" :groups="actionGroups">
+          <template #icon="{ item: groupItem }">
+            <svg-icon :name="groupItem.icon || ''" />
+          </template>
+        </button-group>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .small-font {
+    font-size: 12px;
+    color: $color-text-tertiary;
+  }
+
   .service {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
   }
+
   .item {
-    flex-shrink: 0;
     width: 280px;
     height: 150px;
     border: 1px solid $color-border-secondary;
-    border-radius: $space-sm;
-    &-header {
+    border-radius: 8px;
+    @include flexbox($direction: column);
+  }
+
+  .item-content {
+    flex: 1;
+    font-size: 12px;
+    padding-inline: 10px;
+    @include flexbox($align: center);
+  }
+
+  .item-header {
+    display: grid;
+    gap: 10px;
+    padding: $space-md;
+    border-bottom: 1px solid $color-border-secondary;
+    &-title-wrp {
+      @include flexbox($gap: $space-sm);
+    }
+    &-title {
       display: grid;
-      gap: 10px;
-      padding: $space-md;
-      border-bottom: 1px solid $color-border-secondary;
-      &-title-wrp {
-        display: flex;
-        gap: $space-sm;
-      }
-      &-title {
-        display: grid;
-        &-tip {
-          width: 200px;
-        }
-      }
-      &-icon {
-        flex-shrink: 0;
-        border-radius: 0;
+    }
+    &-status {
+      flex: 1;
+      text-align: end;
+      span {
+        margin-inline-end: 0;
       }
     }
-
-    &-content {
-      padding: $space-md;
+    &-icon {
+      flex-shrink: 0;
+      border-radius: 0;
+    }
+    :deep(.ant-avatar) {
+      img {
+        object-fit: contain !important;
+      }
     }
   }
 </style>
diff --git a/bigtop-manager-ui/src/styles/variables.scss b/bigtop-manager-ui/src/styles/variables.scss
index ee3ab848e..57c3aadb4 100644
--- a/bigtop-manager-ui/src/styles/variables.scss
+++ b/bigtop-manager-ui/src/styles/variables.scss
@@ -41,3 +41,13 @@ $layout-sider-bg-color: $color-bg-base;
   align-items: $align;
   gap: $gap;
 }
+
+@mixin status-dot($background: $color-success, $width: 8px, $height: 8px, $margin: 0 6px 0 0) {
+  content: '';
+  display: inline-block;
+  background-color: $background;
+  width: $width;
+  height: $height;
+  border-radius: 50%;
+  margin: $margin;
+}

From 668835607dc79fc11928d734086e4c6adbe34930 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 27 Dec 2024 16:57:50 +0800
Subject: [PATCH 17/39] feat: add tab for cluster of home

---
 .../images/svg/filter.svg}                    |  15 +-
 .../assets/images/svg/filter_activated.svg    |  25 ++
 ...search_active.svg => search_activated.svg} |   0
 .../components/common/status-dot/index.vue    |   9 +-
 bigtop-manager-ui/src/locales/en_US/common.ts |   1 +
 bigtop-manager-ui/src/locales/en_US/host.ts   |  21 ++
 bigtop-manager-ui/src/locales/en_US/index.ts  |   6 +-
 bigtop-manager-ui/src/locales/en_US/task.ts   |  22 ++
 bigtop-manager-ui/src/locales/en_US/user.ts   |   1 +
 bigtop-manager-ui/src/locales/zh_CN/common.ts |   1 +
 bigtop-manager-ui/src/locales/zh_CN/host.ts   |  21 ++
 bigtop-manager-ui/src/locales/zh_CN/index.ts  |   6 +-
 bigtop-manager-ui/src/locales/zh_CN/task.ts   |  22 ++
 bigtop-manager-ui/src/locales/zh_CN/user.ts   |   1 +
 .../cluster/components/host-config.vue        |   2 +-
 .../cluster-manage/cluster/components/mock.ts |  45 ++++
 .../src/pages/cluster-manage/cluster/host.vue | 217 +++++++++++++++++-
 .../pages/cluster-manage/cluster/index.vue    |  10 +-
 .../pages/cluster-manage/cluster/service.vue  |  48 ++--
 .../src/pages/cluster-manage/cluster/task.vue |  69 +++++-
 .../src/pages/cluster-manage/cluster/user.vue |  62 ++++-
 bigtop-manager-ui/src/types/components.d.ts   |   2 +-
 22 files changed, 557 insertions(+), 49 deletions(-)
 rename bigtop-manager-ui/src/{pages/cluster-manage/cluster/detail.vue => assets/images/svg/filter.svg} (69%)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/filter_activated.svg
 rename bigtop-manager-ui/src/assets/images/svg/{search_active.svg => search_activated.svg} (100%)
 create mode 100644 bigtop-manager-ui/src/locales/en_US/host.ts
 create mode 100644 bigtop-manager-ui/src/locales/en_US/task.ts
 create mode 100644 bigtop-manager-ui/src/locales/zh_CN/host.ts
 create mode 100644 bigtop-manager-ui/src/locales/zh_CN/task.ts

diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue b/bigtop-manager-ui/src/assets/images/svg/filter.svg
similarity index 69%
rename from bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue
rename to bigtop-manager-ui/src/assets/images/svg/filter.svg
index d76126734..22f0cceff 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue
+++ b/bigtop-manager-ui/src/assets/images/svg/filter.svg
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
   ~ Licensed to the Apache Software Foundation (ASF) under one
   ~ or more contributor license agreements.  See the NOTICE file
@@ -16,11 +17,9 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
 -->
-
-<script setup lang="ts"></script>
-
-<template>
-  <div>detail </div>
-</template>
-
-<style scoped></style>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path d="M2 3L6.8 8.60593L6.8 12.8148L9.2 14L9.2 8.60593L14 3L2 3Z" stroke="rgba(51, 51, 51, 1)"
+    stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/filter_activated.svg b/bigtop-manager-ui/src/assets/images/svg/filter_activated.svg
new file mode 100644
index 000000000..af28467f9
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/filter_activated.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path d="M2 3L6.8 8.60593L6.8 12.8148L9.2 14L9.2 8.60593L14 3L2 3Z" stroke="rgba(22, 119, 255, 1)"
+    stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/search_active.svg b/bigtop-manager-ui/src/assets/images/svg/search_activated.svg
similarity index 100%
rename from bigtop-manager-ui/src/assets/images/svg/search_active.svg
rename to bigtop-manager-ui/src/assets/images/svg/search_activated.svg
diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/common/status-dot/index.vue
index 1d47b781c..57a53dd7c 100644
--- a/bigtop-manager-ui/src/components/common/status-dot/index.vue
+++ b/bigtop-manager-ui/src/components/common/status-dot/index.vue
@@ -24,7 +24,6 @@
     width?: string
     height?: string
     color?: keyof typeof Colors
-    margin?: string
   }
 
   enum Colors {
@@ -36,16 +35,14 @@
 
   const props = withDefaults(defineProps<StatusDot>(), {
     color: 'default',
-    width: '9px',
-    height: '9px',
-    margin: '0 6px'
+    width: '8px',
+    height: '8px'
   })
 
   const dotStyle = computed(() => ({
     width: props.width,
     height: props.height,
-    backgroundColor: Colors[props.color],
-    margin: props.margin
+    backgroundColor: Colors[props.color]
   }))
 </script>
 
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index be7fbff4b..03b6703b2 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -30,6 +30,7 @@ export default {
   edit: 'Edit',
   rename: 'Rename',
   delete: 'Delete',
+  remove: 'Remove',
   bulk_remove: 'Bulk remove',
   disable: 'Disable',
   enable: 'Enable',
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
new file mode 100644
index 000000000..5a9499560
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default {
+  host_list: 'Host List'
+}
diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index c79d8617f..8aa27956d 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -24,6 +24,8 @@ import user from '@/locales/en_US/user.ts'
 import llmConfig from '@/locales/en_US/llm-config.ts'
 import aiAssistant from '@/locales/en_US/ai-assistant.ts'
 import cluster from '@/locales/en_US/cluster.ts'
+import host from '@/locales/en_US/host.ts'
+import task from '@/locales/en_US/task.ts'
 
 export default {
   common,
@@ -32,5 +34,7 @@ export default {
   user,
   llmConfig,
   aiAssistant,
-  cluster
+  cluster,
+  host,
+  task
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/task.ts b/bigtop-manager-ui/src/locales/en_US/task.ts
new file mode 100644
index 000000000..b27ff2a25
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/task.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default {
+  task_list: 'Task List'
+}
diff --git a/bigtop-manager-ui/src/locales/en_US/user.ts b/bigtop-manager-ui/src/locales/en_US/user.ts
index e97993e03..dab2f04ae 100644
--- a/bigtop-manager-ui/src/locales/en_US/user.ts
+++ b/bigtop-manager-ui/src/locales/en_US/user.ts
@@ -23,5 +23,6 @@ export default {
   logout: 'Log Out',
   username: 'Username',
   nickname: 'Nickname',
+  user_list: 'User List',
   set_nickname_valid: 'Nickname should not be empty'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 5a957c7dc..918638afd 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -29,6 +29,7 @@ export default {
   unknown: '未知',
   edit: '编辑',
   delete: '删除',
+  remove: '移除',
   bulk_remove: '批量删除',
   rename: '重命名',
   disable: '停用',
diff --git a/bigtop-manager-ui/src/locales/zh_CN/host.ts b/bigtop-manager-ui/src/locales/zh_CN/host.ts
new file mode 100644
index 000000000..1980fd53a
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/host.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default {
+  host_list: '主机列表'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index 31b28a5e5..81c024e8e 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -24,6 +24,8 @@ import user from '@/locales/zh_CN/user.ts'
 import llmConfig from '@/locales/zh_CN/llm-config.ts'
 import aiAssistant from '@/locales/zh_CN/ai-assistant.ts'
 import cluster from '@/locales/zh_CN/cluster.ts'
+import host from '@/locales/zh_CN/host.ts'
+import task from '@/locales/zh_CN/task.ts'
 
 export default {
   common,
@@ -32,5 +34,7 @@ export default {
   user,
   llmConfig,
   aiAssistant,
-  cluster
+  cluster,
+  host,
+  task
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/task.ts b/bigtop-manager-ui/src/locales/zh_CN/task.ts
new file mode 100644
index 000000000..6c66f0a8d
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/task.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default {
+  task_list: '作业列表'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/user.ts b/bigtop-manager-ui/src/locales/zh_CN/user.ts
index b8b28be1c..808f79713 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/user.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/user.ts
@@ -23,5 +23,6 @@ export default {
   logout: '退出登录',
   username: '用户名',
   nickname: '昵称',
+  user_list: '用户列表',
   set_nickname_valid: '昵称不能为空'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index 2b2b317be..efcd23bef 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -91,7 +91,7 @@
       clickEvent: (_item, args) => handleEdit(args)
     },
     {
-      text: 'delete',
+      text: 'remove',
       danger: true,
       clickEvent: (_item, args) => handleDelete(args)
     }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 2e776082e..da1b9e818 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -31,7 +31,10 @@ export function generateTestData(count = 100) {
 
 export function generateTableHostData(numRows = 100) {
   const hostnames = ['Server-A', 'Server-B', 'Server-C', 'Server-D', 'Server-E']
+  const nodeNames = ['host-A', 'host-B', 'host-C', 'host-D']
   const ipAddresses = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4', '192.168.1.5']
+  const systems = 'Rocky Linux 8.8'
+  const architecture = 'x86_64'
   const remarks = ['Main server', 'Backup server', 'Database server', 'Web server', 'Test server']
   const statuses = ['installing', 'success', 'error', 'unknow']
 
@@ -41,6 +44,10 @@ export function generateTableHostData(numRows = 100) {
     tableData.push({
       key: i + 1,
       name: hostnames[Math.floor(Math.random() * hostnames.length)],
+      system: `${systems}-${i}`,
+      architecture: `${architecture}-${i}`,
+      componentCount: `${i}个组件`,
+      nodeName: nodeNames[Math.floor(Math.random() * nodeNames.length)],
       address: ipAddresses[Math.floor(Math.random() * ipAddresses.length)],
       remark: remarks[Math.floor(Math.random() * remarks.length)],
       status: statuses[Math.floor(Math.random() * statuses.length)]
@@ -133,3 +140,41 @@ export function getServices(): ServiceItem[] {
     status: statusList[Math.floor(Math.random() * statusList.length)] as ServiceStatus
   }))
 }
+
+export interface UserListItem {
+  serviceName: string
+  userName: string
+  userGroup: string
+  descrip: string
+}
+
+export function getUserList(count: number = 20): UserListItem[] {
+  return Array.from({ length: count }, (_, i) => ({
+    key: i,
+    serviceName: `serviceName-${i}`,
+    userName: `user-${i}`,
+    userGroup: `userGroup-${i}`,
+    descrip: 'descrip-descrip-descrip'
+  }))
+}
+
+type TaskStatus = 'success' | 'exception' | 'normal' | 'active'
+export interface TaskListItem {
+  name: string
+  status: TaskStatus
+  progress: number
+  createTime: string
+  updateTime: string
+}
+
+export function getTaskList(count: number = 20): TaskListItem[] {
+  const status = ['success', 'exception', 'normal', 'active']
+  return Array.from({ length: count }, (_, i) => ({
+    key: i,
+    name: `name-${i}`,
+    progress: Math.floor(Math.random() * 100),
+    status: status[Math.floor(Math.random() * status.length)] as TaskStatus,
+    createTime: '2024-09-19 11:11:11',
+    updateTime: '2024-09-19 11:11:11'
+  }))
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
index e69fa233f..fa2a6a9a4 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -17,13 +17,226 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { TableColumnType } from 'ant-design-vue'
+  import { computed, reactive, ref } from 'vue'
+  import { generateTableHostData } from './components/mock'
+  import useBaseTable from '@/composables/use-base-table'
+  import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
+  import type { GroupItem } from '@/components/common/button-group/types'
+
+  type Key = string | number
+  interface TableState {
+    selectedRowKeys: Key[]
+    searchText: string
+    searchedColumn: string
+  }
+
+  const searchInputRef = ref()
+  const data = ref<any[]>(generateTableHostData(50))
+  const state = reactive<TableState>({
+    searchText: '',
+    searchedColumn: '',
+    selectedRowKeys: []
+  })
+
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: '节点',
+      dataIndex: 'nodeName',
+      key: 'nodeName',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.nodeName, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'address',
+      key: 'address',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.address, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: '系统',
+      dataIndex: 'system',
+      ellipsis: true
+    },
+    {
+      title: '架构',
+      dataIndex: 'architecture',
+      ellipsis: true
+    },
+    {
+      title: '组件数',
+      dataIndex: 'componentCount',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '160px',
+      ellipsis: true,
+      filters: [
+        {
+          text: '正常',
+          value: 'success'
+        },
+        {
+          text: '异常',
+          value: 'error'
+        },
+        {
+          text: '未知',
+          value: 'unknow'
+        }
+      ],
+      onFilter: (value, record) => record.status.indexOf(value) === 0
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      width: '160px',
+      fixed: 'right'
+    }
+  ])
+
+  const { loading, paginationProps, onChange } = useBaseTable({
+    columns: columns.value,
+    rows: data.value
+  })
+
+  const operations = computed((): GroupItem[] => [
+    {
+      text: 'edit',
+      clickEvent: (_item, args) => handleEdit(args)
+    },
+    {
+      text: 'remove',
+      danger: true,
+      clickEvent: (_item, args) => handleDelete(args)
+    }
+  ])
+
+  const isContain = (source: string, target: string) => {
+    return source.toString().toLowerCase().includes(target.toLowerCase())
+  }
+
+  const onFilterDropdownOpenChange = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => {
+        searchInputRef.value.focus()
+      }, 100)
+    }
+  }
+
+  const onSelectChange = (selectedRowKeys: Key[]) => {
+    state.selectedRowKeys = selectedRowKeys
+  }
+
+  const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
+    confirm()
+    state.searchText = selectedKeys[0] as string
+    state.searchedColumn = dataIndex as string
+  }
+
+  const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
+    clearFilters({ confirm: true })
+    state.searchText = ''
+  }
+
+  const handleEdit = (row: any) => {
+    console.log('row :>> ', row)
+  }
+
+  const handleDelete = (row?: any) => {
+    if (!row) {
+      console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+    } else {
+      console.log('row :>> ', row)
+    }
+  }
+</script>
 
 <template>
-  <div class="host"> </div>
+  <div class="host">
+    <header>
+      <div class="host-title">{{ $t('host.host_list') }}</div>
+      <a-space :size="16">
+        <a-button type="primary" danger @click="handleDelete">{{ $t('common.bulk_remove') }}</a-button>
+        <a-button type="primary">{{ $t('cluster.add_host') }}</a-button>
+      </a-space>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="data"
+      :columns="columns"
+      :pagination="paginationProps"
+      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
+      @change="onChange"
+    >
+      <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+        <div class="search">
+          <a-input
+            ref="searchInputRef"
+            :placeholder="$t('common.enter_error', [column.title])"
+            :value="selectedKeys[0]"
+            @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
+            @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          />
+          <a-space :size="16">
+            <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
+              {{ $t('common.search') }}
+            </a-button>
+            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
+          </a-space>
+        </div>
+      </template>
+      <template #customFilterIcon="{ filtered, column }">
+        <svg-icon v-if="column.key != 'status'" :name="filtered ? 'search_activated' : 'search'" />
+        <svg-icon v-else :name="filtered ? 'filter_activated' : 'filter'" />
+      </template>
+      <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'nodeName'">
+          <a-typography-link underline> {{ record.nodeName }} </a-typography-link>
+        </template>
+        <template v-if="column.key === 'status'">
+          <svg-icon :name="record.status" />
+        </template>
+        <template v-if="column.key === 'operation'">
+          <button-group
+            i18n="common"
+            :text-compact="true"
+            :space="24"
+            :groups="operations"
+            :args="record"
+            group-shape="default"
+            group-type="link"
+          ></button-group>
+        </template>
+      </template>
+    </a-table>
+  </div>
 </template>
 
 <style lang="scss" scoped>
   .host {
+    header {
+      margin-bottom: $space-md;
+    }
+    &-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      margin-bottom: $space-md;
+    }
+  }
+  .search {
+    display: grid;
+    gap: $space-sm;
+    padding: $space-sm;
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 810a0944c..650ada051 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -24,6 +24,9 @@
   import type { TabItem } from '@/components/common/main-card/types'
   import Overview from './overview.vue'
   import Service from './service.vue'
+  import Host from './host.vue'
+  import User from './user.vue'
+  import Task from './task.vue'
 
   const route = useRoute()
   const title = computed(() => route.params.cluster as string)
@@ -81,11 +84,8 @@
   ])
 
   const getCompName = computed(() => {
-    if (activeKey.value === '1') {
-      return Overview
-    } else {
-      return Service
-    }
+    const componnts = [Overview, Service, Host, User, Task]
+    return componnts[parseInt(activeKey.value) - 1]
   })
 
   const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = ({ key }) => {
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index e5a3752cc..990f6de78 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -21,7 +21,6 @@
   import { onMounted, ref, shallowRef } from 'vue'
   import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
   import { usePngImage } from '@/utils/tools'
-  import StatusDot from '@/components/common/status-dot/index.vue'
   import SearchForm from '@/components/common/search-form/index.vue'
   import type { GroupItem } from '@/components/common/button-group/types'
 
@@ -65,29 +64,34 @@
   <div class="service">
     <search-form />
     <div v-for="item in data" :key="item.key" class="item">
-      <div class="item-header">
-        <div class="item-header-title-wrp">
+      <div class="header">
+        <div class="header-base-wrp">
           <a-avatar
             v-if="item.serviceName"
             :src="usePngImage(item.serviceName.toLowerCase())"
             :size="42"
-            class="item-header-icon"
+            class="header-icon"
           />
-          <div class="item-header-title">
+          <div class="header-base-title">
             <a-typography-text :content="`${item.serviceName}`" />
             <a-typography-text class="small-font" type="secondary" :content="item.version" />
           </div>
-          <div class="item-header-status">
+          <div class="header-base-status">
             <a-tag :color="StatusColors[item.status]">
-              <status-dot margin="0 4px 0 0" :color="StatusColors[item.status]" />
-              <span class="small-font">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
+              <div class="header-base-status-inner">
+                <status-dot :color="StatusColors[item.status]" />
+                <span class="small-font">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
+              </div>
             </a-tag>
           </div>
         </div>
-        <div class="small-font">
-          <span>{{ `${$t('common.restart')}:` }}</span>
+        <div class="header-required-status">
+          <a-typography-text class="small-font" type="secondary" :content="`${$t('common.restart')}:`" />
           <status-dot :color="StatusColors[item.status]" />
-          <span>{{ `${item.restart ? $t('common.required') : $t('common.not_required')}` }}</span>
+          <a-typography-text
+            class="small-font"
+            :content="`${item.restart ? $t('common.required') : $t('common.not_required')}`"
+          />
         </div>
       </div>
       <div class="item-content">
@@ -104,7 +108,6 @@
 <style lang="scss" scoped>
   .small-font {
     font-size: 12px;
-    color: $color-text-tertiary;
   }
 
   .service {
@@ -128,24 +131,29 @@
     @include flexbox($align: center);
   }
 
-  .item-header {
-    display: grid;
-    gap: 10px;
+  .header {
+    @include flexbox($direction: column, $gap: 10px);
     padding: $space-md;
     border-bottom: 1px solid $color-border-secondary;
-    &-title-wrp {
+    &-base-wrp {
       @include flexbox($gap: $space-sm);
     }
-    &-title {
-      display: grid;
+    &-base-title {
+      @include flexbox($direction: column);
     }
-    &-status {
+    &-base-status {
       flex: 1;
       text-align: end;
-      span {
+      &-inner {
+        @include flexbox($align: center, $gap: 4px);
+      }
+      .ant-tag {
         margin-inline-end: 0;
       }
     }
+    &-required-status {
+      @include flexbox($align: center, $gap: 4px);
+    }
     &-icon {
       flex-shrink: 0;
       border-radius: 0;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
index e781a0b71..b0f8ada4b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
@@ -17,13 +17,78 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { type TaskListItem, getTaskList } from './components/mock'
+  import { ref } from 'vue'
+  import type { TableColumnType } from 'ant-design-vue'
+  import useBaseTable from '@/composables/use-base-table'
+
+  const columns: TableColumnType[] = [
+    {
+      title: '#',
+      width: '48px',
+      key: 'index',
+      customRender: ({ index }) => {
+        return `${index + 1}`
+      }
+    },
+    {
+      title: '名称',
+      key: 'name',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      ellipsis: true
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      ellipsis: true
+    }
+  ]
+  const data = ref<TaskListItem[]>(getTaskList(50))
+  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+    columns,
+    rows: data.value
+  })
+</script>
 
 <template>
-  <div class="task"> </div>
+  <div class="task">
+    <header>
+      <div class="host-title">{{ $t('task.task_list') }}</div>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columnsProp"
+      :pagination="paginationProps"
+      @change="onChange"
+    >
+      <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'name'">
+          <a-typography-link underline> {{ record.name }} </a-typography-link>
+        </template>
+        <template v-if="column.key === 'status'">
+          <a-progress :percent="record.progress" :status="record.status" />
+        </template>
+      </template>
+    </a-table>
+  </div>
 </template>
 
 <style lang="scss" scoped>
   .task {
+    header {
+      margin-bottom: $space-md;
+    }
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
index 9a8cd30c1..2955093de 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
@@ -17,13 +17,71 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { type UserListItem, getUserList } from './components/mock'
+  import { ref } from 'vue'
+  import type { TableColumnType } from 'ant-design-vue'
+  import useBaseTable from '@/composables/use-base-table'
+
+  const columns: TableColumnType[] = [
+    {
+      title: '#',
+      width: '48px',
+      key: 'index',
+      customRender: ({ index }) => {
+        return `${index + 1}`
+      }
+    },
+    {
+      title: '服务名',
+      dataIndex: 'serviceName',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '用户名',
+      dataIndex: 'userName',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      title: '用户组',
+      dataIndex: 'userGroup',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'descrip',
+      ellipsis: true
+    }
+  ]
+  const data = ref<UserListItem[]>(getUserList(50))
+  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+    columns,
+    rows: data.value
+  })
+</script>
 
 <template>
-  <div class="user"> </div>
+  <div class="user">
+    <header>
+      <div class="host-title">{{ $t('user.user_list') }}</div>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columnsProp"
+      :pagination="paginationProps"
+      @change="onChange"
+    ></a-table>
+  </div>
 </template>
 
 <style lang="scss" scoped>
   .user {
+    header {
+      margin-bottom: $space-md;
+    }
   }
 </style>
diff --git a/bigtop-manager-ui/src/types/components.d.ts b/bigtop-manager-ui/src/types/components.d.ts
index ff6195061..f9673d004 100644
--- a/bigtop-manager-ui/src/types/components.d.ts
+++ b/bigtop-manager-ui/src/types/components.d.ts
@@ -25,6 +25,6 @@ declare module 'vue' {
     AutoForm: (typeof import('@/components/common/auto-form/index.vue'))['default']
     ButtonGroup: (typeof import('@/components/common/button-group/index.vue'))['default']
     MarkdownView: (typeof import('@/components/common/markdown-view/index.vue'))['default']
-    SvgIcon: (typeof import('@/components/common/svg-icon/index.vue'))['default']
+    StatusDot: (typeof import('@/components/common/status-dot/index.vue'))['default']
   }
 }

From 9756e2851515f9c3980ee08733f94a8cd3613887 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 27 Dec 2024 17:10:05 +0800
Subject: [PATCH 18/39] feat: rename task to job

---
 bigtop-manager-ui/src/locales/en_US/index.ts           |  4 ++--
 .../src/locales/en_US/{task.ts => job.ts}              |  2 +-
 bigtop-manager-ui/src/locales/zh_CN/index.ts           |  4 ++--
 .../src/locales/zh_CN/{task.ts => job.ts}              |  2 +-
 .../pages/cluster-manage/cluster/components/mock.ts    | 10 +++++-----
 .../src/pages/cluster-manage/cluster/index.vue         |  4 ++--
 .../pages/cluster-manage/cluster/{task.vue => job.vue} | 10 +++++-----
 7 files changed, 18 insertions(+), 18 deletions(-)
 rename bigtop-manager-ui/src/locales/en_US/{task.ts => job.ts} (97%)
 rename bigtop-manager-ui/src/locales/zh_CN/{task.ts => job.ts} (96%)
 rename bigtop-manager-ui/src/pages/cluster-manage/cluster/{task.vue => job.vue} (91%)

diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index 8aa27956d..5f6166be1 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -25,7 +25,7 @@ import llmConfig from '@/locales/en_US/llm-config.ts'
 import aiAssistant from '@/locales/en_US/ai-assistant.ts'
 import cluster from '@/locales/en_US/cluster.ts'
 import host from '@/locales/en_US/host.ts'
-import task from '@/locales/en_US/task.ts'
+import job from '@/locales/en_US/job.ts'
 
 export default {
   common,
@@ -36,5 +36,5 @@ export default {
   aiAssistant,
   cluster,
   host,
-  task
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/task.ts b/bigtop-manager-ui/src/locales/en_US/job.ts
similarity index 97%
rename from bigtop-manager-ui/src/locales/en_US/task.ts
rename to bigtop-manager-ui/src/locales/en_US/job.ts
index b27ff2a25..95caf7b8f 100644
--- a/bigtop-manager-ui/src/locales/en_US/task.ts
+++ b/bigtop-manager-ui/src/locales/en_US/job.ts
@@ -18,5 +18,5 @@
  */
 
 export default {
-  task_list: 'Task List'
+  job_list: 'Job List'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index 81c024e8e..cbb01b6e9 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -25,7 +25,7 @@ import llmConfig from '@/locales/zh_CN/llm-config.ts'
 import aiAssistant from '@/locales/zh_CN/ai-assistant.ts'
 import cluster from '@/locales/zh_CN/cluster.ts'
 import host from '@/locales/zh_CN/host.ts'
-import task from '@/locales/zh_CN/task.ts'
+import job from '@/locales/zh_CN/job.ts'
 
 export default {
   common,
@@ -36,5 +36,5 @@ export default {
   aiAssistant,
   cluster,
   host,
-  task
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/task.ts b/bigtop-manager-ui/src/locales/zh_CN/job.ts
similarity index 96%
rename from bigtop-manager-ui/src/locales/zh_CN/task.ts
rename to bigtop-manager-ui/src/locales/zh_CN/job.ts
index 6c66f0a8d..06cd7807b 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/task.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/job.ts
@@ -18,5 +18,5 @@
  */
 
 export default {
-  task_list: '作业列表'
+  job_list: '作业列表'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index da1b9e818..404e76366 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -158,22 +158,22 @@ export function getUserList(count: number = 20): UserListItem[] {
   }))
 }
 
-type TaskStatus = 'success' | 'exception' | 'normal' | 'active'
-export interface TaskListItem {
+type JobStatus = 'success' | 'exception' | 'normal' | 'active'
+export interface JobListItem {
   name: string
-  status: TaskStatus
+  status: JobStatus
   progress: number
   createTime: string
   updateTime: string
 }
 
-export function getTaskList(count: number = 20): TaskListItem[] {
+export function getJobList(count: number = 20): JobListItem[] {
   const status = ['success', 'exception', 'normal', 'active']
   return Array.from({ length: count }, (_, i) => ({
     key: i,
     name: `name-${i}`,
     progress: Math.floor(Math.random() * 100),
-    status: status[Math.floor(Math.random() * status.length)] as TaskStatus,
+    status: status[Math.floor(Math.random() * status.length)] as JobStatus,
     createTime: '2024-09-19 11:11:11',
     updateTime: '2024-09-19 11:11:11'
   }))
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 650ada051..6017e998d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -26,7 +26,7 @@
   import Service from './service.vue'
   import Host from './host.vue'
   import User from './user.vue'
-  import Task from './task.vue'
+  import Job from './job.vue'
 
   const route = useRoute()
   const title = computed(() => route.params.cluster as string)
@@ -84,7 +84,7 @@
   ])
 
   const getCompName = computed(() => {
-    const componnts = [Overview, Service, Host, User, Task]
+    const componnts = [Overview, Service, Host, User, Job]
     return componnts[parseInt(activeKey.value) - 1]
   })
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
similarity index 91%
rename from bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
rename to bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
index b0f8ada4b..90a1eb21b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/task.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { type TaskListItem, getTaskList } from './components/mock'
+  import { type JobListItem, getJobList } from './components/mock'
   import { ref } from 'vue'
   import type { TableColumnType } from 'ant-design-vue'
   import useBaseTable from '@/composables/use-base-table'
@@ -54,7 +54,7 @@
       ellipsis: true
     }
   ]
-  const data = ref<TaskListItem[]>(getTaskList(50))
+  const data = ref<JobListItem[]>(getJobList(50))
   const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
     columns,
     rows: data.value
@@ -62,9 +62,9 @@
 </script>
 
 <template>
-  <div class="task">
+  <div class="job">
     <header>
-      <div class="host-title">{{ $t('task.task_list') }}</div>
+      <div class="host-title">{{ $t('job.job_list') }}</div>
     </header>
     <a-table
       :loading="loading"
@@ -86,7 +86,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .task {
+  .job {
     header {
       margin-bottom: $space-md;
     }

From 3c335ff4a2ebbc2ebfe7d2c723d2654db4e1e397 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 30 Dec 2024 18:15:47 +0800
Subject: [PATCH 19/39] feat: add api about cluster

---
 bigtop-manager-ui/src/api/cluster/index.ts    | 23 ++++++---
 bigtop-manager-ui/src/api/cluster/types.ts    | 51 +++++++++++--------
 bigtop-manager-ui/src/api/request-util.ts     | 39 ++++++++++++++
 bigtop-manager-ui/src/api/request.ts          | 17 ++++---
 .../src/pages/cluster-manage/cluster/host.vue |  9 ++--
 5 files changed, 103 insertions(+), 36 deletions(-)
 create mode 100644 bigtop-manager-ui/src/api/request-util.ts

diff --git a/bigtop-manager-ui/src/api/cluster/index.ts b/bigtop-manager-ui/src/api/cluster/index.ts
index 8d74653b2..c18eefe34 100644
--- a/bigtop-manager-ui/src/api/cluster/index.ts
+++ b/bigtop-manager-ui/src/api/cluster/index.ts
@@ -17,12 +17,21 @@
  * under the License.
  */
 
-import request from '@/api/request.ts'
-import { ClusterVO } from '@/api/cluster/types.ts'
+import { get, put } from '@/api/request-util'
+import type { ClusterVO, ServiceConfigVO, UpdateClusterParam } from './types'
 
-export const getClusters = (): Promise<ClusterVO[]> => {
-  return request({
-    method: 'get',
-    url: '/clusters'
-  })
+export const getCluster = (id: number) => {
+  return get<ClusterVO>(`/clusters/${id}`)
+}
+
+export const updateCluster = (id: number, data: UpdateClusterParam) => {
+  return put<ClusterVO>(`/clusters/${id}`, data)
+}
+
+export const getClusterList = () => {
+  return get<ClusterVO[]>('/clusters')
+}
+
+export const getServicesOfCluster = (param: { clusterId: number; id: number }) => {
+  return get<ServiceConfigVO[]>(`/clusters/${param.clusterId}/services/${param.id}/configs`)
 }
diff --git a/bigtop-manager-ui/src/api/cluster/types.ts b/bigtop-manager-ui/src/api/cluster/types.ts
index 1af5c674c..65e92bb12 100644
--- a/bigtop-manager-ui/src/api/cluster/types.ts
+++ b/bigtop-manager-ui/src/api/cluster/types.ts
@@ -17,28 +17,39 @@
  * under the License.
  */
 
-export interface ClusterReq {
-  clusterName: string
-  clusterType: number
-  stackName: string
-  stackVersion: string
-  repoInfoList: RepoReq[]
-  hostnames: string[]
-}
+export type UpdateClusterParam = { name: string; desc: string }
 
 export interface ClusterVO {
-  id: number
-  clusterName: string
-  clusterType: number
-  stackName: string
-  stackVersion: string
-  selected: boolean
+  createUser?: string
+  desc?: string
+  displayName?: string
+  id?: number
+  name?: string
+  rootDir?: string
+  status?: number
+  totalDisk?: number
+  totalHost?: number
+  totalMemory?: number
+  totalProcessor?: number
+  totalService?: number
+  type?: number
+  userGroup?: string
+}
+
+export interface ServiceConfigVO {
+  id?: number
+  name?: string
+  properties?: PropertyVO[]
+}
+
+export interface PropertyVO {
+  attrs?: AttrsVO
+  desc?: string
+  displayName?: string
+  name?: string
+  value?: string
 }
 
-export interface RepoReq {
-  repoId: string
-  repoName: string
-  baseUrl: string
-  os: string
-  arch: string
+export interface AttrsVO {
+  type?: string
 }
diff --git a/bigtop-manager-ui/src/api/request-util.ts b/bigtop-manager-ui/src/api/request-util.ts
new file mode 100644
index 000000000..e5c75dfc1
--- /dev/null
+++ b/bigtop-manager-ui/src/api/request-util.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ResponseEntity } from './types'
+import request from './request'
+import { AxiosRequestConfig } from 'axios'
+
+const get = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.get(url, config)
+}
+
+const post = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.post(url, data, config)
+}
+
+const put = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.put(url, data, config)
+}
+
+const del = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.delete(url, config)
+}
+
+export { get, post, put, del }
diff --git a/bigtop-manager-ui/src/api/request.ts b/bigtop-manager-ui/src/api/request.ts
index b1c7771b3..2578fd50f 100644
--- a/bigtop-manager-ui/src/api/request.ts
+++ b/bigtop-manager-ui/src/api/request.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import axios, { AxiosError } from 'axios'
 import { message } from 'ant-design-vue'
 import { ResponseEntity } from '@/api/types'
 import router from '@/router'
@@ -25,13 +26,17 @@ import i18n from '@/locales'
 import { API_EXPIRE_TIME } from '@/utils/constant.ts'
 import { Locale } from '@/store/locale/types.ts'
 
-const request = axios.create({
+const baseConfig = {
   baseURL: import.meta.env.VITE_APP_BASE_API,
   withCredentials: true,
   timeout: API_EXPIRE_TIME
-})
+}
+
+const axiosInstance: AxiosInstance = axios.create(baseConfig)
+const request = axiosInstance.interceptors.request
+const response = axiosInstance.interceptors.response
 
-request.interceptors.request.use((config: InternalAxiosRequestConfig<any>): InternalAxiosRequestConfig<any> => {
+request.use((config: InternalAxiosRequestConfig<any>): InternalAxiosRequestConfig<any> => {
   config.headers = config.headers || {}
 
   const locale = i18n.global.locale.value as Locale
@@ -45,7 +50,7 @@ request.interceptors.request.use((config: InternalAxiosRequestConfig<any>): Inte
   return config
 })
 
-request.interceptors.response.use(
+response.use(
   async (res: AxiosResponse) => {
     if (res.config.responseType === 'stream') {
       // Skip SSE api check
@@ -80,4 +85,4 @@ request.interceptors.response.use(
   }
 )
 
-export default request
+export default axiosInstance
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
index fa2a6a9a4..f39243de4 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -187,12 +187,12 @@
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
-          <a-space :size="16">
+          <div class="search-btn">
+            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
               {{ $t('common.search') }}
             </a-button>
-            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
-          </a-space>
+          </div>
         </div>
       </template>
       <template #customFilterIcon="{ filtered, column }">
@@ -238,5 +238,8 @@
     display: grid;
     gap: $space-sm;
     padding: $space-sm;
+    &-btn {
+      @include flexbox($justify: flex-end, $gap: $space-md);
+    }
   }
 </style>

From 6d5e944b1c5d4e6aab0dfab7b57f96c6bfbb017e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 31 Dec 2024 10:54:08 +0800
Subject: [PATCH 20/39] feat: update api about Cluster

---
 bigtop-manager-ui/src/api/cluster/index.ts   |  6 +-
 bigtop-manager-ui/src/api/cluster/types.ts   | 18 ------
 bigtop-manager-ui/src/api/component/index.ts | 10 ---
 bigtop-manager-ui/src/api/component/types.ts | 41 +++++-------
 bigtop-manager-ui/src/api/job/index.ts       | 35 +++++-----
 bigtop-manager-ui/src/api/job/types.ts       | 54 ++++++++--------
 bigtop-manager-ui/src/api/request-util.ts    |  2 +-
 bigtop-manager-ui/src/api/service/index.ts   | 50 ++++++++++++---
 bigtop-manager-ui/src/api/service/type.ts    | 67 ++++++++++++++++++++
 bigtop-manager-ui/src/api/service/types.ts   | 37 -----------
 10 files changed, 169 insertions(+), 151 deletions(-)
 create mode 100644 bigtop-manager-ui/src/api/service/type.ts
 delete mode 100644 bigtop-manager-ui/src/api/service/types.ts

diff --git a/bigtop-manager-ui/src/api/cluster/index.ts b/bigtop-manager-ui/src/api/cluster/index.ts
index c18eefe34..7f000f04e 100644
--- a/bigtop-manager-ui/src/api/cluster/index.ts
+++ b/bigtop-manager-ui/src/api/cluster/index.ts
@@ -18,7 +18,7 @@
  */
 
 import { get, put } from '@/api/request-util'
-import type { ClusterVO, ServiceConfigVO, UpdateClusterParam } from './types'
+import type { ClusterVO, UpdateClusterParam } from './types'
 
 export const getCluster = (id: number) => {
   return get<ClusterVO>(`/clusters/${id}`)
@@ -31,7 +31,3 @@ export const updateCluster = (id: number, data: UpdateClusterParam) => {
 export const getClusterList = () => {
   return get<ClusterVO[]>('/clusters')
 }
-
-export const getServicesOfCluster = (param: { clusterId: number; id: number }) => {
-  return get<ServiceConfigVO[]>(`/clusters/${param.clusterId}/services/${param.id}/configs`)
-}
diff --git a/bigtop-manager-ui/src/api/cluster/types.ts b/bigtop-manager-ui/src/api/cluster/types.ts
index 65e92bb12..b9f8beb53 100644
--- a/bigtop-manager-ui/src/api/cluster/types.ts
+++ b/bigtop-manager-ui/src/api/cluster/types.ts
@@ -35,21 +35,3 @@ export interface ClusterVO {
   type?: number
   userGroup?: string
 }
-
-export interface ServiceConfigVO {
-  id?: number
-  name?: string
-  properties?: PropertyVO[]
-}
-
-export interface PropertyVO {
-  attrs?: AttrsVO
-  desc?: string
-  displayName?: string
-  name?: string
-  value?: string
-}
-
-export interface AttrsVO {
-  type?: string
-}
diff --git a/bigtop-manager-ui/src/api/component/index.ts b/bigtop-manager-ui/src/api/component/index.ts
index 8a0d4fba4..60cba9a84 100644
--- a/bigtop-manager-ui/src/api/component/index.ts
+++ b/bigtop-manager-ui/src/api/component/index.ts
@@ -16,13 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { HostComponentVO } from '@/api/component/types.ts'
-import request from '@/api/request.ts'
-
-export const getHostComponents = (clusterId: number): Promise<HostComponentVO[]> => {
-  return request({
-    method: 'get',
-    url: '/clusters/' + clusterId + '/host-components'
-  })
-}
diff --git a/bigtop-manager-ui/src/api/component/types.ts b/bigtop-manager-ui/src/api/component/types.ts
index a7238170e..43a354e8b 100644
--- a/bigtop-manager-ui/src/api/component/types.ts
+++ b/bigtop-manager-ui/src/api/component/types.ts
@@ -17,30 +17,21 @@
  * under the License.
  */
 
-import { MaintainState } from '@/enums/state'
-
-export interface ComponentVO {
-  id: number
-  componentName: string
-  displayName: string
-  category: string
-  serviceName: string
-  clusterName: string
-  cardinality: string
-}
-
-export interface ServiceComponentVO {
-  serviceName: string
-  components: ComponentVO[]
+export interface Component {
+  cardinality?: string
+  category?: string
+  displayName?: string
+  hostname?: string
+  id?: number
+  name?: string
+  quickLink?: QuickLinkVO
+  serviceDisplayName?: string
+  serviceId?: number
+  serviceName?: string
+  stack?: string
+  status?: number
 }
-
-export interface HostComponentVO {
-  id: number
-  componentName: string
-  displayName: string
-  category: string
-  serviceName: string
-  clusterName: string
-  hostname: string
-  state: MaintainState
+export interface QuickLinkVO {
+  displayName?: string
+  url?: string
 }
diff --git a/bigtop-manager-ui/src/api/job/index.ts b/bigtop-manager-ui/src/api/job/index.ts
index 14f8e2aaa..d1c694cb8 100644
--- a/bigtop-manager-ui/src/api/job/index.ts
+++ b/bigtop-manager-ui/src/api/job/index.ts
@@ -16,28 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { get, post } from '@/api/request-util'
+import type { JobParams, Job, JobList, Stage, Task, TaskLogParams, TaskParams } from './types'
 
-import request from '@/api/request.ts'
-import { JobVO, Pagination } from '@/api/job/types.ts'
+export const getJobList = (clusterId: number) => {
+  return get<JobList>(`/clusters/${clusterId}/jobs`)
+}
+
+export const retryJob = (params: JobParams) => {
+  return post<Job[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/retry`)
+}
 
-export const getJob = (id: number, clusterId: number): Promise<JobVO> => {
-  return request({
-    method: 'get',
-    url: '/clusters/' + clusterId + '/jobs/' + id
-  })
+export const getStageList = (params: JobParams) => {
+  return get<Stage[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/stages`)
 }
 
-export const retryJob = (id: number, clusterId: number): Promise<JobVO> => {
-  return request({
-    method: 'post',
-    url: '/clusters/' + clusterId + '/jobs/' + id + '/retry'
-  })
+export const getTaskList = (params: TaskParams) => {
+  return get<Task[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks`)
 }
 
-export const getJobs = (clusterId: number, pagination: Pagination): Promise<{ content: JobVO[]; total: number }> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${clusterId}/jobs`,
-    params: pagination
-  })
+export const getTaskLog = (params: TaskLogParams) => {
+  return get<string[]>(
+    `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks/${params.taskId}/log`
+  )
 }
diff --git a/bigtop-manager-ui/src/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 81aaf643a..7f8282fbe 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -17,40 +17,36 @@
  * under the License.
  */
 
-import { State } from '@/enums/state'
+import type { PageVO } from '@/api/types'
 
-export type StateType = keyof typeof State
+export type JobList = PageVO<Job>
+export type StageList = PageVO<Stage>
+export type JobParams = { clusterId: number; jobId: number }
+export type TaskParams = JobParams & { stageId: number }
+export type TaskLogParams = TaskParams & { taskId: number }
 
-interface BaseVO {
-  id: number
-  name: string
-  state: StateType
+export interface Job {
   createTime?: string
+  id?: number
+  name?: string
+  state?: string
   updateTime?: string
-  progress?: number
 }
 
-export interface JobVO extends BaseVO {
-  stages: StageVO[]
-}
-
-export interface StageVO extends BaseVO {
-  order: number
-  tasks: TaskVO[]
-}
-
-export interface TaskVO extends BaseVO {
-  hostname: string
-}
-
-export interface Pagination {
-  pageNum: number
-  pageSize: number
-  sort?: 'asc' | 'desc'
-  orderBy?: string
+export interface Stage {
+  createTime?: string
+  id?: number
+  name?: string
+  order?: number
+  state?: string
+  tasks?: Task[]
+  updateTime?: string
 }
-
-export interface OuterData {
-  meta: JobVO[]
-  currItem: StageVO | TaskVO | undefined
+export interface Task {
+  createTime?: string
+  hostname?: string
+  id?: number
+  name?: string
+  state?: string
+  updateTime?: string
 }
diff --git a/bigtop-manager-ui/src/api/request-util.ts b/bigtop-manager-ui/src/api/request-util.ts
index e5c75dfc1..7a2da40e3 100644
--- a/bigtop-manager-ui/src/api/request-util.ts
+++ b/bigtop-manager-ui/src/api/request-util.ts
@@ -24,7 +24,7 @@ const get = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntit
   return request.get(url, config)
 }
 
-const post = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+const post = <T, U = any>(url: string, data?: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
   return request.post(url, data, config)
 }
 
diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index 9b61a3845..a1c19eec2 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -17,12 +17,46 @@
  * under the License.
  */
 
-import request from '@/api/request.ts'
-import { ServiceVO } from '@/api/service/types.ts'
-
-export const getService = (clusterId: number): Promise<ServiceVO[]> => {
-  return request({
-    method: 'get',
-    url: '/clusters/' + clusterId + '/services'
-  })
+import { del, get, post } from '@/api/request-util'
+import type {
+  CommonReq,
+  Service,
+  ServiceConfig,
+  ServiceConfigSnapshot,
+  ServiceList,
+  SnapshotData,
+  SnapshotRecovery
+} from './type'
+
+export const getServiceList = (clusterId: number) => {
+  return get<ServiceList>(`/clusters/${clusterId}/services`)
+}
+
+export const getService = (params: CommonReq) => {
+  return get<Service>(`/clusters/${params.clusterId}/services/${params.id}`)
+}
+
+export const getServiceConfigs = (params: CommonReq) => {
+  return get<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs`)
+}
+
+export const updateServiceConfigs = (params: CommonReq, data: ServiceConfig) => {
+  return post<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs,`, data)
+}
+
+export const getServiceConfigSnapshotsList = (params: CommonReq) => {
+  return get<ServiceConfigSnapshot[]>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots`)
+}
+
+export const takeServiceConfigSnapshot = (params: CommonReq, data: SnapshotData) => {
+  return post<ServiceConfigSnapshot>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots,`, data)
+}
+
+export const recoveryServiceConfigSnapshot = (params: SnapshotRecovery) => {
+  return post<ServiceConfig[]>(
+    `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
+  )
+}
+export const deleteServiceConfigSnapshot = (params: SnapshotRecovery) => {
+  return del<boolean>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`)
 }
diff --git a/bigtop-manager-ui/src/api/service/type.ts b/bigtop-manager-ui/src/api/service/type.ts
new file mode 100644
index 000000000..204b3aa08
--- /dev/null
+++ b/bigtop-manager-ui/src/api/service/type.ts
@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { Component } from '@/api/component/types'
+import type { PageVO } from '@/api/types'
+
+export type ServiceList = PageVO<Service>
+export type CommonReq = { clusterId: number; id: number }
+export type SnapshotData = { desc?: string; name?: string }
+export type SnapshotRecovery = CommonReq & { snapshotId: string }
+
+export interface Service {
+  components?: Component[]
+  configs?: ServiceConfig[]
+  desc?: string
+  displayName?: string
+  id?: number
+  name?: string
+  requiredServices?: string[]
+  restartFlag?: boolean
+  stack?: string
+  status?: number
+  user?: string
+  version?: string
+}
+
+export interface ServiceConfig {
+  id?: number
+  name?: string
+  properties?: Property[]
+}
+
+export interface Property {
+  attrs?: Attr
+  desc?: string
+  displayName?: string
+  name: string
+  value?: string
+}
+
+export interface Attr {
+  type?: string
+}
+
+export interface ServiceConfigSnapshot {
+  configJson?: string
+  desc?: string
+  id?: number
+  name?: string
+  [property: string]: any
+}
diff --git a/bigtop-manager-ui/src/api/service/types.ts b/bigtop-manager-ui/src/api/service/types.ts
deleted file mode 100644
index d6a5d0d24..000000000
--- a/bigtop-manager-ui/src/api/service/types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export interface ServiceVO {
-  id?: number
-  serviceName: string
-  displayName: string
-  serviceDesc: string
-  serviceVersion: string
-  clusterName?: string
-  serviceUser?: string
-  serviceGroup?: string
-  isClient?: boolean
-  isHealthy?: boolean
-  quickLinks?: QuickLinkVO[]
-}
-
-export interface QuickLinkVO {
-  displayName: string
-  url: string
-}

From d0b3c5c92ab249b51c739b7e4f4d855dd1ce5225 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 31 Dec 2024 10:55:49 +0800
Subject: [PATCH 21/39] feat: update api about Cluster

---
 bigtop-manager-ui/src/api/service/index.ts | 12 ++++++------
 bigtop-manager-ui/src/api/service/type.ts  |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index a1c19eec2..ed65288dd 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -19,7 +19,7 @@
 
 import { del, get, post } from '@/api/request-util'
 import type {
-  CommonReq,
+  ServiceParams,
   Service,
   ServiceConfig,
   ServiceConfigSnapshot,
@@ -32,23 +32,23 @@ export const getServiceList = (clusterId: number) => {
   return get<ServiceList>(`/clusters/${clusterId}/services`)
 }
 
-export const getService = (params: CommonReq) => {
+export const getService = (params: ServiceParams) => {
   return get<Service>(`/clusters/${params.clusterId}/services/${params.id}`)
 }
 
-export const getServiceConfigs = (params: CommonReq) => {
+export const getServiceConfigs = (params: ServiceParams) => {
   return get<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs`)
 }
 
-export const updateServiceConfigs = (params: CommonReq, data: ServiceConfig) => {
+export const updateServiceConfigs = (params: ServiceParams, data: ServiceConfig) => {
   return post<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs,`, data)
 }
 
-export const getServiceConfigSnapshotsList = (params: CommonReq) => {
+export const getServiceConfigSnapshotsList = (params: ServiceParams) => {
   return get<ServiceConfigSnapshot[]>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots`)
 }
 
-export const takeServiceConfigSnapshot = (params: CommonReq, data: SnapshotData) => {
+export const takeServiceConfigSnapshot = (params: ServiceParams, data: SnapshotData) => {
   return post<ServiceConfigSnapshot>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots,`, data)
 }
 
diff --git a/bigtop-manager-ui/src/api/service/type.ts b/bigtop-manager-ui/src/api/service/type.ts
index 204b3aa08..070507c60 100644
--- a/bigtop-manager-ui/src/api/service/type.ts
+++ b/bigtop-manager-ui/src/api/service/type.ts
@@ -21,9 +21,9 @@ import type { Component } from '@/api/component/types'
 import type { PageVO } from '@/api/types'
 
 export type ServiceList = PageVO<Service>
-export type CommonReq = { clusterId: number; id: number }
+export type ServiceParams = { clusterId: number; id: number }
 export type SnapshotData = { desc?: string; name?: string }
-export type SnapshotRecovery = CommonReq & { snapshotId: string }
+export type SnapshotRecovery = ServiceParams & { snapshotId: string }
 
 export interface Service {
   components?: Component[]

From 04173ed91567713112107e8573347f1a0f885657 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Wed, 15 Jan 2025 10:45:47 +0800
Subject: [PATCH 22/39] refactor: refact style of service card

---
 .../components/common/status-dot/index.vue    | 31 +++++++------
 .../pages/cluster-manage/cluster/service.vue  | 44 +++++++++++--------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/common/status-dot/index.vue
index 57a53dd7c..96c401a34 100644
--- a/bigtop-manager-ui/src/components/common/status-dot/index.vue
+++ b/bigtop-manager-ui/src/components/common/status-dot/index.vue
@@ -21,9 +21,9 @@
   import { computed } from 'vue'
 
   interface StatusDot {
-    width?: string
-    height?: string
+    size?: number
     color?: keyof typeof Colors
+    content?: string
   }
 
   enum Colors {
@@ -35,26 +35,31 @@
 
   const props = withDefaults(defineProps<StatusDot>(), {
     color: 'default',
-    width: '8px',
-    height: '8px'
+    size: 8,
+    content: ''
   })
-
+  const fontSize = computed(() => props.size * 0.6)
   const dotStyle = computed(() => ({
-    width: props.width,
-    height: props.height,
+    width: props.size + 'px',
+    height: props.size + 'px',
+    fontSize: fontSize.value + 'px',
     backgroundColor: Colors[props.color]
   }))
 </script>
 
 <template>
-  <div class="status-dot-item" :style="dotStyle"> </div>
+  <div class="dot" :style="dotStyle">
+    {{ content }}
+  </div>
 </template>
 
-<style lang="scss" scoped>
-  .status-dot-item {
-    display: inline-block;
+<style scoped>
+  .dot {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border-radius: 50%;
-    line-height: 0;
-    font-size: 0;
+    color: white;
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 990f6de78..89cab2dba 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -63,7 +63,7 @@
 <template>
   <div class="service">
     <search-form />
-    <div v-for="item in data" :key="item.key" class="item">
+    <a-card v-for="item in data" :key="item.key" :hoverable="true" class="service-item">
       <div class="header">
         <div class="header-base-wrp">
           <a-avatar
@@ -73,25 +73,22 @@
             class="header-icon"
           />
           <div class="header-base-title">
-            <a-typography-text :content="`${item.serviceName}`" />
-            <a-typography-text class="small-font" type="secondary" :content="item.version" />
+            <span>{{ `${item.serviceName}` }}</span>
+            <span class="small-gray">{{ item.version }}</span>
           </div>
           <div class="header-base-status">
             <a-tag :color="StatusColors[item.status]">
               <div class="header-base-status-inner">
                 <status-dot :color="StatusColors[item.status]" />
-                <span class="small-font">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
+                <span class="small">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
               </div>
             </a-tag>
           </div>
         </div>
-        <div class="header-required-status">
-          <a-typography-text class="small-font" type="secondary" :content="`${$t('common.restart')}:`" />
+        <div class="header-restart-status">
+          <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
           <status-dot :color="StatusColors[item.status]" />
-          <a-typography-text
-            class="small-font"
-            :content="`${item.restart ? $t('common.required') : $t('common.not_required')}`"
-          />
+          <span class="small">{{ `${item.restart ? $t('common.required') : $t('common.not_required')}` }}</span>
         </div>
       </div>
       <div class="item-content">
@@ -101,13 +98,19 @@
           </template>
         </button-group>
       </div>
-    </div>
+    </a-card>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .small-font {
+  .small {
+    font-size: 12px;
+  }
+
+  .small-gray {
+    line-height: 12px;
     font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
   }
 
   .service {
@@ -116,27 +119,30 @@
     gap: 16px;
   }
 
-  .item {
+  .service-item {
     width: 280px;
     height: 150px;
-    border: 1px solid $color-border-secondary;
     border-radius: 8px;
     @include flexbox($direction: column);
+    :deep(.ant-card-body) {
+      padding: 0;
+      height: 100%;
+      @include flexbox($direction: column);
+    }
   }
 
   .item-content {
     flex: 1;
-    font-size: 12px;
-    padding-inline: 10px;
     @include flexbox($align: center);
+    padding-inline: 8px;
   }
 
   .header {
-    @include flexbox($direction: column, $gap: 10px);
     padding: $space-md;
     border-bottom: 1px solid $color-border-secondary;
     &-base-wrp {
       @include flexbox($gap: $space-sm);
+      margin-bottom: 10px;
     }
     &-base-title {
       @include flexbox($direction: column);
@@ -151,8 +157,8 @@
         margin-inline-end: 0;
       }
     }
-    &-required-status {
-      @include flexbox($align: center, $gap: 4px);
+    &-restart-status {
+      @include flexbox($align: center, $gap: 6px);
     }
     &-icon {
       flex-shrink: 0;

From 249c8cacccd6e2c48f8dfcb9f73e91322a69e26e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Wed, 15 Jan 2025 17:57:22 +0800
Subject: [PATCH 23/39] feat: update search-form component

---
 .../src/assets/images/svg/bottom.svg          |  25 +++
 .../components/common/search-form/index.vue   | 167 ++++++++++++++++--
 .../components/common/search-form/types.ts    |  31 ++++
 .../cluster-manage/cluster/components/mock.ts |   6 +-
 .../pages/cluster-manage/cluster/service.vue  |  50 +++++-
 5 files changed, 259 insertions(+), 20 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/bottom.svg
 create mode 100644 bigtop-manager-ui/src/components/common/search-form/types.ts

diff --git a/bigtop-manager-ui/src/assets/images/svg/bottom.svg b/bigtop-manager-ui/src/assets/images/svg/bottom.svg
new file mode 100644
index 000000000..edc1e747f
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/bottom.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.33349609375"
+  height="5.33331298828125" viewBox="0 0 9.33349609375 5.33331298828125" fill="none">
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8.66675 0.666656L4.66675 4.66666L0.666748 0.666656">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/search-form/index.vue b/bigtop-manager-ui/src/components/common/search-form/index.vue
index d8a7b9a12..4413fd451 100644
--- a/bigtop-manager-ui/src/components/common/search-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/search-form/index.vue
@@ -18,32 +18,102 @@
 -->
 
 <script setup lang="ts">
-  import { DownOutlined } from '@ant-design/icons-vue'
+  import type { SearchFormItem } from './types'
+  import { SearchOutlined } from '@ant-design/icons-vue'
+  import { ref } from 'vue'
 
-  const searchItems = ['服务名', '需要重启', '状态']
-  // const searchDropOptions = []
+  interface SearchFormPops {
+    searchItems: SearchFormItem[]
+  }
+
+  const props = defineProps<SearchFormPops>()
+
+  const filterParams = ref(
+    props.searchItems.map((v) => {
+      return {
+        [`${v.key}`]: ''
+      }
+    })
+  )
+
+  const checkSelected = ({ item, itemIdx }: any) => {
+    return filterParams.value[itemIdx][item.key] === ''
+  }
+
+  const resetFilter = ({ item, itemIdx }: any) => {
+    filterParams.value[itemIdx][item.key] = ''
+    confirmFilterParams()
+  }
+
+  const onSelect = ({ item, itemIdx, option }: any) => {
+    filterParams.value[itemIdx][item.key] = option.value
+    confirmFilterParams()
+  }
+
+  const confirmFilterParams = () => {
+    const filters = filterParams.value.reduce((pre, val) => {
+      Object.assign(pre, val)
+      return pre
+    }, {} as any)
+    console.log('filters :>> ', filters)
+  }
 </script>
 
 <template>
   <div class="search-form">
-    <template v-for="item in searchItems" :key="item">
+    <template v-for="(item, itemIdx) in searchItems" :key="item">
       <a-dropdown>
-        <span style="margin-right: 16px" @click.prevent>
-          {{ item }}
-          <DownOutlined />
+        <span @click.prevent>
+          <div class="search-form-label">
+            <span :style="{ color: !checkSelected({ item, itemIdx }) ? 'var(--color-primary)' : 'initial' }">
+              {{ item.label }}
+            </span>
+            <svg-icon name="bottom" style="padding: 6px 4px; margin-left: 8px" />
+          </div>
         </span>
         <template #overlay>
           <a-menu>
-            <a-menu-item>
-              <a href="javascript:;">1st menu item</a>
-            </a-menu-item>
-            <a-menu-item>
-              <a href="javascript:;">2nd menu item</a>
-            </a-menu-item>
-            <a-menu-item>
-              <a href="javascript:;">3rd menu item</a>
+            <a-menu-item v-for="option in item.options" :key="option.value">
+              <a href="javascript:;">{{ option.label }}</a>
             </a-menu-item>
           </a-menu>
+          <!-- <a-card class="search-card" @click.stop>
+            <template #extra><a href="#" @click.stop="resetFilter({ item, itemIdx })">重置</a></template>
+            <template #title>
+              <span style="font-size: 14px">{{ item.label }}</span>
+            </template>
+
+            <template v-if="item.type == 'search'">
+              <div class="search-form-input-wrp" @click.stop>
+                <div class="search-form-input">
+                  <a-input v-model:value="filterParams[itemIdx][item.key]" :placeholder="`搜索${item.label}`">
+                    <template #prefix><SearchOutlined /></template>
+                  </a-input>
+                </div>
+              </div>
+              <footer>
+                <a-button size="small" type="primary" @click="confirmFilterParams">应用</a-button>
+              </footer>
+            </template>
+
+            <template v-else-if="item.type == 'status'">
+              <div class="search-form-option-wrp">
+                <div
+                  v-for="(option, idx) in item.options"
+                  :key="idx"
+                  class="search-form-option"
+                  :class="{ 'option-selected': filterParams[itemIdx][item.key] == option.value }"
+                  @click="onSelect({ item, itemIdx, option })"
+                >
+                  <a-space :size="10">
+                    <span>
+                      {{ option.label }}
+                    </span>
+                  </a-space>
+                </div>
+              </div>
+            </template>
+          </a-card> -->
         </template>
       </a-dropdown>
     </template>
@@ -51,7 +121,74 @@
 </template>
 
 <style lang="scss" scoped>
+  :deep(.ant-dropdown-menu-body) {
+    padding-inline: 8px;
+    padding-block: 8px;
+  }
+  :deep(.ant-dropdown-menu-head) {
+    padding: 8px 16px;
+    min-height: 32px;
+  }
+
+  .option-selected {
+    font-weight: 600;
+    background-color: $blue-1;
+    &:hover {
+      background-color: $blue-1;
+    }
+  }
+
+  .search-card {
+    min-width: 280px;
+    footer {
+      text-align: end;
+    }
+  }
   .search-form {
     width: 100%;
+    display: flex;
+    gap: $space-sm;
+    &-label {
+      display: inline-block;
+      cursor: pointer;
+      line-height: 20px;
+      .ant-tag {
+        line-height: 40px;
+        border-radius: 8px;
+      }
+    }
+    &-input-wrp {
+      display: flex;
+      flex-direction: column;
+    }
+    &-input {
+      flex-shrink: 0;
+      margin-block: 10px;
+    }
+    &-option-wrp {
+      max-height: 200px;
+      overflow: auto;
+    }
+
+    &-option {
+      overflow: auto;
+      padding: 6px;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: $color-bg-text-hover;
+      }
+      &-icon {
+        flex-shrink: 0;
+        border-radius: 0;
+        :deep(.ant-avatar) {
+          img {
+            object-fit: contain !important;
+          }
+        }
+      }
+    }
   }
 </style>
diff --git a/bigtop-manager-ui/src/components/common/search-form/types.ts b/bigtop-manager-ui/src/components/common/search-form/types.ts
new file mode 100644
index 000000000..542d53bf8
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/search-form/types.ts
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface SearchFormItemOptionItem {
+  value: string | number | boolean
+  label: string
+  [propkey: string]: any
+}
+
+export interface SearchFormItem {
+  type: string
+  key: string
+  label: string
+  options?: SearchFormItemOptionItem[]
+}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 404e76366..7494be43e 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -132,10 +132,10 @@ export function getServices(): ServiceItem[] {
     'Tez',
     'Prometheus'
   ]
-  return Array.from({ length: 17 }, (_, i) => ({
+  return Array.from({ length: serviceNames.length }, (_, i) => ({
     key: i,
-    serviceName: serviceNames[Math.floor(Math.random() * serviceNames.length)],
-    version: `${serviceNames[Math.floor(Math.random() * serviceNames.length)].toLowerCase()}1.0.${i}`,
+    serviceName: serviceNames[i],
+    version: `${serviceNames[i].toLowerCase()}1.0.${i}`,
     restart: Math.floor(Math.random() * 2) == 0,
     status: statusList[Math.floor(Math.random() * statusList.length)] as ServiceStatus
   }))
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 89cab2dba..a23221855 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -18,12 +18,15 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted, ref, shallowRef } from 'vue'
+  import { computed, onMounted, ref, shallowRef } from 'vue'
   import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
   import { usePngImage } from '@/utils/tools'
+  import { useI18n } from 'vue-i18n'
   import SearchForm from '@/components/common/search-form/index.vue'
   import type { GroupItem } from '@/components/common/button-group/types'
+  import type { SearchFormItem } from '@/components/common/search-form/types'
 
+  const { t } = useI18n()
   const data = ref<ServiceItem[]>([])
   const actionGroups = shallowRef<GroupItem[]>([
     {
@@ -55,6 +58,49 @@
       }
     }
   ])
+
+  const searchFormItems = computed((): SearchFormItem[] => [
+    {
+      type: 'search',
+      key: 'serviceName',
+      label: '服务名'
+    },
+    {
+      type: 'status',
+      key: 'restart',
+      label: '需要重启',
+      options: [
+        {
+          label: '需重启',
+          value: 1
+        },
+        {
+          label: '无需重启',
+          value: 2
+        }
+      ]
+    },
+    {
+      type: 'status',
+      key: 'status',
+      label: '状态',
+      options: [
+        {
+          label: t(`common.${StatusTexts.success}`),
+          value: StatusTexts.success
+        },
+        {
+          label: t(`common.${StatusTexts.error}`),
+          value: StatusTexts.error
+        },
+        {
+          label: t(`common.${StatusTexts.unknow}`),
+          value: StatusTexts.unknow
+        }
+      ]
+    }
+  ])
+
   onMounted(() => {
     data.value = getServices()
   })
@@ -62,7 +108,7 @@
 
 <template>
   <div class="service">
-    <search-form />
+    <search-form :search-items="searchFormItems" />
     <a-card v-for="item in data" :key="item.key" :hoverable="true" class="service-item">
       <div class="header">
         <div class="header-base-wrp">

From 428eb7ae37f575f3a6e246226ea07a8db7ce787b Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 16 Jan 2025 10:15:25 +0800
Subject: [PATCH 24/39] feat: rename search-form to filter-form

---
 .../components/common/filter-form/index.vue   | 153 ++++++++++++++
 .../{search-form => filter-form}/types.ts     |   6 +-
 .../components/common/search-form/index.vue   | 194 ------------------
 .../pages/cluster-manage/cluster/service.vue  |  12 +-
 4 files changed, 164 insertions(+), 201 deletions(-)
 create mode 100644 bigtop-manager-ui/src/components/common/filter-form/index.vue
 rename bigtop-manager-ui/src/components/common/{search-form => filter-form}/types.ts (88%)
 delete mode 100644 bigtop-manager-ui/src/components/common/search-form/index.vue

diff --git a/bigtop-manager-ui/src/components/common/filter-form/index.vue b/bigtop-manager-ui/src/components/common/filter-form/index.vue
new file mode 100644
index 000000000..7562ea370
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/filter-form/index.vue
@@ -0,0 +1,153 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import type { FilterFormItem } from './types'
+  import { ref, toRefs } from 'vue'
+
+  interface FilterFormPops {
+    filterItems: FilterFormItem[]
+  }
+
+  const props = defineProps<FilterFormPops>()
+  const emits = defineEmits(['filter'])
+  const { filterItems } = toRefs(props)
+
+  const formatFilterFormItems = ref(
+    filterItems.value.map((v) => {
+      const formatData = {
+        ...v,
+        options: v.options?.map((o) => ({
+          ...o,
+          id: v.key,
+          key: o.value
+        }))
+      }
+      return formatData
+    })
+  )
+
+  const filterParams = ref(
+    filterItems.value.map((v) => ({
+      [`${v.key}`]: ''
+    }))
+  )
+
+  const checkSelected = ({ item, itemIdx }: any) => {
+    return filterParams.value[itemIdx][item.key] === ''
+  }
+
+  const resetFilter = ({ item, itemIdx }: any) => {
+    filterParams.value[itemIdx][item.key] = ''
+    confirmFilterParams()
+  }
+
+  const onSelect = ({ item, key }: any, payload: any) => {
+    filterParams.value[payload.itemIdx][item.id] = key
+    confirmFilterParams()
+  }
+
+  const confirmFilterParams = () => {
+    const filters = filterParams.value.reduce((pre, val) => {
+      Object.assign(pre, val)
+      return pre
+    }, {} as any)
+    emits('filter', filters)
+  }
+</script>
+
+<template>
+  <div class="filter-form">
+    <template v-for="(item, itemIdx) in formatFilterFormItems" :key="item">
+      <a-dropdown>
+        <span @click.prevent>
+          <div class="filter-form-label">
+            <span :style="{ color: !checkSelected({ item, itemIdx }) ? 'var(--color-primary)' : 'initial' }">
+              {{ item.label }}
+            </span>
+            <svg-icon name="bottom" style="padding: 6px 4px; margin-left: 8px" />
+          </div>
+        </span>
+        <template #overlay>
+          <template v-if="item.type === 'status'">
+            <a-menu :selectable="true" :items="item.options" @select="onSelect($event, { item, itemIdx })"> </a-menu>
+          </template>
+          <template v-else-if="item.type === 'search'">
+            <div class="search" @click.stop>
+              <a-input v-model:value="filterParams[itemIdx][item.key]" :placeholder="`搜索${item.label}`" @click.stop />
+              <a-space @click.stop>
+                <a-button size="small" @click="resetFilter({ item, itemIdx })">重置</a-button>
+                <a-button size="small" type="primary" @click="confirmFilterParams">搜索</a-button>
+              </a-space>
+            </div>
+          </template>
+        </template>
+      </a-dropdown>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  :deep(.ant-dropdown-menu-body) {
+    padding-inline: 8px;
+    padding-block: 8px;
+  }
+  :deep(.ant-dropdown-menu-head) {
+    padding: 8px 16px;
+    min-height: 32px;
+  }
+
+  .search {
+    background-color: $color-bg-base;
+    box-shadow: $box-shadow-drawer-up;
+    padding: $space-sm;
+    border-radius: $space-sm;
+    display: flex;
+    flex-direction: column;
+    gap: $space-sm;
+    align-items: flex-end;
+  }
+
+  .filter-form {
+    width: 100%;
+    display: flex;
+    gap: $space-sm;
+    &-label {
+      display: inline-block;
+      cursor: pointer;
+      line-height: 20px;
+      .ant-tag {
+        line-height: 40px;
+        border-radius: 8px;
+      }
+    }
+    &-input-wrp {
+      display: flex;
+      flex-direction: column;
+    }
+    &-input {
+      flex-shrink: 0;
+      margin-block: 10px;
+    }
+    &-option-wrp {
+      max-height: 200px;
+      overflow: auto;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/search-form/types.ts b/bigtop-manager-ui/src/components/common/filter-form/types.ts
similarity index 88%
rename from bigtop-manager-ui/src/components/common/search-form/types.ts
rename to bigtop-manager-ui/src/components/common/filter-form/types.ts
index 542d53bf8..c2d1e3b52 100644
--- a/bigtop-manager-ui/src/components/common/search-form/types.ts
+++ b/bigtop-manager-ui/src/components/common/filter-form/types.ts
@@ -17,15 +17,15 @@
  * under the License.
  */
 
-export interface SearchFormItemOptionItem {
+export interface FilterFormItemOptionItem {
   value: string | number | boolean
   label: string
   [propkey: string]: any
 }
 
-export interface SearchFormItem {
+export interface FilterFormItem {
   type: string
   key: string
   label: string
-  options?: SearchFormItemOptionItem[]
+  options?: FilterFormItemOptionItem[]
 }
diff --git a/bigtop-manager-ui/src/components/common/search-form/index.vue b/bigtop-manager-ui/src/components/common/search-form/index.vue
deleted file mode 100644
index 4413fd451..000000000
--- a/bigtop-manager-ui/src/components/common/search-form/index.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
--->
-
-<script setup lang="ts">
-  import type { SearchFormItem } from './types'
-  import { SearchOutlined } from '@ant-design/icons-vue'
-  import { ref } from 'vue'
-
-  interface SearchFormPops {
-    searchItems: SearchFormItem[]
-  }
-
-  const props = defineProps<SearchFormPops>()
-
-  const filterParams = ref(
-    props.searchItems.map((v) => {
-      return {
-        [`${v.key}`]: ''
-      }
-    })
-  )
-
-  const checkSelected = ({ item, itemIdx }: any) => {
-    return filterParams.value[itemIdx][item.key] === ''
-  }
-
-  const resetFilter = ({ item, itemIdx }: any) => {
-    filterParams.value[itemIdx][item.key] = ''
-    confirmFilterParams()
-  }
-
-  const onSelect = ({ item, itemIdx, option }: any) => {
-    filterParams.value[itemIdx][item.key] = option.value
-    confirmFilterParams()
-  }
-
-  const confirmFilterParams = () => {
-    const filters = filterParams.value.reduce((pre, val) => {
-      Object.assign(pre, val)
-      return pre
-    }, {} as any)
-    console.log('filters :>> ', filters)
-  }
-</script>
-
-<template>
-  <div class="search-form">
-    <template v-for="(item, itemIdx) in searchItems" :key="item">
-      <a-dropdown>
-        <span @click.prevent>
-          <div class="search-form-label">
-            <span :style="{ color: !checkSelected({ item, itemIdx }) ? 'var(--color-primary)' : 'initial' }">
-              {{ item.label }}
-            </span>
-            <svg-icon name="bottom" style="padding: 6px 4px; margin-left: 8px" />
-          </div>
-        </span>
-        <template #overlay>
-          <a-menu>
-            <a-menu-item v-for="option in item.options" :key="option.value">
-              <a href="javascript:;">{{ option.label }}</a>
-            </a-menu-item>
-          </a-menu>
-          <!-- <a-card class="search-card" @click.stop>
-            <template #extra><a href="#" @click.stop="resetFilter({ item, itemIdx })">重置</a></template>
-            <template #title>
-              <span style="font-size: 14px">{{ item.label }}</span>
-            </template>
-
-            <template v-if="item.type == 'search'">
-              <div class="search-form-input-wrp" @click.stop>
-                <div class="search-form-input">
-                  <a-input v-model:value="filterParams[itemIdx][item.key]" :placeholder="`搜索${item.label}`">
-                    <template #prefix><SearchOutlined /></template>
-                  </a-input>
-                </div>
-              </div>
-              <footer>
-                <a-button size="small" type="primary" @click="confirmFilterParams">应用</a-button>
-              </footer>
-            </template>
-
-            <template v-else-if="item.type == 'status'">
-              <div class="search-form-option-wrp">
-                <div
-                  v-for="(option, idx) in item.options"
-                  :key="idx"
-                  class="search-form-option"
-                  :class="{ 'option-selected': filterParams[itemIdx][item.key] == option.value }"
-                  @click="onSelect({ item, itemIdx, option })"
-                >
-                  <a-space :size="10">
-                    <span>
-                      {{ option.label }}
-                    </span>
-                  </a-space>
-                </div>
-              </div>
-            </template>
-          </a-card> -->
-        </template>
-      </a-dropdown>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  :deep(.ant-dropdown-menu-body) {
-    padding-inline: 8px;
-    padding-block: 8px;
-  }
-  :deep(.ant-dropdown-menu-head) {
-    padding: 8px 16px;
-    min-height: 32px;
-  }
-
-  .option-selected {
-    font-weight: 600;
-    background-color: $blue-1;
-    &:hover {
-      background-color: $blue-1;
-    }
-  }
-
-  .search-card {
-    min-width: 280px;
-    footer {
-      text-align: end;
-    }
-  }
-  .search-form {
-    width: 100%;
-    display: flex;
-    gap: $space-sm;
-    &-label {
-      display: inline-block;
-      cursor: pointer;
-      line-height: 20px;
-      .ant-tag {
-        line-height: 40px;
-        border-radius: 8px;
-      }
-    }
-    &-input-wrp {
-      display: flex;
-      flex-direction: column;
-    }
-    &-input {
-      flex-shrink: 0;
-      margin-block: 10px;
-    }
-    &-option-wrp {
-      max-height: 200px;
-      overflow: auto;
-    }
-
-    &-option {
-      overflow: auto;
-      padding: 6px;
-      border-radius: 8px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      &:hover {
-        background-color: $color-bg-text-hover;
-      }
-      &-icon {
-        flex-shrink: 0;
-        border-radius: 0;
-        :deep(.ant-avatar) {
-          img {
-            object-fit: contain !important;
-          }
-        }
-      }
-    }
-  }
-</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index a23221855..4a4c1955d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -22,9 +22,9 @@
   import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
   import { usePngImage } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
-  import SearchForm from '@/components/common/search-form/index.vue'
+  import FilterForm from '@/components/common/filter-form/index.vue'
   import type { GroupItem } from '@/components/common/button-group/types'
-  import type { SearchFormItem } from '@/components/common/search-form/types'
+  import type { FilterFormItem } from '@/components/common/filter-form/types'
 
   const { t } = useI18n()
   const data = ref<ServiceItem[]>([])
@@ -59,7 +59,7 @@
     }
   ])
 
-  const searchFormItems = computed((): SearchFormItem[] => [
+  const filterFormItems = computed((): FilterFormItem[] => [
     {
       type: 'search',
       key: 'serviceName',
@@ -101,6 +101,10 @@
     }
   ])
 
+  const onFilter = (filters: any) => {
+    console.log('filters :>> ', filters)
+  }
+
   onMounted(() => {
     data.value = getServices()
   })
@@ -108,7 +112,7 @@
 
 <template>
   <div class="service">
-    <search-form :search-items="searchFormItems" />
+    <filter-form :filter-items="filterFormItems" @filter="onFilter" />
     <a-card v-for="item in data" :key="item.key" :hoverable="true" class="service-item">
       <div class="header">
         <div class="header-base-wrp">

From 1bc9ecfa8014bd4722260b7ea6445a58bb3b0bb6 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 6 Feb 2025 17:30:38 +0800
Subject: [PATCH 25/39] feat: add deepseek png

---
 bigtop-manager-ui/src/api/llm-config/types.ts    |   3 ++-
 bigtop-manager-ui/src/assets/images/deepseek.png | Bin 0 -> 1360 bytes
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/deepseek.png

diff --git a/bigtop-manager-ui/src/api/llm-config/types.ts b/bigtop-manager-ui/src/api/llm-config/types.ts
index f1ef52129..2dacbe326 100644
--- a/bigtop-manager-ui/src/api/llm-config/types.ts
+++ b/bigtop-manager-ui/src/api/llm-config/types.ts
@@ -26,7 +26,8 @@ export enum AuthPlatformStatus {
 export enum LlmLogo {
   'openai' = 1,
   'dashscope' = 2,
-  'qianfan' = 3
+  'qianfan' = 3,
+  'deepseek' = 4
 }
 
 export type LlmLogoFlag = `${LlmLogo}`
diff --git a/bigtop-manager-ui/src/assets/images/deepseek.png b/bigtop-manager-ui/src/assets/images/deepseek.png
new file mode 100644
index 0000000000000000000000000000000000000000..161d03e298f6dc4505a5130dc48e439636d1eecf
GIT binary patch
literal 1360
zcmV-W1+V&vP)<h;3K|Lk000e1NJLTq001xm001xu0ssI2*kEqZ000FSNkl<Zc%1B*
z3v5%>AIHC^?Mhi!*0I6{+u+ah&t!rOStc0dC7Ph1225NaU=)Ipz>-NcMxikwL=BG+
zk*LH72tH<XQJ1kGuWVy(lVP_ZcFXKWvr)=A+O2!^cIz=`x2(IDyWX~&(S&|OZccyv
z&N-iZ?s<IARFqQum!$Z&0mO;|$temXrznt|9z3AC9pUAV0#LgPW!F$}9_Py8;ROHX
zaANCTwA~G(HC2dton2^dg~P?VR46b`3xghiT5zcfW(z3T`LimUJib6s>v9!1FD)u1
zo1PsdAPSURMd4-Eckoj$Wg^+RQ5>|iuxEZTI^1~iX-r5ECvaXI`4VfEB7H^(Kvo+L
zpF%@(NT;v2kNt~LiG%!m6_?>+CCS@@$L6!&9bF8u-G#3TalMf)oJ-_^>YK3lD7tz=
z^#b;G`ra{;y9tT<K+rH`NH{M&dWNJW;gfur%z|c9lLBSwN!?<H@#8RPc$v&J_kGkg
z1R{^j5hQeUu>=u~UPq><1_km_96AYicO*W^)k*h!go+yf&&+hBC6l2EoLAiJx)o3=
zg92Un74=P#ySBc5`oZU@tQ}}wf!s~dsL622^JbHED+Cb<p#0*9Vf^y;(f!Bq+jUl+
zH5L1IAyI!n6Iq!}-rWwBQWzC2X0rvm4~&kfjZu*uIar>>%3l=V`(OOc&i_A|GYv}?
z;D0F+wZyBec3?_s)Z~qqF=Y}PbGri#&8WVC+IslHG2q@ldgvso>e#Nxe?eY5a*&ib
zY%MX6)yAIV;*j;QKQeJVGG^iVRczZhTS|VqH0<h2Ng|uqvcv0#^RTt~b4sgeX|*6N
zCg^4?o<lA-dpbKMQpd+5XAM3z;)zAlleE7d*4tQ=fdjiSBTYI-JC=-(4+qHS1HU+L
zJESY<w8-0x9XUj$6nEL(i=JK_In8qRyoUHV38ooo!Du9aVm1E4jmBWrRxido+o6sT
zbm{J9bA?|u3FEMJgG9xQSz!VVo`02fGBq>P@%A<-6aglmkKVjREiG)Q04!Z7-W364
zWrPVd_1;pftYwx%mTAj6anRwUZyiKY3C<Maj?f9ECXwmkezJ_2{sQNv=dQ?92JqZU
zWTuOUp{bP~`-Xm9M0-7g_4w2h`3A*6$%eoJDY$^{9{DDAZIqtBBI$Kx_2Te>0A`nX
zIXmfzALW}!h{x+M$)~-#9%D5T0WHhI<O%*aE-Ha&TjOQ6FtazP?D@>U2I*$mBC>R$
zJdHGvO3B{lp6KCIsHqnuI6K&Rx6Q~b^PskEkXTc^W=<iY3?VP2(P+FsI(Z`8-K4&W
zmHT}txk?Or4B9Bo7<NLn*lD>5jaD*mHjAiKcyunxu8|&(ps8d7*|!tg*pUGNSTF~F
zSxJi>{PtZ@gH}74I};i;24*NT|Gc-nSjiT1vH@|i$b1M_ekZ*{E<+xU*c|MZ668P~
zDzW_-Di4Q)Cs1w*B#cqB@krFeWX7#KfjA*#{gZ49&}o@F*nb?2R&le_Q^}jJVA6yU
z0P#BgGrm3Rzj+0hQo-DDq8=VEI1aWpI9!2RIxYDyk4=V=0s;7=5ubf0@zRpgj3FDJ
z!P@2EFSQOQy9~wa*f&*%a8C{ih)pA)!o+TjwGG4G7~^8e%51!_ik++xD^#FCx!lYM
z+_W(x#&J-`u(@nVz_b)*EtJa0Q6dETr}g0deJET-f#ehgl2a5&PJagg0RR7?u+PBl
SFSXPF0000<MNUMnLSTZqyN5{t

literal 0
HcmV?d00001


From fff235b3b6fe7f74f28df0fd350c593bf40f0f43 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 6 Feb 2025 17:55:55 +0800
Subject: [PATCH 26/39] feat: add cluster unavailable message

---
 .../src/assets/images/default.png             | Bin 0 -> 17888 bytes
 bigtop-manager-ui/src/layouts/default.vue     |  29 ++++++++++++++++--
 .../src/locales/en_US/cluster.ts              |   4 ++-
 .../src/locales/zh_CN/cluster.ts              |   3 +-
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 bigtop-manager-ui/src/assets/images/default.png

diff --git a/bigtop-manager-ui/src/assets/images/default.png b/bigtop-manager-ui/src/assets/images/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..40849b5a302465bd345fd7a5d05459f573bf5ad9
GIT binary patch
literal 17888
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
IIkS-e2f34bVE_OC

literal 0
HcmV?d00001

diff --git a/bigtop-manager-ui/src/layouts/default.vue b/bigtop-manager-ui/src/layouts/default.vue
index 1f109f211..8708c3b3d 100644
--- a/bigtop-manager-ui/src/layouts/default.vue
+++ b/bigtop-manager-ui/src/layouts/default.vue
@@ -17,10 +17,33 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { usePngImage } from '@/utils/tools'
+</script>
 
 <template>
-  <div>default content</div>
+  <a-card>
+    <div class="default">
+      <img :src="usePngImage('default')" />
+      <a-typography-text>{{ $t('cluster.cluster_unavailable_message') }}</a-typography-text>
+      <a-typography-link href="#" underline @click="() => $router.push({ name: 'ClusterCreate' })">
+        {{ $t('cluster.create') }}
+      </a-typography-link>
+    </div>
+  </a-card>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .default {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    height: 630px;
+    img {
+      width: 400px;
+      height: 200px;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 7ed48d9b8..7485e6455 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -31,5 +31,7 @@ export default {
   install_dependencies: 'Install dependencies',
   add_host: 'Add host',
   view_log: 'View log',
-  source: 'source'
+  source: 'source',
+  cluster_unavailable_message:
+    'Apologies, you do not yet have a cluster, so you cannot use cluster management capabilities.'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index 5bd8615d5..87e73cf1f 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -31,5 +31,6 @@ export default {
   install_dependencies: '安装依赖',
   add_host: '新增主机',
   view_log: '查看日志',
-  source: '配置源'
+  source: '配置源',
+  cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。'
 }

From 804c8d17f73ba6ef514fe473024613e629ca10f4 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 7 Feb 2025 17:48:38 +0800
Subject: [PATCH 27/39] feat: add stack store

---
 bigtop-manager-ui/src/api/command/index.ts    |   4 +-
 bigtop-manager-ui/src/api/command/types.ts    | 180 ++++++++-
 bigtop-manager-ui/src/api/component/types.ts  |  11 +-
 bigtop-manager-ui/src/api/hosts/index.ts      |  14 +-
 bigtop-manager-ui/src/api/hosts/types.ts      |  62 +++-
 bigtop-manager-ui/src/api/repo/index.ts       |  36 ++
 bigtop-manager-ui/src/api/repo/types.ts       |  18 +-
 bigtop-manager-ui/src/api/service/index.ts    |   6 +-
 .../src/api/service/{type.ts => types.ts}     |   8 +-
 bigtop-manager-ui/src/api/stack/types.ts      |   2 +-
 .../src/assets/images/svg/question.svg        |  29 ++
 .../src/components/common/auto-form/index.vue |   9 +-
 bigtop-manager-ui/src/layouts/index.vue       |   8 +-
 .../src/locales/en_US/cluster.ts              |   1 +
 .../src/locales/zh_CN/cluster.ts              |   1 +
 .../cluster/components/cluster-base.vue       |  55 ++-
 .../cluster/components/component-info.vue     |  55 +--
 .../cluster/components/host-config.vue        |  45 ++-
 .../cluster/components/set-source.vue         |  86 +++--
 .../pages/cluster-manage/cluster/create.vue   |  35 +-
 .../src/pages/cluster-manage/hosts/create.vue | 348 +++++++++++++++++-
 bigtop-manager-ui/src/store/cluster/index.ts  |  25 +-
 bigtop-manager-ui/src/store/menu/index.ts     |   6 +-
 bigtop-manager-ui/src/store/stack/index.ts    |  44 +++
 bigtop-manager-ui/src/styles/index.scss       |   8 +-
 25 files changed, 929 insertions(+), 167 deletions(-)
 create mode 100644 bigtop-manager-ui/src/api/repo/index.ts
 rename bigtop-manager-ui/src/api/service/{type.ts => types.ts} (91%)
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/question.svg
 create mode 100644 bigtop-manager-ui/src/store/stack/index.ts

diff --git a/bigtop-manager-ui/src/api/command/index.ts b/bigtop-manager-ui/src/api/command/index.ts
index 197fad134..01ac90c6d 100644
--- a/bigtop-manager-ui/src/api/command/index.ts
+++ b/bigtop-manager-ui/src/api/command/index.ts
@@ -18,9 +18,9 @@
  */
 
 import request from '@/api/request.ts'
-import { CommandVO } from '@/api/command/types.ts'
+import { CommandRequest } from '@/api/command/types.ts'
 
-export const execCommand = (data: any): Promise<CommandVO> => {
+export const execCommand = (data: any): Promise<CommandRequest> => {
   return request({
     method: 'post',
     url: '/command',
diff --git a/bigtop-manager-ui/src/api/command/types.ts b/bigtop-manager-ui/src/api/command/types.ts
index a1d66922d..efa997a43 100644
--- a/bigtop-manager-ui/src/api/command/types.ts
+++ b/bigtop-manager-ui/src/api/command/types.ts
@@ -16,8 +16,182 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+/**
+ * CommandReq
+ */
+export interface CommandRequest {
+  clusterCommand?: ClusterCommandReq
+  clusterId?: number
+  command: Command
+  commandLevel: CommandLevel
+  /**
+   * Command details for component level command
+   */
+  componentCommands?: ComponentCommandReq[]
+  customCommand?: string
+  /**
+   * Command details for host level command
+   */
+  hostCommands?: HostCommandReq[]
+  /**
+   * Command details for service level command
+   */
+  serviceCommands?: ServiceCommandReq[]
+  [property: string]: any
+}
+
+export type CommandRequestKeys = keyof CommandRequest
+
+/**
+ * ClusterCommandReq，Command details for cluster level command
+ */
+export interface ClusterCommandReq {
+  desc?: string
+  displayName: string
+  /**
+   * Hosts info for this cluster
+   */
+  hosts: HostReq[]
+  name: string
+  rootDir?: string
+  type: number
+  userGroup?: string
+  [property: string]: any
+}
+
+/**
+ * HostReq
+ */
+export interface HostReq {
+  agentDir?: string
+  authType?: number
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
+}
+
+export enum Command {
+  Add = 'Add',
+  Check = 'Check',
+  Configure = 'Configure',
+  Custom = 'Custom',
+  Init = 'Init',
+  Prepare = 'Prepare',
+  Restart = 'Restart',
+  Start = 'Start',
+  Status = 'Status',
+  Stop = 'Stop'
+}
+
+export enum CommandLevel {
+  Cluster = 'cluster',
+  Component = 'component',
+  Host = 'host',
+  Service = 'service'
+}
+
+/**
+ * ComponentCommandReq，Command details for component level command
+ */
+export interface ComponentCommandReq {
+  /**
+   * Component Name
+   */
+  componentName: string
+  /**
+   * Hostnames for component
+   */
+  hostnames: string[]
+  [property: string]: any
+}
 
-export interface CommandVO {
-  id: number
-  state: string
+/**
+ * HostCommandReq，Command details for host level command
+ */
+export interface HostCommandReq {
+  agentDir?: string
+  authType?: number
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
+}
+
+/**
+ * ServiceCommandReq，Command details for service level command
+ */
+export interface ServiceCommandReq {
+  /**
+   * Components for service on each hosts
+   */
+  componentHosts: ComponentHostReq[]
+  /**
+   * Configs for service
+   */
+  configs: ServiceConfigReq[]
+  /**
+   * Service name
+   */
+  serviceName: string
+  [property: string]: any
+}
+
+/**
+ * ComponentHostReq，Components for service on each hosts
+ */
+export interface ComponentHostReq {
+  /**
+   * Component name
+   */
+  componentName: string
+  /**
+   * Hostnames for component
+   */
+  hostnames: string[]
+  [property: string]: any
+}
+
+/**
+ * ServiceConfigReq，Configs for service
+ */
+export interface ServiceConfigReq {
+  id?: number
+  name?: string
+  properties?: PropertyReq[]
+  [property: string]: any
+}
+
+/**
+ * PropertyReq
+ */
+export interface PropertyReq {
+  attrs?: AttrsReq
+  desc?: string
+  displayName?: string
+  name: string
+  value?: string
+  [property: string]: any
+}
+
+/**
+ * AttrsReq
+ */
+export interface AttrsReq {
+  type?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/component/types.ts b/bigtop-manager-ui/src/api/component/types.ts
index 43a354e8b..86e619dcb 100644
--- a/bigtop-manager-ui/src/api/component/types.ts
+++ b/bigtop-manager-ui/src/api/component/types.ts
@@ -17,7 +17,10 @@
  * under the License.
  */
 
-export interface Component {
+/**
+ * ComponentVO
+ */
+export interface ComponentVO {
   cardinality?: string
   category?: string
   displayName?: string
@@ -30,8 +33,14 @@ export interface Component {
   serviceName?: string
   stack?: string
   status?: number
+  [property: string]: any
 }
+
+/**
+ * QuickLinkVO
+ */
 export interface QuickLinkVO {
   displayName?: string
   url?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/hosts/index.ts b/bigtop-manager-ui/src/api/hosts/index.ts
index ba5bb533f..2e8a6d849 100644
--- a/bigtop-manager-ui/src/api/hosts/index.ts
+++ b/bigtop-manager-ui/src/api/hosts/index.ts
@@ -18,11 +18,19 @@
  */
 
 import request from '@/api/request.ts'
-import { HostVO } from '@/api/hosts/types.ts'
+import { HostAdd, HostVO, HostVOList } from '@/api/hosts/types.ts'
 
-export const getHosts = (clusterId: number): Promise<HostVO[]> => {
+export const getHosts = (): Promise<HostVOList> => {
   return request({
     method: 'get',
-    url: '/clusters/' + clusterId + '/hosts'
+    url: '/hosts'
+  })
+}
+
+export const addHost = (data: HostAdd): Promise<HostVO> => {
+  return request({
+    method: 'post',
+    url: '/hosts',
+    data
   })
 }
diff --git a/bigtop-manager-ui/src/api/hosts/types.ts b/bigtop-manager-ui/src/api/hosts/types.ts
index b1280eb0d..051b19d1b 100644
--- a/bigtop-manager-ui/src/api/hosts/types.ts
+++ b/bigtop-manager-ui/src/api/hosts/types.ts
@@ -17,17 +17,55 @@
  * under the License.
  */
 
+import type { PageVO } from '@/api/types'
+
+export type HostVOList = PageVO<HostVO>
+
+/**
+ * HostVO
+ */
 export interface HostVO {
-  id: number
-  clusterName: string
-  hostname: string
-  ipv4: string
-  arch: string
-  os: string
-  availableProcessors: string
-  freeMemorySize: string
-  totalMemorySize: string
-  state: string
-  freeDisk: string
-  totalDisk: string
+  agentDir?: string
+  arch?: string
+  authType?: number
+  availableProcessors?: number
+  clusterDisplayName?: string
+  clusterName?: string
+  componentNum?: number
+  desc?: string
+  errInfo?: string
+  freeDisk?: number
+  freeMemorySize?: number
+  grpcPort?: number
+  hostname?: string
+  id?: number
+  ipv4?: string
+  ipv6?: string
+  os?: string
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  status?: number
+  totalDisk?: number
+  totalMemorySize?: number
+  [property: string]: any
+}
+
+export interface HostAdd {
+  agentDir?: string
+  authType?: number | string // '1-password，2-key，3-no_auth',
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/repo/index.ts b/bigtop-manager-ui/src/api/repo/index.ts
new file mode 100644
index 000000000..94108d6c6
--- /dev/null
+++ b/bigtop-manager-ui/src/api/repo/index.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { RepoUpdate, RepoVO } from './types'
+import request from '@/api/request.ts'
+
+export const getRepoList = (): Promise<RepoVO[]> => {
+  return request({
+    method: 'get',
+    url: 'repos'
+  })
+}
+
+export const updateRepo = (data: RepoUpdate[]) => {
+  return request({
+    method: 'put',
+    url: 'repos',
+    data
+  })
+}
diff --git a/bigtop-manager-ui/src/api/repo/types.ts b/bigtop-manager-ui/src/api/repo/types.ts
index ade427565..597adce4c 100644
--- a/bigtop-manager-ui/src/api/repo/types.ts
+++ b/bigtop-manager-ui/src/api/repo/types.ts
@@ -16,12 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 export interface RepoVO {
-  repoId: string
-  repoName: string
-  repoType: string
-  baseUrl: string
-  os: string
-  arch: string
+  arch?: string
+  baseUrl?: string
+  id?: number
+  name?: string
+  [property: string]: any
+}
+
+export interface RepoUpdate {
+  baseUrl?: string
+  id?: number
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index ed65288dd..7a92bb3d3 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -20,20 +20,20 @@
 import { del, get, post } from '@/api/request-util'
 import type {
   ServiceParams,
-  Service,
+  ServiceVO,
   ServiceConfig,
   ServiceConfigSnapshot,
   ServiceList,
   SnapshotData,
   SnapshotRecovery
-} from './type'
+} from './types'
 
 export const getServiceList = (clusterId: number) => {
   return get<ServiceList>(`/clusters/${clusterId}/services`)
 }
 
 export const getService = (params: ServiceParams) => {
-  return get<Service>(`/clusters/${params.clusterId}/services/${params.id}`)
+  return get<ServiceVO>(`/clusters/${params.clusterId}/services/${params.id}`)
 }
 
 export const getServiceConfigs = (params: ServiceParams) => {
diff --git a/bigtop-manager-ui/src/api/service/type.ts b/bigtop-manager-ui/src/api/service/types.ts
similarity index 91%
rename from bigtop-manager-ui/src/api/service/type.ts
rename to bigtop-manager-ui/src/api/service/types.ts
index 070507c60..2afefea75 100644
--- a/bigtop-manager-ui/src/api/service/type.ts
+++ b/bigtop-manager-ui/src/api/service/types.ts
@@ -17,16 +17,16 @@
  * under the License.
  */
 
-import type { Component } from '@/api/component/types'
+import type { ComponentVO } from '@/api/component/types'
 import type { PageVO } from '@/api/types'
 
-export type ServiceList = PageVO<Service>
+export type ServiceList = PageVO<ServiceVO>
 export type ServiceParams = { clusterId: number; id: number }
 export type SnapshotData = { desc?: string; name?: string }
 export type SnapshotRecovery = ServiceParams & { snapshotId: string }
 
-export interface Service {
-  components?: Component[]
+export interface ServiceVO {
+  components?: ComponentVO[]
   configs?: ServiceConfig[]
   desc?: string
   displayName?: string
diff --git a/bigtop-manager-ui/src/api/stack/types.ts b/bigtop-manager-ui/src/api/stack/types.ts
index 3b7440123..67f655372 100644
--- a/bigtop-manager-ui/src/api/stack/types.ts
+++ b/bigtop-manager-ui/src/api/stack/types.ts
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import { ServiceVO } from '@/api/service/types.ts'
 import { RepoVO } from '@/api/repo/types.ts'
+import { ServiceVO } from '../service/types'
 
 export interface StackVO {
   stackName: string
diff --git a/bigtop-manager-ui/src/assets/images/svg/question.svg b/bigtop-manager-ui/src/assets/images/svg/question.svg
new file mode 100644
index 000000000..79a6923cb
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/question.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+    viewBox="0 0 16 16" fill="none">
+    <g opacity="0">
+        <rect x="0" y="0" width="16" height="16" fill="#000000">
+        </rect>
+    </g>
+    <path
+        d="M1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1C4.13 1 1 4.13 1 8ZM7.62 9.8125C7.55 9.8125 7.5 9.7525 7.5 9.6925L7.5 9.3525C7.5 8.9925 7.6 8.6325 7.81 8.3325C8.01 8.0425 8.29 7.8225 8.62 7.7025C9.16 7.4925 9.5 7.0525 9.5 6.5625C9.5 5.8725 8.83 5.3125 8 5.3125C7.17 5.3125 6.5 5.8725 6.5 6.5625L6.5 6.6825C6.5 6.7525 6.44 6.8025 6.38 6.8025L5.62 6.8025C5.56 6.8025 5.5 6.7525 5.5 6.6825L5.5 6.5625C5.5 5.9525 5.77 5.3725 6.26 4.9525C6.73 4.5425 7.34 4.3125 8 4.3125C8.66 4.3125 9.27 4.5325 9.74 4.9525C10.23 5.3725 10.5 5.9525 10.5 6.5625C10.5 7.4625 9.9 8.2825 8.98 8.6325C8.69 8.7425 8.5 9.0225 8.5 9.3325L8.5 9.6925C8.5 9.7525 8.44 9.8125 8.37 9.8125L7.62 9.8125ZM8.005 12.0625C8.345 12.0625 8.625 11.7825 8.625 11.4425C8.625 11.0925 8.345 10.8125 8.005 10.8125C7.655 10.8125 7.375 11.0925 7.375 11.4425C7.375 11.7825 7.655 12.0625 8.005 12.0625Z"
+        fill-rule="evenodd" fill="#000000">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/auto-form/index.vue b/bigtop-manager-ui/src/components/common/auto-form/index.vue
index 399846ce7..ce1cd0360 100644
--- a/bigtop-manager-ui/src/components/common/auto-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/auto-form/index.vue
@@ -150,14 +150,19 @@
     <a-form
       ref="formRef"
       label-align="left"
+      :colon="false"
       :model="formState"
       :label-col="props.labelCol"
       :wrapper-col="props.wrapperCol"
       :disabled="props.formDisabled"
     >
       <div v-for="item in props.formItems" :key="item.field">
-        <slot :="{ item, state: formState }" :name="item.field">
-          <a-form-item v-if="!props.hiddenItems.includes(item.field)" v-bind="item.formItemProps">
+        <slot
+          v-if="!props.hiddenItems.includes(item.field)"
+          :="{ item, state: formState }"
+          :name="item.slot ?? item.field"
+        >
+          <a-form-item v-bind="item.formItemProps">
             <!-- input -->
             <a-input
               v-if="item.type == 'input'"
diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
index 7c70c6dc5..7ea662b64 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -25,20 +25,20 @@
   import { useUserStore } from '@/store/user'
   import { useClusterStore } from '@/store/cluster'
   import { useMenuStore } from '@/store/menu/index'
+  import { useStackStore } from '@/store/stack'
   import { storeToRefs } from 'pinia'
 
   const userStore = useUserStore()
   const menuStore = useMenuStore()
   const clusterStore = useClusterStore()
+  const stackStore = useStackStore()
   const { headerSelectedKey, headerMenus, siderMenuSelectedKey, siderMenus } = storeToRefs(menuStore)
 
-  onMounted(async () => {
+  onMounted(() => {
     userStore.getUserInfo()
     clusterStore.loadClusters()
-    // setInterval(() => {
-    //   clusterStore.addCluster()
-    // }, 5000)
     menuStore.setUpMenu()
+    stackStore.loadStacks()
   })
 </script>
 
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 7485e6455..bb565a147 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -30,6 +30,7 @@ export default {
   config_source: 'Configuration source',
   install_dependencies: 'Install dependencies',
   add_host: 'Add host',
+  edit_host: 'Edit host',
   view_log: 'View log',
   source: 'source',
   cluster_unavailable_message:
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index 87e73cf1f..a0b2ac413 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -30,6 +30,7 @@ export default {
   config_source: '配置源',
   install_dependencies: '安装依赖',
   add_host: '新增主机',
+  edit_host: '编辑主机',
   view_log: '查看日志',
   source: '配置源',
   cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。'
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index a71631e85..3c433d286 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -18,13 +18,16 @@
 -->
 
 <script setup lang="ts">
+  import { CommandRequest } from '@/api/command/types'
   import type { FormItemState } from '@/components/common/auto-form/types'
-  import { computed, ref, shallowRef } from 'vue'
+  import { computed, ref, shallowRef, toRefs } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
   const activeKey = ref(['1', '2'])
   const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
+  const props = defineProps<{ commandRequest: CommandRequest }>()
+  const { commandRequest } = toRefs(props)
   const formLayout = computed(() => ({
     labelCol: { xs: 5, sm: 5, md: 5, lg: 4, xl: 3 },
     wrapperCol: { xs: 10, sm: 10, md: 10, lg: 10, xl: { xl: 10, pull: 1 } }
@@ -58,9 +61,9 @@
   const clusterConfigFormItems = computed((): FormItemState[] => [
     {
       type: 'input',
-      field: 'rootDirectory',
+      field: 'rootDir',
       formItemProps: {
-        name: 'rootDirectory',
+        name: 'rootDir',
         label: t('cluster.root_directory'),
         rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
       },
@@ -84,31 +87,59 @@
   const collapses = ref([
     {
       title: computed(() => t('cluster.base_info')),
-      formValue: {},
+      formValue: { name: commandRequest.value.clusterCommand?.name, desc: commandRequest.value.clusterCommand?.desc },
       formItems: baseInfoFormItems.value
     },
     {
       title: computed(() => t('cluster.cluster_config')),
-      formValue: {},
+      formValue: {
+        rootDir: commandRequest.value.clusterCommand?.rootDir,
+        userGroup: commandRequest.value.clusterCommand?.rootDir
+      },
       formItems: clusterConfigFormItems.value
     }
   ])
 
+  const getFormValues = () => {
+    return collapses.value.reduce((pre, val) => {
+      Object.assign(pre, val.formValue)
+      return pre
+    }, {})
+  }
+
   const collectAutoFormRefs = (el: any, title: string) => {
     if (!autoFormRefMap.value.has(title)) {
       autoFormRefMap.value.set(title, el)
     }
   }
 
-  const check = () => {
-    const autoFormRefs = [...autoFormRefMap.value.values()]
-    autoFormRefs.forEach(async (formRef, idx) => {
-      const res = await formRef.getFormValidation()
-      if (!res) {
-        !activeKey.value.includes(`${idx + 1}`) && activeKey.value.push(`${idx + 1}`)
+  const check = async () => {
+    try {
+      const autoFormRefs = [...autoFormRefMap.value.values()]
+      const validationResults = await Promise.all(
+        Array.from(autoFormRefs).map((formRef) => formRef.getFormValidation())
+      )
+      const allValid = validationResults.every((res) => res)
+      if (allValid) {
+        const res = getFormValues()
+        return res
+      } else {
+        autoFormRefs.forEach((_formRef, idx) => {
+          if (!validationResults[idx]) {
+            !activeKey.value.includes(`${idx + 1}`) && activeKey.value.push(`${idx + 1}`)
+          }
+        })
+        return -1
       }
-    })
+    } catch (error) {
+      console.error('Error during form validation:', error)
+      return -1
+    }
   }
+
+  defineExpose({
+    check
+  })
 </script>
 
 <template>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index 38d79f357..44515d426 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -18,11 +18,16 @@
 -->
 
 <script setup lang="ts">
-  import { generateTestData } from './mock'
-  import { ref, shallowRef } from 'vue'
+  import { ref, shallowRef, watchEffect } from 'vue'
   import type { TableColumnType } from 'ant-design-vue'
   import useBaseTable from '@/composables/use-base-table'
   import SetSource from './set-source.vue'
+  import { useStackStore } from '@/store/stack'
+  import { storeToRefs } from 'pinia'
+  import { ServiceVO } from '@/api/service/types'
+
+  const stackStore = useStackStore()
+  const { stacks } = storeToRefs(stackStore)
 
   const columns: TableColumnType[] = [
     {
@@ -35,7 +40,7 @@
     },
     {
       title: '名称',
-      dataIndex: 'name',
+      dataIndex: 'displayName',
       width: '20%',
       ellipsis: true
     },
@@ -46,34 +51,32 @@
       ellipsis: true
     },
     {
+      key: 'stack',
       title: '组件栈',
-      dataIndex: 'compStack',
+      dataIndex: 'stack',
       width: '20%',
       ellipsis: true
     },
     {
       title: '描述',
-      dataIndex: 'descrip',
+      dataIndex: 'desc',
       ellipsis: true
     }
   ]
-  const data = ref<any[]>(generateTestData(50))
+
+  const data = ref<ServiceVO[]>([])
+  const stackSelected = ref('bigtop')
+  const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
   const setSourceRef = ref<InstanceType<typeof SetSource>>()
-  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+  const { columnsProp, loading, paginationProps, onChange, resetState } = useBaseTable({
     columns,
     rows: data.value
   })
-  const componentSelected = ref(0)
-  const components = shallowRef([
-    {
-      id: 0,
-      name: 'Bigtop'
-    },
-    {
-      id: 1,
-      name: 'Extra'
-    }
-  ])
+
+  watchEffect(() => {
+    resetState()
+    data.value = stacks.value.find((v) => v.stackName === stackSelected.value)?.services || []
+  })
 
   const handleSetSource = () => {
     setSourceRef.value?.handleOpen()
@@ -83,18 +86,26 @@
 <template>
   <div class="component-info">
     <header>
-      <a-radio-group v-model:value="componentSelected" button-style="solid">
-        <a-radio-button v-for="comp in components" :key="comp.id" :value="comp.id">{{ comp.name }}</a-radio-button>
+      <a-radio-group v-model:value="stackSelected" button-style="solid">
+        <a-radio-button v-for="(stack, idx) in stackGroup" :key="idx" :value="stack">
+          {{ stackGroup[idx].replace(/^\w/, (c) => c.toUpperCase()) }}
+        </a-radio-button>
       </a-radio-group>
       <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
     </header>
     <a-table
       :loading="loading"
-      :data-source="dataSource"
+      :data-source="data"
       :columns="columnsProp"
       :pagination="paginationProps"
       @change="onChange"
-    ></a-table>
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'stack'">
+          <span> {{ `${stackSelected}-${record.version}` }} </span>
+        </template>
+      </template>
+    </a-table>
     <set-source ref="setSourceRef" />
   </div>
 </template>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index efcd23bef..0d2d96a81 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -19,11 +19,13 @@
 
 <script setup lang="ts">
   import { TableColumnType } from 'ant-design-vue'
-  import { computed, reactive, ref } from 'vue'
-  import { generateTableHostData } from './mock'
+  import { computed, onMounted, reactive, ref } from 'vue'
   import useBaseTable from '@/composables/use-base-table'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
+  import { getHosts } from '@/api/hosts'
+  import { HostVO } from '@/api/hosts/types'
+  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
 
   type Key = string | number
   interface TableState {
@@ -34,7 +36,8 @@
 
   const searchInputRef = ref()
   // const checkAllHostIsSuccessfull = ref(false)
-  const data = ref<any[]>(generateTableHostData(50))
+  const data = ref<HostVO[]>()
+  const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
   const state = reactive<TableState>({
     searchText: '',
     searchedColumn: '',
@@ -93,7 +96,7 @@
     {
       text: 'remove',
       danger: true,
-      clickEvent: (_item, args) => handleDelete(args)
+      clickEvent: (_item, args) => deleteHost(args)
     }
   ])
 
@@ -113,9 +116,9 @@
     state.selectedRowKeys = selectedRowKeys
   }
 
-  const handleInstallDependencies = () => {
-    console.log('selectedRowKeys :>> ', state.selectedRowKeys)
-  }
+  // const handleInstallDependencies = () => {
+  //   console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+  // }
 
   const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
     confirm()
@@ -128,26 +131,45 @@
     state.searchText = ''
   }
 
+  const addHost = () => {
+    hostCreateRef.value?.handleOpen()
+  }
+
   const handleEdit = (row: any) => {
     console.log('row :>> ', row)
   }
 
-  const handleDelete = (row?: any) => {
+  const deleteHost = (row?: any) => {
     if (!row) {
       console.log('selectedRowKeys :>> ', state.selectedRowKeys)
     } else {
       console.log('row :>> ', row)
     }
   }
+
+  const getHostList = async () => {
+    try {
+      loading.value = true
+      const { content } = await getHosts()
+      data.value = content
+    } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    getHostList()
+  })
 </script>
 
 <template>
   <div class="host-config">
     <header>
-      <a-button type="primary" @click="handleInstallDependencies">{{ $t('cluster.install_dependencies') }}</a-button>
       <a-space :size="16">
-        <a-button type="primary" danger @click="handleDelete">{{ $t('common.bulk_remove') }}</a-button>
-        <a-button type="primary">{{ $t('cluster.add_host') }}</a-button>
+        <a-button type="primary" @click="addHost">{{ $t('cluster.add_host') }}</a-button>
+        <a-button type="primary" danger @click="deleteHost">{{ $t('common.bulk_remove') }}</a-button>
       </a-space>
     </header>
     <a-table
@@ -195,6 +217,7 @@
         </template>
       </template>
     </a-table>
+    <host-create ref="hostCreateRef" />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
index 167213df2..f57c75958 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -18,9 +18,13 @@
 -->
 
 <script setup lang="ts">
-  import type { FormInstance, TableColumnType } from 'ant-design-vue'
-  import { reactive, ref, toRefs, watch } from 'vue'
+  import { reactive, ref, toRefs } from 'vue'
+  import { getRepoList, updateRepo } from '@/api/repo'
+  import type { RepoVO } from '@/api/repo/types'
+  import { message, type FormInstance, type TableColumnType } from 'ant-design-vue'
+  import { useI18n } from 'vue-i18n'
 
+  const { t } = useI18n()
   const open = ref(false)
   const loading = ref(false)
   const columns: TableColumnType[] = [
@@ -32,35 +36,58 @@
     },
     {
       title: '架构',
-      dataIndex: 'architecture',
-      key: 'architecture',
+      dataIndex: 'arch',
+      key: 'arch',
       ellipsis: true
     },
     {
       title: '地址',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'baseUrl',
+      key: 'baseUrl',
       ellipsis: true
     }
   ]
   const formRef = ref<FormInstance>()
   const form = reactive({
-    list: [] as any[]
+    list: [] as RepoVO[]
   })
   const { list } = toRefs(form)
 
   const handleOpen = () => {
     open.value = true
-    Object.assign(form, { list: [] })
+    getSource()
+  }
+
+  const getSource = async () => {
+    loading.value = true
+    try {
+      const data = await getRepoList()
+      list.value = data
+    } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateSourceUrl = async () => {
+    try {
+      const params = list.value.map(({ id, baseUrl }) => ({ id, baseUrl }))
+      await updateRepo(params)
+      formRef.value?.resetFields()
+      message.success(t('common.update_success'))
+      open.value = false
+    } catch (error) {
+      message.error(t('common.update_fail'))
+      console.log('error :>> ', error)
+    }
   }
 
   const handleOk = () => {
     formRef.value
       ?.validateFields()
-      .then((values) => {
-        console.log('Received values of form: ', values)
-        formRef.value?.resetFields()
-        open.value = false
+      .then(() => {
+        updateSourceUrl()
       })
       .catch((info) => {
         console.log('Validate Failed:', info)
@@ -71,35 +98,6 @@
     open.value = false
   }
 
-  function generateMockData(rowCount = 10) {
-    return Array.from({ length: rowCount }, (_, i) => ({
-      id: i + 1,
-      name: `名称_${i + 1}`,
-      architecture: `架构_${i + 1}`,
-      address: `https://example.com/${i + 1}`
-    }))
-  }
-
-  const getSourceList = () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(generateMockData(12))
-      }, 500)
-    })
-  }
-
-  watch(open, async (val) => {
-    if (val) {
-      loading.value = true
-      try {
-        form.list = (await getSourceList()) as any
-        loading.value = false
-      } catch (error) {
-        console.log('error :>> ', error)
-      }
-    }
-  })
-
   defineExpose({
     handleOpen
   })
@@ -121,14 +119,14 @@
       <a-form ref="formRef" :model="form">
         <a-table :loading="loading" :scroll="{ y: 340 }" :data-source="list" :columns="columns" :pagination="false">
           <template #bodyCell="{ index, column, record }">
-            <template v-if="column.dataIndex == 'address'">
+            <template v-if="column.dataIndex == 'baseUrl'">
               <a-form-item
                 label=" "
                 :colon="false"
-                :name="['list', index, 'address']"
+                :name="['list', index, 'baseUrl']"
                 :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]"
               >
-                <a-input v-model:value="record[column.key]"></a-input>
+                <a-input v-model:value="record[column.key]" />
               </a-form-item>
             </template>
           </template>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 4e602a1ab..1ec25eb41 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -25,10 +25,16 @@
   import HostConfig from './components/host-config.vue'
   import CheckWorkflow from './components/check-workflow.vue'
   import { useI18n } from 'vue-i18n'
+  import { ClusterCommandReq, Command, CommandLevel, CommandRequest } from '@/api/command/types'
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
+  const compRef = ref<any>()
 
+  const commandRequest = ref<CommandRequest>({
+    command: Command.Add,
+    commandLevel: CommandLevel.Cluster
+  })
   const current = ref(0)
   const steps = computed(() => [
     {
@@ -59,16 +65,33 @@
     }
   })
 
+  const updateCommandRequest = (value: unknown) => {
+    if (current.value === 0) {
+      commandRequest.value.clusterCommand = value as ClusterCommandReq
+    }
+  }
+
   const previousStep = () => {
     if (current.value > 0) {
       current.value = current.value - 1
     }
   }
-  const nextStep = () => {
-    if (current.value < stepsLimit.value) {
-      current.value = current.value + 1
+  const nextStep = async () => {
+    if (!compRef.value?.check) {
+      if (current.value < stepsLimit.value) {
+        current.value = current.value + 1
+      }
+    } else {
+      const res = await compRef.value?.check()
+      if (res !== -1) {
+        updateCommandRequest(res)
+        if (current.value < stepsLimit.value) {
+          current.value = current.value + 1
+        }
+      }
     }
   }
+
   const onSave = () => {
     menuStore.updateSiderMenu()
   }
@@ -76,6 +99,7 @@
 
 <template>
   <div class="cluster-create">
+    {{ commandRequest }}
     <header-card>
       <div class="steps-wrp">
         <a-steps :current="current" :items="steps" />
@@ -85,11 +109,10 @@
       <template v-for="stepItem in steps" :key="stepItem.title">
         <div v-show="steps[current].title === stepItem.title" class="step-title">
           <h5>{{ stepItem.title }}</h5>
-          <section :class="{ 'step-content': current < stepsLimit }">
-            <component :is="getCompName" />
-          </section>
+          <section :class="{ 'step-content': current < stepsLimit }"> </section>
         </div>
       </template>
+      <component :is="getCompName" ref="compRef" :command-request="commandRequest" />
       <div class="step-action">
         <a-space>
           <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
index c4e831863..6791a7cee 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -17,10 +17,352 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import type { AuthorizedPlatform } from '@/api/llm-config/types'
+  // import { message } from 'ant-design-vue'
+  // import { useI18n } from 'vue-i18n'
+  import type { HostAdd } from '@/api/hosts/types'
+  import { FormItemState } from '@/components/common/auto-form/types'
+  import { UploadOutlined } from '@ant-design/icons-vue'
+  enum Mode {
+    EDIT = 'cluster.edit_host',
+    ADD = 'cluster.add_host'
+  }
+
+  // interface Emits {
+  //   (event: 'onOk'): void
+  // }
+
+  // const emits = defineEmits<Emits>()
+  // const { t } = useI18n()
+  const open = ref(false)
+  const mode = ref<keyof typeof Mode>('ADD')
+  const hiddenItems = ref<string[]>([])
+  const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
+  const formValue = ref<HostAdd>({})
+  const fileList = ref()
+  // const isEdit = computed(() => mode.value === 'EDIT')
+
+  const formItemsForPassword = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'sshKeyPassword',
+      formItemProps: {
+        name: 'sshKeyPassword',
+        label: '密码',
+        rules: [{ required: true, message: '密码', trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'input',
+      field: 'sshKeyPasswordAgain',
+      formItemProps: {
+        name: 'sshKeyPasswordAgain',
+        label: '确认密码',
+        rules: [{ required: true, message: '确认密码', trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    }
+  ])
+
+  const formItemsForKey = computed((): FormItemState[] => [
+    {
+      type: 'radio',
+      field: 'inputType',
+      defaultValue: '1',
+      defaultOptionsMap: [
+        { value: '1', label: '文件' },
+        { value: '2', label: '文本' }
+      ],
+      formItemProps: {
+        name: 'inputType',
+        label: '输入方式',
+        rules: [{ required: true, message: '输入方式', trigger: 'blur' }]
+      }
+    },
+
+    {
+      type: 'input',
+      field: 'sshKeyFilename',
+      slot: 'sshKeyFilenameSlot',
+      formItemProps: {
+        name: 'sshKeyFilename',
+        label: '密钥文件'
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'sshKeyString',
+      formItemProps: {
+        name: 'sshKeyString',
+        label: '密钥文本',
+        rules: [{ required: true, message: '密钥文本', trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'input',
+      field: 'keyPassword',
+      formItemProps: {
+        name: 'keyPassword',
+        label: '密钥口令'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'keyPasswordAgain',
+      formItemProps: {
+        name: 'keyPasswordAgain',
+        label: '确认口令'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    }
+  ])
+  const formItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'sshUser',
+      formItemProps: {
+        name: 'sshUser',
+        label: '用户名',
+        rules: [{ required: true, message: '用户名', trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'radio',
+      field: 'authType',
+      defaultValue: '1',
+      defaultOptionsMap: [
+        { value: '1', label: '密码' },
+        { value: '2', label: '密钥' },
+        { value: '3', label: '无认证' }
+      ],
+      formItemProps: {
+        name: 'authType',
+        label: '认证方式',
+        rules: [{ required: true, message: '认证方式', trigger: 'blur' }]
+      }
+    },
+
+    {
+      type: 'textarea',
+      field: 'hostnames',
+      formItemProps: {
+        name: 'hostnames',
+        label: '主机名',
+        rules: [{ required: true, message: '主机名', trigger: 'blur' }]
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+
+    {
+      type: 'input',
+      field: 'agentDir',
+      slot: 'agentDirSlot',
+      formItemProps: {
+        name: 'agentDir',
+        label: 'Agent路径'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'input',
+      field: 'sshPort',
+      formItemProps: {
+        name: 'sshPort',
+        label: 'SSH端口'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'input',
+      field: 'grpcPort',
+      slot: 'grpcPortSlot',
+      formItemProps: {
+        name: 'grpcPort',
+        label: 'gRPC端口'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'remark',
+      formItemProps: {
+        name: 'remark',
+        label: '备注'
+      },
+      controlProps: {
+        placeholder: '请输入'
+      }
+    }
+  ])
+
+  const filterFormItems = computed((): FormItemState[] => {
+    if (formValue.value.authType === '1') {
+      const data = [...formItems.value]
+      data.splice(2, 0, ...formItemsForPassword.value)
+      return data
+    } else if (formValue.value.authType === '2') {
+      const data = [...formItems.value]
+      data.splice(2, 0, ...formItemsForKey.value)
+      return data
+    }
+    return [...formItems.value]
+  })
+
+  watch(
+    () => formValue.value,
+    (val) => {
+      if (val.inputType && val.inputType === '1') {
+        hiddenItems.value = ['sshKeyString']
+      } else if (val.inputType && val.inputType === '2') {
+        hiddenItems.value = ['sshKeyFilename']
+      } else {
+        hiddenItems.value = []
+      }
+    },
+    {
+      deep: true
+    }
+  )
+
+  const handleOpen = async (payload?: AuthorizedPlatform) => {
+    open.value = true
+    mode.value = payload ? 'EDIT' : 'ADD'
+    Object.assign(formValue.value, {
+      authType: '1',
+      inputType: '1'
+    })
+  }
+
+  const handleOk = async () => {
+    const validate = await autoFormRef.value?.getFormValidation()
+    if (!validate) return
+    console.log('object :>> ', formValue.value)
+    // const res = await addHost()
+    // const api = isEdit.value ? llmConfigStore.updateAuthPlatform : llmConfigStore.addAuthorizedPlatform
+    // const success = await api()
+    // if (success) {
+    //   const text = isEdit.value ? 'common.update_success' : 'common.created'
+    //   message.success(t(text))
+    //   handleCancel()
+    //   emits('onOk')
+    // }
+  }
+
+  const handleCancel = () => {
+    autoFormRef.value?.resetForm()
+    open.value = false
+  }
+
+  defineExpose({
+    handleOpen
+  })
+</script>
 
 <template>
-  <div>host create </div>
+  <div class="add-host">
+    <a-modal
+      :open="open"
+      :width="500"
+      :title="Mode[mode] && $t(Mode[mode])"
+      :mask-closable="false"
+      :centered="true"
+      :destroy-on-close="true"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <auto-form
+        ref="autoFormRef"
+        v-model:form-value="formValue"
+        :hidden-items="hiddenItems"
+        :show-button="false"
+        :form-items="filterFormItems"
+      >
+        <template #sshKeyFilenameSlot="{ item }">
+          <a-form-item v-bind="item.formItemProps">
+            <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
+              <a-button>
+                <upload-outlined></upload-outlined>
+                上传文件
+              </a-button>
+            </a-upload>
+          </a-form-item>
+        </template>
+        <template #agentDirSlot="{ item, state }">
+          <a-form-item>
+            <template #label>
+              <div class="question">
+                <span>
+                  {{ item.formItemProps?.label }}
+                </span>
+                <svg-icon style="padding: 1px 0 0 0" name="question" />
+              </div>
+            </template>
+            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
+          </a-form-item>
+        </template>
+        <template #grpcPortSlot="{ item, state }">
+          <a-form-item>
+            <template #label>
+              <div class="question">
+                <span>
+                  {{ item.formItemProps?.label }}
+                </span>
+                <svg-icon style="padding: 1px 0 0 0" name="question" />
+              </div>
+            </template>
+            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
+          </a-form-item>
+        </template>
+      </auto-form>
+      <template #footer>
+        <footer>
+          <a-space size="middle">
+            <a-button @click="handleCancel">
+              {{ $t('common.cancel') }}
+            </a-button>
+            <a-button type="primary" @click="handleOk">
+              {{ $t('common.confirm') }}
+            </a-button>
+          </a-space>
+        </footer>
+      </template>
+    </a-modal>
+  </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .question {
+    cursor: pointer;
+  }
+  footer {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 397b49bb1..5ba810a7c 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -20,7 +20,7 @@
 import { defineStore } from 'pinia'
 import { ClusterVO } from '@/api/cluster/types.ts'
 import { ref } from 'vue'
-// import { getClusters } from '@/api/cluster'
+import { getClusterList } from '@/api/cluster'
 
 export const useClusterStore = defineStore(
   'cluster',
@@ -28,21 +28,6 @@ export const useClusterStore = defineStore(
     const clusters = ref<ClusterVO[]>([])
     const count = ref(0)
 
-    const generateRandomDataArray = () => {
-      const dataArray = []
-      for (let i = 0; i < count.value; i++) {
-        dataArray.push({
-          id: i,
-          clusterName: `Cluster-${i}`,
-          clusterType: Math.floor(Math.random() * 10),
-          stackName: `Stack-${i}`,
-          stackVersion: `Version-${i}`,
-          selected: Math.random() < 0.5
-        })
-      }
-      return dataArray
-    }
-
     const addCluster = async () => {
       count.value = count.value + 1
       await loadClusters()
@@ -58,12 +43,8 @@ export const useClusterStore = defineStore(
     }
 
     const loadClusters = async () => {
-      // clusters.value = await getClusters()
-      clusters.value = (await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(generateRandomDataArray())
-        }, 1000)
-      })) as ClusterVO[]
+      const data = await getClusterList()
+      clusters.value = data as unknown as ClusterVO[]
     }
 
     return {
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index 887bd24d8..80877383c 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -89,9 +89,9 @@ export const useMenuStore = defineStore(
           item.children = clusters.value.map((v) => {
             return {
               icon: '',
-              key: `${item.key}/${v.clusterName}/${v.id}`,
-              label: v.clusterName,
-              title: v.clusterName,
+              key: `${item.key}/${v.displayName}/${v.id}`,
+              label: v.displayName || '',
+              title: v.displayName || '',
               activeMenu: item.key
             }
           })
diff --git a/bigtop-manager-ui/src/store/stack/index.ts b/bigtop-manager-ui/src/store/stack/index.ts
new file mode 100644
index 000000000..02d7884c6
--- /dev/null
+++ b/bigtop-manager-ui/src/store/stack/index.ts
@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getStacks } from '@/api/stack'
+import { StackVO } from '@/api/stack/types'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useStackStore = defineStore(
+  'stack',
+  () => {
+    const stacks = ref<StackVO[]>([])
+    const loadStacks = async () => {
+      const data = await getStacks()
+      stacks.value = data
+    }
+
+    return {
+      stacks,
+      loadStacks
+    }
+  },
+  {
+    persist: {
+      storage: sessionStorage
+    }
+  }
+)
diff --git a/bigtop-manager-ui/src/styles/index.scss b/bigtop-manager-ui/src/styles/index.scss
index 4b2f6f4df..f2bf2d1f5 100644
--- a/bigtop-manager-ui/src/styles/index.scss
+++ b/bigtop-manager-ui/src/styles/index.scss
@@ -47,6 +47,10 @@
 }
 
 // temp resolve error on console
-.ant-modal div[aria-hidden="true"] {
+.ant-modal div[aria-hidden='true'] {
   display: none !important;
-}
\ No newline at end of file
+}
+
+:where(.ant-modal-header) {
+  margin-bottom: 16px !important;
+}

From aaa34ead695c569622908027089f7faa3ef71303 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Sun, 9 Feb 2025 18:56:45 +0800
Subject: [PATCH 28/39] feat: Complete the creation of the cluster

---
 bigtop-manager-ui/src/api/cluster/index.ts    |  22 +-
 bigtop-manager-ui/src/api/command/types.ts    |  64 +---
 bigtop-manager-ui/src/api/hosts/index.ts      |  17 +-
 bigtop-manager-ui/src/api/hosts/types.ts      |  13 +
 bigtop-manager-ui/src/api/job/index.ts        |  39 +-
 bigtop-manager-ui/src/api/service/index.ts    |  65 +++-
 bigtop-manager-ui/src/api/stack/index.ts      |  16 -
 .../src/api/upload-file/index.ts              |  31 ++
 .../src/assets/images/svg/failed.svg          |  32 ++
 .../src/components/common/auto-form/index.vue |   8 +
 .../src/locales/en_US/cluster.ts              |   9 +-
 bigtop-manager-ui/src/locales/en_US/common.ts |  15 +-
 bigtop-manager-ui/src/locales/en_US/host.ts   |  23 +-
 .../src/locales/zh_CN/cluster.ts              |   1 +
 bigtop-manager-ui/src/locales/zh_CN/common.ts |  15 +-
 bigtop-manager-ui/src/locales/zh_CN/host.ts   |  23 +-
 .../cluster/components/check-workflow.vue     |   2 +-
 .../cluster/components/cluster-base.vue       |  76 ++--
 .../cluster/components/component-info.vue     |  28 +-
 .../cluster/components/host-config.vue        | 127 ++++---
 .../cluster-manage/cluster/components/mock.ts |   9 +-
 .../cluster/components/set-source.vue         |  27 +-
 .../pages/cluster-manage/cluster/create.vue   | 131 ++++++-
 .../src/pages/cluster-manage/hosts/create.vue | 346 ++++++++++++++----
 .../src/store/llm-config/config.ts            |   4 +-
 bigtop-manager-ui/src/utils/tools.ts          |   6 +
 26 files changed, 813 insertions(+), 336 deletions(-)
 create mode 100644 bigtop-manager-ui/src/api/upload-file/index.ts
 create mode 100644 bigtop-manager-ui/src/assets/images/svg/failed.svg

diff --git a/bigtop-manager-ui/src/api/cluster/index.ts b/bigtop-manager-ui/src/api/cluster/index.ts
index 7f000f04e..ed38562f4 100644
--- a/bigtop-manager-ui/src/api/cluster/index.ts
+++ b/bigtop-manager-ui/src/api/cluster/index.ts
@@ -17,17 +17,27 @@
  * under the License.
  */
 
-import { get, put } from '@/api/request-util'
+import request from '@/api/request.ts'
 import type { ClusterVO, UpdateClusterParam } from './types'
 
-export const getCluster = (id: number) => {
-  return get<ClusterVO>(`/clusters/${id}`)
+export const getCluster = (id: number): Promise<ClusterVO[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${id}`
+  })
 }
 
 export const updateCluster = (id: number, data: UpdateClusterParam) => {
-  return put<ClusterVO>(`/clusters/${id}`, data)
+  return request({
+    method: 'put',
+    url: `/clusters/${id}`,
+    data
+  })
 }
 
-export const getClusterList = () => {
-  return get<ClusterVO[]>('/clusters')
+export const getClusterList = (): Promise<ClusterVO[]> => {
+  return request({
+    method: 'get',
+    url: '/clusters'
+  })
 }
diff --git a/bigtop-manager-ui/src/api/command/types.ts b/bigtop-manager-ui/src/api/command/types.ts
index efa997a43..b6579a72f 100644
--- a/bigtop-manager-ui/src/api/command/types.ts
+++ b/bigtop-manager-ui/src/api/command/types.ts
@@ -16,41 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/**
- * CommandReq
- */
+
 export interface CommandRequest {
   clusterCommand?: ClusterCommandReq
   clusterId?: number
   command: Command
   commandLevel: CommandLevel
-  /**
-   * Command details for component level command
-   */
   componentCommands?: ComponentCommandReq[]
   customCommand?: string
-  /**
-   * Command details for host level command
-   */
   hostCommands?: HostCommandReq[]
-  /**
-   * Command details for service level command
-   */
   serviceCommands?: ServiceCommandReq[]
   [property: string]: any
 }
 
 export type CommandRequestKeys = keyof CommandRequest
 
-/**
- * ClusterCommandReq，Command details for cluster level command
- */
 export interface ClusterCommandReq {
   desc?: string
   displayName: string
-  /**
-   * Hosts info for this cluster
-   */
   hosts: HostReq[]
   name: string
   rootDir?: string
@@ -59,9 +42,6 @@ export interface ClusterCommandReq {
   [property: string]: any
 }
 
-/**
- * HostReq
- */
 export interface HostReq {
   agentDir?: string
   authType?: number
@@ -98,24 +78,12 @@ export enum CommandLevel {
   Service = 'service'
 }
 
-/**
- * ComponentCommandReq，Command details for component level command
- */
 export interface ComponentCommandReq {
-  /**
-   * Component Name
-   */
   componentName: string
-  /**
-   * Hostnames for component
-   */
   hostnames: string[]
   [property: string]: any
 }
 
-/**
- * HostCommandReq，Command details for host level command
- */
 export interface HostCommandReq {
   agentDir?: string
   authType?: number
@@ -132,43 +100,19 @@ export interface HostCommandReq {
   [property: string]: any
 }
 
-/**
- * ServiceCommandReq，Command details for service level command
- */
 export interface ServiceCommandReq {
-  /**
-   * Components for service on each hosts
-   */
   componentHosts: ComponentHostReq[]
-  /**
-   * Configs for service
-   */
   configs: ServiceConfigReq[]
-  /**
-   * Service name
-   */
   serviceName: string
   [property: string]: any
 }
 
-/**
- * ComponentHostReq，Components for service on each hosts
- */
 export interface ComponentHostReq {
-  /**
-   * Component name
-   */
   componentName: string
-  /**
-   * Hostnames for component
-   */
   hostnames: string[]
   [property: string]: any
 }
 
-/**
- * ServiceConfigReq，Configs for service
- */
 export interface ServiceConfigReq {
   id?: number
   name?: string
@@ -176,9 +120,6 @@ export interface ServiceConfigReq {
   [property: string]: any
 }
 
-/**
- * PropertyReq
- */
 export interface PropertyReq {
   attrs?: AttrsReq
   desc?: string
@@ -188,9 +129,6 @@ export interface PropertyReq {
   [property: string]: any
 }
 
-/**
- * AttrsReq
- */
 export interface AttrsReq {
   type?: string
   [property: string]: any
diff --git a/bigtop-manager-ui/src/api/hosts/index.ts b/bigtop-manager-ui/src/api/hosts/index.ts
index 2e8a6d849..242ab99b0 100644
--- a/bigtop-manager-ui/src/api/hosts/index.ts
+++ b/bigtop-manager-ui/src/api/hosts/index.ts
@@ -18,7 +18,7 @@
  */
 
 import request from '@/api/request.ts'
-import { HostAdd, HostVO, HostVOList } from '@/api/hosts/types.ts'
+import { HostAdd, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
 
 export const getHosts = (): Promise<HostVOList> => {
   return request({
@@ -34,3 +34,18 @@ export const addHost = (data: HostAdd): Promise<HostVO> => {
     data
   })
 }
+
+export const installDependencies = (data: HostAdd) => {
+  return request({
+    method: 'post',
+    url: '/hosts/install-dependencies',
+    data
+  })
+}
+
+export const getInstalledStatus = (): Promise<InstalledStatusVO[]> => {
+  return request({
+    method: 'get',
+    url: '/hosts/installed-status'
+  })
+}
diff --git a/bigtop-manager-ui/src/api/hosts/types.ts b/bigtop-manager-ui/src/api/hosts/types.ts
index 051b19d1b..16c1c0d27 100644
--- a/bigtop-manager-ui/src/api/hosts/types.ts
+++ b/bigtop-manager-ui/src/api/hosts/types.ts
@@ -69,3 +69,16 @@ export interface HostAdd {
   sshUser?: string
   [property: string]: any
 }
+
+export interface InstalledStatusVO {
+  hostname?: string
+  message?: string
+  status?: Status
+}
+
+export enum Status {
+  Failed = 'FAILED',
+  Installing = 'INSTALLING',
+  Success = 'SUCCESS',
+  Unknown = 'UNKNOW'
+}
diff --git a/bigtop-manager-ui/src/api/job/index.ts b/bigtop-manager-ui/src/api/job/index.ts
index d1c694cb8..3ce1ebda3 100644
--- a/bigtop-manager-ui/src/api/job/index.ts
+++ b/bigtop-manager-ui/src/api/job/index.ts
@@ -16,27 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { get, post } from '@/api/request-util'
+import request from '@/api/request.ts'
 import type { JobParams, Job, JobList, Stage, Task, TaskLogParams, TaskParams } from './types'
 
-export const getJobList = (clusterId: number) => {
-  return get<JobList>(`/clusters/${clusterId}/jobs`)
+export const getJobList = (clusterId: number): Promise<JobList> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${clusterId}/jobs`
+  })
 }
 
-export const retryJob = (params: JobParams) => {
-  return post<Job[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/retry`)
+export const retryJob = (params: JobParams): Promise<Job[]> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/retry`
+  })
 }
 
-export const getStageList = (params: JobParams) => {
-  return get<Stage[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/stages`)
+export const getStageList = (params: JobParams): Promise<Stage[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages`
+  })
 }
 
-export const getTaskList = (params: TaskParams) => {
-  return get<Task[]>(`/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks`)
+export const getTaskList = (params: TaskParams): Promise<Task[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks`
+  })
 }
 
-export const getTaskLog = (params: TaskLogParams) => {
-  return get<string[]>(
-    `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks/${params.taskId}/log`
-  )
+export const getTaskLog = (params: TaskLogParams): Promise<string[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks/${params.taskId}/log`
+  })
 }
diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index 7a92bb3d3..6642f0948 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { del, get, post } from '@/api/request-util'
 import type {
   ServiceParams,
   ServiceVO,
@@ -27,36 +26,64 @@ import type {
   SnapshotData,
   SnapshotRecovery
 } from './types'
+import request from '@/api/request.ts'
 
-export const getServiceList = (clusterId: number) => {
-  return get<ServiceList>(`/clusters/${clusterId}/services`)
+export const getServiceList = (clusterId: number): Promise<ServiceList> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${clusterId}/services`
+  })
 }
 
-export const getService = (params: ServiceParams) => {
-  return get<ServiceVO>(`/clusters/${params.clusterId}/services/${params.id}`)
+export const getService = (params: ServiceParams): Promise<ServiceVO> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.id}`
+  })
 }
 
-export const getServiceConfigs = (params: ServiceParams) => {
-  return get<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs`)
+export const getServiceConfigs = (params: ServiceParams): Promise<ServiceConfig[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.id}/configs`
+  })
 }
 
-export const updateServiceConfigs = (params: ServiceParams, data: ServiceConfig) => {
-  return post<ServiceConfig[]>(`/clusters/${params.clusterId}/services/${params.id}/configs,`, data)
+export const updateServiceConfigs = (params: ServiceParams, data: ServiceConfig): Promise<ServiceConfig[]> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${params.clusterId}/services/${params.id}/configs`,
+    data
+  })
 }
 
-export const getServiceConfigSnapshotsList = (params: ServiceParams) => {
-  return get<ServiceConfigSnapshot[]>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots`)
+export const getServiceConfigSnapshotsList = (params: ServiceParams): Promise<ServiceConfigSnapshot[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots`
+  })
 }
 
-export const takeServiceConfigSnapshot = (params: ServiceParams, data: SnapshotData) => {
-  return post<ServiceConfigSnapshot>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots,`, data)
+export const takeServiceConfigSnapshot = (
+  params: ServiceParams,
+  data: SnapshotData
+): Promise<ServiceConfigSnapshot> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots`,
+    data
+  })
 }
 
-export const recoveryServiceConfigSnapshot = (params: SnapshotRecovery) => {
-  return post<ServiceConfig[]>(
-    `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
-  )
+export const recoveryServiceConfigSnapshot = (params: SnapshotRecovery): Promise<ServiceConfig[]> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
+  })
 }
-export const deleteServiceConfigSnapshot = (params: SnapshotRecovery) => {
-  return del<boolean>(`/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`)
+export const deleteServiceConfigSnapshot = (params: SnapshotRecovery): Promise<boolean> => {
+  return request({
+    method: 'delete',
+    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
+  })
 }
diff --git a/bigtop-manager-ui/src/api/stack/index.ts b/bigtop-manager-ui/src/api/stack/index.ts
index f7d400429..cbd1825c2 100644
--- a/bigtop-manager-ui/src/api/stack/index.ts
+++ b/bigtop-manager-ui/src/api/stack/index.ts
@@ -19,8 +19,6 @@
 
 import request from '@/api/request.ts'
 import { StackVO } from '@/api/stack/types.ts'
-import { ServiceComponentVO } from '@/api/component/types.ts'
-import { ServiceConfigVO } from '@/api/config/types.ts'
 
 export const getStacks = (): Promise<StackVO[]> => {
   return request({
@@ -28,17 +26,3 @@ export const getStacks = (): Promise<StackVO[]> => {
     url: '/stacks'
   })
 }
-
-export const getStackComponents = (stackName: string, stackVersion: string): Promise<ServiceComponentVO[]> => {
-  return request({
-    method: 'get',
-    url: '/stacks/' + stackName + '/' + stackVersion + '/components'
-  })
-}
-
-export const getStackConfigs = (stackName: string, stackVersion: string): Promise<ServiceConfigVO[]> => {
-  return request({
-    method: 'get',
-    url: '/stacks/' + stackName + '/' + stackVersion + '/configurations'
-  })
-}
diff --git a/bigtop-manager-ui/src/api/upload-file/index.ts b/bigtop-manager-ui/src/api/upload-file/index.ts
new file mode 100644
index 000000000..8b5644e9e
--- /dev/null
+++ b/bigtop-manager-ui/src/api/upload-file/index.ts
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import request from '@/api/request.ts'
+
+export const uploadFile = (data: FormData): Promise<string> => {
+  return request({
+    method: 'post',
+    url: '/files/upload-key',
+    data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
diff --git a/bigtop-manager-ui/src/assets/images/svg/failed.svg b/bigtop-manager-ui/src/assets/images/svg/failed.svg
new file mode 100644
index 000000000..44d3bf63c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/failed.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.88549 6.11438L6.11426 9.88561">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.11426 6.11438L9.88549 9.88561">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/auto-form/index.vue b/bigtop-manager-ui/src/components/common/auto-form/index.vue
index ce1cd0360..cab84bd46 100644
--- a/bigtop-manager-ui/src/components/common/auto-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/auto-form/index.vue
@@ -172,6 +172,14 @@
               v-on="formItemEvents[item.field] || {}"
             />
 
+            <a-input-password
+              v-if="item.type == 'inputPassword'"
+              v-model:value="formState[item.field]"
+              v-bind="item.controlProps"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
+              v-on="formItemEvents[item.field] || {}"
+            />
+
             <!-- textarea  -->
             <a-textarea
               v-if="item.type == 'textarea'"
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index bb565a147..516b903fb 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -19,10 +19,10 @@
 export default {
   base_info: 'Basic information',
   cluster_config: 'Cluster configuration',
-  cluster_management: 'Cluster management',
-  component_info: 'Component information',
-  host_config: 'Host configuration',
-  create: 'Create cluster',
+  cluster_management: 'Cluster',
+  component_info: 'Stacks',
+  host_config: 'Hosts',
+  create: 'Create',
   name: 'Name',
   description: 'Description',
   root_directory: 'Root directory',
@@ -33,6 +33,7 @@ export default {
   edit_host: 'Edit host',
   view_log: 'View log',
   source: 'source',
+  show_hosts_resolved: 'Hostnames after resolved',
   cluster_unavailable_message:
     'Apologies, you do not yet have a cluster, so you cannot use cluster management capabilities.'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index 03b6703b2..47650f45f 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -26,7 +26,9 @@ export default {
   status: 'Status',
   healthy: 'Healthy',
   unhealthy: 'Unhealthy',
-  unknown: 'Unknown',
+  unknow: 'Unknown',
+  failed: 'Failed',
+  success: 'Normal',
   edit: 'Edit',
   rename: 'Rename',
   delete: 'Delete',
@@ -40,6 +42,7 @@ export default {
   confirm: 'Confirm',
   exit_confirm: 'Are you sure you want to exit?',
   install: 'Install',
+  installing: 'Installing...',
   finish: 'Finish',
   more: 'More',
   view_all: 'View all',
@@ -84,6 +87,14 @@ export default {
   loading_text_verifying: 'Verifying',
   enter_error: 'Please enter {0}',
   select_error: 'Please select {0}',
+  add_error: 'Please add {0}',
   delete_msg: 'Are you sure you want to delete this?',
-  total: 'Total {0} items'
+  total: 'Total {0} items',
+  note: 'Note: Changes to the source address will take effect for all clusters.',
+  upload_file: 'Upload file',
+  file_type_error: 'Only text files are allowed!',
+  file_size_error: 'File size cannot exceed 10KB!',
+  upload_success: 'File uploaded successfully!',
+  upload_failed: 'File upload failed!',
+  password_not_match: 'Passwords do not match.'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
index 5a9499560..cd777fc52 100644
--- a/bigtop-manager-ui/src/locales/en_US/host.ts
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -17,5 +17,26 @@
  * under the License.
  */
 export default {
-  host_list: 'Host List'
+  host_list: 'Host List',
+  uninstallable: 'Please add the host first',
+  hostname: 'Hostname',
+  ssh_user: 'Username',
+  confirm_password: 'Confirm Password',
+  input_method: 'Input Method',
+  file: 'File',
+  text: 'Text',
+  key_file: 'Key File',
+  key_text: 'Key Text',
+  key_password: 'Key Password',
+  confirm_key_password: 'Confirm Key Password',
+  username: 'Username',
+  auth_method: 'Authentication Method',
+  password_auth: 'Password',
+  key_auth: 'Key',
+  no_auth: 'No Authentication',
+  agent_path: 'Agent Path',
+  ssh_port: 'SSH Port',
+  grpc_port: 'gRPC Port',
+  description: 'Description',
+  key_password_not_match: 'Key Passwords do not match.'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index a0b2ac413..060501be5 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -33,5 +33,6 @@ export default {
   edit_host: '编辑主机',
   view_log: '查看日志',
   source: '配置源',
+  show_hosts_resolved: '解析后的主机名列表',
   cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 918638afd..8e99b1523 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -26,7 +26,9 @@ export default {
   status: '状态',
   healthy: '健康',
   unhealthy: '不健康',
-  unknown: '未知',
+  unknow: '未知',
+  success: '正常',
+  failed: '异常',
   edit: '编辑',
   delete: '删除',
   remove: '移除',
@@ -40,6 +42,7 @@ export default {
   confirm: '确认',
   exit_confirm: '确定要退出吗？',
   install: '安装',
+  installing: '安装中...',
   finish: '完成',
   more: '更多',
   view_all: '查看全部',
@@ -84,6 +87,14 @@ export default {
   loading_text_verifying: '校验中',
   enter_error: '请输入{0}',
   select_error: '请选择{0}',
+  add_error: '请添加{0}',
   delete_msg: '确认要删除该记录吗？',
-  total: '共{0}数据'
+  total: '共{0}数据',
+  note: '注: 源地址的改动对所有集群生效。',
+  upload_file: '上传文件',
+  file_type_error: '只能上传文本文件！',
+  file_size_error: '文件大小不能超过 10KB！',
+  upload_success: '文件上传成功！',
+  upload_failed: '文件上传失败！',
+  password_not_match: '密码不一致。'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/host.ts b/bigtop-manager-ui/src/locales/zh_CN/host.ts
index 1980fd53a..30692cfa5 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/host.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/host.ts
@@ -17,5 +17,26 @@
  * under the License.
  */
 export default {
-  host_list: '主机列表'
+  host_list: '主机列表',
+  uninstallable: '请先添加主机',
+  hostname: '主机名',
+  ssh_user: '用户名',
+  confirm_password: '确认密码',
+  input_method: '输入方式',
+  file: '文件',
+  text: '文本',
+  key_file: '密钥文件',
+  key_text: '密钥文本',
+  key_password: '密钥口令',
+  confirm_key_password: '确认口令',
+  username: '用户名',
+  auth_method: '认证方式',
+  password_auth: '密码',
+  key_auth: '密钥',
+  no_auth: '无认证',
+  agent_path: 'Agent路径',
+  ssh_port: 'SSH端口',
+  grpc_port: 'gRPC端口',
+  description: '备注',
+  key_password_not_match: '密钥口令不一致。'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
index 73f874307..bbc9215c1 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -76,7 +76,7 @@
   }
   .stage-item {
     @include flexbox($justify: space-between, $align: center);
-    padding-right: 65px;
+    padding-right: 68px;
   }
   .task-item {
     height: 45px;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index 3c433d286..1850e0276 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -18,20 +18,21 @@
 -->
 
 <script setup lang="ts">
-  import { CommandRequest } from '@/api/command/types'
   import type { FormItemState } from '@/components/common/auto-form/types'
-  import { computed, ref, shallowRef, toRefs } from 'vue'
+  import { computed, ref, shallowRef, toRefs, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
   const activeKey = ref(['1', '2'])
   const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
-  const props = defineProps<{ commandRequest: CommandRequest }>()
-  const { commandRequest } = toRefs(props)
+  const props = defineProps<{ stepData: any }>()
+  const emits = defineEmits(['updateData'])
+  const { stepData } = toRefs(props)
   const formLayout = computed(() => ({
     labelCol: { xs: 5, sm: 5, md: 5, lg: 4, xl: 3 },
     wrapperCol: { xs: 10, sm: 10, md: 10, lg: 10, xl: { xl: 10, pull: 1 } }
   }))
+
   const baseInfoFormItems = computed((): FormItemState[] => [
     {
       type: 'input',
@@ -39,10 +40,12 @@
       formItemProps: {
         name: 'name',
         label: t('cluster.name'),
-        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('cluster.name')}`.toLowerCase()]), trigger: 'blur' }
+        ]
       },
       controlProps: {
-        placeholder: t('common.enter_error')
+        placeholder: t('common.enter_error', [`${t('cluster.name')}`.toLowerCase()])
       }
     },
     {
@@ -51,13 +54,20 @@
       formItemProps: {
         name: 'desc',
         label: t('cluster.description'),
-        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.description')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: t('common.enter_error')
+        placeholder: t('common.enter_error', [`${t('cluster.description')}`.toLowerCase()])
       }
     }
   ])
+
   const clusterConfigFormItems = computed((): FormItemState[] => [
     {
       type: 'input',
@@ -65,10 +75,16 @@
       formItemProps: {
         name: 'rootDir',
         label: t('cluster.root_directory'),
-        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.root_directory')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: t('common.enter_error')
+        placeholder: t('common.enter_error', [`${t('cluster.root_directory')}`.toLowerCase()])
       }
     },
     {
@@ -77,26 +93,33 @@
       formItemProps: {
         name: 'userGroup',
         label: t('cluster.user_group'),
-        rules: [{ required: true, message: t('common.enter_error'), trigger: 'blur' }]
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.user_group')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: t('common.enter_error')
+        placeholder: t('common.enter_error', [`${t('cluster.user_group')}`.toLowerCase()])
       }
     }
   ])
+
   const collapses = ref([
     {
       title: computed(() => t('cluster.base_info')),
-      formValue: { name: commandRequest.value.clusterCommand?.name, desc: commandRequest.value.clusterCommand?.desc },
-      formItems: baseInfoFormItems.value
+      formValue: { name: stepData.value?.name, desc: stepData.value?.desc },
+      formItems: computed(() => baseInfoFormItems.value)
     },
     {
       title: computed(() => t('cluster.cluster_config')),
       formValue: {
-        rootDir: commandRequest.value.clusterCommand?.rootDir,
-        userGroup: commandRequest.value.clusterCommand?.rootDir
+        rootDir: stepData.value?.rootDir,
+        userGroup: stepData.value?.rootDir
       },
-      formItems: clusterConfigFormItems.value
+      formItems: computed(() => clusterConfigFormItems.value)
     }
   ])
 
@@ -121,22 +144,32 @@
       )
       const allValid = validationResults.every((res) => res)
       if (allValid) {
-        const res = getFormValues()
-        return res
+        return allValid
       } else {
         autoFormRefs.forEach((_formRef, idx) => {
           if (!validationResults[idx]) {
             !activeKey.value.includes(`${idx + 1}`) && activeKey.value.push(`${idx + 1}`)
           }
         })
-        return -1
+        return allValid
       }
     } catch (error) {
       console.error('Error during form validation:', error)
-      return -1
+      return
     }
   }
 
+  watch(
+    () => [collapses.value[0].formValue, collapses.value[1].formValue],
+    () => {
+      const res = getFormValues()
+      emits('updateData', res)
+    },
+    {
+      deep: true
+    }
+  )
+
   defineExpose({
     check
   })
@@ -160,7 +193,6 @@
         />
       </a-collapse-panel>
     </a-collapse>
-    <a-button @click="check">check</a-button>
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index 44515d426..29501e18a 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -18,18 +18,20 @@
 -->
 
 <script setup lang="ts">
-  import { ref, shallowRef, watchEffect } from 'vue'
+  import { computed, ref, shallowRef, watchEffect } from 'vue'
   import type { TableColumnType } from 'ant-design-vue'
   import useBaseTable from '@/composables/use-base-table'
   import SetSource from './set-source.vue'
   import { useStackStore } from '@/store/stack'
   import { storeToRefs } from 'pinia'
   import { ServiceVO } from '@/api/service/types'
+  import { useI18n } from 'vue-i18n'
 
+  const { t } = useI18n()
   const stackStore = useStackStore()
   const { stacks } = storeToRefs(stackStore)
 
-  const columns: TableColumnType[] = [
+  const columns = computed((): TableColumnType[] => [
     {
       title: '#',
       width: '48px',
@@ -39,37 +41,37 @@
       }
     },
     {
-      title: '名称',
+      title: t('common.name'),
       dataIndex: 'displayName',
       width: '20%',
       ellipsis: true
     },
     {
-      title: '版本',
+      title: t('common.version'),
       dataIndex: 'version',
       width: '15%',
       ellipsis: true
     },
     {
       key: 'stack',
-      title: '组件栈',
+      title: t('common.stack'),
       dataIndex: 'stack',
       width: '20%',
       ellipsis: true
     },
     {
-      title: '描述',
+      title: t('common.desc'),
       dataIndex: 'desc',
       ellipsis: true
     }
-  ]
+  ])
 
   const data = ref<ServiceVO[]>([])
   const stackSelected = ref('bigtop')
   const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
   const setSourceRef = ref<InstanceType<typeof SetSource>>()
-  const { columnsProp, loading, paginationProps, onChange, resetState } = useBaseTable({
-    columns,
+  const { loading, paginationProps, onChange, resetState } = useBaseTable({
+    columns: columns.value,
     rows: data.value
   })
 
@@ -93,13 +95,7 @@
       </a-radio-group>
       <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
     </header>
-    <a-table
-      :loading="loading"
-      :data-source="data"
-      :columns="columnsProp"
-      :pagination="paginationProps"
-      @change="onChange"
-    >
+    <a-table :loading="loading" :data-source="data" :columns="columns" :pagination="paginationProps" @change="onChange">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'stack'">
           <span> {{ `${stackSelected}-${record.version}` }} </span>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index 0d2d96a81..923d501b0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -19,13 +19,14 @@
 
 <script setup lang="ts">
   import { TableColumnType } from 'ant-design-vue'
-  import { computed, onMounted, reactive, ref } from 'vue'
+  import { computed, reactive, ref, watch } from 'vue'
   import useBaseTable from '@/composables/use-base-table'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
-  import { getHosts } from '@/api/hosts'
-  import { HostVO } from '@/api/hosts/types'
+  import { HostAdd } from '@/api/hosts/types'
   import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
+  import { generateRandomId } from '@/utils/tools'
+  import { useI18n } from 'vue-i18n'
 
   type Key = string | number
   interface TableState {
@@ -33,10 +34,11 @@
     searchText: string
     searchedColumn: string
   }
-
+  const { t } = useI18n()
+  const props = defineProps<{ stepData: any }>()
+  const emits = defineEmits(['updateData'])
+  const data = ref<HostAdd[]>([])
   const searchInputRef = ref()
-  // const checkAllHostIsSuccessfull = ref(false)
-  const data = ref<HostVO[]>()
   const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
   const state = reactive<TableState>({
     searchText: '',
@@ -46,44 +48,45 @@
 
   const columns = computed((): TableColumnType[] => [
     {
-      title: '主机名',
-      dataIndex: 'name',
-      key: 'name',
+      title: t('host.hostname'),
+      dataIndex: 'hostname',
+      key: 'hostname',
       ellipsis: true,
       customFilterDropdown: true,
-      onFilter: (value, record) => isContain(record.name, value as string),
+      onFilter: (value, record) => isContain(record.hostname, value as string),
       onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
     },
     {
-      title: 'IP地址',
-      dataIndex: 'address',
-      key: 'address',
+      title: t('host.ssh_user'),
+      dataIndex: 'ssh_user',
+      width: '260px',
+      key: 'ssh_user',
       ellipsis: true,
       customFilterDropdown: true,
-      onFilter: (value, record) => isContain(record.address, value as string),
+      onFilter: (value, record) => isContain(record.ssh_user, value as string),
       onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
     },
     {
-      title: '备注',
-      dataIndex: 'remark',
+      title: t('common.desc'),
+      dataIndex: 'desc',
       width: '20%',
       ellipsis: true
     },
     {
-      title: '状态',
+      key: 'status',
+      title: t('common.status'),
       dataIndex: 'status',
-      width: '260px',
       ellipsis: true
     },
     {
-      title: '操作',
+      title: t('common.action'),
       key: 'operation',
       width: '160px',
       fixed: 'right'
     }
   ])
 
-  const { loading, paginationProps, onChange } = useBaseTable({
+  const { loading, dataSource, paginationProps, onChange } = useBaseTable({
     columns: columns.value,
     rows: data.value
   })
@@ -91,7 +94,7 @@
   const operations = computed((): GroupItem[] => [
     {
       text: 'edit',
-      clickEvent: (_item, args) => handleEdit(args)
+      clickEvent: (_item, args) => editHost(args)
     },
     {
       text: 'remove',
@@ -100,6 +103,16 @@
     }
   ])
 
+  watch(
+    () => props.stepData,
+    (val) => {
+      dataSource.value = val
+    },
+    {
+      immediate: true
+    }
+  )
+
   const isContain = (source: string, target: string) => {
     return source.toString().toLowerCase().includes(target.toLowerCase())
   }
@@ -116,10 +129,6 @@
     state.selectedRowKeys = selectedRowKeys
   }
 
-  // const handleInstallDependencies = () => {
-  //   console.log('selectedRowKeys :>> ', state.selectedRowKeys)
-  // }
-
   const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
     confirm()
     state.searchText = selectedKeys[0] as string
@@ -132,36 +141,52 @@
   }
 
   const addHost = () => {
-    hostCreateRef.value?.handleOpen()
+    hostCreateRef.value?.handleOpen('ADD')
+  }
+
+  const editHost = (row: HostAdd) => {
+    hostCreateRef.value?.handleOpen('EDIT', row)
   }
 
-  const handleEdit = (row: any) => {
-    console.log('row :>> ', row)
+  const updateStepData = () => {
+    const res = dataSource.value.map((v) => {
+      return {
+        ...v,
+        hostnames: [v.hostname]
+      }
+    })
+    emits('updateData', res)
   }
 
-  const deleteHost = (row?: any) => {
-    if (!row) {
-      console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostAdd) => {
+    if (type === 'ADD') {
+      const items = item.hostnames?.map((v) => {
+        return {
+          ...item,
+          key: generateRandomId(),
+          hostname: v,
+          status: 'INSTALLING'
+        }
+      }) as HostAdd[]
+      dataSource.value?.unshift(...items)
     } else {
-      console.log('row :>> ', row)
+      const index = dataSource.value.findIndex((data: any) => data.key === item.key)
+      if (index !== -1) {
+        dataSource.value[index] = item
+      }
     }
+    updateStepData()
   }
 
-  const getHostList = async () => {
-    try {
-      loading.value = true
-      const { content } = await getHosts()
-      data.value = content
-    } catch (error) {
-      console.log('error :>> ', error)
-    } finally {
-      loading.value = false
+  const deleteHost = (row?: HostAdd) => {
+    if (!row?.key) {
+      state.selectedRowKeys.length > 0 &&
+        (dataSource.value = dataSource.value?.filter((v: any) => !state.selectedRowKeys.includes(v.key)) || [])
+    } else {
+      dataSource.value = dataSource.value?.filter((v: any) => row.key !== v.key)
     }
+    updateStepData()
   }
-
-  onMounted(() => {
-    getHostList()
-  })
 </script>
 
 <template>
@@ -174,7 +199,7 @@
     </header>
     <a-table
       :loading="loading"
-      :data-source="data"
+      :data-source="dataSource"
       :columns="columns"
       :pagination="paginationProps"
       :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
@@ -198,11 +223,15 @@
         </div>
       </template>
       <template #customFilterIcon="{ filtered }">
-        <svg-icon :name="filtered ? 'search_active' : 'search'" />
+        <svg-icon :name="filtered ? 'search_activated' : 'search'" />
       </template>
       <template #bodyCell="{ record, column }">
         <template v-if="column.key === 'status'">
-          <svg-icon :name="record.status" />
+          <svg-icon :name="record.status.toLowerCase()" />
+          <span :title="`${record.message ? record.message : ''}`">
+            {{ `${$t(`common.${record.status.toLowerCase()}`)}` }}
+            {{ record.message ? `:  ${record.message}` : '' }}
+          </span>
         </template>
         <template v-if="column.key === 'operation'">
           <button-group
@@ -217,7 +246,7 @@
         </template>
       </template>
     </a-table>
-    <host-create ref="hostCreateRef" />
+    <host-create ref="hostCreateRef" @on-ok="addHostSuccess" />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 7494be43e..96f0a067c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -57,18 +57,11 @@ export function generateTableHostData(numRows = 100) {
   return tableData
 }
 
-/**
- * 生成随机数据
- * @param {*} stageCount - 需要生成的 stage 数量
- * @param {*} maxTasksPerStage - 每个 stage 中最大任务数量
- * @param {*} maxStatus - 最大 status 值（从 1 开始）
- * @returns {Array} - 生成的数据数组
- */
 export function getCheckWorkflows(stageCount: number, maxTasksPerStage: number, maxStatus: number): Array<any> {
   const data = []
 
   for (let i = 0; i < stageCount; i++) {
-    const taskCount = Math.floor(Math.random() * maxTasksPerStage) + 1 // 随机任务数量
+    const taskCount = Math.floor(Math.random() * maxTasksPerStage) + 1
     const tasks = []
 
     for (let j = 0; j < taskCount; j++) {
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
index f57c75958..5c368286c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { reactive, ref, toRefs } from 'vue'
+  import { computed, reactive, ref, toRefs } from 'vue'
   import { getRepoList, updateRepo } from '@/api/repo'
   import type { RepoVO } from '@/api/repo/types'
   import { message, type FormInstance, type TableColumnType } from 'ant-design-vue'
@@ -27,31 +27,32 @@
   const { t } = useI18n()
   const open = ref(false)
   const loading = ref(false)
-  const columns: TableColumnType[] = [
+  const formRef = ref<FormInstance>()
+  const form = reactive({
+    list: [] as RepoVO[]
+  })
+  const { list } = toRefs(form)
+
+  const columns = computed((): TableColumnType[] => [
     {
-      title: '名称',
+      title: t('common.name'),
       dataIndex: 'name',
       key: 'name',
       ellipsis: true
     },
     {
-      title: '架构',
+      title: t('common.arch'),
       dataIndex: 'arch',
       key: 'arch',
       ellipsis: true
     },
     {
-      title: '地址',
+      title: t('common.base_url'),
       dataIndex: 'baseUrl',
       key: 'baseUrl',
       ellipsis: true
     }
-  ]
-  const formRef = ref<FormInstance>()
-  const form = reactive({
-    list: [] as RepoVO[]
-  })
-  const { list } = toRefs(form)
+  ])
 
   const handleOpen = () => {
     open.value = true
@@ -124,7 +125,7 @@
                 label=" "
                 :colon="false"
                 :name="['list', index, 'baseUrl']"
-                :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]"
+                :rules="[{ required: true, message: $t('common.enter_error'), trigger: 'blur' }]"
               >
                 <a-input v-model:value="record[column.key]" />
               </a-form-item>
@@ -132,7 +133,7 @@
           </template>
         </a-table>
       </a-form>
-      <a-typography-text class="set-source-tip" type="danger">*注: 源地址的改动对所有集群生效</a-typography-text>
+      <a-typography-text class="set-source-tip" type="danger">{{ `*${$t('common.note')}` }}</a-typography-text>
     </a-modal>
   </div>
 </template>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 1ec25eb41..a00927e3d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -19,13 +19,17 @@
 
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
-  import { computed, ref } from 'vue'
+  import { computed, ref, shallowRef } from 'vue'
   import ClusterBase from './components/cluster-base.vue'
   import ComponentInfo from './components/component-info.vue'
   import HostConfig from './components/host-config.vue'
   import CheckWorkflow from './components/check-workflow.vue'
   import { useI18n } from 'vue-i18n'
-  import { ClusterCommandReq, Command, CommandLevel, CommandRequest } from '@/api/command/types'
+  import { getInstalledStatus, installDependencies } from '@/api/hosts'
+  import { message } from 'ant-design-vue'
+  import { InstalledStatusVO, Status } from '@/api/hosts/types'
+  import { Command, CommandLevel, CommandRequest } from '@/api/command/types'
+  import { execCommand } from '@/api/command'
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
@@ -35,7 +39,18 @@
     command: Command.Add,
     commandLevel: CommandLevel.Cluster
   })
+  const installing = ref(false)
   const current = ref(0)
+  const stepData = ref([{}, {}, []])
+  const installStatus = shallowRef<InstalledStatusVO[]>([])
+  const hasUnknowHost = computed(() => (stepData.value[2] as any[]).every((v) => v.status === Status.Success))
+  const allInstallSuccess = computed(
+    () =>
+      installStatus.value.length != 0 &&
+      installStatus.value.every((v) => v.status === Status.Success) &&
+      hasUnknowHost.value
+  )
+  const isInstall = computed(() => current.value === 2)
   const steps = computed(() => [
     {
       title: t('cluster.cluster_management')
@@ -65,9 +80,17 @@
     }
   })
 
-  const updateCommandRequest = (value: unknown) => {
-    if (current.value === 0) {
-      commandRequest.value.clusterCommand = value as ClusterCommandReq
+  const updateData = (val: unknown) => {
+    stepData.value[current.value] = val as any
+  }
+
+  const addCluster = async () => {
+    try {
+      commandRequest.value.clusterCommand = stepData.value[0] as any
+      commandRequest.value.clusterCommand!.hosts = stepData.value[2] as any[]
+      await execCommand(commandRequest.value)
+    } catch (error) {
+      console.log('error :>> ', error)
     }
   }
 
@@ -76,22 +99,83 @@
       current.value = current.value - 1
     }
   }
-  const nextStep = async () => {
-    if (!compRef.value?.check) {
-      if (current.value < stepsLimit.value) {
-        current.value = current.value + 1
+
+  const nextStepPre = async () => {
+    if (current.value === 0) {
+      const check = await compRef.value.check()
+      if (check) {
+        nextStep()
       }
+    } else if (current.value === 2) {
+      !allInstallSuccess.value ? await resolveInstallDependencies() : nextStep()
     } else {
-      const res = await compRef.value?.check()
-      if (res !== -1) {
-        updateCommandRequest(res)
-        if (current.value < stepsLimit.value) {
-          current.value = current.value + 1
-        }
+      nextStep()
+    }
+  }
+
+  const nextStep = async () => {
+    current.value === 2 && addCluster()
+    if (current.value < stepsLimit.value) {
+      current.value = current.value + 1
+    }
+  }
+
+  const resolveInstallDependencies = async () => {
+    if ((stepData.value[2] as any[]).length == 0) {
+      message.error(t('host.uninstallable'))
+      return
+    }
+    try {
+      installing.value = true
+      const data = await installDependencies(stepData.value[current.value])
+      data && pollUntilSuccess()
+    } catch (error) {
+      installing.value = false
+      console.log('error :>> ', error)
+    }
+  }
+
+  const recordInstalledStatus = async () => {
+    try {
+      const data = await getInstalledStatus()
+      installStatus.value = data
+      stepData.value[current.value] = mergeByHostname(stepData.value[current.value] as any[], data)
+      const allResolved = data.every((item) => item.status != Status.Installing)
+      if (allResolved) {
+        return true
+      } else {
+        return false
       }
+    } catch (error) {
+      console.log('error :>> ', error)
     }
   }
 
+  const pollUntilSuccess = (interval: number = 2000): void => {
+    const intervalId = setInterval(async () => {
+      const result = await recordInstalledStatus()
+      if (result) {
+        installing.value = false
+        clearInterval(intervalId)
+      }
+    }, interval)
+  }
+
+  const mergeByHostname = (arr1: any[], arr2: any[]): any[] => {
+    const mergedMap = new Map<string, any>()
+    for (const item of arr1) {
+      mergedMap.set(item.hostname, { ...item })
+    }
+    for (const item of arr2) {
+      if (mergedMap.has(item.hostname)) {
+        mergedMap.set(item.hostname, { ...mergedMap.get(item.hostname), ...item })
+      } else {
+        mergedMap.set(item.hostname, { ...item })
+      }
+    }
+    return Array.from(mergedMap.values())
+  }
+
   const onSave = () => {
     menuStore.updateSiderMenu()
   }
@@ -99,7 +183,7 @@
 
 <template>
   <div class="cluster-create">
-    {{ commandRequest }}
+    {{ stepData }}
     <header-card>
       <div class="steps-wrp">
         <a-steps :current="current" :items="steps" />
@@ -112,16 +196,23 @@
           <section :class="{ 'step-content': current < stepsLimit }"> </section>
         </div>
       </template>
-      <component :is="getCompName" ref="compRef" :command-request="commandRequest" />
+      <!-- <keep-alive> -->
+      <component :is="getCompName" ref="compRef" :step-data="stepData[current]" @update-data="updateData" />
+      <!-- </keep-alive> -->
       <div class="step-action">
         <a-space>
           <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
           <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="previousStep">
             {{ $t('common.prev') }}
           </a-button>
-          <a-button v-show="current >= 0 && current <= stepsLimit - 1" type="primary" @click="nextStep">
-            {{ $t('common.next') }}
-          </a-button>
+          <template v-if="current >= 0 && current <= stepsLimit - 1">
+            <a-button v-if="isInstall && !allInstallSuccess" type="primary" :disabled="installing" @click="nextStepPre">
+              {{ $t('cluster.install_dependencies') }}
+            </a-button>
+            <a-button v-else type="primary" @click="nextStepPre">
+              {{ $t('common.next') }}
+            </a-button>
+          </template>
           <a-button v-show="current === stepsLimit" type="primary" @click="onSave">{{ $t('common.done') }}</a-button>
         </a-space>
       </div>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
index 6791a7cee..ed4dcb883 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -18,55 +18,93 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue'
-  import type { AuthorizedPlatform } from '@/api/llm-config/types'
-  // import { message } from 'ant-design-vue'
-  // import { useI18n } from 'vue-i18n'
+  import { computed, h, ref, watch } from 'vue'
+  import { useI18n } from 'vue-i18n'
   import type { HostAdd } from '@/api/hosts/types'
   import { FormItemState } from '@/components/common/auto-form/types'
-  import { UploadOutlined } from '@ant-design/icons-vue'
+  import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
+  import { parseHostNamesAsPatternExpression } from '@/utils/array'
+  import { message, Modal } from 'ant-design-vue'
+  import { useLocaleStore } from '@/store/locale'
+  import { storeToRefs } from 'pinia'
+  import type { UploadProps } from 'ant-design-vue'
+  import { uploadFile } from '@/api/upload-file'
+  import { Rule } from 'ant-design-vue/es/form'
+
   enum Mode {
     EDIT = 'cluster.edit_host',
     ADD = 'cluster.add_host'
   }
 
-  // interface Emits {
-  //   (event: 'onOk'): void
-  // }
+  interface Emits {
+    (event: 'onOk', type: keyof typeof Mode, value: HostAdd): void
+  }
 
-  // const emits = defineEmits<Emits>()
-  // const { t } = useI18n()
+  const emits = defineEmits<Emits>()
+  const { t } = useI18n()
+  const localeStore = useLocaleStore()
+  const { locale } = storeToRefs(localeStore)
   const open = ref(false)
   const mode = ref<keyof typeof Mode>('ADD')
   const hiddenItems = ref<string[]>([])
   const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
-  const formValue = ref<HostAdd>({})
-  const fileList = ref()
-  // const isEdit = computed(() => mode.value === 'EDIT')
+  const formValue = ref<HostAdd & { hostname?: string }>({})
+  const isEdit = computed(() => mode.value === 'EDIT')
+
+  const checkPassword = async (_rule: Rule, value: string) => {
+    if (!value) {
+      return Promise.reject(t('common.enter_error', [`${t('host.confirm_password')}`.toLowerCase()]))
+    }
+    if (value != formValue.value?.sshKeyPassword) {
+      return Promise.reject(t('common.password_not_match'))
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  const checkSshKeyPassword = async (_rule: Rule, value: string) => {
+    if (value != formValue.value?.sshKeyPassword) {
+      return Promise.reject(t('host.key_password_not_match'))
+    } else {
+      return Promise.resolve()
+    }
+  }
 
   const formItemsForPassword = computed((): FormItemState[] => [
     {
-      type: 'input',
+      type: 'inputPassword',
       field: 'sshKeyPassword',
       formItemProps: {
         name: 'sshKeyPassword',
-        label: '密码',
-        rules: [{ required: true, message: '密码', trigger: 'blur' }]
+        label: t('host.password_auth'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('host.password_auth')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.password_auth')}`.toLowerCase()])
       }
     },
     {
-      type: 'input',
+      type: 'inputPassword',
       field: 'sshKeyPasswordAgain',
       formItemProps: {
         name: 'sshKeyPasswordAgain',
-        label: '确认密码',
-        rules: [{ required: true, message: '确认密码', trigger: 'blur' }]
+        label: t('host.confirm_password'),
+        rules: [
+          {
+            required: true,
+            validator: checkPassword,
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.confirm_password')}`.toLowerCase()])
       }
     }
   ])
@@ -77,13 +115,19 @@
       field: 'inputType',
       defaultValue: '1',
       defaultOptionsMap: [
-        { value: '1', label: '文件' },
-        { value: '2', label: '文本' }
+        { value: '1', label: t('host.file') },
+        { value: '2', label: t('host.text') }
       ],
       formItemProps: {
         name: 'inputType',
-        label: '输入方式',
-        rules: [{ required: true, message: '输入方式', trigger: 'blur' }]
+        label: t('host.input_method'),
+        rules: [
+          {
+            required: true,
+            message: t('common.select_error', [`${t('host.input_method')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       }
     },
 
@@ -93,7 +137,14 @@
       slot: 'sshKeyFilenameSlot',
       formItemProps: {
         name: 'sshKeyFilename',
-        label: '密钥文件'
+        label: t('host.key_file'),
+        rules: [
+          {
+            required: true,
+            message: t('common.add_error', [`${t('host.key_file')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       }
     },
     {
@@ -101,11 +152,13 @@
       field: 'sshKeyString',
       formItemProps: {
         name: 'sshKeyString',
-        label: '密钥文本',
-        rules: [{ required: true, message: '密钥文本', trigger: 'blur' }]
+        label: t('host.key_text'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.key_text')}`.toLowerCase()]), trigger: 'blur' }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.key_text')}`.toLowerCase()])
       }
     },
     {
@@ -113,10 +166,10 @@
       field: 'keyPassword',
       formItemProps: {
         name: 'keyPassword',
-        label: '密钥口令'
+        label: t('host.key_password')
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.key_password')}`.toLowerCase()])
       }
     },
     {
@@ -124,10 +177,17 @@
       field: 'keyPasswordAgain',
       formItemProps: {
         name: 'keyPasswordAgain',
-        label: '确认口令'
+        label: t('host.confirm_key_password'),
+        rules: [
+          {
+            required: false,
+            validator: checkSshKeyPassword,
+            trigger: 'blur'
+          }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.confirm_key_password')}`.toLowerCase()])
       }
     }
   ])
@@ -137,11 +197,14 @@
       field: 'sshUser',
       formItemProps: {
         name: 'sshUser',
-        label: '用户名',
-        rules: [{ required: true, message: '用户名', trigger: 'blur' }]
+        label: t('host.username'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.username')}`.toLowerCase()]), trigger: 'blur' }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        disabled: isEdit.value,
+        placeholder: t('common.enter_error', [`${t('host.username')}`.toLowerCase()])
       }
     },
     {
@@ -149,27 +212,36 @@
       field: 'authType',
       defaultValue: '1',
       defaultOptionsMap: [
-        { value: '1', label: '密码' },
-        { value: '2', label: '密钥' },
-        { value: '3', label: '无认证' }
+        { value: '1', label: t('host.password_auth') },
+        { value: '2', label: t('host.key_auth') },
+        { value: '3', label: t('host.no_auth') }
       ],
       formItemProps: {
         name: 'authType',
-        label: '认证方式',
-        rules: [{ required: true, message: '认证方式', trigger: 'blur' }]
+        label: t('host.auth_method'),
+        rules: [
+          {
+            required: true,
+            message: t('common.select_error', [`${t('host.auth_method')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
       }
     },
 
     {
-      type: 'textarea',
-      field: 'hostnames',
+      type: mode.value == 'ADD' ? 'textarea' : 'input',
+      field: 'hostname',
       formItemProps: {
-        name: 'hostnames',
-        label: '主机名',
-        rules: [{ required: true, message: '主机名', trigger: 'blur' }]
+        name: 'hostname',
+        label: t('host.hostname'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.hostname')}`.toLowerCase()]), trigger: 'blur' }
+        ]
       },
       controlProps: {
-        placeholder: '请输入'
+        disabled: isEdit.value,
+        placeholder: t('common.enter_error', [`${t('host.hostname')}`.toLowerCase()])
       }
     },
 
@@ -179,10 +251,11 @@
       slot: 'agentDirSlot',
       formItemProps: {
         name: 'agentDir',
-        label: 'Agent路径'
+        label: t('host.agent_path')
       },
       controlProps: {
-        placeholder: '请输入'
+        disabled: isEdit.value,
+        placeholder: t('common.enter_error', [`${t('host.agent_path')}`.toLowerCase()])
       }
     },
     {
@@ -190,10 +263,10 @@
       field: 'sshPort',
       formItemProps: {
         name: 'sshPort',
-        label: 'SSH端口'
+        label: t('host.ssh_port')
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.ssh_port')}`.toLowerCase()])
       }
     },
     {
@@ -202,21 +275,21 @@
       slot: 'grpcPortSlot',
       formItemProps: {
         name: 'grpcPort',
-        label: 'gRPC端口'
+        label: t('host.grpc_port')
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.grpc_port')}`.toLowerCase()])
       }
     },
     {
       type: 'textarea',
-      field: 'remark',
+      field: 'desc',
       formItemProps: {
-        name: 'remark',
-        label: '备注'
+        name: 'desc',
+        label: t('host.description')
       },
       controlProps: {
-        placeholder: '请输入'
+        placeholder: t('common.enter_error', [`${t('host.description')}`.toLowerCase()])
       }
     }
   ])
@@ -250,35 +323,146 @@
     }
   )
 
-  const handleOpen = async (payload?: AuthorizedPlatform) => {
+  const handleOpen = async (type: keyof typeof Mode, payload?: HostAdd) => {
     open.value = true
-    mode.value = payload ? 'EDIT' : 'ADD'
-    Object.assign(formValue.value, {
-      authType: '1',
-      inputType: '1'
-    })
+    mode.value = type
+    if (payload) {
+      formValue.value = Object.assign(formValue.value, { ...payload })
+    } else {
+      Object.assign(formValue.value, {
+        authType: '1',
+        inputType: '1'
+      })
+    }
   }
 
   const handleOk = async () => {
     const validate = await autoFormRef.value?.getFormValidation()
     if (!validate) return
-    console.log('object :>> ', formValue.value)
-    // const res = await addHost()
-    // const api = isEdit.value ? llmConfigStore.updateAuthPlatform : llmConfigStore.addAuthorizedPlatform
-    // const success = await api()
-    // if (success) {
-    //   const text = isEdit.value ? 'common.update_success' : 'common.created'
-    //   message.success(t(text))
-    //   handleCancel()
-    //   emits('onOk')
-    // }
+    try {
+      if (!isEdit.value) {
+        const confirmStatus = await showHosts()
+        if (confirmStatus) {
+          emits('onOk', mode.value, formValue.value)
+          handleCancel()
+        }
+      } else {
+        emits('onOk', mode.value, formValue.value)
+        handleCancel()
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  const createHostNameEls = (list: string[]) => {
+    const elStyles = {
+      contentStyle: {
+        marginInlineStart: '2.125rem',
+        width: '100%',
+        maxHeight: '31.25rem',
+        overflow: 'auto'
+      },
+      itemStyle: { margin: '0.625rem' },
+      iconWrpStyle: {
+        fontSize: '1.375rem',
+        fontWeight: 600,
+        color: 'green',
+        marginInlineEnd: '0.75rem'
+      },
+      titleStyle: {
+        fontSize: '1rem',
+        fontWeight: 600
+      },
+      redfIconStyle: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }
+    const items = list.map((item: string, idx: number) => {
+      return h('li', { key: idx, style: elStyles.itemStyle }, item)
+    })
+    const iconWrpStyle = h(
+      'span',
+      {
+        style: elStyles.iconWrpStyle
+      },
+      [h(CheckCircleOutlined)]
+    )
+    const replaceTitle = h('span', { style: elStyles.titleStyle }, `${t('cluster.show_hosts_resolved')}`)
+    const reDefineIcon = h('div', { style: elStyles.redfIconStyle }, [iconWrpStyle, replaceTitle])
+    const box = h(
+      'div',
+      {
+        style: elStyles.contentStyle
+      },
+      items
+    )
+
+    return { box, reDefineIcon }
+  }
+
+  const showHosts = (): Promise<boolean> => {
+    const hostList = parseHostNamesAsPatternExpression(formValue.value.hostname as string)
+    const { box: content, reDefineIcon: icon } = createHostNameEls(hostList)
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: '',
+        icon,
+        centered: true,
+        width: '31.25rem',
+        content,
+        onOk() {
+          formValue.value.hostnames = hostList
+          resolve(true)
+        },
+        onCancel() {
+          resolve(false)
+          Modal.destroyAll()
+        }
+      })
+    })
   }
 
   const handleCancel = () => {
-    autoFormRef.value?.resetForm()
+    formValue.value = {
+      authType: '1',
+      inputType: '1'
+    }
     open.value = false
   }
 
+  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    const isText = file.type === 'text/plain'
+    const checkLimitSize = file.size / 1024 <= 10
+    if (!isText) {
+      message.error(t('common.file_type_error'))
+      return false
+    }
+    if (!checkLimitSize) {
+      message.error(t('common.file_size_error'))
+      return false
+    }
+    return true
+  }
+
+  const customRequest = async (options: { file: any; onSuccess: any; onError: any }) => {
+    const { file, onSuccess, onError } = options
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      const data = await uploadFile(formData)
+      formValue.value!.sshKeyFilename = data
+      onSuccess(data, file)
+      message.success(t('common.upload_success'))
+    } catch (error) {
+      onError(error)
+      message.error(t('common.upload_failed'))
+    }
+  }
+
+  const fileList = ref()
+
   defineExpose({
     handleOpen
   })
@@ -288,7 +472,7 @@
   <div class="add-host">
     <a-modal
       :open="open"
-      :width="500"
+      :width="600"
       :title="Mode[mode] && $t(Mode[mode])"
       :mask-closable="false"
       :centered="true"
@@ -299,16 +483,24 @@
       <auto-form
         ref="autoFormRef"
         v-model:form-value="formValue"
+        :label-col="{
+          span: locale === 'zh_CN' ? 5 : 7
+        }"
         :hidden-items="hiddenItems"
         :show-button="false"
         :form-items="filterFormItems"
       >
         <template #sshKeyFilenameSlot="{ item }">
           <a-form-item v-bind="item.formItemProps">
-            <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
+            <a-upload
+              :file-list="fileList"
+              :before-upload="beforeUpload"
+              :custom-request="customRequest"
+              :show-upload-list="false"
+            >
               <a-button>
                 <upload-outlined></upload-outlined>
-                上传文件
+                {{ $t('common.upload_file') }}
               </a-button>
             </a-upload>
           </a-form-item>
diff --git a/bigtop-manager-ui/src/store/llm-config/config.ts b/bigtop-manager-ui/src/store/llm-config/config.ts
index 7aa767d5a..e2e735d3b 100644
--- a/bigtop-manager-ui/src/store/llm-config/config.ts
+++ b/bigtop-manager-ui/src/store/llm-config/config.ts
@@ -92,13 +92,13 @@ export function useFormItemConfig() {
         rules: [
           {
             required: true,
-            message: t('common.enter_error', [t('llmConfig.desc')]),
+            message: t('common.enter_error', [t('llmConfig.desc').toLowerCase()]),
             trigger: 'blur'
           }
         ]
       },
       controlProps: {
-        placeholder: t('common.enter_error', [t('llmConfig.desc')])
+        placeholder: t('common.enter_error', [t('llmConfig.desc').toLowerCase()])
       }
     }
   ])
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index 3be3f4d38..ba9b37551 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -75,3 +75,9 @@ export const getRandomFromTimestamp = (len: number = 6) => {
 export const formatTime = (time: string | undefined, formatRule: string = 'YYYY-MM-DD HH:mm:ss') => {
   return typeof time === 'string' && dayjs(time).tz(dayjs.tz.guess(), true).format(formatRule)
 }
+
+export function generateRandomId(length = 8) {
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2)
+}

From 7515f8ea89be73761682a59862e5df7289fe2924 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 10:04:34 +0800
Subject: [PATCH 29/39] feat: Update api of jobs

---
 bigtop-manager-ui/src/api/job/index.ts        | 27 ++++++++++++-------
 bigtop-manager-ui/src/api/job/types.ts        | 17 +++++++-----
 .../pages/cluster-manage/cluster/service.vue  |  3 +++
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/bigtop-manager-ui/src/api/job/index.ts b/bigtop-manager-ui/src/api/job/index.ts
index 3ce1ebda3..c7aaa0520 100644
--- a/bigtop-manager-ui/src/api/job/index.ts
+++ b/bigtop-manager-ui/src/api/job/index.ts
@@ -17,7 +17,14 @@
  * under the License.
  */
 import request from '@/api/request.ts'
-import type { JobParams, Job, JobList, Stage, Task, TaskLogParams, TaskParams } from './types'
+import type { JobParams, JobList, TaskLogParams, TaskParams, JobVO, StageVO, TaskVO } from './types'
+
+export const retryJob = (pathParams: JobParams): Promise<JobVO> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/retry`
+  })
+}
 
 export const getJobList = (clusterId: number): Promise<JobList> => {
   return request({
@@ -26,30 +33,30 @@ export const getJobList = (clusterId: number): Promise<JobList> => {
   })
 }
 
-export const retryJob = (params: JobParams): Promise<Job[]> => {
+export const getJobDetails = (pathParams: JobParams): Promise<JobVO> => {
   return request({
-    method: 'post',
-    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/retry`
+    method: 'get',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}`
   })
 }
 
-export const getStageList = (params: JobParams): Promise<Stage[]> => {
+export const getStageList = (pathParams: JobParams): Promise<StageVO[]> => {
   return request({
     method: 'get',
-    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages`
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages`
   })
 }
 
-export const getTaskList = (params: TaskParams): Promise<Task[]> => {
+export const getTaskList = (pathParams: TaskParams): Promise<TaskVO[]> => {
   return request({
     method: 'get',
-    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks`
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks`
   })
 }
 
-export const getTaskLog = (params: TaskLogParams): Promise<string[]> => {
+export const getTaskLog = (pathParams: TaskLogParams): Promise<string[]> => {
   return request({
     method: 'get',
-    url: `/clusters/${params.clusterId}/jobs/${params.jobId}/stages/${params.stageId}/tasks/${params.taskId}/log`
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks/${pathParams.taskId}/log`
   })
 }
diff --git a/bigtop-manager-ui/src/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 7f8282fbe..09017f9bd 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -19,34 +19,39 @@
 
 import type { PageVO } from '@/api/types'
 
-export type JobList = PageVO<Job>
-export type StageList = PageVO<Stage>
+export type JobList = PageVO<JobVO>
+export type StageList = PageVO<StageVO>
 export type JobParams = { clusterId: number; jobId: number }
 export type TaskParams = JobParams & { stageId: number }
 export type TaskLogParams = TaskParams & { taskId: number }
 
-export interface Job {
+export interface JobVO {
   createTime?: string
   id?: number
   name?: string
+  stages?: StageVO[]
   state?: string
   updateTime?: string
+  [property: string]: any
 }
 
-export interface Stage {
+export interface StageVO {
   createTime?: string
   id?: number
   name?: string
   order?: number
   state?: string
-  tasks?: Task[]
+  tasks?: TaskVO[]
   updateTime?: string
+  [property: string]: any
 }
-export interface Task {
+
+export interface TaskVO {
   createTime?: string
   hostname?: string
   id?: number
   name?: string
   state?: string
   updateTime?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 4a4c1955d..007a9cb21 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -209,6 +209,9 @@
     }
     &-restart-status {
       @include flexbox($align: center, $gap: 6px);
+      .dot {
+        margin-top: 2px;
+      }
     }
     &-icon {
       flex-shrink: 0;

From 8fa772fab8accf726c807a8afafd3a9982cdff77 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 16:12:13 +0800
Subject: [PATCH 30/39] feat: Update job details display page for new clusters

---
 bigtop-manager-ui/src/api/command/index.ts    |   4 +-
 bigtop-manager-ui/src/api/command/types.ts    |  10 +-
 bigtop-manager-ui/src/api/hosts/index.ts      |   6 +-
 bigtop-manager-ui/src/api/hosts/types.ts      |   2 +-
 bigtop-manager-ui/src/api/job/types.ts        |  16 ++-
 .../svg/{uninstall.svg => canceled.svg}       |   0
 .../svg/{loading_light.svg => processing.svg} |   0
 .../cluster/components/check-workflow.vue     | 132 ++++++++++++++----
 .../cluster/components/cluster-base.vue       |   3 +-
 .../cluster/components/component-info.vue     |   8 +-
 .../cluster/components/host-config.vue        |  26 ++--
 .../cluster/components/set-source.vue         |   2 +-
 .../pages/cluster-manage/cluster/create.vue   |  75 ++++++----
 .../src/pages/cluster-manage/hosts/create.vue |  15 +-
 bigtop-manager-ui/src/store/cluster/index.ts  |   3 +-
 bigtop-manager-ui/src/store/menu/index.ts     |   5 +-
 16 files changed, 212 insertions(+), 95 deletions(-)
 rename bigtop-manager-ui/src/assets/images/svg/{uninstall.svg => canceled.svg} (100%)
 rename bigtop-manager-ui/src/assets/images/svg/{loading_light.svg => processing.svg} (100%)

diff --git a/bigtop-manager-ui/src/api/command/index.ts b/bigtop-manager-ui/src/api/command/index.ts
index 01ac90c6d..8e84df0d7 100644
--- a/bigtop-manager-ui/src/api/command/index.ts
+++ b/bigtop-manager-ui/src/api/command/index.ts
@@ -18,9 +18,9 @@
  */
 
 import request from '@/api/request.ts'
-import { CommandRequest } from '@/api/command/types.ts'
+import { CommandRequest, CommandVO } from '@/api/command/types.ts'
 
-export const execCommand = (data: any): Promise<CommandRequest> => {
+export const execCommand = (data: CommandRequest): Promise<CommandVO> => {
   return request({
     method: 'post',
     url: '/command',
diff --git a/bigtop-manager-ui/src/api/command/types.ts b/bigtop-manager-ui/src/api/command/types.ts
index b6579a72f..30f599906 100644
--- a/bigtop-manager-ui/src/api/command/types.ts
+++ b/bigtop-manager-ui/src/api/command/types.ts
@@ -29,8 +29,6 @@ export interface CommandRequest {
   [property: string]: any
 }
 
-export type CommandRequestKeys = keyof CommandRequest
-
 export interface ClusterCommandReq {
   desc?: string
   displayName: string
@@ -44,7 +42,7 @@ export interface ClusterCommandReq {
 
 export interface HostReq {
   agentDir?: string
-  authType?: number
+  authType?: number | string
   clusterId?: number
   desc?: string
   grpcPort?: number
@@ -133,3 +131,9 @@ export interface AttrsReq {
   type?: string
   [property: string]: any
 }
+
+export interface CommandVO {
+  id?: number
+  state?: string
+  [property: string]: any
+}
diff --git a/bigtop-manager-ui/src/api/hosts/index.ts b/bigtop-manager-ui/src/api/hosts/index.ts
index 242ab99b0..f970167ea 100644
--- a/bigtop-manager-ui/src/api/hosts/index.ts
+++ b/bigtop-manager-ui/src/api/hosts/index.ts
@@ -18,7 +18,7 @@
  */
 
 import request from '@/api/request.ts'
-import { HostAdd, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
+import { HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
 
 export const getHosts = (): Promise<HostVOList> => {
   return request({
@@ -27,7 +27,7 @@ export const getHosts = (): Promise<HostVOList> => {
   })
 }
 
-export const addHost = (data: HostAdd): Promise<HostVO> => {
+export const addHost = (data: HostParams): Promise<HostVO> => {
   return request({
     method: 'post',
     url: '/hosts',
@@ -35,7 +35,7 @@ export const addHost = (data: HostAdd): Promise<HostVO> => {
   })
 }
 
-export const installDependencies = (data: HostAdd) => {
+export const installDependencies = (data: HostParams) => {
   return request({
     method: 'post',
     url: '/hosts/install-dependencies',
diff --git a/bigtop-manager-ui/src/api/hosts/types.ts b/bigtop-manager-ui/src/api/hosts/types.ts
index 16c1c0d27..519a3c29c 100644
--- a/bigtop-manager-ui/src/api/hosts/types.ts
+++ b/bigtop-manager-ui/src/api/hosts/types.ts
@@ -54,7 +54,7 @@ export interface HostVO {
   [property: string]: any
 }
 
-export interface HostAdd {
+export interface HostParams {
   agentDir?: string
   authType?: number | string // '1-password，2-key，3-no_auth',
   clusterId?: number
diff --git a/bigtop-manager-ui/src/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 09017f9bd..86e545554 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -25,12 +25,22 @@ export type JobParams = { clusterId: number; jobId: number }
 export type TaskParams = JobParams & { stageId: number }
 export type TaskLogParams = TaskParams & { taskId: number }
 
+export type StateType = keyof typeof State
+
+export enum State {
+  'Pending' = 'pending',
+  'Processing' = 'processing',
+  'Successful' = 'successful',
+  'Failed' = 'failed',
+  'Canceled' = 'canceled'
+}
+
 export interface JobVO {
   createTime?: string
   id?: number
   name?: string
   stages?: StageVO[]
-  state?: string
+  state?: StateType
   updateTime?: string
   [property: string]: any
 }
@@ -40,7 +50,7 @@ export interface StageVO {
   id?: number
   name?: string
   order?: number
-  state?: string
+  state?: StateType
   tasks?: TaskVO[]
   updateTime?: string
   [property: string]: any
@@ -51,7 +61,7 @@ export interface TaskVO {
   hostname?: string
   id?: number
   name?: string
-  state?: string
+  state?: StateType
   updateTime?: string
   [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/assets/images/svg/uninstall.svg b/bigtop-manager-ui/src/assets/images/svg/canceled.svg
similarity index 100%
rename from bigtop-manager-ui/src/assets/images/svg/uninstall.svg
rename to bigtop-manager-ui/src/assets/images/svg/canceled.svg
diff --git a/bigtop-manager-ui/src/assets/images/svg/loading_light.svg b/bigtop-manager-ui/src/assets/images/svg/processing.svg
similarity index 100%
rename from bigtop-manager-ui/src/assets/images/svg/loading_light.svg
rename to bigtop-manager-ui/src/assets/images/svg/processing.svg
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
index bbc9215c1..847ef1208 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -18,37 +18,115 @@
 -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { getCheckWorkflows } from './mock'
+  import { computed, onMounted, ref, shallowRef, toRefs } from 'vue'
+  import type { JobVO, StateType } from '@/api/job/types'
+  import { getJobDetails, retryJob } from '@/api/job'
+  import { CommandVO } from '@/api/command/types'
 
-  const activeKey = ref(['1', '2'])
-  const stages = ref(getCheckWorkflows(4, 5, 5))
-  const status = ['', 'success', 'error', 'loading', 'loading_light', 'uninstall']
+  const props = defineProps<{ stepData: CommandVO }>()
+  const emits = defineEmits(['updateData'])
+  const { stepData } = toRefs(props)
+  const activeKey = ref<number[]>([])
+  const jobDetail = ref<JobVO>({})
+  const spinning = ref(false)
+  const status = shallowRef<Record<StateType, string>>({
+    Pending: 'installing',
+    Processing: 'processing',
+    Failed: 'failed',
+    Canceled: 'canceled',
+    Successful: 'success'
+  })
+  const stages = computed(() => {
+    if (jobDetail.value.stages) {
+      return [...jobDetail.value.stages].sort((a, b) => a.order! - b.order!)
+    }
+    return []
+  })
+
+  const getJobInstanceDetails = async () => {
+    const { id: jobId } = stepData.value
+    if (jobId === undefined) {
+      return true
+    }
+    try {
+      const data = await getJobDetails({ jobId, clusterId: 0 })
+      jobDetail.value = data
+      activeKey.value = data.stages ? data.stages?.map((v) => v.id!) : []
+      emits('updateData', { ...stepData.value, ...data })
+      return ['Successful', 'Failed'].includes(data.state as StateType)
+    } catch (error) {
+      console.log('error :>> ', error)
+      return true
+    }
+  }
+
+  const handleRetryJob = async () => {
+    const { id: jobId } = stepData.value
+    if (jobId === undefined) {
+      return true
+    }
+    try {
+      await retryJob({ jobId, clusterId: 0 })
+      pollJobDetails(getJobInstanceDetails)
+    } catch (error) {
+      console.log('error :>> ', error)
+    }
+  }
+
+  const pollJobDetails = (execFunc: Function, interval: number = 200): void => {
+    let firstPoll = true
+    let firstPollCompleted = false
+    const intervalId = setInterval(async () => {
+      if (firstPoll) {
+        spinning.value = true
+        firstPoll = false
+      }
+      const result = await execFunc()
+      if (!firstPollCompleted) {
+        spinning.value = false
+        firstPollCompleted = true
+      }
+      if (result) {
+        clearInterval(intervalId)
+      }
+    }, interval)
+  }
+
+  onMounted(() => {
+    pollJobDetails(getJobInstanceDetails)
+  })
 </script>
 
 <template>
-  <div class="check-workflow">
-    <div class="retry">
-      <a-button type="link">{{ $t('common.retry') }}</a-button>
-    </div>
-    <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
-      <a-collapse-panel v-for="(stage, idx) in stages" :key="`${idx + 1}`">
-        <template #header>
-          <div class="stage-item">
-            <span>{{ stage.name }}</span>
-            <svg-icon :name="status[stage.status]"></svg-icon>
+  <a-spin :spinning="spinning">
+    <a-empty v-if="stages.length == 0" />
+    <div v-else class="check-workflow">
+      <div class="retry">
+        <a-button v-if="stepData.state === 'Failed'" type="link" @click="handleRetryJob">{{
+          $t('common.retry')
+        }}</a-button>
+      </div>
+      <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
+        <a-collapse-panel v-for="stage in stages" :key="stage.id">
+          <template #header>
+            <div class="stage-item">
+              <span>{{ stage.name }}</span>
+              <svg-icon :name="stage.state && status[stage.state]"></svg-icon>
+            </div>
+          </template>
+          <div v-for="task in stage.tasks" :key="task.id" class="task-item">
+            <span>{{ task.name }}</span>
+            <a-space :size="16">
+              <svg-icon :name="task.state && status[task.state]"></svg-icon>
+              <a-button v-if="task.state && !['Canceled', 'Pending'].includes(task.state)" type="link">
+                {{ $t('cluster.view_log') }}
+              </a-button>
+            </a-space>
           </div>
-        </template>
-        <div v-for="task in stage.tasks" :key="task.id" class="task-item">
-          <span>{{ task.name }}</span>
-          <a-space :size="16">
-            <svg-icon :name="status[task.status]"></svg-icon>
-            <a-button type="link">{{ $t('cluster.view_log') }}</a-button>
-          </a-space>
-        </div>
-      </a-collapse-panel>
-    </a-collapse>
-  </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </a-spin>
 </template>
 
 <style lang="scss" scoped>
@@ -76,7 +154,7 @@
   }
   .stage-item {
     @include flexbox($justify: space-between, $align: center);
-    padding-right: 68px;
+    padding-right: 65px;
   }
   .task-item {
     height: 45px;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index 1850e0276..f055ba19f 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -21,11 +21,12 @@
   import type { FormItemState } from '@/components/common/auto-form/types'
   import { computed, ref, shallowRef, toRefs, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
+  import type { ClusterCommandReq } from '@/api/command/types'
 
   const { t } = useI18n()
   const activeKey = ref(['1', '2'])
   const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
-  const props = defineProps<{ stepData: any }>()
+  const props = defineProps<{ stepData: ClusterCommandReq }>()
   const emits = defineEmits(['updateData'])
   const { stepData } = toRefs(props)
   const formLayout = computed(() => ({
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index 29501e18a..a32a3259f 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -31,6 +31,10 @@
   const stackStore = useStackStore()
   const { stacks } = storeToRefs(stackStore)
 
+  const data = ref<ServiceVO[]>([])
+  const stackSelected = ref('bigtop')
+  const setSourceRef = ref<InstanceType<typeof SetSource>>()
+  const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
   const columns = computed((): TableColumnType[] => [
     {
       title: '#',
@@ -66,10 +70,6 @@
     }
   ])
 
-  const data = ref<ServiceVO[]>([])
-  const stackSelected = ref('bigtop')
-  const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
-  const setSourceRef = ref<InstanceType<typeof SetSource>>()
   const { loading, paginationProps, onChange, resetState } = useBaseTable({
     columns: columns.value,
     rows: data.value
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index 923d501b0..75101ed2d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -20,13 +20,13 @@
 <script setup lang="ts">
   import { TableColumnType } from 'ant-design-vue'
   import { computed, reactive, ref, watch } from 'vue'
+  import { generateRandomId } from '@/utils/tools'
+  import { useI18n } from 'vue-i18n'
   import useBaseTable from '@/composables/use-base-table'
+  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
-  import { HostAdd } from '@/api/hosts/types'
-  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
-  import { generateRandomId } from '@/utils/tools'
-  import { useI18n } from 'vue-i18n'
+  import type { HostReq } from '@/api/command/types'
 
   type Key = string | number
   interface TableState {
@@ -35,9 +35,9 @@
     searchedColumn: string
   }
   const { t } = useI18n()
-  const props = defineProps<{ stepData: any }>()
+  const props = defineProps<{ stepData: HostReq[] }>()
   const emits = defineEmits(['updateData'])
-  const data = ref<HostAdd[]>([])
+  const data = ref<HostReq[]>([])
   const searchInputRef = ref()
   const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
   const state = reactive<TableState>({
@@ -144,7 +144,7 @@
     hostCreateRef.value?.handleOpen('ADD')
   }
 
-  const editHost = (row: HostAdd) => {
+  const editHost = (row: HostReq) => {
     hostCreateRef.value?.handleOpen('EDIT', row)
   }
 
@@ -158,7 +158,7 @@
     emits('updateData', res)
   }
 
-  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostAdd) => {
+  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostReq) => {
     if (type === 'ADD') {
       const items = item.hostnames?.map((v) => {
         return {
@@ -167,10 +167,10 @@
           hostname: v,
           status: 'INSTALLING'
         }
-      }) as HostAdd[]
+      }) as HostReq[]
       dataSource.value?.unshift(...items)
     } else {
-      const index = dataSource.value.findIndex((data: any) => data.key === item.key)
+      const index = dataSource.value.findIndex((data) => data.key === item.key)
       if (index !== -1) {
         dataSource.value[index] = item
       }
@@ -178,12 +178,12 @@
     updateStepData()
   }
 
-  const deleteHost = (row?: HostAdd) => {
+  const deleteHost = (row?: HostReq) => {
     if (!row?.key) {
       state.selectedRowKeys.length > 0 &&
-        (dataSource.value = dataSource.value?.filter((v: any) => !state.selectedRowKeys.includes(v.key)) || [])
+        (dataSource.value = dataSource.value?.filter((v) => !state.selectedRowKeys.includes(v.key)) || [])
     } else {
-      dataSource.value = dataSource.value?.filter((v: any) => row.key !== v.key)
+      dataSource.value = dataSource.value?.filter((v) => row.key !== v.key)
     }
     updateStepData()
   }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
index 5c368286c..4c8d996a6 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -20,9 +20,9 @@
 <script setup lang="ts">
   import { computed, reactive, ref, toRefs } from 'vue'
   import { getRepoList, updateRepo } from '@/api/repo'
-  import type { RepoVO } from '@/api/repo/types'
   import { message, type FormInstance, type TableColumnType } from 'ant-design-vue'
   import { useI18n } from 'vue-i18n'
+  import type { RepoVO } from '@/api/repo/types'
 
   const { t } = useI18n()
   const open = ref(false)
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index a00927e3d..b61d87243 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -20,16 +20,23 @@
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
   import { computed, ref, shallowRef } from 'vue'
-  import ClusterBase from './components/cluster-base.vue'
-  import ComponentInfo from './components/component-info.vue'
-  import HostConfig from './components/host-config.vue'
-  import CheckWorkflow from './components/check-workflow.vue'
   import { useI18n } from 'vue-i18n'
   import { getInstalledStatus, installDependencies } from '@/api/hosts'
   import { message } from 'ant-design-vue'
   import { InstalledStatusVO, Status } from '@/api/hosts/types'
-  import { Command, CommandLevel, CommandRequest } from '@/api/command/types'
   import { execCommand } from '@/api/command'
+  import ClusterBase from './components/cluster-base.vue'
+  import ComponentInfo from './components/component-info.vue'
+  import HostConfig from './components/host-config.vue'
+  import CheckWorkflow from './components/check-workflow.vue'
+  import {
+    ClusterCommandReq,
+    Command,
+    CommandLevel,
+    HostReq,
+    type CommandRequest,
+    type CommandVO
+  } from '@/api/command/types'
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
@@ -41,16 +48,18 @@
   })
   const installing = ref(false)
   const current = ref(0)
-  const stepData = ref([{}, {}, []])
+  const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
   const installStatus = shallowRef<InstalledStatusVO[]>([])
-  const hasUnknowHost = computed(() => (stepData.value[2] as any[]).every((v) => v.status === Status.Success))
+  const isInstall = computed(() => current.value === 2)
+  const stepsLimit = computed(() => steps.value.length - 1)
+  const hasUnknowHost = computed(() => stepData.value[2].every((v) => v.status === Status.Success))
   const allInstallSuccess = computed(
     () =>
       installStatus.value.length != 0 &&
       installStatus.value.every((v) => v.status === Status.Success) &&
       hasUnknowHost.value
   )
-  const isInstall = computed(() => current.value === 2)
+  const isDone = computed(() => ['Successful', 'Failed'].includes(stepData.value[stepData.value.length - 1].state))
   const steps = computed(() => [
     {
       title: t('cluster.cluster_management')
@@ -65,7 +74,6 @@
       title: t('cluster.create')
     }
   ])
-  const stepsLimit = computed(() => steps.value.length - 1)
   const getCompName = computed(() => {
     if (current.value === 0) {
       return ClusterBase
@@ -80,17 +88,22 @@
     }
   })
 
-  const updateData = (val: unknown) => {
-    stepData.value[current.value] = val as any
+  const updateData = (val: Partial<ClusterCommandReq> | any | HostReq[]) => {
+    stepData.value[current.value] = val
   }
 
-  const addCluster = async () => {
+  const createCluster = async () => {
     try {
-      commandRequest.value.clusterCommand = stepData.value[0] as any
-      commandRequest.value.clusterCommand!.hosts = stepData.value[2] as any[]
-      await execCommand(commandRequest.value)
+      commandRequest.value.clusterCommand = {
+        ...stepData.value[0],
+        displayName: stepData.value[0].name
+      } as ClusterCommandReq
+      commandRequest.value.clusterCommand.hosts = stepData.value[2]
+      stepData.value[stepData.value.length - 1] = await execCommand(commandRequest.value)
+      return true
     } catch (error) {
       console.log('error :>> ', error)
+      return false
     }
   }
 
@@ -100,28 +113,32 @@
     }
   }
 
-  const nextStepPre = async () => {
+  const prepareNextStep = async () => {
     if (current.value === 0) {
       const check = await compRef.value.check()
       if (check) {
         nextStep()
       }
     } else if (current.value === 2) {
-      !allInstallSuccess.value ? await resolveInstallDependencies() : nextStep()
+      if (!allInstallSuccess.value) {
+        await resolveInstallDependencies()
+      } else {
+        const isClusterExisting = await createCluster()
+        isClusterExisting && nextStep()
+      }
     } else {
       nextStep()
     }
   }
 
   const nextStep = async () => {
-    current.value === 2 && addCluster()
     if (current.value < stepsLimit.value) {
       current.value = current.value + 1
     }
   }
 
   const resolveInstallDependencies = async () => {
-    if ((stepData.value[2] as any[]).length == 0) {
+    if (stepData.value[2].length == 0) {
       message.error(t('host.uninstallable'))
       return
     }
@@ -139,7 +156,7 @@
     try {
       const data = await getInstalledStatus()
       installStatus.value = data
-      stepData.value[current.value] = mergeByHostname(stepData.value[current.value] as any[], data)
+      stepData.value[current.value] = mergeByHostname(stepData.value[current.value], data)
       const allResolved = data.every((item) => item.status != Status.Installing)
       if (allResolved) {
         return true
@@ -151,7 +168,7 @@
     }
   }
 
-  const pollUntilSuccess = (interval: number = 2000): void => {
+  const pollUntilSuccess = (interval: number = 1000): void => {
     const intervalId = setInterval(async () => {
       const result = await recordInstalledStatus()
       if (result) {
@@ -183,7 +200,6 @@
 
 <template>
   <div class="cluster-create">
-    {{ stepData }}
     <header-card>
       <div class="steps-wrp">
         <a-steps :current="current" :items="steps" />
@@ -196,9 +212,7 @@
           <section :class="{ 'step-content': current < stepsLimit }"> </section>
         </div>
       </template>
-      <!-- <keep-alive> -->
       <component :is="getCompName" ref="compRef" :step-data="stepData[current]" @update-data="updateData" />
-      <!-- </keep-alive> -->
       <div class="step-action">
         <a-space>
           <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
@@ -206,14 +220,21 @@
             {{ $t('common.prev') }}
           </a-button>
           <template v-if="current >= 0 && current <= stepsLimit - 1">
-            <a-button v-if="isInstall && !allInstallSuccess" type="primary" :disabled="installing" @click="nextStepPre">
+            <a-button
+              v-if="isInstall && !allInstallSuccess"
+              type="primary"
+              :disabled="installing"
+              @click="prepareNextStep"
+            >
               {{ $t('cluster.install_dependencies') }}
             </a-button>
-            <a-button v-else type="primary" @click="nextStepPre">
+            <a-button v-else type="primary" @click="prepareNextStep">
               {{ $t('common.next') }}
             </a-button>
           </template>
-          <a-button v-show="current === stepsLimit" type="primary" @click="onSave">{{ $t('common.done') }}</a-button>
+          <a-button v-show="current === stepsLimit && isDone" type="primary" @click="onSave">{{
+            $t('common.done')
+          }}</a-button>
         </a-space>
       </div>
     </main-card>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
index ed4dcb883..85ed4a0a7 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -20,16 +20,17 @@
 <script setup lang="ts">
   import { computed, h, ref, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import type { HostAdd } from '@/api/hosts/types'
   import { FormItemState } from '@/components/common/auto-form/types'
   import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
   import { parseHostNamesAsPatternExpression } from '@/utils/array'
   import { message, Modal } from 'ant-design-vue'
   import { useLocaleStore } from '@/store/locale'
   import { storeToRefs } from 'pinia'
-  import type { UploadProps } from 'ant-design-vue'
   import { uploadFile } from '@/api/upload-file'
   import { Rule } from 'ant-design-vue/es/form'
+  import { HostReq } from '@/api/command/types'
+  import type { UploadProps } from 'ant-design-vue'
+  import type { HostParams } from '@/api/hosts/types'
 
   enum Mode {
     EDIT = 'cluster.edit_host',
@@ -37,18 +38,18 @@
   }
 
   interface Emits {
-    (event: 'onOk', type: keyof typeof Mode, value: HostAdd): void
+    (event: 'onOk', type: keyof typeof Mode, value: HostReq): void
   }
 
-  const emits = defineEmits<Emits>()
   const { t } = useI18n()
+  const emits = defineEmits<Emits>()
   const localeStore = useLocaleStore()
-  const { locale } = storeToRefs(localeStore)
   const open = ref(false)
   const mode = ref<keyof typeof Mode>('ADD')
   const hiddenItems = ref<string[]>([])
   const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
-  const formValue = ref<HostAdd & { hostname?: string }>({})
+  const formValue = ref<HostReq & { hostname?: string }>({})
+  const { locale } = storeToRefs(localeStore)
   const isEdit = computed(() => mode.value === 'EDIT')
 
   const checkPassword = async (_rule: Rule, value: string) => {
@@ -323,7 +324,7 @@
     }
   )
 
-  const handleOpen = async (type: keyof typeof Mode, payload?: HostAdd) => {
+  const handleOpen = async (type: keyof typeof Mode, payload?: HostParams) => {
     open.value = true
     mode.value = type
     if (payload) {
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 5ba810a7c..b2477a683 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -29,7 +29,6 @@ export const useClusterStore = defineStore(
     const count = ref(0)
 
     const addCluster = async () => {
-      count.value = count.value + 1
       await loadClusters()
     }
 
@@ -44,7 +43,7 @@ export const useClusterStore = defineStore(
 
     const loadClusters = async () => {
       const data = await getClusterList()
-      clusters.value = data as unknown as ClusterVO[]
+      clusters.value = data
     }
 
     return {
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index 80877383c..7ad271fcc 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -168,6 +168,9 @@ export const useMenuStore = defineStore(
     }
   },
   {
-    persist: false
+    persist: {
+      storage: localStorage,
+      paths: ['siderMenus']
+    }
   }
 )

From 907a2d6fdbd0fee4e9a526a840fafe0523f5c13c Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 18:00:58 +0800
Subject: [PATCH 31/39] feat: Update cluster menu display in sidebar

---
 bigtop-manager-ui/src/layouts/index.vue      | 4 ++--
 bigtop-manager-ui/src/store/cluster/index.ts | 3 ++-
 bigtop-manager-ui/src/store/menu/index.ts    | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
index 7ea662b64..b381dbb8c 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -34,9 +34,9 @@
   const stackStore = useStackStore()
   const { headerSelectedKey, headerMenus, siderMenuSelectedKey, siderMenus } = storeToRefs(menuStore)
 
-  onMounted(() => {
+  onMounted(async () => {
     userStore.getUserInfo()
-    clusterStore.loadClusters()
+    await clusterStore.loadClusters()
     menuStore.setUpMenu()
     stackStore.loadStacks()
   })
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index b2477a683..5c8459c6d 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -29,6 +29,7 @@ export const useClusterStore = defineStore(
     const count = ref(0)
 
     const addCluster = async () => {
+      count.value = count.value + 1
       await loadClusters()
     }
 
@@ -43,7 +44,7 @@ export const useClusterStore = defineStore(
 
     const loadClusters = async () => {
       const data = await getClusterList()
-      clusters.value = data
+      clusters.value = data as ClusterVO[]
     }
 
     return {
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index 7ad271fcc..0cb1960c4 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -146,6 +146,7 @@ export const useMenuStore = defineStore(
 
     const setUpMenu = () => {
       setBaseRoutesMap()
+      updateSiderMenu()
     }
 
     const cleanUpMenu = () => {

From 4e14e81ee500428283413b9c34c746deaf1ef654 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 20:50:58 +0800
Subject: [PATCH 32/39] feat: Add status of cluster menu in sidebar

---
 bigtop-manager-ui/src/layouts/sider.vue       | 25 +++++++++++++++----
 .../cluster-manage/cluster/components/mock.ts |  9 ++-----
 bigtop-manager-ui/src/store/menu/index.ts     |  3 ++-
 bigtop-manager-ui/src/store/menu/types.ts     |  1 +
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 9ace43381..e4ee4f899 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { toRefs } from 'vue'
+  import { toRefs, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { RouteExceptions } from '@/enums'
   import { useMenuStore } from '@/store/menu'
@@ -34,10 +34,17 @@
     siderMenus: () => []
   })
 
+  type ClusterType = 1 | 2 | 3
+
   const { siderMenuSelectedKey, siderMenus } = toRefs(props)
   const router = useRouter()
   const menuStore = useMenuStore()
   const emits = defineEmits(['onSiderClick'])
+  const clusterStatus = ref<Record<ClusterType, string>>({
+    1: 'success',
+    2: 'error',
+    3: 'warning'
+  })
 
   const toggleActivatedIcon = (menuItem: MenuItem) => {
     const { key, icon } = menuItem
@@ -66,20 +73,28 @@
           :key="menuItem.key"
         >
           <template #icon>
-            <svg-icon :name="toggleActivatedIcon(menuItem)" />
+            <svg-icon style="height: 16px; width: 16px" :name="toggleActivatedIcon(menuItem)" />
           </template>
           <template #title>
             <span>{{ $t(menuItem.label) }}</span>
           </template>
           <a-menu-item v-for="child in menuItem.children" :key="child.key">
-            <span style="margin: 0 6px">{{ child.icon }}</span>
-            <span>{{ child.label }}</span>
+            <template #icon>
+              <div
+                style="height: 10px; margin-inline: 7px; display: flex; justify-content: center; align-items: flex-end"
+              >
+                <status-dot :size="8" :color="clusterStatus[child.status as ClusterType] as any" />
+              </div>
+            </template>
+            <div>
+              <span>{{ child.label }}</span>
+            </div>
           </a-menu-item>
         </a-sub-menu>
         <template v-else>
           <a-menu-item :key="menuItem.key">
             <template #icon>
-              <svg-icon :name="toggleActivatedIcon(menuItem)" />
+              <svg-icon style="height: 16px; width: 16px" :name="toggleActivatedIcon(menuItem)" />
             </template>
             <span>{{ $t(menuItem.label) }}</span>
           </a-menu-item>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index 96f0a067c..c88f7fdef 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -1,6 +1,5 @@
 export function generateTestData(count = 100) {
-  // 定义字段
-  const names = ['组件A', '组件B', '组件C', '组件D', '组件E']
+  const names = ['componentA', 'componentB', 'componentC', 'componentD', 'componentE']
   const versions = ['1.0.0', '2.3.1', '3.2.4', '4.0.0', '5.1.2']
   const compStacks = [
     'React, Redux, Webpack',
@@ -17,7 +16,6 @@ export function generateTestData(count = 100) {
     '这是一个前端开发框架'
   ]
 
-  // 生成测试数据
   const testData = Array.from({ length: count }, (_, i) => ({
     key: (i + 1).toString(),
     name: names[Math.floor(Math.random() * names.length)],
@@ -46,7 +44,7 @@ export function generateTableHostData(numRows = 100) {
       name: hostnames[Math.floor(Math.random() * hostnames.length)],
       system: `${systems}-${i}`,
       architecture: `${architecture}-${i}`,
-      componentCount: `${i}个组件`,
+      componentCount: `${i} components`,
       nodeName: nodeNames[Math.floor(Math.random() * nodeNames.length)],
       address: ipAddresses[Math.floor(Math.random() * ipAddresses.length)],
       remark: remarks[Math.floor(Math.random() * remarks.length)],
@@ -83,9 +81,6 @@ export function getCheckWorkflows(stageCount: number, maxTasksPerStage: number,
   return data
 }
 
-// Restart ? Required/Not required
-// 健康/不健康/未知
-
 export enum StatusColors {
   success = 'success',
   error = 'error',
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index 0cb1960c4..d3c3cccfc 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -92,7 +92,8 @@ export const useMenuStore = defineStore(
               key: `${item.key}/${v.displayName}/${v.id}`,
               label: v.displayName || '',
               title: v.displayName || '',
-              activeMenu: item.key
+              activeMenu: item.key,
+              status: v.status || 3
             }
           })
         }
diff --git a/bigtop-manager-ui/src/store/menu/types.ts b/bigtop-manager-ui/src/store/menu/types.ts
index fa5c94906..bf995ef30 100644
--- a/bigtop-manager-ui/src/store/menu/types.ts
+++ b/bigtop-manager-ui/src/store/menu/types.ts
@@ -23,5 +23,6 @@ export interface MenuItem {
   title: string
   name?: string
   activeMenu?: string
+  status?: number
   children?: MenuItem[]
 }

From 1a2ccd7200a95f9dc1f89ebe2674332f408d28c3 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 20:59:28 +0800
Subject: [PATCH 33/39] feat: Resolve typescript error

---
 bigtop-manager-ui/src/components/common/button-group/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index 11ae4104f..75b3f5813 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -51,7 +51,7 @@
 
 <template>
   <a-space :size="space" :wrap="true" :class="{ 'text-compact': $props.textCompact, 'btn-auto': $props.auto }">
-    <template v-for="(item, idx) in groups" :key="idx">
+    <template v-for="(item, _index) in groups" :key="_index">
       <a-dropdown v-if="item.dropdownMenu">
         <a-button
           :disabled="item.disabled"

From 152c7001aa9d25d9645b69e3ed73a9b965e5c2fa Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 21:52:58 +0800
Subject: [PATCH 34/39] feat: Resolve ut error

---
 .../src/composables/use-base-table.ts         |  3 +-
 .../cluster-manage/cluster/components/mock.ts | 19 +++++++
 .../pages/cluster-manage/cluster/overview.vue |  8 +--
 .../tests/__composables__/use-table.test.ts   | 49 ++++++++++++++-----
 4 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index 43051373d..2d359b4b9 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -66,7 +66,8 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
       total: dataSource.value.length || 0,
       size: 'small',
       showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50']
+      pageSizeOptions: ['10', '20', '30', '40', '50'],
+      showTotal: (total) => `${t('common.total', [total])}`
     }
   }
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
index c88f7fdef..4ccb391ac 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -1,3 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 export function generateTestData(count = 100) {
   const names = ['componentA', 'componentB', 'componentC', 'componentD', 'componentE']
   const versions = ['1.0.0', '2.3.1', '3.2.4', '4.0.0', '5.1.2']
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index a9d826e8a..54ab46a82 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -32,7 +32,7 @@
     memory: '内存',
     coreCount: '核心数',
     diskSize: '磁盘大小',
-    creater: '创建人'
+    creator: '创建人'
   } as any
 
   const baseInfo = {
@@ -44,7 +44,7 @@
     memory: '内存',
     coreCount: '15个核心',
     diskSize: '磁盘大小',
-    creater: '创建人'
+    creator: '创建人'
   } as any
 
   const serviceStack = [
@@ -208,7 +208,7 @@
               :key="time.text"
               tabindex="0"
               class="time-range"
-              :class="{ 'time-range-actived': currTimeRange === time.text }"
+              :class="{ 'time-range-activated': currTimeRange === time.text }"
               @click="handleTimeRange(time)"
             >
               {{ time.text }}
@@ -271,7 +271,7 @@
       &:hover {
         color: $color-primary-text-hover;
       }
-      &-actived {
+      &-activated {
         color: $color-primary-text;
       }
     }
diff --git a/bigtop-manager-ui/tests/__composables__/use-table.test.ts b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
index ec424d601..006a537f9 100644
--- a/bigtop-manager-ui/tests/__composables__/use-table.test.ts
+++ b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
@@ -16,11 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { describe, it, expect, vi } from 'vitest'
 import useBaseTable from '../../src/composables/use-base-table'
 import { withSetup } from '../test-util'
 
+// Mock useI18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, args?: any[]) => {
+      if (key === 'common.total') {
+        return `Total: ${args?.[0] || 0}`
+      }
+      return key
+    }
+  })
+}))
+
 describe('useBaseTable', () => {
   const columns = [{ title: 'Column 1' }]
   const rows = [{ id: 1, name: 'Item 1' }]
@@ -30,27 +41,38 @@ describe('useBaseTable', () => {
     expect(result.columnsProp.value).toEqual(columns)
     expect(result.dataSource.value).toEqual(rows)
     expect(result.loading.value).toBe(false)
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 1,
       pageSize: 10,
       total: rows.length,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
+    // Test showTotal function separately
+    expect(result.paginationProps.value.showTotal(5)).toBe('Total: 5')
   })
 
   it('should update paginationProps when onChange is called', () => {
     const [result] = withSetup(useBaseTable, { columns, rows })
     result.onChange({ current: 2, pageSize: 20 })
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 2,
       pageSize: 20,
       total: rows.length,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
+    // Test showTotal function separately
+    console.log('result.paginationProps.value.showTotal(10) :>> ', result.paginationProps.value.showTotal(10))
+    expect(result.paginationProps.value.showTotal(10)).toBe('Total: 10')
   })
 
   it('should reset state when resetState is called', () => {
@@ -59,14 +81,19 @@ describe('useBaseTable', () => {
     expect(result.columnsProp.value).toEqual(columns)
     expect(result.dataSource.value).toEqual([])
     expect(result.loading.value).toBe(false)
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 1,
       pageSize: 10,
       total: 0,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
+    // Test showTotal function separately
+    expect(result.paginationProps.value.showTotal(0)).toBe('Total: 0')
   })
 
   it('should update columnsProp when columns change', () => {
@@ -78,12 +105,12 @@ describe('useBaseTable', () => {
 
   it('should call resetState when component unmounts', () => {
     const [result, app] = withSetup(useBaseTable, { columns, rows })
-    const restStateSpy = vi.fn()
-    result.resetState = restStateSpy
+    const resetStateSpy = vi.fn()
+    result.resetState = resetStateSpy
     app.unmount = vi.fn().mockImplementation(() => {
-      restStateSpy()
+      resetStateSpy()
     })
     app.unmount()
-    expect(restStateSpy).toHaveBeenCalled()
+    expect(resetStateSpy).toHaveBeenCalled()
   })
 })

From 845968d360dfe307aecd690abad4b3313e14a7d1 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 10 Feb 2025 23:18:34 +0800
Subject: [PATCH 35/39] fix: bug fixed

---
 bigtop-manager-ui/.env.development                       | 4 ++--
 bigtop-manager-ui/src/layouts/sider.vue                  | 9 ++++++---
 bigtop-manager-ui/src/locales/en_US/cluster.ts           | 7 +++----
 bigtop-manager-ui/src/locales/en_US/host.ts              | 2 +-
 .../cluster-manage/cluster/components/component-info.vue | 5 +++--
 .../cluster-manage/cluster/components/host-config.vue    | 2 +-
 .../src/pages/cluster-manage/cluster/overview.vue        | 2 +-
 7 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 67a2cdff8..eb2ecf9c9 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -16,7 +16,7 @@
 NODE_ENV=development
 
 VITE_APP_BASE='/'
-VITE_APP_BASE_URL='http://localhost:8080'
-# VITE_APP_BASE_URL='http://bmdebug.s7.tunnelfrp.com'
+# VITE_APP_BASE_URL='http://localhost:8080'
+VITE_APP_BASE_URL='http://bmdebug.s7.tunnelfrp.com'
 VITE_APP_BASE_API='/api'
 VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index e4ee4f899..a567fa1b6 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -105,8 +105,10 @@
       <a-divider />
       <div class="create-option">
         <a-button type="primary" ghost @click="addCluster">
-          <svg-icon name="plus" />
-          <label>{{ $t('menu.create') }}</label>
+          <div>
+            <svg-icon name="plus" />
+            <label>{{ $t('menu.create') }}</label>
+          </div>
         </a-button>
       </div>
     </div>
@@ -144,9 +146,10 @@
       padding-bottom: $space-lg;
       button {
         width: 160px;
-        @include flexbox($align: center);
+        @include flexbox($align: center, $justify: center);
         label {
           margin-left: 10px;
+          cursor: pointer;
         }
       }
     }
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 516b903fb..54359b677 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -20,7 +20,7 @@ export default {
   base_info: 'Basic information',
   cluster_config: 'Cluster configuration',
   cluster_management: 'Cluster',
-  component_info: 'Stacks',
+  component_info: 'Stack',
   host_config: 'Hosts',
   create: 'Create',
   name: 'Name',
@@ -32,8 +32,7 @@ export default {
   add_host: 'Add host',
   edit_host: 'Edit host',
   view_log: 'View log',
-  source: 'source',
+  source: 'Source',
   show_hosts_resolved: 'Hostnames after resolved',
-  cluster_unavailable_message:
-    'Apologies, you do not yet have a cluster, so you cannot use cluster management capabilities.'
+  cluster_unavailable_message: 'Sorry, you need to create cluster to use this feature.'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
index cd777fc52..9eb41395f 100644
--- a/bigtop-manager-ui/src/locales/en_US/host.ts
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -36,7 +36,7 @@ export default {
   no_auth: 'No Authentication',
   agent_path: 'Agent Path',
   ssh_port: 'SSH Port',
-  grpc_port: 'gRPC Port',
+  grpc_port: 'GRPC Port',
   description: 'Description',
   key_password_not_match: 'Key Passwords do not match.'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index a32a3259f..0f8fe394c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -35,6 +35,7 @@
   const stackSelected = ref('bigtop')
   const setSourceRef = ref<InstanceType<typeof SetSource>>()
   const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
+  const currentStack = computed(() => stacks.value.find((stack) => stack.stackName === stackSelected.value))
   const columns = computed((): TableColumnType[] => [
     {
       title: '#',
@@ -96,9 +97,9 @@
       <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
     </header>
     <a-table :loading="loading" :data-source="data" :columns="columns" :pagination="paginationProps" @change="onChange">
-      <template #bodyCell="{ column, record }">
+      <template #bodyCell="{ column }">
         <template v-if="column.key === 'stack'">
-          <span> {{ `${stackSelected}-${record.version}` }} </span>
+          <span> {{ `${stackSelected}-${currentStack?.stackVersion}` }} </span>
         </template>
       </template>
     </a-table>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index 75101ed2d..74e7a9603 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -165,7 +165,7 @@
           ...item,
           key: generateRandomId(),
           hostname: v,
-          status: 'INSTALLING'
+          status: 'UNKNOW'
         }
       }) as HostReq[]
       dataSource.value?.unshift(...items)
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index 54ab46a82..c7daf8346 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -223,7 +223,7 @@
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" title="CUP 使用率" />
+              <gauge-chart chart-id="chart2" title="CPU 使用率" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">

From 5e182abac3117eea5fd2d5a2168faf623f37f461 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 11 Feb 2025 11:10:47 +0800
Subject: [PATCH 36/39] fix: bug fixed

---
 .../src/components/common/auto-form/index.vue |  2 +-
 bigtop-manager-ui/src/layouts/index.vue       |  5 +-
 .../src/locales/en_US/cluster.ts              |  1 +
 .../src/locales/zh_CN/cluster.ts              |  1 +
 .../cluster/components/cluster-base.vue       | 82 ++++++++++---------
 .../pages/cluster-manage/cluster/create.vue   | 56 ++++++-------
 bigtop-manager-ui/src/store/menu/index.ts     |  3 +-
 bigtop-manager-ui/src/utils/tools.ts          | 14 +++-
 8 files changed, 90 insertions(+), 74 deletions(-)

diff --git a/bigtop-manager-ui/src/components/common/auto-form/index.vue b/bigtop-manager-ui/src/components/common/auto-form/index.vue
index cab84bd46..0022d9508 100644
--- a/bigtop-manager-ui/src/components/common/auto-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/auto-form/index.vue
@@ -93,7 +93,7 @@
 
   const getFormValidation = async () => {
     try {
-      await formRef.value.validateFields()
+      await formRef.value?.validateFields()
       return Promise.resolve(true)
     } catch (error) {
       console.log('Failed:', error)
diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
index b381dbb8c..c48ab595d 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -23,20 +23,19 @@
   import LayoutHeader from '@/layouts/header.vue'
   import LayoutSider from '@/layouts/sider.vue'
   import { useUserStore } from '@/store/user'
-  import { useClusterStore } from '@/store/cluster'
+  // import { useClusterStore } from '@/store/cluster'
   import { useMenuStore } from '@/store/menu/index'
   import { useStackStore } from '@/store/stack'
   import { storeToRefs } from 'pinia'
 
   const userStore = useUserStore()
   const menuStore = useMenuStore()
-  const clusterStore = useClusterStore()
+  // const clusterStore = useClusterStore()
   const stackStore = useStackStore()
   const { headerSelectedKey, headerMenus, siderMenuSelectedKey, siderMenus } = storeToRefs(menuStore)
 
   onMounted(async () => {
     userStore.getUserInfo()
-    await clusterStore.loadClusters()
     menuStore.setUpMenu()
     stackStore.loadStacks()
   })
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 54359b677..879cfa110 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -24,6 +24,7 @@ export default {
   host_config: 'Hosts',
   create: 'Create',
   name: 'Name',
+  display_name: 'Display name',
   description: 'Description',
   root_directory: 'Root directory',
   user_group: 'User group',
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index 060501be5..eb9ba5044 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -24,6 +24,7 @@ export default {
   host_config: '主机管理',
   create: '创建集群',
   name: '集群名',
+  display_name: '集群显示名',
   description: '集群描述',
   root_directory: '集群根目录',
   user_group: '集群用户组',
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index f055ba19f..82a9d1e21 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -19,16 +19,30 @@
 
 <script setup lang="ts">
   import type { FormItemState } from '@/components/common/auto-form/types'
-  import { computed, ref, shallowRef, toRefs, watch } from 'vue'
+  import { computed, ref, shallowRef, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
   import type { ClusterCommandReq } from '@/api/command/types'
+  import { pick } from '@/utils/tools'
+
+  type ClusterCommandReqKey = keyof ClusterCommandReq
 
   const { t } = useI18n()
   const activeKey = ref(['1', '2'])
   const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
   const props = defineProps<{ stepData: ClusterCommandReq }>()
   const emits = defineEmits(['updateData'])
-  const { stepData } = toRefs(props)
+  const collapses = ref([
+    {
+      title: computed(() => t('cluster.base_info')),
+      formValue: pick<ClusterCommandReq, ClusterCommandReqKey>(props.stepData, ['name', 'displayName', 'desc']),
+      formItems: computed(() => baseInfoFormItems.value)
+    },
+    {
+      title: computed(() => t('cluster.cluster_config')),
+      formValue: pick<ClusterCommandReq, ClusterCommandReqKey>(props.stepData, ['rootDir', 'userGroup']),
+      formItems: computed(() => clusterConfigFormItems.value)
+    }
+  ])
   const formLayout = computed(() => ({
     labelCol: { xs: 5, sm: 5, md: 5, lg: 4, xl: 3 },
     wrapperCol: { xs: 10, sm: 10, md: 10, lg: 10, xl: { xl: 10, pull: 1 } }
@@ -49,6 +63,24 @@
         placeholder: t('common.enter_error', [`${t('cluster.name')}`.toLowerCase()])
       }
     },
+    {
+      type: 'input',
+      field: 'displayName',
+      formItemProps: {
+        name: 'displayName',
+        label: t('cluster.display_name'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.display_name')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.display_name')}`.toLowerCase()])
+      }
+    },
     {
       type: 'textarea',
       field: 'desc',
@@ -89,7 +121,7 @@
       }
     },
     {
-      type: 'textarea',
+      type: 'input',
       field: 'userGroup',
       formItemProps: {
         name: 'userGroup',
@@ -108,22 +140,6 @@
     }
   ])
 
-  const collapses = ref([
-    {
-      title: computed(() => t('cluster.base_info')),
-      formValue: { name: stepData.value?.name, desc: stepData.value?.desc },
-      formItems: computed(() => baseInfoFormItems.value)
-    },
-    {
-      title: computed(() => t('cluster.cluster_config')),
-      formValue: {
-        rootDir: stepData.value?.rootDir,
-        userGroup: stepData.value?.rootDir
-      },
-      formItems: computed(() => clusterConfigFormItems.value)
-    }
-  ])
-
   const getFormValues = () => {
     return collapses.value.reduce((pre, val) => {
       Object.assign(pre, val.formValue)
@@ -132,28 +148,19 @@
   }
 
   const collectAutoFormRefs = (el: any, title: string) => {
-    if (!autoFormRefMap.value.has(title)) {
-      autoFormRefMap.value.set(title, el)
-    }
+    // Synchronous I18n switch
+    el ? autoFormRefMap.value.set(title, el) : autoFormRefMap.value.delete(title)
   }
 
   const check = async () => {
     try {
       const autoFormRefs = [...autoFormRefMap.value.values()]
-      const validationResults = await Promise.all(
-        Array.from(autoFormRefs).map((formRef) => formRef.getFormValidation())
-      )
-      const allValid = validationResults.every((res) => res)
-      if (allValid) {
-        return allValid
-      } else {
-        autoFormRefs.forEach((_formRef, idx) => {
-          if (!validationResults[idx]) {
-            !activeKey.value.includes(`${idx + 1}`) && activeKey.value.push(`${idx + 1}`)
-          }
-        })
-        return allValid
-      }
+      const validation = await Promise.all(autoFormRefs.map((formRef) => formRef?.getFormValidation()))
+      const allValid = validation.every((res) => res)
+      autoFormRefs.forEach((_formRef, index) => {
+        !validation[index] && !activeKey.value.includes(`${index + 1}`) && activeKey.value.push(`${index + 1}`)
+      })
+      return allValid
     } catch (error) {
       console.error('Error during form validation:', error)
       return
@@ -163,8 +170,7 @@
   watch(
     () => [collapses.value[0].formValue, collapses.value[1].formValue],
     () => {
-      const res = getFormValues()
-      emits('updateData', res)
+      emits('updateData', getFormValues())
     },
     {
       deep: true
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index b61d87243..8d2a8950c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -40,23 +40,23 @@
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
+  const current = ref(0)
   const compRef = ref<any>()
-
+  const installing = ref(false)
+  const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
   const commandRequest = ref<CommandRequest>({
     command: Command.Add,
     commandLevel: CommandLevel.Cluster
   })
-  const installing = ref(false)
-  const current = ref(0)
-  const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
   const installStatus = shallowRef<InstalledStatusVO[]>([])
+  const components = shallowRef<any[]>([ClusterBase, ComponentInfo, HostConfig, CheckWorkflow])
   const isInstall = computed(() => current.value === 2)
   const stepsLimit = computed(() => steps.value.length - 1)
-  const hasUnknowHost = computed(() => stepData.value[2].every((v) => v.status === Status.Success))
+  const hasUnknowHost = computed(() => stepData.value[2].filter((v) => v.status === Status.Unknown).length == 0)
   const allInstallSuccess = computed(
     () =>
-      installStatus.value.length != 0 &&
-      installStatus.value.every((v) => v.status === Status.Success) &&
+      stepData.value[2].length != 0 &&
+      stepData.value[2].every((v) => v.status === Status.Success) &&
       hasUnknowHost.value
   )
   const isDone = computed(() => ['Successful', 'Failed'].includes(stepData.value[stepData.value.length - 1].state))
@@ -74,18 +74,9 @@
       title: t('cluster.create')
     }
   ])
+
   const getCompName = computed(() => {
-    if (current.value === 0) {
-      return ClusterBase
-    } else if (current.value === 1) {
-      return ComponentInfo
-    } else if (current.value === 2) {
-      return HostConfig
-    } else if (current.value === 3) {
-      return CheckWorkflow
-    } else {
-      return CheckWorkflow
-    }
+    return components.value[current.value]
   })
 
   const updateData = (val: Partial<ClusterCommandReq> | any | HostReq[]) => {
@@ -94,10 +85,7 @@
 
   const createCluster = async () => {
     try {
-      commandRequest.value.clusterCommand = {
-        ...stepData.value[0],
-        displayName: stepData.value[0].name
-      } as ClusterCommandReq
+      commandRequest.value.clusterCommand = stepData.value[0] as ClusterCommandReq
       commandRequest.value.clusterCommand.hosts = stepData.value[2]
       stepData.value[stepData.value.length - 1] = await execCommand(commandRequest.value)
       return true
@@ -113,6 +101,12 @@
     }
   }
 
+  const nextStep = async () => {
+    if (current.value < stepsLimit.value) {
+      current.value = current.value + 1
+    }
+  }
+
   const prepareNextStep = async () => {
     if (current.value === 0) {
       const check = await compRef.value.check()
@@ -131,12 +125,6 @@
     }
   }
 
-  const nextStep = async () => {
-    if (current.value < stepsLimit.value) {
-      current.value = current.value + 1
-    }
-  }
-
   const resolveInstallDependencies = async () => {
     if (stepData.value[2].length == 0) {
       message.error(t('host.uninstallable'))
@@ -145,7 +133,7 @@
     try {
       installing.value = true
       const data = await installDependencies(stepData.value[current.value])
-      data && pollUntilSuccess()
+      data && pollUntilInstalled()
     } catch (error) {
       installing.value = false
       console.log('error :>> ', error)
@@ -168,8 +156,16 @@
     }
   }
 
-  const pollUntilSuccess = (interval: number = 1000): void => {
+  const pollUntilInstalled = (interval: number = 1000): void => {
+    let isInitialized = false
     const intervalId = setInterval(async () => {
+      if (!isInitialized) {
+        stepData.value[current.value] = stepData.value[current.value].map((item: HostReq) => ({
+          ...item,
+          status: Status.Installing
+        }))
+        isInitialized = true
+      }
       const result = await recordInstalledStatus()
       if (result) {
         installing.value = false
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index d3c3cccfc..72df905e9 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -145,8 +145,9 @@ export const useMenuStore = defineStore(
       router.push(siderMenuSelectedKey.value)
     }
 
-    const setUpMenu = () => {
+    const setUpMenu = async () => {
       setBaseRoutesMap()
+      await clusterStore.loadClusters()
       updateSiderMenu()
     }
 
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index ba9b37551..9092937ae 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -76,8 +76,20 @@ export const formatTime = (time: string | undefined, formatRule: string = 'YYYY-
   return typeof time === 'string' && dayjs(time).tz(dayjs.tz.guess(), true).format(formatRule)
 }
 
-export function generateRandomId(length = 8) {
+export const generateRandomId = (length = 8) => {
   return Math.random()
     .toString(36)
     .substring(2, length + 2)
 }
+
+export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> => {
+  return keys.reduce(
+    (acc, key) => {
+      if (obj.hasOwnProperty(key)) {
+        acc[key] = obj[key]
+      }
+      return acc
+    },
+    {} as Pick<T, K>
+  )
+}

From 74c944c805ef34ac39024be9cfedc6d404c2b40e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 11 Feb 2025 11:40:48 +0800
Subject: [PATCH 37/39] fix: bug fixed

---
 bigtop-manager-ui/src/layouts/default.vue     |  2 +-
 bigtop-manager-ui/src/layouts/sider.vue       |  2 +-
 .../pages/cluster-manage/cluster/create.vue   | 39 ++++++++++++-------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/bigtop-manager-ui/src/layouts/default.vue b/bigtop-manager-ui/src/layouts/default.vue
index 8708c3b3d..a135f333d 100644
--- a/bigtop-manager-ui/src/layouts/default.vue
+++ b/bigtop-manager-ui/src/layouts/default.vue
@@ -26,7 +26,7 @@
     <div class="default">
       <img :src="usePngImage('default')" />
       <a-typography-text>{{ $t('cluster.cluster_unavailable_message') }}</a-typography-text>
-      <a-typography-link href="#" underline @click="() => $router.push({ name: 'ClusterCreate' })">
+      <a-typography-link underline @click="() => $router.push({ name: 'ClusterCreate' })">
         {{ $t('cluster.create') }}
       </a-typography-link>
     </div>
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index a567fa1b6..530d126f6 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -106,7 +106,7 @@
       <div class="create-option">
         <a-button type="primary" ghost @click="addCluster">
           <div>
-            <svg-icon name="plus" />
+            <svg-icon style="margin-left: 0" name="plus" />
             <label>{{ $t('menu.create') }}</label>
           </div>
         </a-button>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 8d2a8950c..3fbee40d4 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -61,18 +61,10 @@
   )
   const isDone = computed(() => ['Successful', 'Failed'].includes(stepData.value[stepData.value.length - 1].state))
   const steps = computed(() => [
-    {
-      title: t('cluster.cluster_management')
-    },
-    {
-      title: t('cluster.component_info')
-    },
-    {
-      title: t('cluster.host_config')
-    },
-    {
-      title: t('cluster.create')
-    }
+    'cluster.cluster_management',
+    'cluster.component_info',
+    'cluster.host_config',
+    'cluster.create'
   ])
 
   const getCompName = computed(() => {
@@ -189,6 +181,17 @@
     return Array.from(mergedMap.values())
   }
 
+  // const changeStep = (step: number) => {
+  //   if (current.value > step) {
+  //     const previousCount = current.value - step
+  //     Array.from({ length: previousCount }).forEach(() => previousStep())
+  //   }
+  //   if (current.value < step) {
+  //     const nextCount = step - current.value
+  //     Array.from({ length: nextCount }).forEach(() => prepareNextStep())
+  //   }
+  // }
+
   const onSave = () => {
     menuStore.updateSiderMenu()
   }
@@ -198,13 +201,19 @@
   <div class="cluster-create">
     <header-card>
       <div class="steps-wrp">
-        <a-steps :current="current" :items="steps" />
+        <a-steps :current="current">
+          <a-step v-for="step in steps" :key="step" :disabled="true">
+            <template #title>
+              <span>{{ $t(step) }}</span>
+            </template>
+          </a-step>
+        </a-steps>
       </div>
     </header-card>
     <main-card>
       <template v-for="stepItem in steps" :key="stepItem.title">
-        <div v-show="steps[current].title === stepItem.title" class="step-title">
-          <h5>{{ stepItem.title }}</h5>
+        <div v-show="steps[current] === stepItem" class="step-title">
+          <h5>{{ $t(stepItem) }}</h5>
           <section :class="{ 'step-content': current < stepsLimit }"> </section>
         </div>
       </template>

From bd44e72c515e2004ef486f1a106a68f90316d8ec Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 11 Feb 2025 11:46:39 +0800
Subject: [PATCH 38/39] fix: bug fixed

---
 bigtop-manager-ui/.env.development | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index eb2ecf9c9..6346532b1 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -16,7 +16,6 @@
 NODE_ENV=development
 
 VITE_APP_BASE='/'
-# VITE_APP_BASE_URL='http://localhost:8080'
-VITE_APP_BASE_URL='http://bmdebug.s7.tunnelfrp.com'
+VITE_APP_BASE_URL='http://localhost:8080'
 VITE_APP_BASE_API='/api'
 VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'

From a7a796ee100f96eb3a7e72e51147873262b08742 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 11 Feb 2025 13:58:34 +0800
Subject: [PATCH 39/39] fix: bug fixed

---
 bigtop-manager-ui/src/locales/zh_CN/common.ts               | 2 +-
 .../pages/cluster-manage/cluster/components/host-config.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 8e99b1523..30123e19b 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -89,7 +89,7 @@ export default {
   select_error: '请选择{0}',
   add_error: '请添加{0}',
   delete_msg: '确认要删除该记录吗？',
-  total: '共{0}数据',
+  total: '共{0}条数据',
   note: '注: 源地址的改动对所有集群生效。',
   upload_file: '上传文件',
   file_type_error: '只能上传文本文件！',
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
index 74e7a9603..a222bc431 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -58,12 +58,12 @@
     },
     {
       title: t('host.ssh_user'),
-      dataIndex: 'ssh_user',
+      dataIndex: 'sshUser',
       width: '260px',
-      key: 'ssh_user',
+      key: 'sshUser',
       ellipsis: true,
       customFilterDropdown: true,
-      onFilter: (value, record) => isContain(record.ssh_user, value as string),
+      onFilter: (value, record) => isContain(record.sshUser, value as string),
       onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
     },
     {