提交组件选项页面的数据到后端

src/components/kubernetesComponent/index.vue

@@ -12,25 +12,31 @@
       </el-radio-group>
 
       <div class="form-content">
-        <el-checkbox-group v-model="data.selectCharts" class="checkbox" @change="onSelect">
+        <el-checkbox-group v-model="data.selectCharts" class="checkbox">
           <el-space wrap :size="12">
-            <el-card v-for="chart in data.categoryAppCharts" :key="chart.Name" class="card">
+            <el-card v-for="chart in data.categoryAppCharts" :key="chart.name" class="card">
               <template #header>
                 <div class="card-header">
-                  <el-checkbox :label="chart.Name" :value="chart" />
+                  <el-checkbox :label="chart.name" :value="chart" />
                 </div>
-                {{ chart.LatestVersion }}
+                {{ chart.version }}
               </template>
               <div class="card-body">
                 <pixiu-icon
-                  :name="`icon-${chart.Name.toLowerCase()}`"
+                  :name="`icon-${chart.name.toLowerCase()}`"
                   size="40px"
                   type="iconfont"
                 />
-                <p class="content">{{ chart.Name }} 功能描述补充</p>
+                <p class="content">{{ chart.name }} 功能描述补充</p>
               </div>
               <template #footer>
-                <el-button type="text" size="small" disabled>参数配置</el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  :disabled="!chart.config"
+                  @click="openDialog(chart)"
+                  >参数配置</el-button
+                >
                 <el-button style="margin-left: -10px" type="text" size="small">查看详情</el-button>
               </template>
             </el-card>
@@ -84,30 +90,70 @@
   <el-form-item label="已选择组件">
     <el-tag
       v-for="chart in data.selectCharts"
-      :key="chart.Name"
+      :key="chart.name"
       class="tag-item"
       closable
       type="info"
       @close="removeChart(chart)"
     >
-      {{ chart.Name }}
+      {{ chart.name }}
     </el-tag>
   </el-form-item>
+
+  <el-drawer
+    v-model="data.dialog"
+    :title="`${data.chart.name} 参数配置`"
+    :before-close="handleClose"
+    class="demo-drawer"
+  >
+    <div class="demo-drawer__content">
+      <el-form :model="data.chart.config" label-position="top">
+        <div v-for="(value, key) in data.chart.config" :key="key">
+          <el-form-item :label="key">
+            <el-input v-model="data.chart.config[key]"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <div style="flex: auto; text-align: center">
+      <el-button class="pixiu-cancel-button" @click="handleClose">取消</el-button>
+      <el-button class="pixiu-small-confirm-button" type="primary" @click="handleClose"
+        >确认
+      </el-button>
+    </div>
+  </el-drawer>
 </template>
 
 <script setup>
 import { onMounted, reactive } from 'vue';
-
+import _ from 'lodash';
 const data = reactive({
+  dialog: false,
+  loading: false,
   appCharts: '',
   category: '全部',
   categoryAppCharts: [],
   selectCharts: [],
+  chart: {},
 });
-// 根据chart数据分类
+
+const openDialog = (chart) => {
+  data.dialog = true;
+  data.chart = chart;
+};
+const handleClose = () => {
+  data.dialog = false;
+};
+// 根据chart数据分类，并将Label和Config转换为Object
 const categorizeChartsByKind = (charts) => {
   return charts.reduce((acc, chart) => {
-    const kind = JSON.parse(chart.Label).kind;
+    if (chart.label) {
+      chart.label = JSON.parse(chart.label);
+    }
+    if (chart.config) {
+      chart.config = JSON.parse(chart.config);
+    }
+    const kind = chart.label.kind;
     if (!acc[kind]) {
       acc[kind] = [];
     }
@@ -119,7 +165,15 @@ const categorizeChartsByKind = (charts) => {
 const onChange = () => {
   data.categoryAppCharts = data.appCharts[data.category];
 };
-const onSelect = () => {};
+const getComponents = () => {
+  let tmpCharts = {};
+  data.selectCharts.forEach((chart) => {
+    tmpCharts[chart.name.toLowerCase()] = _.cloneDeep(chart);
+    delete tmpCharts[chart.name.toLowerCase()].name;
+  });
+  return tmpCharts;
+};
+
 const removeChart = (chart) => {
   data.selectCharts.splice(data.selectCharts.indexOf(chart), 1);
 };
@@ -136,6 +190,10 @@ const props = defineProps({
     default: null,
   },
 });
+
+defineExpose({
+  getComponents,
+});
 </script>
 <style scoped>
 .el-card :deep(.el-card__header) {

src/page/plan/planCreate.vue

@@ -396,18 +396,16 @@
             </div>
 
             <el-form-item label="自建 LoadBalance" style="margin-top: 10px">
-              <el-switch v-model="clusterStore.configInfo.config.component.haproxy.enable" />
+              <el-switch v-model="clusterStore.configInfo.config.haproxy.enable" />
             </el-form-item>
             <div class="app-pixiu-describe" style="margin-top: -12px">
               This configuration is usually enabled when self-created VMs require high availability.
             </div>
 
-            <div v-if="clusterStore.configInfo.config.component.haproxy.enable">
+            <div v-if="clusterStore.configInfo.config.haproxy.enable">
               <el-form-item label="虚拟路由ID" style="margin-top: 10px">
                 <el-input
-                  v-model="
-                    clusterStore.configInfo.config.component.haproxy.keepalived_virtual_router_id
-                  "
+                  v-model="clusterStore.configInfo.config.haproxy.keepalived_virtual_router_id"
                   style="width: 150px"
                   placeholder="68"
                 />
@@ -466,7 +464,10 @@
           </el-card>
 
           <el-card id="step-4" header="组件选项" style="margin-top: 20px">
-            <kubernetesComponent :app-charts="appCharts" />
+            <kubernetesComponent
+              :ref="(ref) => (clusterStore.componentRef = ref)"
+              :app-charts="appCharts"
+            />
 
             <div class="app-pixiu-describe" style="margin-top: -12px">
               如果当前无法评估是否需要安装， 可在集群创建完成后在集群内进行安装
@@ -747,26 +748,58 @@ onMounted(() => {
 //     stepContainerRef.value.removeEventListener('scroll', debouncedHandlerScrollEvent);
 //   }
 // });
+// const appCharts = {
+//   haproxy: {
+//     version: '2.0.1',
+//     Label: '{"kind":"全部"}',
+//     config: "{keepalived_virtual_router_id: ''}",
+//   },
+//   grafna: {
+//     version: '1.1.5',
+//     Label: '{"kind":"全部"}',
+//     config: '{grafana_admin_user: "admin", grafana_admin_password: "123"}',
+//   },
+//   prometheus: {
+//     version: '1.1.5',
+//     Label: '{"kind":"全部"}',
+//     enable_prometheus: '',
+//   },
+//   helm: {
+//     Label: '{"kind":"全部"}',
+//     version: '1.1.5',
+//     config: '{"helm_release": "pixiu"}',
+//   },
+// };
 const appCharts = [
   {
-    Name: 'Helm',
-    Label: '{"kind":"全部"}',
-    LatestVersion: '1.1.5',
+    name: 'Helm',
+    label: '{"kind":"全部"}',
+    version: '1.1.5',
+    config: '{"grafana_admin_user":"admin","grafana_admin_password":"123"}',
   },
   {
-    Name: 'Promethues',
-    Label: '{"kind":"全部"}',
-    LatestVersion: '0.0.1',
+    name: 'Haproxy',
+    label: '{"kind":"全部"}',
+    enable: true,
+    version: '0.0.1',
+    config: '{"keepalived_virtual_router_id": 0}',
   },
   {
-    Name: 'Grafana',
-    Label: '{"kind":"全部"}',
-    LatestVersion: '1.1.5',
+    name: 'Promethues',
+    label: '{"kind":"全部"}',
+    version: '0.0.1',
+    config: '{"grafana_admin_user":"admin","grafana_admin_password":"123"}',
   },
   {
-    Name: 'NginxIngress',
-    Label: '{"kind":"全部"}',
-    LatestVersion: '1.0.0',
+    name: 'Grafana',
+    label: '{"kind":"全部"}',
+    version: '1.1.5',
+    config: '{"grafana_admin_user":"admin","grafana_admin_password":"123"}',
+  },
+  {
+    name: 'NginxIngress',
+    label: '{"kind":"全部"}',
+    version: '1.0.0',
   },
 ];
 </script>

src/stores/useCluster.js

@@ -20,6 +20,7 @@ const useClusterStore = defineStore('cluster', () => {
   const nodeFormRef = ref(null);
   const loading = ref(false);
   const selectIndex = ref(undefined);
+  const componentRef = ref(null);
 
   watch(planId, async (newPlanId) => {
     if (newPlanId !== undefined) {
@@ -105,12 +106,11 @@ const useClusterStore = defineStore('cluster', () => {
       runtime: {
         runtime: 'docker',
       },
-      component: {
-        haproxy: {
-          enable: false,
-          keepalived_virtual_router_id: '',
-        },
+      haproxy: {
+        enable: false,
+        keepalived_virtual_router_id: 68,
       },
+      component: {},
     },
 
     // k8s service 的选项
@@ -470,7 +470,13 @@ const useClusterStore = defineStore('cluster', () => {
     deleteDialog.aliasName = scope.row.name;
   };
 
+  const getComponents = () => {
+    const component = componentRef.value.getComponents();
+    configInfo.config.component = component;
+  };
+
   const createOrEditPlan = () => {
+    getComponents();
     return new Promise((resolve, reject) => {
       configFormRef.value.validate(async (valid, fields) => {
         if (valid) {
@@ -486,7 +492,6 @@ const useClusterStore = defineStore('cluster', () => {
             commitData.config.network.service_network = service_network;
             delete commitData.podNetwork;
             delete commitData.serviceNetwork;
-
             let result, err;
             if (planId.value === undefined) {
               // 新建
@@ -531,6 +536,7 @@ const useClusterStore = defineStore('cluster', () => {
     configFormRef,
     nodeFormRef,
     deleteDialog,
+    componentRef,
     configInfo,
     nodeInfo,
     rules,