添加 /bg/docker 路由, 对应 views/devops/docker 中的页面

src/api/devops.js

@@ -9,11 +9,11 @@ const devopsApi = {
   getAliyunKeyList: '/api/devops/machine/aliyun/key',
   getMachineProcList: '/api/devops/machine/proc',
   getMachineTaskList: '/api/devops/machine/task',
+  getDockerList: '/api/devops/docker',
   getEnvList: '/api/devops/envs',
   getAppTypeList: '/api/devops/app_types',
   getCompilerList: '/api/devops/build/compiler',
   getRepoAuthList: '/api/devops/build/repoauth',
-  getDockerRegistryList: '/api/devops/build/registry',
   getPackerList: '/api/devops/build/packer',
   getAppConfigList: '/api/devops/app/config/app',
   getAppDeployConfigList: '/api/devops/app/config/app/deploy',
@@ -102,6 +102,22 @@ export function eraseMachineTask(queryInfo) {
   return postForm(devopsApi.getMachineTaskList + '/clear', queryInfo)
 }
 
+export function getDockerfileImageList() {
+  return get(devopsApi.getDockerList + '/image')
+}
+
+export function getDockerRegistryList(pn) {
+  return get(devopsApi.getDockerList + '/registry/?pn=' + pn)
+}
+
+export function addDockerRegistry(formData) {
+  return postForm(devopsApi.getDockerList + '/registry', formData)
+}
+
+export function deleteDockerRegistry(formData) {
+  return postForm(devopsApi.getDockerList + '/registry/delete', formData)
+}
+
 export function getEnvList() {
   return get(devopsApi.getEnvList)
 }
@@ -150,18 +166,6 @@ export function deleteCompiler(formData) {
   return postForm(devopsApi.getCompilerList + '/delete', formData)
 }
 
-export function getDockerRegistryList(pn) {
-  return get(devopsApi.getDockerRegistryList + '?pn=' + pn)
-}
-
-export function addDockerRegistry(formData) {
-  return postForm(devopsApi.getDockerRegistryList, formData)
-}
-
-export function deleteDockerRegistry(formData) {
-  return postForm(devopsApi.getDockerRegistryList + '/delete', formData)
-}
-
 export function getPackerList(pn) {
   return get(devopsApi.getPackerList + '?pn=' + pn)
 }

src/router/background_devops.js

@@ -12,15 +12,16 @@ const User = () => import('views/devops/rbac/User')
 // machine
 const MachineHost = () => import('views/devops/machine/MachineHost')
 const AliyunKey = () => import('views/devops/machine/AliyunKey')
-const Docker = () => import('views/devops/machine/Docker')
 const MachineProc = () => import('views/devops/machine/MachineProc')
 const MachineTask = () => import('views/devops/machine/MachineTask')
 // build
 const BuildDir = () => import('views/devops/build/BuildDir')
 const RepoAuth = () => import('views/devops/build/RepoAuth')
 const Compiler = () => import('views/devops/build/Compiler')
-const DockerRegistry = () => import('views/devops/build/DockerRegistry')
 const Packer = () => import('views/devops/build/Packer')
+// docker
+const Docker = () => import('views/devops/docker/Docker')
+const DockerRegistry = () => import('views/devops/docker/DockerRegistry')
 // app
 const AppConfig = () => import('views/devops/app/AppConfig')
 const BuildDeploy = () => import('views/devops/app/BuildDeploy')
@@ -93,14 +94,6 @@ export default {
           component: AliyunKey,
           meta: { needAuth: true, roles: ['devops_admin'] }
         },
-        {
-          path: '/bg/machine/docker',
-          name: 'Docker',
-          title: 'Docker 管理',
-          icon: 'el-icon-s-data',
-          component: Docker,
-          meta: { needAuth: true, roles: ['devops_admin'] }
-        },
         {
           path: '/bg/machine/proc',
           name: 'MachineProc',
@@ -119,6 +112,32 @@ export default {
         }
       ]
     },
+    {
+      path: '/bg/docker',
+      name: 'DockerIndex',
+      title: 'Docker',
+      icon: 'el-icon-user-solid',
+      component: { render: (e) => e('router-view') },
+      meta: { needAuth: true, roles: ['devops_admin'] },
+      children: [
+        {
+          path: '/bg/docker/container',
+          name: 'Docker',
+          title: 'Docker 容器',
+          icon: 'el-icon-user-solid',
+          component: Docker,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        },
+        {
+          path: '/bg/docker/registry',
+          name: 'DockerRegistry',
+          title: 'Docker 仓库',
+          icon: 'el-icon-user-solid',
+          component: DockerRegistry,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        }
+      ]
+    },
     {
       path: '/bg/build',
       name: 'BuildDirIndex',
@@ -151,14 +170,6 @@ export default {
           component: Compiler,
           meta: { needAuth: true, roles: ['devops_admin'] }
         },
-        {
-          path: '/bg/build/docker_registry',
-          name: 'DockerRegistry',
-          title: 'docker 仓库',
-          icon: 'el-icon-files',
-          component: DockerRegistry,
-          meta: { needAuth: true, roles: ['devops_admin'] }
-        },
         {
           path: '/bg/build/packer',
           name: 'Packer',

src/views/devops/build/DockerRegistry.vue → src/views/devops/docker/DockerRegistry.vue

@@ -4,6 +4,7 @@
       <h3>docker 仓库列表</h3>
       <el-row style="margin-top: 10px">
         <el-button type="success" size="mini" icon="el-icon-plus" @click="handleShowAdd">添加</el-button>
+        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleShowImage">镜像列表</el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -75,11 +76,64 @@
         </el-form>
       </template>
     </el-dialog>
+    <el-dialog
+      title="Dockerfile 中使用的镜像"
+      append-to-body
+      :visible.sync="showImageDialog"
+      center
+    >
+      <template>
+        <el-table
+          :data="imageList"
+          border
+          height="480"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="repoTag"
+            label="镜像"
+          />
+          <el-table-column
+            prop="used"
+            label="使用量"
+          >
+            <template slot-scope="scope">
+              <el-tag
+                style="margin: 5px"
+                size="mini"
+              >
+                <span>{{ scope.row.appList.length }}</span>
+              </el-tag>
+              <el-button
+                style="margin: 5px"
+                size="mini"
+                type="success"
+                @click="handleShowApps(scope.$index, scope.row)"
+              >查看应用</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
+    <el-dialog
+      title="使用镜像的应用列表"
+      append-to-body
+      :visible.sync="showAppDialog"
+      center
+    >
+      <template>
+        <div v-for="(item, index) in appList" :key="index">
+          <el-col :md="4">
+            <el-tag style="margin: 5px">{{ item }}</el-tag>
+          </el-col>
+        </div>
+      </template>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { addDockerRegistry, deleteDockerRegistry, getDockerRegistryList } from '@/api/devops'
+import { addDockerRegistry, deleteDockerRegistry, getDockerfileImageList, getDockerRegistryList } from '@/api/devops'
 
 export default {
   name: 'DockerRegistry',
@@ -101,7 +155,12 @@ export default {
         registryUrl: '',
         username: '',
         password: ''
-      }
+      },
+      // **********************************************************************
+      showImageDialog: false,
+      imageList: [],
+      showAppDialog: false,
+      appList: []
     }
   },
   created() {
@@ -129,7 +188,7 @@ export default {
         this.$message.error(error.message)
       })
     },
-    handleShowAdd(index, row) {
+    handleShowAdd() {
       this.showAddDialog = true
     },
     onAddDockerRegistry() {
@@ -166,6 +225,22 @@ export default {
           message: '已取消'
         })
       })
+    },
+    handleShowImage() {
+      getDockerfileImageList().then(resp => {
+        if (resp.code === 0) {
+          this.imageList = resp.data
+          this.showImageDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleShowApps(index, row) {
+      this.appList = row.appList
+      this.showAppDialog = true
     }
   }
 }