容器平台迁移

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/EnvDetail.vue

+<template>
+  <div>
+    <div style="padding:5px 20px;height: 30px;">
+      <div style="float:right;font-size:13px">
+        <span>自动刷新</span>
+        <el-switch v-model="timer" @change="refreshInterval" />
+        <span class="link-type" style="margin-left:20px" @click="openConf()">遇到问题?</span>
+      </div>
+    </div>
+
+    <el-alert v-show="notify.length>0" type="info" style=" font-size: 14px;" show-icon>
+      <slot name="description">
+        <p v-for="item in notify" :key="item._id">{{ item.content }}</p>
+      </slot>
+    </el-alert>
+
+    <div class="shadow-content" style="margin-top:20px">
+      <div class="warn-content">
+        <svg-icon icon-class="service" />
+        基础服务
+        <div style="float: right;">
+          <el-button type="warning" size="mini" round @click="getRepository('base')">新增服务</el-button>
+          <el-button type="success" size="mini" round @click="refresh">刷新状态</el-button>
+          <el-dropdown>
+            <el-button type="primary" size="mini" round>
+              更多操作
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="syncDb">同步线上MySQL</el-dropdown-item>
+              <el-dropdown-item @click.native="syncMq">同步线上MQ</el-dropdown-item>
+              <el-dropdown-item @click.native="clearRedis">清理Redis缓存</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <el-table :data="FormatTabledata.base" :header-cell-style="{background:'#F3F4F7',color:'#555'}" size="medium" align="center" style="width: 100%">
+        <el-table-column :index="indexMethod" type="index" />
+        <el-table-column v-if="serviceName!=='rabbitmq'" label="服务名">
+          <template slot-scope="scope">
+            <i v-if="scope.row.status == 'Normal'" class="el-icon-success" style="color: #67c23a" />
+            <i v-else class="el-icon-error" style="color: #f56c6c" />
+
+            <span v-if="scope.row.serviceName === 'consul'">
+              <span class="link-type" style="margin-right:5px" @click="openConsole(scope.row)">
+                {{ scope.row.serviceName }}
+              </span>
+            </span>
+
+            <span v-if="scope.row.serviceName === 'redash'">
+              <span class="link-type" style="margin-right:5px" @click="openConsole(scope.row)">
+                {{ scope.row.serviceName }}
+              </span>
+            </span>
+
+            <span v-if="scope.row.serviceName === 'rabbitmq'">
+              <span class="link-type" style="margin-right:5px" @click="openConsole(scope.row)">
+                {{ scope.row.serviceName }}
+              </span>
+
+              <el-popover v-if="moreShow" placement="top-start" trigger="hover" title="本地比线上多出的配置">
+                <el-table :data="moreArray" max-height="500">
+                  <el-table-column width="100" property="type" label="Type" />
+                  <el-table-column width="500" property="value" label="Value" />
+                </el-table>
+                <i slot="reference" class="el-icon-sort-up" style="color: #67c23a" />
+              </el-popover>
+
+              <el-popover v-if="lostShow" placement="top-start" trigger="hover" title="本地比线上缺少的配置">
+                <el-table :data="lostArray" max-height="500">
+                  <el-table-column width="100" property="type" label="Type" />
+                  <el-table-column width="500" property="value" label="Value" />
+                </el-table>
+                <i slot="reference" class="el-icon-sort-down" style="color: #f56c6c" />
+              </el-popover>
+
+            </span>
+            <span v-if="scope.row.serviceName !== 'rabbitmq'&& scope.row.serviceName !== 'consul' && scope.row.serviceName !== 'redash'">{{ scope.row.serviceName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lanIp" width="110" label="IP地址" />
+        <el-table-column prop="portMappings" label="服务端口">
+          <template slot-scope="scope">
+            <el-tooltip v-show="scope.row.serviceName === 'redis-sentinel'" placement="top">
+              <div slot="content">四个端口分别为一主二从一哨兵<br>哨兵名称：qsmaster，没有密码</div>
+              <div><span v-for="item in scope.row.portMappings" :key="item.port">{{ item.nodePort }}->{{ item.port }} </span></div>
+            </el-tooltip>
+            <span v-for="item in scope.row.portMappings" v-show="scope.row.serviceName !== 'redis-sentinel'" :key="item.port">{{ item.nodePort }}->{{ item.port }} </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="image" label="镜像">
+          <template slot-scope="scope">
+            {{ scope.row.image | formatImages }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" width="120" label="创建时间" />
+        <el-table-column prop="status" width="100" label="运行状态">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatStatus }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80" fixed="right">
+          <template slot-scope="scope">
+            <el-dropdown>
+              <el-button type="primary" size="mini">
+                更多
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="getServiceDetails(scope.row)">
+                  <svg-icon icon-class="detail" />
+                  详细信息
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="restartService(scope.row)">
+                  <svg-icon icon-class="restart" />
+                  重置服务
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="updateDeploy(scope.row)">
+                  <svg-icon icon-class="f5" />
+                  更新部署
+                </el-dropdown-item>
+                <el-dropdown-item v-permission="['admin']" style="color: red" @click.native="deleteService(scope.row) ">
+                  <svg-icon icon-class="delete" />
+                  删除服务
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-for="(item,index) in typeList" :key="index" class="shadow-content">
+      <div class="warn-content">
+        <svg-icon icon-class="service" />
+        {{ item._id.toUpperCase() }} 服务
+        <div style="float: right">
+          <el-button type="primary" size="mini" round @click="deployMaster(FormatTabledata[item._id])">一键部署master</el-button>
+          <el-button type="warning" size="mini" round @click="getRepository(item._id)">新增服务</el-button>
+          <el-button type="success" size="mini" round @click="refresh">刷新状态</el-button>
+          <el-button type="danger" size="mini" round @click="restartAll(FormatTabledata[item._id])">重置所有服务</el-button>
+        </div>
+      </div>
+      <el-table :data="FormatTabledata[item._id]" :header-cell-style="{background:'#F3F4F7',color:'#555'}" size="medium" align="center" style="width: 100%">
+        <el-table-column :index="indexMethod" type="index" />
+        <el-table-column prop="serviceName" label="服务名">
+          <template slot-scope="scope">
+            <i v-if="scope.row.status == 'Normal'" class="el-icon-success" style="color: #67c23a" />
+            <i v-else class="el-icon-error" style="color: #f56c6c" />
+            <span class="link-type" @click="handleDetail(scope.row)">{{ scope.row.serviceName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="image" label="镜像">
+          <template slot-scope="scope">
+            {{ scope.row.image | filterTag }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" width="120" label="创建时间" />
+        <el-table-column prop="status" width="100" label="运行状态">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatStatus }}
+          </template>
+        </el-table-column>
+
+        <el-table-column v-if="item._id==='java'" show-overflow-tooltip width="90" label="Mock">
+          <template slot-scope="scope">
+            <el-tooltip v-show="scope.row.labels.mock==='1'" placement="top">
+              <div slot="content">使用apollo集群k8s-mock进行启动</div>
+              <span v-if="scope.row.labels.mock==='1'">是</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+
+        <el-table-column v-if="item._id==='java'" width="150" label="调试">
+          <template slot-scope="scope">
+            <span v-if="scope.row.serviceType==='NodePort'">{{ scope.row.lanIp }}:{{ scope.row.portMappings[1].nodePort }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="控制台/日志/Kibana" width="170">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="控制台" placement="top">
+              <el-button type="primary" icon="el-icon-time" circle @click="linkShell(scope.row)" />
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="日志" placement="top">
+              <el-button type="success" icon="el-icon-time" circle @click="linkLog(scope.row)" />
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="Kibana(如果没有数据，需删除当前服务后重新添加)" placement="top">
+              <el-button type="info" icon="el-icon-time" circle @click="linkKibana(scope.row)" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80" fixed="right">
+          <template slot-scope="scope">
+            <el-dropdown>
+              <el-button type="primary" size="mini">
+                更多
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="getServiceDetails(scope.row)">
+                  <svg-icon icon-class="detail" />
+                  详细信息
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="updateService(scope.row)">
+                  <svg-icon icon-class="f5" />
+                  更新服务
+                </el-dropdown-item>
+
+                <el-dropdown-item @click.native="restartService(scope.row)">
+                  <svg-icon icon-class="restart" />
+                  重置服务
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="updateDomain(scope.row)">
+                  <svg-icon icon-class="doamin" />
+                  更新域名
+                </el-dropdown-item>
+
+                <el-dropdown-item style="color: red" @click.native="deleteService(scope.row, item) ">
+                  <svg-icon icon-class="delete" />
+                  删除服务
+                </el-dropdown-item>
+
+                <el-dropdown-item @click.native="updateDeploy(scope.row)">
+                  <svg-icon icon-class="f5" />
+                  更新部署
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--添加服务dialog-->
+    <el-dialog :visible.sync="dialogVisible" :title="title">
+      <el-alert :closable="false" title="温馨提醒" type="warning" description="该操作会创建这个服务对应的镜像分支。" />
+      <p class="title-sub">选择服务</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="reponame" clearable filterable class="elSelect" placeholder="请选择服务，支持模糊搜索" @change="getTag">
+            <el-option v-for="(item,index) in options" :key="index" :label="item.appname.split(':')[0]" :value="item.tag.split(':')[0]" />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <div v-show="is_mock">
+        <p class="title-sub">是否使用mock<span style="font-size: 12px">(使用apollo集群k8s-mock进行启动)</span></p>
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <el-select v-model="mock.key" filterable clearable class="elSelect" placeholder="请选择是否使用mock">
+              <el-option v-for="item in debugOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div v-permission="['admin']" v-show="is_show">
+        <p class="title-sub">服务名称<span style="font-size: 12px">(创建多个mysql时需要填写此字段)</span></p>
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <el-input v-model="mysqlName" placeholder="请输入服务名称" clearable />
+          </el-col>
+        </el-row>
+      </div>
+
+      <p class="title-sub">选择镜像</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="tagName" filterable clearable class="elSelect" placeholder="请选择镜像，支持模糊搜索">
+            <el-option v-for="(item,index) in tagOptions" :key="index" :label="item.tagName" :value="item.tagName" />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <p v-if="label==='node'||label==='java'||label==='go'" class="title-sub">是否调试模式<span style="font-size: 12px">(执行测试时选择默认选项否即可)</span> </p>
+      <el-row v-if="label==='node'||label==='java'||label==='go'" :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="debug.key" filterable clearable class="elSelect" placeholder="请选择是否调试模式，执行测试时请选择否">
+            <el-option v-for="item in debugOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <div v-show="is_wechat">
+        <p class="title-sub">是否微信模式<span style="font-size: 12px">(测试微信时选择是)</span></p>
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <el-select v-model="wechat.key" filterable clearable class="elSelect" placeholder="请选择是否微信模式，测试微信时选择是">
+              <el-option v-for="item in debugOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="createClusterService">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!--更新服务的弹框-->
+    <el-dialog :visible.sync="updateDialog" title="更新服务">
+      <el-alert :closable="false" title="温馨提醒" type="warning" description="警告:该操作将会更新这个服务为指定版本，在这个pod上做的所有操作将会丢失。" />
+      <p class="title-sub">选择服务</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-input v-model="serviceName" :disabled="true" placeholder="请输入内容" />
+        </el-col>
+      </el-row>
+
+      <p class="title-sub">选择镜像</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="tagName" filterable clearable class="elSelect" placeholder="请选择镜像,支持模糊搜索">
+            <el-option v-for="(item,index) in tagOptions" :key="index" :label="item.tagName" :value="item.tagName" />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="updateDialog = false">取 消</el-button>
+        <el-button type="primary" @click="updateClusterService()">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="centerDialogVisible" title="详细信息" height="500px" center>
+      <div class="editor-container">
+        <json-editor ref="jsonEditor" v-model="value" />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogHost" title="更新域名">
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-form-item label="域名" prop="host">
+          <el-input v-model="form.host" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogHost=false">取 消</el-button>
+        <el-button type="primary" @click="submitHost('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+</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>