调度中心工作负载创建

2022-11-16 18:10:23 +08:00 · 2022-11-16 18:10:23 +08:00 · e8d82b2e4c
parent ea10097685
commit e8d82b2e4c
4 changed files with 131 additions and 137 deletions
--- a/src/api/dispatching-center/dispatchingCenter.js
+++ b/src/api/dispatching-center/dispatchingCenter.js
@ -169,7 +169,7 @@ export function deletePropagationTemplate(data) {
 // 工作负载列表
 export function getDeploymentList(params) {
  return request({
-    url: '/jcc-schedule/api/v1/deployment/list',
+    url: '/jcc-schedule/api/v1/deployments/list',
    method: 'get',
    params
  })
@ -237,14 +237,14 @@ export function getPropagationPolicyList(params) {
  })
 }

-// 调度实例页面--创建工作负载
-export function createDeployment(data) {
-  return request({
-    url: '/jcc-schedule/api/v1/deployment/create',
-    method: 'post',
-    data
-  })
-}
+// // 调度实例页面--创建工作负载
+// export function createDeployment(data) {
+//   return request({
+//     url: '/jcc-schedule/api/v1/deployment/create',
+//     method: 'post',
+//     data
+//   })
+// }

 // 调度实例页面--创建调度实例
 export function createPropagationPolicy(data) {
@ -258,7 +258,7 @@ export function createPropagationPolicy(data) {
 // 调度实例页面--查询工作负载详情
 export function getDeploymentDescribe(params) {
  return request({
-    url: '/jcc-schedule/api/v1/deployment/describe',
+    url: '/jcc-schedule/api/v1/deployments/describe',
    method: 'get',
    params
  })
--- a/src/components/Actions/addContainerForm.vue
+++ b/src/components/Actions/addContainerForm.vue
@ -1,5 +1,4 @@
 <template>
-  <!-- 添加容器镜像  -->
  <!-- 初始容器 和 其他 -->
  <el-dialog v-if="dialogVisible" :close-on-click-modal="false" width="80%" :title="(!createContainerForm.name?'添加':'编辑')+'容器'" :visible.sync="dialogVisible" append-to-body>

@ -10,50 +9,7 @@
          <span class="tips">对容器的名称及容器的计算资源进行设置</span>
        </p>
        <el-form-item label="镜像" required="">
-          <el-input v-model="createContainerForm.image" placeholder="直接输入名称 例：nginx:latest" @blur="selectMirror">
-            <template slot="prepend">DockerHub</template>
-            <!-- <el-select slot="append" v-model="createContainerForm.image" filterable class="selectPro" placeholder="选择已有镜像" @change="selectMirror">
-              <el-option
-                v-for="item in imageList"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              >
-                <el-image
-                  style="display:block;float:left;width: 30px; height: 30px"
-                  :src="item.imgUrl"
-                  fit="fit"
-                />
-                <span style="width:20%; display:block;float:left">{{ item.name }}</span>
-                <span style="width:60%;display:block;float:left; color: #8492a6; font-size: 13px">{{ item.description }}</span>
-                <span style="width:10%; display:block;float:left; text-align:right"><i class="el-icon-star-on" />{{ item.star }}</span>
-              </el-option>
-            </el-select> -->
-          </el-input>
-          <el-card v-loading="loading" class="grayCard">
-            <span v-if="!imageData">{{ !noImage ? '请选择容器镜像' : '没有找到此镜像' }}</span>
-            <div v-if="imageData" style="">
-              <el-button style="float:right" round @click="useDefaultPorts">使用默认端口</el-button>
-              <p>{{ createContainerForm.image }}</p>
-              <span class="tips">
-                {{ moment(imageData.createTime).fromNow() + ', ' +(imageData.size/1024/1024).toFixed(2) + `MB,` + imageData.layers + '层级' }}
-              </span>
-              <table class="el-table">
-                <tr>
-                  <td>tag</td>
-                  <td>
-                    {{ imageData.imageTag }}
-                  </td>
-                  <td>端口</td>
-                  <td>{{ imageData.exposedPorts.join(';') || '暂无默认端口配置' }}</td>
-                  <td>
-                    {{ imageData.registry }}
-                    仓库
-                  </td>
-                </tr>
-              </table>
-            </div>
-          </el-card>
+          <el-input v-model="createContainerForm.image" placeholder="直接输入名称 例：nginx:latest" />
        </el-form-item>
      </div>
      <div class="border">
@ -213,71 +169,6 @@ export default {
      this.createContainerForm.ports.splice(index, 1)
      // this.blurInput()
    },
-    selectMirror() {
-      // 选中镜像
-      if (!this.createContainerForm.image) {
-        return false
-      }
-      this.loading = true
-      // this.$Api.getImagesInfo(this.namespace, this.createContainerForm.image).then(res => {
-      // if status === 'fail'
-      // 找不到镜像 重新选择
-      // if status === 'succeeded'
-      const res = {
-        'status': 'succeeded',
-        'imageManifest': {
-          'layers': [
-            {
-              'mediaType': 'application/vnd.docker.image.rootfs.diff.tar.gzip',
-              'size': 31404121,
-              'digest': 'sha256:31b3f1ad4ce1f369084d0f959813c51df0ca17d9877d5ee88c2db6ff88341430'
-            },
-            {
-              'mediaType': 'application/vnd.docker.image.rootfs.diff.tar.gzip',
-              'size': 25349445,
-              'digest': 'sha256:fd42b079d0f818ce0687ee4290715b1b4843a1d5e6ebe7e3144c55ed11a215ca'
-            }
-          ]
-        },
-        'imageBlob': {
-          'container': 'd221caed08a42c6f86cf8bf787da9114acd72f3e27f0a21a0a12f7f38cfa652e',
-          'container_config': {
-            'ExposedPorts': {
-              '80/tcp': {}
-            }
-          },
-          'created': '2022-09-13T06:29:32.251894602Z',
-          'rootfs omitempty': {}
-        },
-        'imageTag': 'latest',
-        'registry': 'docker.io'
-      }
-      if (res.status === 'succeeded') {
-        const layers = res.imageManifest.layers
-        const size = layers.reduce((prev, layer) => prev + layer.size, 0)
-        this.imageData = {
-          // imageTag: res.imageTag,
-          message: res.message || '',
-          registry: res.registry,
-          layers: layers.length,
-          createTime: res.imageBlob.created,
-          size,
-          exposedPorts: Object.keys(
-            res.imageBlob.container_config.ExposedPorts || {}
-          ),
-          status: res.status,
-          slug: res.slug || ''
-        }
-      } else {
-        this.imageData = undefined
-      }
-      this.noImage = false
-      this.loading = false
-      // }).catch(() => {
-      //   this.noImage = true
-      //   this.loading = false
-      // })
-    },
    // getImageList() {
    //   this.$Api.getImagesList().then(res => {
    //     const arr = res.summaries.map(e => {
--- a/src/components/workloadsManagement/containerImage.vue
+++ b/src/components/workloadsManagement/containerImage.vue
@ -5,7 +5,7 @@
        prop="replicas"
        label="容器节点副本数量"
      >
-        <el-input-number v-model="editInfoForm.spec.replicas" :min="1" :max="10" label="" />
+        <el-input-number v-model="editInfoForm.spec.replicas" :min="1" label="" />
      </el-form-item>
      <p>容器镜像</p>
      <el-button @click="containerFormVisiable=true">
--- a/src/views/jccSchedule/schedulingInstance/components/Create.vue
+++ b/src/views/jccSchedule/schedulingInstance/components/Create.vue
@ -1,6 +1,20 @@
 <template>
  <el-dialog v-if="createFormVisible" :close-on-click-modal="false" :title="`创建${stepNum === 0 ? '工作负载':'调度实例'}`" :visible.sync="createFormVisible">
    <el-form v-if="stepNum===0" ref="editInfoForm" :rules="rules" :model="editInfoForm">
+      <el-form-item
+        required
+        prop="clustername"
+        label="集群"
+      >
+        <el-select v-model="editInfoForm.clustername" multiple style="width:100%" placeholder="请选择">
+          <el-option
+            v-for="item in clusterOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
      <el-form-item
        prop="name"
        label="名称"
@ -37,7 +51,7 @@
        prop="replicas"
        label="容器节点副本数量"
      >
-        <el-input-number v-model="editInfoForm.replicas" :min="1" :max="10" label="" />
+        <el-input-number v-model="editInfoForm.replicas" :min="1" label="" />
      </el-form-item>
      <el-form-item
        prop="container_image"
@ -56,6 +70,28 @@
          </div>
        </div>
      </el-form-item>
+      <el-form-item
+        required
+        prop="template_id"
+        label="调度模板选择"
+      >
+        <el-select v-model="editInfoForm.template_id" style="width:100%" placeholder="请选择">
+          <el-option
+            v-for="item in templateOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            :disabled="item.disabled"
+          >
+            <span style="float: left">{{ item.label }}</span>
+            <span v-if="item.isFedManaged" style="float: right; color: #8492a6; font-size: 13px">
+              <el-tooltip placement="top">
+                <div slot="content">无法在集群管理内创建多集群项目的资源, 请到多集群项目页面内进行操作。</div>
+                <el-button icon="el-icon-question" type="info" circle /></el-tooltip>
+            </span>
+          </el-option>
+        </el-select>
+      </el-form-item>
      <addContainerForm v-if="containerFormVisiable" v-model="containerFormVisiable" :namespace="editInfoForm.namespace" :form-data="containerForm" @addImage="addImage" @editImage="editImage" />
    </el-form>
    <el-form v-if="stepNum===1" ref="editInfoForm2" :rules="rules2" :model="editInfoForm2">
@ -91,16 +127,18 @@
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="createFormVisible = false">取 消</el-button>
-      <el-button v-if="stepNum===1" type="primary" @click="prev">上一步</el-button>
+      <el-button type="primary" @click="next">确 定</el-button>
+      <!-- <el-button v-if="stepNum===1" type="primary" @click="prev">上一步</el-button>
      <el-button v-if="stepNum===0" type="primary" @click="next">下一步</el-button>
-      <el-button v-if="stepNum===1" type="primary" @click="submitInfoEdit">确 定</el-button>
+      <el-button v-if="stepNum===1" type="primary" @click="submitInfoEdit">确 定</el-button> -->
    </div>
  </el-dialog>
 </template>

 <script>
 import addContainerForm from '@/components/Actions/addContainerForm.vue'
-import { getPropagationTemplate, getProjectNamespaceList, createDeployment, createPropagationPolicy } from '@/api/dispatching-center/dispatchingCenter'
+import { getPropagationTemplate, getProjectNamespaceList, getClusterList, createPropagationPolicy } from '@/api/dispatching-center/dispatchingCenter'
+import { getWorkloadCreate } from '@/api/container/workloadManagement'

 export default {
  components: { addContainerForm },
@ -121,6 +159,7 @@ export default {
  data() {
    return {
      stepNum: 0,
+      clusterOptions: [],
      namespaceOptions: [],
      templateOptions: [],
      containerForm: undefined,
@ -178,6 +217,7 @@ export default {
      this.editInfoForm.container_image = []
    },
    openImage() {
+      console.log(this.editInfoForm.namespace)
      if (this.editInfoForm.namespace) {
        this.containerFormVisiable = true
      } else {
@ -195,6 +235,24 @@ export default {
      getProjectNamespaceList({ pageNum: 1, pageSize: 9999 }).then(res => {
        this.namespaceOptions = res.data.list?.map(n => ({ label: n.ns_name, value: n.ns_name }))
      })
+
+      getPropagationTemplate().then(e => {
+        this.templateOptions = e.data.list?.map(n => ({
+          label: n.template_name,
+          value: n.template_id + ''
+        })) || []
+      })
+
+      // 获取全量集群
+      getClusterList({ pageNum: 1, pageSize: 999 }).then(res => {
+        this.clusterList = res.data.list
+        this.clusterOptions = res.data.list.map(n => (
+          {
+            value: n.cluster_name,
+            label: n.cluster_name
+          }
+        )) || []
+      })
    },
    prev() {
      this.stepNum--
@ -202,20 +260,64 @@ export default {
    next() {
      this.$refs.editInfoForm.validate((valid) => {
        if (valid) {
-          createDeployment({
-            ...this.editInfoForm,
-            container_image: (this.editInfoForm.container_image?.[0]?.image + ':' + this.editInfoForm.container_image?.[0]?.imageTag) || '',
-            port: (this.editInfoForm.container_image?.[0]?.ports[0]?.containerPort) * 1 || undefined
-          }).then(e => {
+          const params = {
+            'clusterName': this.editInfoForm.clustername,
+            'templateId': this.editInfoForm.template_id,
+            'deployment': {
+              'apiVersion': 'apps/v1',
+              'kind': 'Deployment',
+              'metadata': {
+                'namespace': this.editInfoForm.namespace,
+                'labels': {
+                  'jcce': 'true'
+                },
+                'name': this.editInfoForm.name,
+                'annotations': {
+                  'kubesphere.io/creator': 'admin'
+                }
+              },
+              'spec': {
+                'replicas': this.editInfoForm.replicas,
+                'selector': {
+                  'matchLabels': {
+                    'jcce': 'true'
+                  }
+                },
+                'template': {
+                  'metadata': {
+                    'labels': {
+                      'jcce': 'true'
+                    }
+                  },
+                  'spec': {
+                    'containers': [{
+                      'name': this.editInfoForm.container_name,
+                      'imagePullPolicy': 'IfNotPresent',
+                      'image': this.editInfoForm.container_image?.[0]?.image,
+                      'ports': this.editInfoForm.container_image.ports
+                    }],
+                    'serviceAccount': 'default',
+                    'initContainers': [],
+                    'volumes': [],
+                    'imagePullSecrets': null
+                  }
+                },
+                'strategy': {}
+              }
+            }
+          }
+          getWorkloadCreate('deployments', params).then(e => {
            this.$message.success('工作负载创建成功')
-            getPropagationTemplate().then(e => {
-              this.templateOptions = e.data.list?.map(n => ({
-                label: n.template_name,
-                value: n.template_id + ''
-              })) || []
-            })
-            this.stepNum++
+            this.$message.success('操作成功')
+            this.createFormVisible = false
+            this.$emit('getList')
          })
+          // createDeployment({
+          //   ...this.editInfoForm,
+          //   container_image: (this.editInfoForm.container_image?.[0]?.image + ':' + this.editInfoForm.container_image?.[0]?.imageTag) || '',
+          //   port: (?.[0]?.ports[0]?.containerPort) * 1 || undefined
+          // }).then(e => {
+          // })
        } else {
          console.log('error submit!!')
          return false
@ -223,6 +325,7 @@ export default {
      })
    },
    editContainer(item) {
+      console.log(item)
      this.containerForm = item
      this.containerFormVisiable = true
    },