fix: add deployment CRUD with service expose

Author: hsluoyz

web/src/DeploymentExposeModal.js

@@ -0,0 +1,87 @@
+import React, {useEffect, useRef} from "react";
+import {Form, Input, InputNumber, Modal, Select} from "antd";
+import * as ServiceBackend from "./backend/ServiceBackend";
+import * as Setting from "./Setting";
+
+function DeploymentExposeModal({deploy, open, onClose}) {
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = React.useState(false);
+  const prevOpen = useRef(false);
+
+  useEffect(() => {
+    if (open && !prevOpen.current && deploy) {
+      form.setFieldsValue({
+        name: deploy.name,
+        port: 80,
+        targetPort: 80,
+        type: "ClusterIP",
+      });
+    }
+    prevOpen.current = open;
+  }, [open, deploy, form]);
+
+  function handleOk() {
+    form.validateFields().then(values => {
+      const payload = {
+        namespace: deploy.namespace,
+        name: values.name,
+        type: values.type,
+        selector: {"app": deploy.name},
+        ports: [{
+          name: "http",
+          protocol: "TCP",
+          port: values.port,
+          targetPort: String(values.targetPort),
+        }],
+      };
+      setSubmitting(true);
+      ServiceBackend.addService(payload).then(res => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", `Service "${values.name}" created`);
+          onClose();
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      }).catch(e => Setting.showMessage("error", e.message))
+        .finally(() => setSubmitting(false));
+    });
+  }
+
+  return (
+    <Modal
+      title={`Expose Deployment: ${deploy?.name ?? ""}`}
+      open={open}
+      onOk={handleOk}
+      onCancel={onClose}
+      confirmLoading={submitting}
+      okText="Create Service"
+      width={480}
+      destroyOnHidden
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item
+          label="Service Name"
+          name="name"
+          rules={[{required: true, message: "Service name is required"}]}
+        >
+          <Input placeholder="my-deployment" />
+        </Form.Item>
+        <Form.Item label="Type" name="type" rules={[{required: true}]}>
+          <Select options={[
+            {label: "ClusterIP — 集群内访问", value: "ClusterIP"},
+            {label: "NodePort — 节点端口对外暴露", value: "NodePort"},
+            {label: "LoadBalancer — 云负载均衡器", value: "LoadBalancer"},
+          ]} />
+        </Form.Item>
+        <Form.Item label="Port (Service 端口)" name="port" rules={[{required: true}]}>
+          <InputNumber min={1} max={65535} style={{width: "100%"}} />
+        </Form.Item>
+        <Form.Item label="Target Port (Pod 容器端口)" name="targetPort" rules={[{required: true}]}>
+          <InputNumber min={1} max={65535} style={{width: "100%"}} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default DeploymentExposeModal;

web/src/DeploymentListPage.js

@@ -2,10 +2,11 @@ import React from "react";
 import {
   Alert, Badge, Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table
 } from "antd";
-import {DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined} from "@ant-design/icons";
+import {DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined, ShareAltOutlined} from "@ant-design/icons";
 import * as DeploymentBackend from "./backend/DeploymentBackend";
 import * as NamespaceBackend from "./backend/NamespaceBackend";
 import * as Setting from "./Setting";
+import DeploymentExposeModal from "./DeploymentExposeModal";
 
 class DeploymentListPage extends React.Component {
   constructor(props) {
@@ -19,6 +20,7 @@ class DeploymentListPage extends React.Component {
       modalMode: "add",
       submitting: false,
       editingDeploy: null,
+      exposeDeploy: null,
     };
     this.formRef = React.createRef();
   }
@@ -140,7 +142,7 @@ class DeploymentListPage extends React.Component {
   }
 
   render() {
-    const {deployments, namespaces, loading, error, modalVisible, modalMode, submitting} = this.state;
+    const {deployments, namespaces, loading, error, modalVisible, modalMode, submitting, exposeDeploy} = this.state;
 
     const nsOptions = namespaces.map(ns => ({label: ns.name, value: ns.name}));
 
@@ -170,7 +172,7 @@ class DeploymentListPage extends React.Component {
       {
         title: "Actions",
         key: "actions",
-        width: 140,
+        width: 210,
         render: (_, record) => (
           <Space>
             <Button
@@ -180,6 +182,13 @@ class DeploymentListPage extends React.Component {
             >
               Edit
             </Button>
+            <Button
+              size="small"
+              icon={<ShareAltOutlined />}
+              onClick={() => this.setState({exposeDeploy: record})}
+            >
+              Expose
+            </Button>
             <Popconfirm
               title={`Delete Deployment "${record.name}"?`}
               okText="Delete"
@@ -229,6 +238,12 @@ class DeploymentListPage extends React.Component {
           )}
         />
 
+        <DeploymentExposeModal
+          deploy={exposeDeploy}
+          open={exposeDeploy !== null}
+          onClose={() => this.setState({exposeDeploy: null})}
+        />
+
         <Modal
           title={modalMode === "add" ? "Add Deployment" : "Edit Deployment"}
           open={modalVisible}