refine cluster configuration

Signed-off-by: pixiake <[email protected]>
pixiake · Jun 28, 2022 · e179111 · e179111
1 parent 20c7292
commit e179111
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 28 deletions.
diff --git a/web/kk-console/src/components/Basic/index.js b/web/kk-console/src/components/Basic/index.js
@@ -1,4 +1,4 @@
-import {Button, Card, Form, Input} from "antd";
+import {Button, Card, Form, Input, Radio, Tooltip} from "antd";
 import {useDispatch, useSelector} from "react-redux";
 import {
     nextStep,
@@ -26,13 +26,11 @@ const Basic = (props) => {
     const getMetadata = (configuration) => {
         return {
             name: configuration.metadata.name,
-            registry: configuration.spec.registry.privateRegistry,
-            namespace: configuration.spec.registry.namespaceOverride
         }
     }
 
     const [initValue] = useState(getMetadata(configuration))
-
+    const [inputUserInfo, setInputUserInfo] = useState(false)
 
     const saveMetadata = () => {
         const basic = form.getFieldsValue(true)
@@ -41,14 +39,10 @@ const Basic = (props) => {
                 name: basic.name,
                 namespace: "kubekey-system"
         }
-        let registryConfig = {
-            privateRegistry: basic.registry !== '' ? basic.registry : '',
-            namespaceOverride: basic.namespace !== '' ? basic.namespace : ''
-        }
+
         dispatch(updateBasic(
             {
                 metadata: metadataConfig,
-                registry : registryConfig
             }
         ))
 
@@ -65,6 +59,80 @@ const Basic = (props) => {
         return Promise.reject(new Error('集群' + value + '已存在'));
     }
 
+    const onChangeProduct = () => {
+        const product = form.getFieldsValue(true).managerSoft
+        console.log(product)
+        switch (product) {
+            case "none":
+                setInputUserInfo(false)
+                break
+            default:
+                setInputUserInfo(true)
+        }
+    }
+
+    const userInfo = (inputUserInfo) => {
+      if (inputUserInfo) {
+         return (
+             <>
+                 <Form.Item
+                     name="username"
+                     label="用户名"
+                     rules={[
+                         {
+                             required: true,
+                             message: '请输入您的管理员用户名 !',
+                         },
+                     ]}
+                 >
+                     <Input />
+                 </Form.Item>
+
+                 <Form.Item
+                     name="password"
+                     label="密码"
+                     rules={[
+                         {
+                             required: true,
+                             message: '请设置您的管理员用户密码 !',
+                         },
+                     ]}
+                     hasFeedback
+                 >
+                     <Input.Password />
+                 </Form.Item>
+                 <Form.Item
+                     name="confirm"
+                     label="确认密码"
+                     dependencies={['password']}
+                     hasFeedback
+                     rules={[
+                         {
+                             required: true,
+                             message: '请再次确认您的管理员用户密码 !',
+                         },
+                         ({ getFieldValue }) => ({
+                             validator(_, value) {
+                                 if (!value || getFieldValue('password') === value) {
+                                     return Promise.resolve();
+                                 }
+                                 return Promise.reject(new Error('您两次输入的密码不匹配 !'));
+                             },
+                         }),
+                     ]}
+                 >
+                     <Input.Password />
+                 </Form.Item>
+             </>
+         )
+      } else {
+          return (
+              <noscript></noscript>
+          )
+      }
+
+    }
+
     return step === 0 ? (
         <Card
             title="基础设置"
@@ -94,12 +162,31 @@ const Basic = (props) => {
                 >
                     <Input />
                 </Form.Item>
-                <Form.Item label="镜像仓库地址" name="registry">
-                    <Input placeholder="指定镜像仓库部署，默认 docker.io"/>
-                </Form.Item>
-                <Form.Item label="镜像命名空间" name="namespace">
-                    <Input placeholder="指定镜像 namespace，如 harbor 中存放部署镜像的项目"/>
+                <Form.Item label="管理软件" name="managerSoft">
+                    <Radio.Group onChange={onChangeProduct}>
+                        <Radio.Button value="none">
+                            <Tooltip title="裸集群（kubernetes or k3s）">
+                                无
+                            </Tooltip>
+                        </Radio.Button>
+                        <Radio.Button value="kubesphere">
+                            <Tooltip title="开源容器管理平台">
+                                KubeSphere
+                            </Tooltip>
+                        </Radio.Button>
+                        <Radio.Button value="qkcp">
+                            <Tooltip title="企业级容器管理平台">
+                                QKCP
+                            </Tooltip>
+                        </Radio.Button>
+                        <Radio.Button value="ksv">
+                            <Tooltip title="虚拟机(Virtual Machines)管理平台">
+                                KSV
+                            </Tooltip>
+                        </Radio.Button>
+                    </Radio.Group>
                 </Form.Item>
+                {userInfo(inputUserInfo)}
                 <Form.Item {...tailLayout}>
                     <Button htmlType="submit" type="primary">
                         下一步

diff --git a/web/kk-console/src/components/Cluster/index.js b/web/kk-console/src/components/Cluster/index.js
@@ -1,4 +1,4 @@
-import {Button, Card, Form, Radio, Tooltip, Switch} from "antd";
+import {Button, Card, Form, Radio, Tooltip, Switch, Input} from "antd";
 import {useDispatch, useSelector} from "react-redux";
 import {
     lastStep,
@@ -28,18 +28,20 @@ const Cluster = () => {
 
     const getClusterConfig = (cluster) => {
         let config = {
-            type: cluster.type,
-            containerManager: cluster.containerManager,
-            nodeLocalDNS: cluster.nodelocaldns,
-            kata: cluster.kata.enabled,
-            nodeFeatureDiscovery: cluster.nodeFeatureDiscovery.enabled,
-            autoRenewCerts: cluster.autoRenewCerts
+            type: cluster.kubernetes.type,
+            containerManager: cluster.kubernetes.containerManager,
+            nodeLocalDNS: cluster.kubernetes.nodelocaldns,
+            kata: cluster.kubernetes.kata.enabled,
+            nodeFeatureDiscovery: cluster.kubernetes.nodeFeatureDiscovery.enabled,
+            autoRenewCerts: cluster.kubernetes.autoRenewCerts,
+            registry: cluster.registry.privateRegistry,
+            namespace: cluster.registry.namespaceOverride
         }
 
         return config
     }
 
-    const [initValue] = useState(getClusterConfig(configuration.spec.kubernetes))
+    const [initValue] = useState(getClusterConfig(configuration.spec))
 
     const [disabled, setDisabled] = useState({
         containerManager: false,
@@ -109,10 +111,14 @@ const Cluster = () => {
                 enabled: cluster.kata
             }
         }
-
+        let registryConfig = {
+            privateRegistry: cluster.registry !== '' ? cluster.registry : '',
+            namespaceOverride: cluster.namespace !== '' ? cluster.namespace : ''
+        }
         dispatch(updateCluster(
             {
-              kubernetes : config
+              kubernetes : config,
+              registry : registryConfig
             }
         ))
 
@@ -209,6 +215,12 @@ const Cluster = () => {
                             </Radio.Button>
                         </Radio.Group>
                     </Form.Item>
+                    <Form.Item label="镜像仓库地址" name="registry">
+                        <Input placeholder="指定镜像仓库部署，默认 docker.io"/>
+                    </Form.Item>
+                    <Form.Item label="镜像命名空间" name="namespace">
+                        <Input placeholder="指定镜像 namespace，如 harbor 中存放部署镜像的项目"/>
+                    </Form.Item>
                     <Form.Item label="集群 DNS 缓存" valuePropName="checked" name="nodeLocalDNS">
                         <Switch  />
                     </Form.Item>

diff --git a/web/kk-console/src/components/Results/index.js b/web/kk-console/src/components/Results/index.js
@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import {message, Steps} from "antd";
+import {Button, message, Steps} from "antd";
 import CodeMirror from "@uiw/react-codemirror";
 import {ViewPlugin} from "@codemirror/view";
 import {GetClusterAPI, GetPodLogsApi} from "../../request/api";
 import { javascript } from '@codemirror/lang-javascript';
+import {Link} from "react-router-dom";
+import {ReloadOutlined} from "@ant-design/icons";
+import Card from "antd/es/card/Card";
 // import {shell} from "@codemirror/legacy-modes/mode/shell";
 // import { shell } from '@codemirror/legacy-modes/mode/shell';
 // import { StreamLanguage } from '@codemirror/language';
@@ -114,7 +117,20 @@ export default function ShowResults(props) {
     }, [count, logs, props.pod])
 
     return (
-        <>
+        <Card
+            type="inner"
+            title=""
+            style={{ margin: '3% 3% 3% 3%' }}
+            extra={
+                <>
+                    <Link to="/cluster">
+                        <Button type="primary" style={{ marginRight: '5px' }}> 返回集群列表 </Button>
+                    </Link>
+
+                    <Button icon={<ReloadOutlined />}  />
+                </>
+            }
+        >
             <div className='progressdot'>
                 <Steps size="small" labelPlacement='vertical' current={step} status={taskStatus}>
                     {installSteps.map((item)=> (
@@ -138,6 +154,7 @@ export default function ShowResults(props) {
                     extensions={[scrollBottom]}
                 />
             </div>
-        </>
+            </Card>
+
     )
 }
diff --git a/web/kk-console/src/features/configurations/configurationsSlice.js b/web/kk-console/src/features/configurations/configurationsSlice.js
@@ -62,7 +62,6 @@ export const configurationsSlice = createSlice({
    reducers: {
        updateBasic: (state, action) => {
            state.cluster.metadata = action.payload.metadata
-           state.cluster.spec.registry = action.payload.registry
        },
       updateHosts: (state, action) => {
          state.cluster.spec.hosts = action.payload.hosts
@@ -77,6 +76,7 @@ export const configurationsSlice = createSlice({
       },
       updateCluster: (state, action) => {
          state.cluster.spec.kubernetes = action.payload.kubernetes
+         state.cluster.spec.registry = action.payload.registry
       },
       updateNetwork: (state, action) => {
          state.cluster.spec.network = action.payload.network