add adapter management - adapter list page

public/statusEnd.svg

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="_层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 19.8 29.7" style="enable-background:new 0 0 19.8 29.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-	.st1{fill:url(#SVGID_2_);}
-	.st2{fill:url(#SVGID_3_);}
-	.st3{fill:#FF8B00;}
-	.st4{fill:url(#SVGID_4_);}
-</style>
-<radialGradient id="SVGID_1_" cx="9.92" cy="-284.2275" r="9.92" gradientTransform="matrix(1 0 0 -0.66 0 -164.76)" gradientUnits="userSpaceOnUse">
-	<stop  offset="0.48" style="stop-color:#FFF76A"/>
-	<stop  offset="1" style="stop-color:#FFE66A;stop-opacity:0"/>
-</radialGradient>
-<ellipse class="st0" cx="9.9" cy="23.1" rx="9.9" ry="6.6"/>
-<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="9.92" y1="5.28" x2="9.92" y2="14.66" gradientTransform="matrix(1 0 0 -1 0 32)">
-	<stop  offset="0" style="stop-color:#EB5E00"/>
-	<stop  offset="1" style="stop-color:#F0DF5E"/>
-</linearGradient>
-<ellipse class="st1" cx="9.9" cy="22" rx="7.3" ry="4.7"/>
-<g>
-	
-		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="9.98" y1="7.75" x2="9.98" y2="13.1904" gradientTransform="matrix(1 0 0 -1 0 32)">
-		<stop  offset="0" style="stop-color:#FFDCC0"/>
-		<stop  offset="1" style="stop-color:#FFE1C0"/>
-	</linearGradient>
-	<path class="st2" d="M10,24.3C7.3,24.3,5,23,5,21.5s2.3-2.7,4.9-2.7s4.9,1.2,4.9,2.7S12.7,24.3,10,24.3z"/>
-	<path class="st3" d="M10,19.3c2.5,0,4.4,1.2,4.4,2.2s-1.9,2.2-4.4,2.2s-4.4-1.2-4.4-2.2S7.4,19.3,10,19.3 M10,18.3
-		c-3,0-5.4,1.4-5.4,3.2S7,24.8,10,24.8s5.4-1.4,5.4-3.2S13,18.3,10,18.3L10,18.3z"/>
-</g>
-<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="10.1568" y1="20.5234" x2="10.1568" y2="0.757">
-	<stop  offset="0" style="stop-color:#FFFFFF"/>
-	<stop  offset="1" style="stop-color:#FF8B00"/>
-</linearGradient>
-<path class="st4" d="M10.2,0.8C6.2,0.8,3,4,3,7.9c0,5.8,7.2,12.6,7.2,12.6s7.2-6.7,7.2-12.6C17.3,4,14.1,0.8,10.2,0.8z M10.2,11.5
-	c-2,0-3.6-1.6-3.6-3.6s1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6S12.1,11.5,10.2,11.5z"/>
-</svg>

public/statusIng.svg

@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="_层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 19.8 29.7" style="enable-background:new 0 0 19.8 29.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-	.st1{fill:url(#SVGID_2_);}
-	.st2{fill:#CCFFFB;}
-	.st3{fill:#00FFB6;}
-	.st4{fill:url(#SVGID_3_);}
-</style>
-<radialGradient id="SVGID_1_" cx="9.92" cy="-303.9175" r="9.92" gradientTransform="matrix(1 0 0 -0.66 0 -177.8)" gradientUnits="userSpaceOnUse">
-	<stop  offset="0.48" style="stop-color:#6CF8FF"/>
-	<stop  offset="1" style="stop-color:#6CFFD8;stop-opacity:0"/>
-</radialGradient>
-<ellipse class="st0" cx="9.9" cy="23.1" rx="9.9" ry="6.6"/>
-<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="9.92" y1="5.28" x2="9.92" y2="14.66" gradientTransform="matrix(1 0 0 -1 0 32)">
-	<stop  offset="0" style="stop-color:#15C252"/>
-	<stop  offset="1" style="stop-color:#1586D1;stop-opacity:0.69"/>
-</linearGradient>
-<ellipse class="st1" cx="9.9" cy="22" rx="7.3" ry="4.7"/>
-<g>
-	<path class="st2" d="M10,24.3C7.3,24.3,5,23,5,21.5s2.3-2.7,4.9-2.7s4.9,1.2,4.9,2.7S12.7,24.3,10,24.3z"/>
-	<path class="st3" d="M10,19.3c2.5,0,4.4,1.2,4.4,2.2s-1.9,2.2-4.4,2.2s-4.4-1.2-4.4-2.2S7.4,19.3,10,19.3 M10,18.3
-		c-3,0-5.4,1.4-5.4,3.2S7,24.8,10,24.8s5.4-1.4,5.4-3.2S13,18.3,10,18.3L10,18.3z"/>
-</g>
-<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="9.98" y1="20.7665" x2="9.98" y2="1">
-	<stop  offset="0" style="stop-color:#BDF9E1"/>
-	<stop  offset="1" style="stop-color:#25CB96"/>
-</linearGradient>
-<path class="st4" d="M10,1C6,1,2.8,4.2,2.8,8.2C2.8,14,10,20.8,10,20.8s7.2-6.7,7.2-12.6C17.2,4.2,13.9,1,10,1z M10,11.8
-	c-2,0-3.6-1.6-3.6-3.6S8,4.6,10,4.6c2,0,3.6,1.6,3.6,3.6S12,11.8,10,11.8z"/>
-</svg>

public/statusUn.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="_层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 19.8 29.8" style="enable-background:new 0 0 19.8 29.8;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-	.st1{fill:url(#SVGID_2_);}
-	.st2{fill:#CAE8FF;}
-	.st3{fill:#0086FF;}
-	.st4{fill:url(#SVGID_3_);}
-</style>
-<radialGradient id="SVGID_1_" cx="9.92" cy="-323.9676" r="9.92" gradientTransform="matrix(1 0 0 -0.66 0 -190.96)" gradientUnits="userSpaceOnUse">
-	<stop  offset="0.48" style="stop-color:#3AA9FC"/>
-	<stop  offset="1" style="stop-color:#57B7FF;stop-opacity:0"/>
-</radialGradient>
-<ellipse class="st0" cx="9.9" cy="23.2" rx="9.9" ry="6.6"/>
-<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="9.84" y1="5.28" x2="9.84" y2="14.66" gradientTransform="matrix(1 0 0 -1 0 32)">
-	<stop  offset="0" style="stop-color:#0000FF"/>
-	<stop  offset="1" style="stop-color:#2AAEF1"/>
-</linearGradient>
-<ellipse class="st1" cx="9.8" cy="22" rx="7.3" ry="4.7"/>
-<g>
-	<path class="st2" d="M9.8,24.3c-2.7,0-4.9-1.2-4.9-2.7s2.3-2.7,4.9-2.7c2.7,0,4.9,1.2,4.9,2.7S12.5,24.3,9.8,24.3z"/>
-	<path class="st3" d="M9.8,19.3c2.5,0,4.4,1.2,4.4,2.2s-1.9,2.2-4.4,2.2s-4.4-1.2-4.4-2.2S7.3,19.3,9.8,19.3 M9.8,18.3
-		c-3,0-5.4,1.4-5.4,3.2s2.4,3.2,5.4,3.2s5.4-1.4,5.4-3.2S12.8,18.3,9.8,18.3L9.8,18.3z"/>
-</g>
-<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="9.92" y1="20.9674" x2="9.92" y2="1.201">
-	<stop  offset="0" style="stop-color:#DEF5FF"/>
-	<stop  offset="0.53" style="stop-color:#2AAEFF;stop-opacity:0.7"/>
-	<stop  offset="1" style="stop-color:#008CFF"/>
-</linearGradient>
-<path class="st4" d="M9.9,1.2c-4,0-7.2,3.2-7.2,7.2C2.7,14.2,9.9,21,9.9,21s7.2-6.7,7.2-12.6C17.1,4.4,13.9,1.2,9.9,1.2z M9.9,12
-	c-2,0-3.6-1.6-3.6-3.6s1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6S11.9,12,9.9,12z"/>
-</svg>

src/api/pcm/adapter.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export const getAdapterList = (params) => {
+  return request({ url: '/pcm/v1/adapter/list', method: 'get', params })
+}
+
+export const deleteAdapter = (id) => {
+  return request({ url: `/pcm/v1/adapter/delete?id=${id}`, method: 'delete' })
+}

src/layout/components/Navbar.vue

@@ -37,6 +37,9 @@
           <el-dropdown-item @click.native="toMonitorManagement">
             告警中心
           </el-dropdown-item>
+          <el-dropdown-item @click.native="toAdapterManagement">
+            适配器管理
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">退出登录</span>
           </el-dropdown-item>
@@ -95,6 +98,10 @@ export default {
       this.$store.dispatch('user/setRouteType', 'monitorManagement')
       this.$router.push({ path: '/monitorManagement/warnList' })
     },
+    toAdapterManagement() {
+      this.$store.dispatch('user/setRouteType', 'adapterManagement')
+      this.$router.push({ path: '/adapterManagement/list' })
+    },
     toSetting() {
       this.$store.dispatch('user/setRouteType', 'setting')
       this.$router.push({ path: '/setting/monitor' })

src/router/index.js

@@ -18,6 +18,7 @@ import resourceManagementRouter from './modules/resourceManagement'
 import modelarts from './modules/modelarts'
 import taskManagementRouter from './modules/taskManagement'
 import strategyManagementRouter from './modules/strategy'
+import adapterMangementRouter from './modules/adapterManagement'
 /* Router Modules */
 // import componentsRouter from './modules/components'
 // import tableRouter from './modules/table'
@@ -128,7 +129,8 @@ export const constantRoutes = [
   resourceManagementRouter,
   modelarts,
   taskManagementRouter,
-  strategyManagementRouter
+  strategyManagementRouter,
+  adapterMangementRouter
 ]
 
 const createRouter = () => new Router({

src/router/modules/adapterManagement.js

@@ -0,0 +1,28 @@
+import Layout from '@/layout'
+const Router = {
+  path: '/adapterManagement',
+  component: Layout,
+  name: '适配器管理',
+  meta: {
+    title: '适配器管理',
+    icon: 'yunweijiankongmokuai'
+  },
+  children: [
+    {
+      path: 'list',
+      component: () => import('@/views/adapterManagement/list'),
+      redirect: 'list',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/adapterManagement/list'),
+          name: 'list',
+          // redirect: 'podWarn',
+          meta: { title: '适配器列表', icon: 'xunijiguanli-zhuji', affix: true },
+          hidden: false
+        }
+      ]
+    }
+  ]
+}
+export default Router

src/views/adapterManagement/list.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="podInfo">
+    <el-card class="basicInfo">
+      <img src="@/assets/images/node.png" class="sidebar-logo" alt="项目">
+      <h4>适配器</h4>
+      <span class="tips title-tips">
+        支持用户上传新的PCM适配技术栈，并通过当前功能，进行适配绑定</span>
+    </el-card>
+    <el-card>
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="C-P适配器设置" />
+        <el-tab-pane label="P端集群关联" />
+      </el-tabs>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :columns="columns"
+        :filter-map="filterMap"
+        :get-list-action="activeName === '0' ? getAdapterList : getAdapterList"
+        :default-sort="{prop: 'createTime', order: 'ascending'}"
+        tooltip-effect="dark"
+      >
+        <template v-slot:filterBtns>
+          <span>总条数：<span>{{ num }}</span></span>
+          <el-button size="medium" type="primary" @click="createItem">新增配置</el-button>
+        </template>
+      </List>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+import { getAdapterList, deleteAdapter } from '@/api/pcm/adapter'
+export default {
+  components: { List },
+  data() {
+    return {
+      getAdapterList,
+      filterMap: {
+        name: {
+          label: '名称'
+        }
+      },
+      activeName: '0',
+      columns: [
+        { prop: 'name', label: 'Participant名称' },
+        { prop: 'nickname', label: '技术栈名称' },
+        { prop: 'version', label: '技术栈版本号' },
+        { prop: 'server', label: '地址' },
+        { prop: 'createTime', label: '创建时间', sortable: true, formatter: (row) => {
+          return <div>{row.createTime}</div>
+        } },
+        { prop: 'more', label: '更多操作', formatter: (row) => {
+          return <div>
+            <el-dropdown>
+              <el-button className='el-dropdown-link' size='mini' icon='el-icon-more' circle>
+              </el-button>
+              <el-dropdown-menu slot='dropdown'>
+                <span onClick={() => this.viewDetail(row)}> <el-dropdown-item> 查看详情 </el-dropdown-item> </span>
+                <span onClick={() => this.deleteItem(row.id)}> <el-dropdown-item> 删除 </el-dropdown-item> </span>
+
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        } }
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    viewDetail(row) {
+      // this.$router.push({ path: `virtual-machine/detail`, query: { name: row.name, namespace: row.namespace }})
+    },
+    createItem() {
+      this.$router.push({ path: `create` })
+    },
+    deleteItem(id) {
+      this.$confirm(`您确定要删除吗？`, { type: 'warning' }).then(() => {
+        deleteAdapter(id).then(e => {
+          if (e.code === 200) {
+            this.$message.success('删除成功')
+            this.tabSwitch()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+  <style lang="scss">
+
+  </style>

src/views/taskManagement/taskList/list.vue

@@ -11,6 +11,7 @@
         ref="multipleTable"
         class="multipleTable"
         :columns="columns"
+        :filter-map="filterMap"
         func-name="getVirtualMachineList"
         :default-sort="{prop: 'existTime', order: 'ascending'}"
         tooltip-effect="dark"
@@ -31,6 +32,11 @@ export default {
   components: { List },
   data() {
     return {
+      filterMap: {
+        name: {
+          label: '名称'
+        }
+      },
       columns: [
         { prop: 'name', label: '任务名称', sortable: true, formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.name}</a> } },
         {