容器平台迁移

src/api/k8s.js

+import request from '@/utils/holmesRequest'
+
+// 获取namespace列表
+export function getNamespaceList(queryInfo) {
+  return request({
+    url: '/k8s/namespace/list',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/views/docker/DevEnv.vue

+<template>
+  <div>
+    <div class="title">
+      <i class="el-icon-s-promotion"></i>
+      开发环境列表
+    </div>
+    <div>
+      <el-table :data="tableData" :header-cell-style="{background:'#F3F4F7',color:'#555'}" size="medium" align="center" style="width: 100%;margin-bottom: 30px;">
+        <el-table-column :index="indexMethod" label="#" type="index" />
+        <el-table-column prop="name" label="名称" width="100">
+          <template slot-scope="scope">
+            <span class="link-type" @click="jumpToDetail(scope.row.name)">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="160" />
+        <el-table-column prop="status" label="运行状态" width="100">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.status ==='Active'">正常</el-tag>
+            <el-tag type="danger" v-if="scope.row.status !== 'Active'">异常</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="owner" label="所有者" width="120" />
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="syncMySQL(scope.row.name)">同步线上MySQL</el-button>
+            <el-button size="mini" type="primary" @click="syncMQ(scope.row.name)">同步线上MQ</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNamespaceList } from '@/api/k8s'
+export default {
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    // 获取环境列表
+    getNamespaceList() {
+      getNamespaceList({ env: 'dev' }).then((resp) => {
+        this.tableData = resp.data.data
+      })
+    },
+    indexMethod(index) {
+      return index + 1
+    },
+    // 跳转到详情页面
+    jumpToDetail() {},
+    syncMySQL() {}
+  },
+  created() {
+    this.getNamespaceList()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title {
+  background: rgba(66, 185, 131, 0.1);
+  border-radius: 2px;
+  line-height: 40px;
+  margin: 0 0 10px 0px;
+  padding: 0 0 0 5px;
+}
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+</style>

src/views/docker/TestEnv.vue

+<template>
+  <div>
+    <div class="title">
+      <i class="el-icon-s-promotion"></i>
+      测试环境列表
+    </div>
+    <div>
+      <el-table :data="tableData" :header-cell-style="{background:'#F3F4F7',color:'#555'}" size="medium" align="center" style="width: 100%;margin-bottom: 30px;">
+        <el-table-column :index="indexMethod" label="#" type="index" />
+        <el-table-column prop="name" label="名称" width="100">
+          <template slot-scope="scope">
+            <span class="link-type" @click="jumpToDetail(scope.row.name)">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="160" />
+        <el-table-column prop="status" label="运行状态" width="100">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.status ==='Active'">正常</el-tag>
+            <el-tag type="danger" v-if="scope.row.status !== 'Active'">异常</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="owner" label="所有者" width="120" />
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="syncMySQL(scope.row.name)">同步线上MySQL</el-button>
+            <el-button size="mini" type="primary" @click="syncMQ(scope.row.name)">同步线上MQ</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNamespaceList } from '@/api/k8s'
+export default {
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    // 获取环境列表
+    getNamespaceList() {
+      getNamespaceList({ env: 'test' }).then((resp) => {
+        this.tableData = resp.data.data
+      })
+    },
+    indexMethod(index) {
+      return index + 1
+    },
+    // 跳转到详情页面
+    jumpToDetail() {
+      this.$router.push({
+        path: `/docker/env`
+      })
+    },
+    syncMySQL() {}
+  },
+  created() {
+    this.getNamespaceList()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title {
+  background: rgba(66, 185, 131, 0.1);
+  border-radius: 2px;
+  line-height: 40px;
+  margin: 0 0 10px 0px;
+  padding: 0 0 0 5px;
+}
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+</style>