Skip to content
GitLab
Commit a0d42673 authored by meifan's avatar meifan
Browse files

futrue:add events and node manage

parent c97b893c
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1892 additions and 1011 deletions
+1892 -1011
client/src/assets/img/create-g.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/assets/img/create-l.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/assets/img/operator-g.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/assets/img/operator-l.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/assets/img/package-g.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/assets/img/package-l.png 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/components/locale-select.vue 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
client/src/gateway/httprouter.vue
+ 2
- 2
View file @ a0d42673
......@@ -133,7 +133,7 @@ export default {
},
fetchUpstreams(){
return this.$ajax.getJSON('/gateway/api/upstream_list', {gatewayObj: this.gatewayObj}).then((data) => {
let upstreams = data.rows.map((item)=>{
let upstreams = data.map((item)=>{
return item.f_upstream
})
upstreams = Array.from(new Set(upstreams))
......@@ -272,4 +272,4 @@ export default {
margin-right: 10px;
}
}
</style>
</style>
\ No newline at end of file
client/src/k8s/inc/k8s/k8s.vue
+ 0
- 1
View file @ a0d42673
......@@ -36,7 +36,6 @@
size="small"
v-model="item.key"
:placeholder="$t('nodeList.table.th.label')"
pattern="^[a-zA-Z0-9]([-a-zA-Z0-9]*[a-zA-Z0-9])?$"
:pattern-tip="$t('deployService.form.labelMatch.labelValid')"
></let-input>
</let-form-item>
......
client/src/k8s/operation/approval.vue
+ 0
- 16
View file @ a0d42673
......@@ -453,7 +453,6 @@ export default {
this.getServerTemplate()
this.getNodeList()
this.fetchData();
this.getDefaultValue();
},
methods: {
......@@ -468,21 +467,6 @@ export default {
this.K8SisCheckedAll = false
}
},
// getDefaultValue(){
// let { K8SNetModeOptional, K8SNodeSelectorKind } = this
// this.$ajax.getJSON('/k8s/api/default', {}).then((data) => {
// if(data.K8SNetModeOptional){
// K8SNetModeOptional = data.K8SNetModeOptional
// }
// if(data.K8SNodeSelectorKind){
// K8SNodeSelectorKind = data.K8SNodeSelectorKind
// }
// this.K8SNetModeOptional = K8SNetModeOptional
// this.K8SNodeSelectorKind = K8SNodeSelectorKind
// }).catch((err) => {
// this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
// });
// },
fetchData() {
const loading = this.$refs.table.$loading.show();
......
client/src/k8s/operation/components/deployed-edit.vue deleted 100644 → 0
+ 0
- 17
View file @ c97b893c
<!--
* @date: 2021-09-06 17:20
* @description：deployed-edit 部署编辑
-->
<template>
</template>
<script>
export default {
name: "deployed-edit"
}
</script>
<style scoped>
</style>
client/src/k8s/operation/components/deployed-view.vue deleted 100644 → 0
+ 0
- 17
View file @ c97b893c
<!--
* @date: 2021-09-06 17:20
* @description：deployed-view 部署查看
-->
<template>
</template>
<script>
export default {
name: "deploy-view"
}
</script>
<style scoped>
</style>
client/src/k8s/operation/components/node-detail.vue 0 → 100644
+ 194
- 0
View file @ a0d42673
<!--
* @date: 2021-11-05 13:50
* @description：节点详细信息查看
-->
<template>
<div>
<div>
<span class="title">{{ nodeDetail.NodeName }}</span>
<span style="margin-left: 10px">
<el-tag effect="plain" type="success" v-if="nodeDetail.status=='Active'">
{{ nodeDetail.status }}
</el-tag>
<el-tag effect="plain" type="danger" v-if="nodeDetail.status=='Unavailable'">
{{ nodeDetail.status }}
</el-tag>
</span>
<span style="float: right">
<el-button type="primary" icon="el-icon-back" size="small" @click="closeDetail"></el-button>
</span>
</div>
<div style="margin-top: 10px">
<span>Age:{{ getAge(nodeDetail.CreationTimestamp) }}</span>
</div>
<el-divider></el-divider>
<div>
<span v-for="item in nodeDetail.NodeAddress" class="item">{{ `${item.type}:${item.address}` }}</span>
<span class="item">Version:{{ nodeDetail.NodInfo.kernelVersion }}</span>
<span class="item">OS:{{ nodeDetail.NodInfo.osImage }}</span>
<span class="item">containerRuntimeVersion:{{ nodeDetail.NodInfo.containerRuntimeVersion }}</span>
</div>
<div style="margin-top: 10px">
Labels:
<el-tag style="margin: 2px 2px" v-for="(item, key) in nodeDetail.Labels" :key="key"
effect="plain" :type="key|tagType">
{{ key + ":" + item }}
</el-tag>
</div>
<el-divider></el-divider>
<div style="margin-top: 10px">
Conditions:
<el-tooltip placement="top" v-for="item in nodeDetail.Conditions" :key="item.type">
<div slot="content">
<p style="margin: 4px 0;font-size: 12px" v-for="(value,key) in item" :key="key">
{{ `${key}:${value}` }}
</p>
</div>
<el-tag style="margin: 2px 15px" effect="dark" :type="item|conditionsStatus">
{{ item.type }}
</el-tag>
</el-tooltip>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="8">
<el-card shadow="never">
<div slot="header" class="clearfix">
<span style="font-weight: bold">CPU</span>
<span style="float: right">0 of 4</span>
</div>
<el-progress :text-inside="true" :stroke-width="20" :percentage="1"></el-progress>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
<div slot="header" class="clearfix">
<span style="font-weight: bold">MEMORY</span>
<span style="float: right">0 of 7.78 GiB </span>
</div>
<el-progress :text-inside="true" :stroke-width="20" :percentage="1"></el-progress>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
<div slot="header" class="clearfix">
<span style="font-weight: bold">PODS</span>
<span style="float: right">8 of 110</span>
</div>
<el-progress :text-inside="true" :stroke-width="20" :percentage="7.3"></el-progress>
</el-card>
</el-col>
</el-row>
</div>
<el-divider></el-divider>
<!--标签页-->
<el-tabs type="border-card">
<el-tab-pane label="Info">
<el-form label-width="300px" label-position="left">
<div v-for="(value,key) in nodeDetail.NodInfo" :key="key">
<el-form-item :label="key">
{{ value }}
</el-form-item>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="Images">
<el-table ref="table" :data="nodeDetail.Images" border stripe highlight-current-row
height="400px">
<el-table-column label="names">
<template slot-scope="scope">
<p v-for="item in scope.row.names" :key="item">
{{item}}
</p>
</template>
</el-table-column>
<el-table-column label="size" width="150">
<template slot-scope="scope">
{{`${Math.ceil(scope.row.sizeBytes/1024/1024)}M`}}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Taints">
<el-table ref="table" :data="nodeDetail.Taints" border stripe highlight-current-row
height="400px">
<el-table-column label="effect" prop="effect" width="300"></el-table-column>
<el-table-column label="key" prop="key" ></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Conditions">
<el-table ref="table" :data="nodeDetail.Conditions" border stripe highlight-current-row
height="400px">
<el-table-column label="type" prop="type" width="150"></el-table-column>
<el-table-column label="status" prop="status" width="80"></el-table-column>
<el-table-column label="message" prop="message"></el-table-column>
<el-table-column label="reason" prop="reason"></el-table-column>
<el-table-column label="lastTransitionTime" width="200">
<template slot-scope="scope">{{scope.row.lastTransitionTime|timeFormat}}</template>
</el-table-column>
<el-table-column label="lastHeartbeatTime" width="200">
<template slot-scope="scope">{{scope.row.lastHeartbeatTime|timeFormat}}</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import moment from "moment"
export default {
name: "node-detail",
props: ["nodeDetail"],
filters: {
tagType(val) {
if (val.startsWith("tars.io/node")) {
return "warning"
} else if (val.startsWith("tars.io/ability")) {
return "success"
} else {
return ""
}
},
conditionsStatus(val) {
if (val.status == "False") {
return "danger"
} else {
return "success"
}
},
timeFormat(val){
return moment(val).format("YYYY-MM-DD HH:mm:ss");
}
},
methods: {
closeDetail() {
this.$emit("closeDetail")
},
getAge(createTimestamp) {
//1.取小时数
let hours = Math.ceil((new Date() - new Date(createTimestamp)) / (1000 * 60 * 60));
let day = 0, hour = 0;
if (hours >= 24) {
day = Math.ceil(hours / 24)
hour = hours % 24
}
return `${day}d${hour > 0 ? hour + "h" : ""}`;
}
}
}
</script>
<style scoped>
body {
font: 20px "Fira Sans";
}
.title {
font-size: 22px;
color: #141419;
}
.item {
margin: 0 20px 0 0
}
</style>
client/src/k8s/operation/event.vue 0 → 100644
+ 209
- 0
View file @ a0d42673
<!--
* @date: 2021-11-07 09:51
* @description：event 事件管理
-->
<template>
<div>
<let-form inline itemWidth="180px" @submit.native.prevent="search">
<let-form-item :label="$t('callChain.date')" style="width: 400px;">
<el-date-picker size="small" v-model="eventDate" type="datetimerange"
range-separator="~" :start-placeholder="$t('board.alarm.form.startDate')"
:end-placeholder="$t('board.alarm.form.endDate')" value-format="timestamp">
</el-date-picker>
</let-form-item>
<let-form-item :label="$t('filter.title.app')">
<el-select v-model="query.application" :placeholder="$t('pub.dlg.defaultValue')" size="small"
style="width: 100%" @change="getServerList(query.application)" :disabled="!serverEnable"
clearable>
<el-option v-for="item in appList" :key="item" :label="item"
:value="item"></el-option>
</el-select>
</let-form-item>
<let-form-item :label="$t('filter.title.serverName')">
<el-select v-model="query.serverName" :placeholder="$t('pub.dlg.defaultValue')"
style="width: 100%" clearable :disabled="!serverEnable" size="small"
@change="getPods">
<el-option v-for="item in serverNames" :key="item" :label="item"
:value="item"></el-option>
</el-select>
</let-form-item>
<let-form-item :label="$t('serverList.table.th.podName')">
<el-select v-model="query.pod" :placeholder="$t('pub.dlg.defaultValue')" @change="search"
style="width: 100%" clearable :disabled="!serverEnable" size="small">
<el-option v-for="item in pods" :key="item" :label="item"
:value="item"></el-option>
</el-select>
</let-form-item>
<let-form-item :label="$t('event.eventLevel')">
<el-select v-model="query.level" :placeholder="$t('pub.dlg.defaultValue')"
style="width: 100%" clearable size="small" @change="search">
<el-option v-for="item in levels" :key="item" :label="item"
:value="item"></el-option>
</el-select>
</let-form-item>
<let-form-item style="width: 240px">
<el-radio-group v-model="query.check" size="small" @change="checkedChange">
<el-radio-button label="Server">{{ $t('event.type.server') }}</el-radio-button>
<el-radio-button label="Cluster">{{ $t('event.type.cluster') }}</el-radio-button>
<el-radio-button label="Downtime">{{ $t('event.type.downtime') }}</el-radio-button>
</el-radio-group>
</let-form-item>
<let-form-item>
<let-button size="small" @click="search" theme="primary">{{ $t('operate.search') }}</let-button>
</let-form-item>
</let-form>
<el-table ref="table" :data="events" height="calc(100vh - 320px)" border stripe highlight-current-row
v-loading="loading">
<el-table-column label="kind" width="200" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.involvedObject.kind || "" }}</template>
</el-table-column>
<el-table-column label="namespace" width="100">
<template slot-scope="scope">{{ scope.row.involvedObject.namespace || "" }}</template>
</el-table-column>
<el-table-column label="name" width="200" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.involvedObject.name || "" }}</template>
</el-table-column>
<el-table-column label="type" prop="type" width="150"></el-table-column>
<el-table-column label="reason" prop="reason" width="200"></el-table-column>
<el-table-column label="message" prop="message" show-overflow-tooltip></el-table-column>
<el-table-column label="firstTime" width="180" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.firstTimestamp|timeFormat }}</template>
</el-table-column>
<el-table-column label="lastTime" width="180">
<template slot-scope="scope">{{ scope.row.lastTimestamp|timeFormat }}</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="pagination.page"
:page-size="pagination.size"
layout="total,prev,pager,next,jumper"
:total="pagination.total">
</el-pagination>
</div>
</template>
<script>
import moment from "moment";
export default {
name: "event",
data() {
return {
query: {
application: "",
serverName: "",
check: "Server",
},
eventDate: [new Date(new Date().getTime() - 2 * 60 * 60 * 1000).getTime(), new Date().getTime()],
appList: [],
serverNames: [],
pods: [],
levels: ["Normal", "Warning"],
loading: false,
pagination: {page: 1, size: 20, total: 1},
events: []
}
},
filters: {
timeFormat(val) {
return moment(val).format("YYYY-MM-DD HH:mm:ss");
}
},
watch: { //监听路由变化
$route(to, from) {
this.$set(this.query, "application", this.$route.query.application || "")
this.$set(this.query, "serverName", this.$route.query.serverName || "")
this.search()
}
},
mounted() {
this.$set(this.query, "application", this.$route.query.application || "")
this.$set(this.query, "serverName", this.$route.query.serverName || "")
this.getAppList();
this.search()
},
computed: {
serverEnable() {
return this.query.check == "Server"
},
},
methods: {
checkedChange() {
this.pagination.page = 1
this.loadData(1)
},
handleCurrentChange(val) {
this.loadData(val)
},
search() {
this.loadData(1)
},
loadData(curr_page) {
if (!curr_page) {
curr_page = 1
}
let startDate = "", endDate = ""
if (this.eventDate) {
startDate = this.eventDate[0];
endDate = this.eventDate[1];
}
let query = Object.assign({}, this.query,
{currPage: curr_page, pageSize: this.pagination.size},
{startDate, endDate})
this.loading = true;
this.$ajax.getJSON('/k8s/api/get_events', query).then((data) => {
this.events = data.rows
this.pagination.total = data.total
this.loading = false;
}).catch((err) => {
this.loading = false;
this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
});
},
//获取应用列表
getAppList() {
this.$ajax.getJSON('/k8s/api/application_select', {}).then((data) => {
this.appList = data.Data.map(item => {
return item.ServerApp
})
}).catch((err) => {
this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
});
},
async getServerList(app) {
this.$set(this.query, "serverName", "")
let servers = await this.$ajax.getJSON('/k8s/api/server_list', {ServerApp: app, isAll: true});
this.serverNames = servers.Data.map(item => {
return item.ServerName
});
this.search();
},
getPods() {
this.$set(this.query, "pod", "");
let startDate = "", endDate = ""
if (this.eventDate) {
startDate = this.eventDate[0];
endDate = this.eventDate[1];
}
let query = Object.assign({}, this.query,
{startDate, endDate})
this.$ajax.getJSON('/k8s/api/get_pods', query).then((data) => {
this.pods = data
this.search();
}).catch((err) => {
this.$set(this,"pods","")
});
this.search();
},
}
}
</script>
<style scoped>
</style>
client/src/k8s/operation/index.vue
+ 2
- 1
View file @ a0d42673
......@@ -9,7 +9,8 @@
<let-tab-pane :tab="$t('deployService.title.business')" tabkey="/operation/business"></let-tab-pane>
<let-tab-pane :tab="$t('deployService.title.application')" tabkey="/operation/application"></let-tab-pane>
<let-tab-pane :tab="$t('deployService.title.node')" tabkey="/operation/node"></let-tab-pane>
<let-tab-pane :tab="$t('deployService.title.affinity')" tabkey="/operation/affinity"></let-tab-pane>
<let-tab-pane :tab="$t('deployService.title.event')" tabkey="/operation/event"></let-tab-pane>
<!-- <let-tab-pane :tab="$t('deployService.title.affinity')" tabkey="/operation/affinity"></let-tab-pane>-->
<let-tab-pane :tab="$t('deployService.title.image')" tabkey="/operation/image"></let-tab-pane>
</let-tabs>
......
client/src/k8s/operation/node.vue
+ 518
- 334
View file @ a0d42673
This diff is collapsed.
client/src/k8s/server/index.vue
+ 817
- 555
View file @ a0d42673
This diff is collapsed.
client/src/k8s/server/manage.vue
+ 145
- 68
View file @ a0d42673
This diff is collapsed.
client/src/router/k8s.js
+ 5
- 0
View file @ a0d42673
......@@ -48,6 +48,7 @@ import OperationAffinity from '@/k8s/operation/affinity';
import OperationApplication from '@/k8s/operation/application';
import OperationBusiness from '@/k8s/operation/business';
import OperationNode from '@/k8s/operation/node';
import OperationEvent from '@/k8s/operation/event';
// 网关
import OperationGateway from '@/gateway/index';
......@@ -151,6 +152,10 @@ export default new Router({
path: 'node',
component: OperationNode,
},
{
path: 'event',
component: OperationEvent,
},
],
},
{
......
client/static/logview/javascripts/bootstrap.min.js 100755 → 100644
+ 0
- 0
View file @ a0d42673
File mode changed from 100755 to 100644
Supports Markdown
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

免费DevSecOps平台，让您的项目体验完整的DevSecOps流程，让项目更安全