gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'codeCheck' of git.mesalab.cn:nezha/nezha-fronted into codeCheck

Browse Source
This commit is contained in:
wangwenrui
2020-06-19 19:44:40 +08:00
parent b3ac8130d7 7b770036de
commit 78ded57dcd
9 changed files with 180 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1376,14 +1376,14 @@ li{
margin-left: 10px;
}
/* start--param*/
.param-box {
.param-box, .tag-edit-box {
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.param-box-endpoint {
height: 325px;
}
.param-box-module {
.param-box-module, .tag-edit-box {
height: 140px;
}
.param-box-row {
@@ -2042,3 +2042,35 @@ li{
font-family: NotoSans !important;
font-size: 12px !important;
}
.tag-edit-box {
.tag-edit-box-head {
display: flex;
box-sizing: border-box;
>div {
font-size: 13px;
color: #0275b8;
}
>div:not(:last-of-type) {
width: calc(50% - 25px);
padding: 0 10px;
}
>div:last-of-type {
width: 50px;
}
}
.tag-edit-box-body {
display: flex;
box-sizing: border-box;
.tag-edit {
padding: 0 10px;
}
>div:not(:last-of-type) {
width: calc(50% - 25px);
padding: 0 10px;
}
>div:last-of-type {
width: 50px;
}
}
}

61
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -42,6 +42,19 @@
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
<span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
<div v-if="key == 'tags'" class="no-overflow">
<template v-if="value && value.length > 0">
<nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px; vertical-align: middle;"
:cursor-point="false"
:key="tagItem.id"
v-for="(tagItem, tagIndex) in value">
<div :id="`tag-${index}-${tagIndex}`" class="tag-value">
<span class="content-text">{{tagItem.value}}</span>
</div>
</nz-alert-tag>
</template>
<template v-else>&nbsp;</template>
</div>
<template v-else-if="key == 'pingRtt'">
<div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
<span>{{value ? value + 'ms' : ''}}</span>
@@ -149,7 +162,7 @@
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
<template v-else-if="endpointKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
@@ -196,13 +209,16 @@
import loading from "../common/loading";
import timePicker from '../common/timePicker';
import chartPreview from './chartPreview';
import echarts from 'echarts';
import nzAlertTag from '../page/alert/nzAlertTag';
export default {
name: 'chartDetail',
components: {
'loading': loading,
'time-picker': timePicker,
'chart-preview': chartPreview
'chart-preview': chartPreview,
'nz-alert-tag': nzAlertTag
},
props: {
// 看板id
@@ -261,7 +277,8 @@
pingStatus: this.$t('asset.tableTitle.assetPing'),
pingLastReply: this.$t('asset.tableTitle.lastReply'),
endpoint: this.$t("asset.tableTitle.modules"),
alert: this.$t("asset.tableTitle.alerts")
alert: this.$t("asset.tableTitle.alerts"),
tags: this.$t("overall.tag")
},
projectKey: {
id: "ID",
@@ -385,7 +402,6 @@
// 设置数据, filter区分
setData(chartItem, detail, panelId, filter, area, errorMsg) {
//this.resize(chartItem);
if(errorMsg && errorMsg !== ''){
this.isError = true;
this.errorContent = errorMsg;
@@ -400,11 +416,48 @@
this.panelIdInner = panelId;
this.data = chartItem;
this.detail = detail;
if (this.detail[0] && this.detail[0].type && this.detail[0].type == "endpointInfo") { //endpointInfo的小图表
this.$nextTick(() => {
this.initChart(this.detail[0].data.stateSeries);
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
this.endLoading();
},
initChart(series) {
let option = {
title: {show: false},
tooltip: {show: false},
grid: {left: 40},
legend: {show: false},
xAxis: {
show: false,
type: 'time'
},
yAxis: {
type: 'value',
minInterval: 1,
splitLine: {show: false},
axisLabel: {
formatter: function (value, index) {
if (value == 1) {
return "up";
} else {
return "down";
}
}
},
axisTick: {show: false},
axisLine: {show: false}
},
useUTC: false,//使用本地时间
series: series
};
let chart = echarts.init(document.querySelector("#littleChart"));
chart.setOption(option);//创建图表
}
},
mounted() {
this.firstLoad = false;

203
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1133,14 +1133,6 @@
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
@@ -1203,12 +1195,13 @@
let detail = [];
this.$refs['editChart'+chartInfo.id][0].showLoad();
chartInfo.title = this.$t("project.chart.endpointInfo");
let basicInfo = JSON.parse(JSON.stringify(this.detail));
let basicInfoReq = new Promise((resolve, reject) => {
let now = new Date();
let startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
let step = bus.getStep(startTime,endTime);
let startTime = bus.timeFormate(new Date(now).setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let step = bus.getStep(startTime, endTime);
this.$nextTick(() => {
let query = chartInfo.elements[0].expression;
this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => {
@@ -1233,192 +1226,16 @@
return [dpsItem[0] * 1000, dpsItem[1]];
});
});
basicInfo.stateSeries = [series];
basicInfo.state = "";
detail.push({title: this.$t("project.chart.basicTitle"), data: basicInfo, type: "endpointInfo"});
resolve(true);
}
}
});
// 一个图表的所有element单独获取数据
/*axios.all(axiosArr).then((res) => {
if (res.length > 0) {
const series = [];
let singleStatRlt = '';
const legend = [];
const tableData = [];
const sumData = {
name: 'sum',
data: [],
visible: true,
threshold: null,
};
res.forEach((response, innerPos) => {
if (response.status === 'success') {
this.isError = false;
this.errorContent = "";
if (response.data.result) {
if(chartItem.type==='singleStat'){
if(response.data.result.length===1){
let statistics = chartItem.param.statistics;
if(response.data.result[0].values){
singleStatRlt = bus.getSingleStatRlt(statistics,response.data.result[0].values);
this.noData=false
}else{
this.noData=true;
}
}else if(response.data.result.length > 1){
this.noData=true;
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
}
}else {
// 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem, resInnerPos) => {
const seriesItem = {
theData: {
name: '',
symbol: 'emptyCircle', //去掉点
symbolSize: [2, 2],
smooth: 0.2, //曲线变平滑
showSymbol: false,
data: [],
type: chartItem.type,
lineStyle: {
width: 1,
opacity: 0.9
},
},
metric_name: '',
};
if (chartItem.type === 'stackArea') {
seriesItem.theData.type = 'line';
seriesItem.theData.stack = chartItem.title;
seriesItem.theData.areaStyle = {"opacity": 0.3};
}
if (chartItem.type === "endpointInfo") {
seriesItem.theData.type = 'line';
}
// 图表中每条线的名字,后半部分
let host = '';//up,
if (queryItem.metric.__name__) {
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if (host.endsWith(',')) {
host = host.substr(0, host.length - 1);
}
if (queryItem.metric.__name__) {
host += "}";
}
if (!host || host === '') {
host = chartItem.elements[innerPos].expression;
}
//处理legend别名
let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend);
if (!alias || alias === '') {
alias = host;
}
legend.push({name: host + resInnerPos, alias: alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host + resInnerPos;
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: {element: host, alias: alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/!*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*!/
}
});
}
}
}else{
this.isError = true;
if(response.msg){
this.errorContent = response.msg;
}else if(response.error){
this.errorContent = response.error;
}else {
this.errorContent = response;
}
}
});
//if(this.$refs.editChart&&this.$refs.editChart[index]) {
if (chartItem.type === 'table') {//表格
this.setTableData(tableData);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == "endpoint") {
if (series.length && chartItem.type === 4) {//曲线汇总
}
if(series.length<1){
this.noData=true;
}else{
this.noData=false;
}
let _chartItem = JSON.parse(JSON.stringify(chartItem));
if (chartItem.from == "endpoint") {
_chartItem.type = "line";
}
this.setData(_chartItem, series, legend);
}else if(chartItem.type ==='singleStat'){
if(Number(singleStatRlt)){
let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =singleStatRlt;
}
this.$refs.loadingPreview.endLoading();
}
//}
} else {
const type = chartItem.type;
//if(this.$refs.editChart[index]) {
if (type === 'table') {
this.setTableData([]);
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
this.setData(chartItem, []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
this.$refs.loadingPreview.endLoading();
}
//}
}
}).catch((error) => {
if (error) {
this.$message.error(error.toString());
console.error(error)
}
});*/
});
});
detail.push({title: this.$t("project.chart.basicTitle"), data: this.detail});
let endpointId = this.additionalInfo.id;
let alertMsg = new Promise((resolve, reject) => {
this.$get('/alert/message?endpointId=' + endpointId).then(response => {
@@ -1445,10 +1262,8 @@
}
});
});
alertMsg.then(result => {
Promise.all([basicInfoReq, alertMsg]).then(resolves => {
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
}, err => {
});
},
getAssetInfoChartData(chartInfo){

16
nezha-fronted/src/components/charts/chart.scss
View File

@@ -289,7 +289,7 @@
border-bottom: 1px solid rgb(235, 238, 245);
display: flex;
position: relative;
.item-tip {
.item-tip> {
.item-tip-hide {
display: none;
position: absolute;
@@ -324,9 +324,17 @@
transform: translate(-50%, 10px);
}
}
.item-tip:hover .item-tip-show {
.item-tip:hover>.item-tip-show {
display: block;
}
.tag-value:hover .item-tip-show {
display: block;
}
.tag-value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content-item-key {
color: #666;
width: 35%;
@@ -335,6 +343,10 @@
overflow: hidden;
white-space: nowrap;
}
.content-item-key .no-overflow, .content-item-value .no-overflow {
text-overflow: unset;
white-space: normal;
}
.content-item-value {
.item-value-sub {
padding: 0 3px 0 13px;

2
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -850,7 +850,7 @@
// boundaryGap: false,//line-false; bar-true;
//data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
axisLabel: {
intervale: 0,
interval: 0,
rotate: 0,
formatter: function (value) {
value = bus.computeTimezone(value);

199
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -126,6 +126,36 @@
</div>
<span v-if="tabView">{{assetData.purchaseDate}}</span>
</el-form-item>
<!--tag-->
<el-form-item>
<template slot="label">
<span>{{$t('overall.tag')}}</span>
<div class="right-box-form-btns">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button id="module-add-param" type="button" @click="addTag" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
</button>
</div>
</template>
<div class="tag-edit-box">
<div class="tag-edit-box-head">
<div>Tag</div>
<div>Value</div>
<div>Action</div>
</div>
<el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
<div class="tag-edit-box-body" v-for="(item, index) in assetData.tags">
<el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.tag'">
<el-input placeholder="tag" size="mini" v-model="item.tag"></el-input>
</el-form-item>
<el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
</div>
</el-scrollbar>
</div>
</el-form-item>
<!------------------------------------------impi---------------------------------------------->
<!--<div v-if="assetType == 1">
<div class="right-box-sub-title">{{$t('asset.createAssetTab.impi.title')}}</div>
@@ -145,77 +175,6 @@
<el-form-item :label="$t('asset.createAssetTab.location')" prop="locationInfo" :rules="[{validator:locationValidator,trigger:'blur'}]">
<location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader" :idc-option="IDCOptionData"></location-cascader>
</el-form-item>
<!--<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<template v-if="!tabView">
&lt;!&ndash; <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">&ndash;&gt;
<el-select popper-class="asset-dropdown" size="small" v-model="assetData.idcId" clearable @change="getSingleIDCData" placeholder="">
<el-option
:id="'asset-edit-idc-op-'+item.id"
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span class="asset-dropdown-label-txt">{{ item.name }}</span>
</el-option>
</el-select>
&lt;!&ndash; <div class="right-box-row-btn ">&ndash;&gt;
&lt;!&ndash; <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</template>
<span v-if="tabView">{{assetViewData.idcName}}</span>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.location')">
<span>{{idcSelectedData.location}}</span>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.principal')">
<span>{{this.getPrincipalName(idcSelectedData.principal)}}</span>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.tel')">
<span>{{idcSelectedData.tel}}</span>
</el-form-item>
<el-divider></el-divider>
&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;cabinet&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;
<el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
<template v-if="!tabView">
&lt;!&ndash; <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"&ndash;&gt;
<el-select clearable v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
:disabled="assetData.idcId==''?true:false" size="small" placeholder=""
@change="getSingleCabinetData">
<el-option
:id="'asset-edit-cabinet-op-'+item.id"
v-for="item in cabinetOptionData"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span class="asset-dropdown-label-txt">{{ item.name }}</span>
&lt;!&ndash; <div class="asset-dropdown-label-icons">&ndash;&gt;
&lt;!&ndash; <span class="asset-dropdown-btn asset-dropdown-btn-delete"&ndash;&gt;
&lt;!&ndash; @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">&ndash;&gt;
&lt;!&ndash; <i class="el-icon-delete"></i>&ndash;&gt;
&lt;!&ndash; </span>&ndash;&gt;
&lt;!&ndash; <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">&ndash;&gt;
&lt;!&ndash; <i slot="optionZone" class="nz-icon nz-icon-edit"></i>&ndash;&gt;
&lt;!&ndash; </cabinet-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</el-option>
</el-select>
&lt;!&ndash; <div class="right-box-row-btn ">&ndash;&gt;
&lt;!&ndash; <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</template>
<span v-if="tabView">{{assetViewData.cabinetName}}</span>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.uSize')">
<span>{{cabinetSelectedData.uSize}}</span>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.remark')">
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>-->
<!--cli-->
<div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
@@ -229,7 +188,9 @@
<el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
<el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
</el-form-item>
<div class="line-100 right-box-line" style="margin-top: -16px;"></div>
</template>
<template v-else>
<div style="height: 52px;"></div>
</template>
</el-form>
</el-scrollbar>
@@ -291,6 +252,7 @@
passwordTip:'',
reloginPasswordTip:''
}],
tags: [],
exporter: 0
},
modelSize:1,
@@ -546,6 +508,18 @@
this.getAssetTypeOptionData();
}
},
addTag() {
this.assetData.tags.push({tag: "", value: ""});
this.$nextTick(() => {
this.$refs.tagEditBoxScrollbar.update();
});
},
removeTag: function(index) {
this.assetData.tags.splice(index, 1);
this.$nextTick(() => {
this.$refs.tagEditBoxScrollbar.update();
});
},
clickOutSide(data) {
if (data) {
this.editQuit();
@@ -593,10 +567,9 @@
},100)
},
modelChange:function(ids){
let modelId=ids[1];
let model=this.allModelUlData.find((item,index)=>{
return modelId==item.id;
})
return ids==item.id;
});
this.modelSize=model.usize;
},
getAssetData(data) {
@@ -625,7 +598,8 @@
this.assetData.sn = this.obj.sn
this.assetData.host = this.obj.host
this.assetData.state = this.obj.state
this.assetData.idcId = this.obj.idc.id
this.assetData.idcId = this.obj.idc.id;
this.assetData.tags = this.obj.tags;
this.assetData.cabinetId = this.obj.cabinet == null ? '' : this.obj.cabinet.id
this.assetData.purchaseDate = this.obj.purchaseDate;
// this.assetData.accounts[0].id = this.obj.accounts[0].id
@@ -828,7 +802,8 @@
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}]
}],
tags: []
};
this.assetType = '';
this.idcSelectedData = {
@@ -855,9 +830,6 @@
};
if (data === 'asset') {
/*if (this.assetData.modelId) {
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1];
}*/
if(this.locationInfo){
if(this.locationInfo.idc){
this.assetData.idcId=this.locationInfo.idc.id;
@@ -871,32 +843,9 @@
}
}
// let modelId = this.assetData.modelId.join(',').split(',')[1];
// let form = new FormData();
// form.append("id", this.pageObj.id);
// form.append("sn", this.assetData.sn);
// form.append("host", this.assetData.host);
// form.append("state", this.assetData.state);
// form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
// form.append("idcId", this.assetData.idcId);
// form.append("cabinetId", this.assetData.cabinetId);
// form.append("modelId", modelId);
if (!this.accountSwitch) {
this.assetData.accounts = [];
}
// for(let i in this.assetData.accounts){
// let account=this.assetData.accounts[i];
// if(account.user){
// if (account.id) {
// form.append("accounts["+i+"].id", account.id);
// }
// form.append("accounts["+i+"].authType",account.authType);
// form.append("accounts["+i+"].user", account.user);
// form.append("accounts["+i+"].port", account.port);
// form.append("accounts["+i+"].pwd", account.pwd);
// form.append("accounts["+i+"].privateKey", account.privateKey);
// }
// }
if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
this.$refs.accountConfigBox[0].validateAccount();
@@ -907,18 +856,16 @@
if (this.pageObj.id) {
this.assetData.id=this.pageObj.id;
let reqData = JSON.parse(JSON.stringify(this.assetData));
// if (reqData.modelId) {
// reqData.modelId = reqData.modelId.join(',').split(',')[1];
// }
if (typeof reqData.modelId == "object") {
reqData.modelId = reqData.modelId[1];
}
this.$put('asset', reqData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.pageObj.id = '';
this.$emit('refreshData', 'true');
this.sendStateData('close');
} else {
//this.assetData.modelId = tempModelId;
this.$message.error(res.msg);
}
});
@@ -926,53 +873,17 @@
if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
this.$refs.accountConfigBox[0].validateAccount();
}
let modelId = ''
// let authType = ''
// if (this.assetData.modelId !== '') {
// modelId = this.assetData.modelId.join(',').split(',')[1]
// } else {
// this.assetData.modelId = ''
// }
// if (this.assetData.accounts[0].user === '') {
// authType = ''
// } else {
// authType = this.assetData.accounts[0].authType
// }
// let form = new FormData();
// form.append("sn", this.assetData.sn);
// form.append("host", this.assetData.host);
// form.append("state", this.assetData.state);
// form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
// form.append("idcId", this.assetData.idcId);
// form.append("cabinetId", this.assetData.cabinetId);
// form.append("modelId", modelId);
// if(this.accountSwitch){
// for(let i in this.assetData.accounts){
// let account=this.assetData.accounts[i];
// if(account.user){
// form.append("accounts["+i+"].authType",account.authType);
// form.append("accounts["+i+"].user", account.user);
// form.append("accounts["+i+"].port", account.port);
// form.append("accounts["+i+"].pwd", account.pwd);
// form.append("accounts["+i+"].privateKey", account.privateKey)
// }
// }
// }
// form.append("exporter",parseInt(this.assetData.exporter));
this.$post('asset', this.assetData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit('refreshData', 'true');
this.sendStateData('close');
} else {
// this.assetData.modelId = tempModelId;
this.$message.error(res.msg);
}
});
}
} else {
// this.assetData.modelId = tempModelId;
return false;
}
});

53
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -1,19 +1,7 @@
<template>
<div>
<div style="height: 280px;">
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-show="isEdit">
<button type="button" @click="changeLoginType(1)" id="account-logintype-1"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
<span>{{$t('asset.createAssetTab.password')}}</span>
</button>
<button type="button" @click="changeLoginType(2)" id="account-logintype-2"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 2, 'nz-btn-style-light' : account.authType == 1}">
<span>{{$t('asset.createAssetTab.ssh')}}</span>
</button>
</div>-->
<div class="nz-tab" v-show="isEdit">
<div class="nz-tab">
<div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH','unclickable':!isAllowedChangeProtocol&&account.protocol == 'TELNET'}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
</div>
@@ -21,15 +9,8 @@
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET','unclickable':!isAllowedChangeProtocol&&account.protocol == 'SSH'}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
</div>
</div>
<el-form-item :label="$t('asset.createAssetTab.protocol')" size="mini" v-show="!isEdit">
<div class="right-box-form-content-txt" >{{account.protocol=='SSH'?$t('asset.createAssetTab.sshProtocol'):$t('asset.createAssetTab.telnetProtocol')}}</div>
</el-form-item>
<!-- <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-show="!isEdit">-->
<!-- <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="small" v-model="account.user" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.user}}</div>
<el-input autocomplete="new-password" size="small" v-model="account.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
<el-radio-group v-model="account.authType" size="small">
@@ -37,37 +18,16 @@
<el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="isEdit&&(account.authType==1 || account.protocol == 'TELNET')" >
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="(account.authType==1 || account.protocol == 'TELNET')" >
<el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="isEdit&&(account.authType==2 && account.protocol == 'SSH')" prop="file">
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="(account.authType==2 && account.protocol == 'SSH')" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.port}}</div>
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</el-form>
<!--<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
<div class="telnet-option_title clickable" @click="isShowTelnetOption"><div style="width: 100px;">login option</div><div class="telnet-option_spilt"></div><div style="width: 20px"><i style="font-size: 12px;" :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div></div>
<div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
{{$t('asset.createAssetTab.userPwdIntroduce')}}
</div>
<el-form-item :label="$t('asset.createAssetTab.userTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" >
<el-input type="text" size="small" v-model="account.userTip" />
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.passwordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.passwordTip" />
</el-form-item>
<div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
{{$t('asset.createAssetTab.reLoginPwdIntroduce')}}
</div>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.reloginPasswordTip" />
</el-form-item>
</div>-->
</div>
</template>
@@ -77,7 +37,6 @@ export default {
name: "accountConfig",
props:{
account:{type:Object},
isEdit:{type:Boolean,default:true},
isAllowedChangeProtocol:{type:Boolean,default:true}
},
created() {

36
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -82,18 +82,6 @@
<span>{{$t("dashboard.overview.traffic")}}</span>
<span class="content-col-title-tools">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
<!--<el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectDatacenter">
<span class="content-col-title-tool">{{$t("dashboard.overview.dataCenter.dataCenter")}}&nbsp;<i class="el-icon-arrow-down"></i></span>
<el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
<el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.dc.indexOf(item.id) > -1}" :command="item" v-for="(item,index) in trafficDatacenterData" :key="index">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectTag">
<span class="content-col-title-tool">{{$t("overall.tag")}}&nbsp;<i class="el-icon-arrow-down"></i></span>
<el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
<el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.tag.some(tag => {return item.name == tag.name && item.value == tag.value;})}" :command="item" v-for="(item,index) in trafficTagData" :key="index">{{item.name}}&nbsp;:&nbsp;{{item.value}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>-->
<span class="content-col-title-tool">
<el-cascader
:options="trafficData"
@@ -109,7 +97,6 @@
</div>
<div class="content-col-content">
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
<!-- <div class="no-data-tip" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">N/A</div>-->
<div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
</div>
</div>
@@ -117,8 +104,6 @@
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
<div class="content-col-content">
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
<!-- <div class="no-data-tip" v-if="!mapLoading && (!map || !map.geoJson || !map.geoJson.geoJson)">N/A</div>-->
<!-- <div class="chart-no-data" v-if="!mapLoading && (!map || !map.geoJson || !map.geoJson.geoJson)">No Data</div>-->
</div>
</div>
</div>
@@ -909,8 +894,6 @@
this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
if (response.code === 200) {
this.trafficData = this.convertTrafficData(response.data.list);
//console.info(this.trafficData)
}
});
},
@@ -918,28 +901,14 @@
let result = [];
data.forEach(item => {
let hasDc = result.some(dc => { //dc去重
if (dc.label == item.idc.name) {
if (item.idc && dc.label == item.idc.name) {
return true;
}
});
if (!hasDc) {
if (item.idc && !hasDc) {
result.push({label: item.idc.name, value: "$dc$::" + item.idc.name, level: 1});
}
});
/*data.forEach(item => {
let hasDc = result.some(dc => { //dc去重
if (dc.label == item.idc.name) {
handleTag(dc, item.tags);
return true;
}
return false;
});
if (!hasDc) {
let dc = {label: item.idc.name, value: "$dc$::" + item.idc.name, children: [], level: 1};
handleTag(dc, item.tags);
result.push(dc);
}
});*/
function handleTag(dc, tagData) { // dc: cascader数据里的第一级；tagData: 原始数据中的tags
if (tagData) {
let tags = dc.children;
@@ -1386,7 +1355,6 @@
}
},
mounted() {
this.initDate();
this.initData();
window.onresize = () => {
setTimeout(() => {

2
nezha-fronted/src/components/page/project/project.vue
View File

@@ -105,7 +105,7 @@
min-width="110px"
>
<template slot-scope="scope" :column="item" >
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row)">{{scope.row[item.prop].host}}</span>
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'">
<template v-if="scope.row.paramObj">
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>