更新 Docker.vue, 通过 websocket 来管理 docker 镜像和容器

src/views/devops/machine/Docker.vue

@@ -7,6 +7,34 @@
           <span v-if="wsConnectStatus" style="color: green; margin: 5px">WebSocket 已连接</span>
           <span v-if="!wsConnectStatus" style="color: red; margin: 5px">WebSocket 未连接</span>
         </span>
+        <el-select
+          v-model="env"
+          size="mini"
+          placeholder="环境"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option
+            v-for="(item, index) in envList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select
+          v-model="machine"
+          size="mini"
+          placeholder="机器"
+          style="margin-left: 5px"
+          @change="onSelectChange1"
+        >
+          <el-option
+            v-for="(item, index) in machineList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
         <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
         <el-button size="mini" type="warning" icon="el-icon-files" style="margin-left: 5px" @click="onGetImages">镜像列表</el-button>
       </el-row>
@@ -119,7 +147,7 @@
 import {
   deleteDockerImages,
   getDockerContainerList,
-  getDockerImageList,
+  getDockerImageList, getEnvList,
   getMachineSessions,
   handleDockerContainer
 } from '@/api/devops'
@@ -128,6 +156,10 @@ export default {
   name: 'Docker',
   data() {
     return {
+      env: 'test',
+      envList: [],
+      machine: '',
+      machineList: [],
       queryInfo: {
         type: '1',
         keyword: ''
@@ -144,7 +176,19 @@ export default {
   },
   created() {
     document.title = 'Docker 列表'
-    this.getData()
+
+    getEnvList().then(resp => {
+      if (resp.code === 0) {
+        this.env = resp.data.userEnv
+        this.envList = resp.data.envList
+        this.getMachineList(this.env)
+      } else {
+        this.$message.error(resp.msg)
+      }
+    }).catch(error => {
+      this.$message.error(error.message)
+    })
+    // this.getData()
     this.initWebSocket()
   },
   methods: {
@@ -159,11 +203,11 @@ export default {
       }).catch(error => {
         this.$message.error(error.message)
       })
-
-      const env = 'test'
+    },
+    getMachineList(env) {
       getMachineSessions(env).then(resp => {
         if (resp.code === 0) {
-          console.log(resp.data)
+          this.machineList = resp.data
         } else {
           this.$message.error(resp.msg)
         }
@@ -200,12 +244,12 @@ export default {
       }).then(() => {
         const formData = new FormData()
         formData.append('imageIds', imageIds)
-        deleteDockerImages(formData).then(resp => {
+        /* deleteDockerImages(formData).then(resp => {
           this.$message.info(resp.msg)
           this.onGetImages()
         }).catch(error => {
           this.$message.error(error.message)
-        })
+        })*/
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -217,23 +261,23 @@ export default {
       const formData = new FormData()
       formData.append('opsType', 1)
       formData.append('containerId', row.containerId)
-      handleDockerContainer(formData).then(resp => {
+      /* handleDockerContainer(formData).then(resp => {
         this.$message.info(resp.msg)
         this.getData()
       }).catch(error => {
         this.$message.error(error.message)
-      })
+      })*/
     },
     handleStop(index, row) {
       const formData = new FormData()
       formData.append('opsType', 2)
       formData.append('containerId', row.containerId)
-      handleDockerContainer(formData).then(resp => {
+      /* handleDockerContainer(formData).then(resp => {
         this.$message.info(resp.msg)
         this.getData()
       }).catch(error => {
         this.$message.error(error.message)
-      })
+      })*/
     },
     handleDelete(index, row) {
       this.$confirm('确定要删除选择的容器?', '提示', {
@@ -244,12 +288,12 @@ export default {
         const formData = new FormData()
         formData.append('opsType', 3)
         formData.append('containerId', row.containerId)
-        handleDockerContainer(formData).then(resp => {
+        /* handleDockerContainer(formData).then(resp => {
           this.$message.info(resp.msg)
           this.getData()
         }).catch(error => {
           this.$message.error(error.message)
-        })
+        })*/
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -258,15 +302,19 @@ export default {
       })
     },
     onRefresh() {
-      this.getData()
-
+      // this.getData()
       const jsonPayload = {}
-      jsonPayload.machineId = '123456'
-      jsonPayload.ops = 'images'
+      jsonPayload.machineId = '67c9f9a5120e4a7697231f2697ca6825'
+      jsonPayload.ops = 'containerList'
       this.sendMessage(JSON.stringify(jsonPayload))
     },
     onGetImages() {
-      this.dataList1 = []
+      const jsonPayload = {}
+      jsonPayload.machineId = this.machine
+      jsonPayload.ops = 'imageList'
+      this.sendMessage(JSON.stringify(jsonPayload))
+
+      /* this.dataList1 = []
       getDockerImageList(this.queryInfo).then(resp => {
         if (resp.code === 0) {
           this.dataList1 = resp.data
@@ -276,7 +324,22 @@ export default {
         }
       }).catch(error => {
         this.$message.error(error.message)
-      })
+      })*/
+    },
+    onSelectChange() {
+      this.machine = ''
+      this.getMachineList(this.env)
+    },
+    onSelectChange1() {
+      if (!this.wsConnectStatus) {
+        this.$message.warning('websocket 未连接')
+        return
+      }
+
+      const jsonPayload = {}
+      jsonPayload.machineId = this.machine
+      jsonPayload.ops = 'containerList'
+      this.sendMessage(JSON.stringify(jsonPayload))
     },
     // ****************************************************************************************************************
     // WebSocket相关
@@ -327,7 +390,14 @@ export default {
       this.wsClient.send(message)
     },
     processMessage(message) {
-      console.log(message)
+      const ops = message.ops
+      if (ops === 'containerList') {
+        this.dataList = message.resultList
+      } else if (ops === 'imageList') {
+        this.dataList1 = message.resultList
+      } else {
+        console.log(message)
+      }
     }
   }
 }