Skip to content

Q
qahome-diamond
Commit 32987918 authored by kewei.jia's avatar kewei.jia
Browse files
Options

增加 刷新服务 重新部署 连接中断 删除服务等功能

parent 9e82376e
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 16 deletions
src/views/docker/envDetail.vue
View file @ 32987918
......@@ -2,11 +2,11 @@
<div>
<div class="shadow-content">
<div class="warn-content">
<svg-icon icon-class="table" />
<svg-icon icon-class="service"/>
基础服务
<div style="float: right;min-width: 300px;overflow: hidden">
<el-button type="warning" size="mini" round @click="getRepository('base')">新增服务</el-button>
<el-button type="warning" size="mini" round>刷新状态</el-button>
<el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
<el-dropdown>
<el-button type="warning" size="mini" round>
更多操作
......@@ -52,7 +52,7 @@
点击
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>详细信息</el-dropdown-item>
<el-dropdown-item @click.native="getServiceDetails(scope.row)">详细信息</el-dropdown-item>
<el-dropdown-item>重置服务</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
......@@ -62,12 +62,11 @@
</div>
<div v-for="(item,index) in typeList" :key="index" class="shadow-content">
<div class="warn-content">
<svg-icon icon-class="table" />
<svg-icon icon-class="service"/>
{{ item._id }}服务
<div style="float: right">
<el-button type="warning" size="mini" round @click="getRepository(item._id)">新增服务</el-button>
<el-button type="warning" size="mini" round>刷新状态</el-button>
<el-button type="warning" size="mini" round>重置所有UI服务</el-button>
<el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
</div>
</div>
<el-table
......@@ -94,6 +93,17 @@
<el-table-column
prop="status"
label="运行状态"/>
<el-table-column
label="调试状态">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="控制台" placement="top">
<el-button type="primary" icon="el-icon-tickets" 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>
</template>
</el-table-column>
<el-table-column label="更多" width="80" fixed="right">
<template slot-scope="scope">
<el-dropdown>
......@@ -101,8 +111,12 @@
点击
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="getServiceDetails(scope.row)">详细信息</el-dropdown-item>
<el-dropdown-item>重置服务</el-dropdown-item>
<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="updateDomain(scope.row)"><svg-icon icon-class="doamin"/>更新域名</el-dropdown-item>
<el-dropdown-item @click.native="restartService(scope.row)"><svg-icon icon-class="restart"/>重置服务</el-dropdown-item>
<el-dropdown-item style="color: red" @click.native="deleteService(scope.row) "><svg-icon icon-class="delete"/>删除服务</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
......@@ -115,14 +129,20 @@
:title="title">
<el-alert
:closable="false"
title="警告提示的文案"
title="温馨提醒"
type="warning"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
description="该操作会创建这个服务最新的master版本。"
/>
<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-select
v-model="reponame"
clearable
filterable
class="elSelect"
placeholder="请选择服务,支持模糊搜索"
@change="getTag">
<el-option
v-for="(item,index) in options"
:key="index"
......@@ -148,6 +168,42 @@
<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="rename"
: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="详细信息"
......@@ -170,9 +226,14 @@ import {
fetchTaglist,
getType,
CreateCluService,
fetchServiceDetails
fetchServiceDetails,
modifyCluService,
fetchServiceInstance,
deleteClusterService,
redeployClusterService
} from '@/api/docker'
import JsonEditor from '@/components/JsonEditor'
export default {
components: { JsonEditor },
data() {
......@@ -196,7 +257,9 @@ export default {
formInline: {
user: '',
region: ''
}
},
updateDialog: false,
rename: ''
}
},
created() {
......@@ -213,6 +276,13 @@ export default {
this.array2Object(servicelist)
})
},
refresh() {
this.getServicelist()
this.$message({
message: '状态已刷新',
type: 'success'
})
},
getRepository(type) {
this.type = type
this.reponame = ''
......@@ -235,7 +305,12 @@ export default {
CreateClusterService() {
const self = this
const image = `${this.server}/${this.reponame}:${this.tagName}`
CreateCluService({ serviceName: this.reponame.split('/')[1], namespace: this.namespace, image: image, type: this.type }).then(res => {
CreateCluService({
serviceName: this.reponame.split('/')[1],
namespace: this.namespace,
image: image,
type: this.type
}).then(res => {
if (res.data.code === '0000') {
this.$message({
message: res.data.data,
......@@ -263,6 +338,103 @@ export default {
this.value = res.data.data.service
})
},
updateService(value) {
this.tagName = ''
this.updateDialog = true
this.rename = value.serviceName
this.tagOptions = []
fetchTaglist({ reponame: 'qa-' + value.userLabels.type + '/' + this.rename }).then(res => {
if (res.data.data.tagCount) {
this.tagOptions = res.data.data.tagInfo
this.server = res.data.data.server
}
})
},
updateClusterService() {
const image = `${this.server}/${this.rename}:${this.tagName}`
const self = this
modifyCluService({ serviceName: this.rename, image: image, namespace: this.namespace }).then(res => {
if (res.data.code === '0000') {
this.$message({
message: '更新成功',
type: 'success',
duration: 1000,
onClose() {
self.updateDialog = false
self.getServicelist()
}
})
} else {
this.$message({
message: res.data.msg,
type: 'error'
})
}
})
},
restartService(data) {
redeployClusterService({ namespace: data.namespace, serviceName: data.serviceName }).then(res => {
if (res.data.code === '0000') {
this.$message({
type: 'success',
message: '服务重部署成功!'
})
} else {
this.$message({
type: 'error',
message: res.data.msg
})
}
})
},
updateDomain() {
alert('更新域名')
},
deleteService(data) {
this.$confirm('此操作将永久此服务, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteClusterService({ serviceName: data.serviceName, namespace: data.namespace }).then((res) => {
if (res.data.code === '0000') {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getServicelist()
} else {
this.$message({
type: 'error',
message: res.data.msg
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
linkShell(scopeData) {
fetchServiceInstance({ serviceName: scopeData.serviceName, namespace: scopeData.namespace }).then(res => {
const podName = res.data.data.instances[0].name
window.open(`http://172.30.220.24:9600/static/terminal.html?namespace=${scopeData.namespace}&pod=${podName}`, '_blank')
})
},
linkLog(scopeData) {
let path = ''
if (scopeData.userLabels.type === 'ui') {
path = '/usr/local/openresty/nginx/logs/access.log /usr/local/openresty/nginx/logs/error.log'
} else {
path = `/home/quant_group/logs/${scopeData.serviceName}.log`
}
fetchServiceInstance({ serviceName: scopeData.serviceName, namespace: scopeData.namespace }).then(res => {
const podName = res.data.data.instances[0].name
window.open(`http://172.30.220.24:9600/static/logs.html?namespace=${scopeData.namespace}&pod=${podName}&paths=${path}`, '_blank')
})
},
array2Object(original) { // 将数组转成对象存储
this.FormatTabledata = {}
original.forEach((item, index) => {
......@@ -281,11 +453,12 @@ export default {
}
</script>
<style scoped>
.title-sub{
.title-sub {
margin-top: 30px;
font-size: 15px;
}
.elSelect{
.elSelect {
width: 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment