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

featL修改所有侧滑框的样式

Browse Source
This commit is contained in:
zhangyu
2020-10-15 14:27:46 +08:00
parent d2159aede0
commit 77c336b7a7
19 changed files with 211 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2192,9 +2192,35 @@ li{
width: 390px;
margin-left: 0;
}
.right-box-form .add{
.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
background: rgba(250,144,28,.1);
padding:4px 6px;
border-radius: 4px;
cursor: pointer;
}
.right-box-form .add .nz-icon-create-square{
.right-box .right-box-form-add .nz-icon-create-square{
color: #FA901C;
cursor: pointer;
}
.right-box .right-box-form-add .nz-icon-plus{
color: #FA901C;
cursor: pointer;
}
.right-box .right-box-form-minus-box .nz-icon-minus{
color: #FA901C;
cursor: pointer;
}
.right-box .right-box-form-delete .nz-btn-size-alien{
border: none;
border-radius: 6px 0 6px 6px;
padding-bottom: 8px;
padding-top: 3px;
height: 45px;
}
.right-box .right-box-form-delete .nz-btn-size-alien:hover{
background: #D8D7D7;
}
.right-box .right-box-form-delete .nz-icon-delete{
}

43
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -2,8 +2,8 @@
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns" v-if="lineData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<div class="right-box-top-btns right-box-form-delete" v-if="lineData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -15,12 +15,12 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
<el-input v-model="form.lineName" size="small"></el-input>
</el-form-item>
<el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<div class="right-box-sub-title" style="margin-bottom: 20px">{{$t('project.topology.option')}}</div>
<div class="line-option">
<!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
<!--<el-input v-model="form.width" size="small"></el-input>-->
@@ -173,12 +173,13 @@
</el-select>
</el-form-item>
</div>
<div class="right-box-sub-title">
<div class="right-box-sub-title" style="margin-bottom: 20px">
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true, message:$t('project.topology.requiredName'), trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row>
<template>
<el-col class="expr-title" style="">
@@ -191,7 +192,6 @@
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
@@ -208,6 +208,7 @@
></el-cascader>
</el-col>
</el-row>
<div>
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -221,12 +222,13 @@
:showRemove="false"
:projectRightBox="true"
></promql-input>
</div>
<el-row>
<template>
<el-col class="expr-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
<i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
@@ -396,6 +398,9 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount >= 1) {
@@ -414,6 +419,9 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
/*关闭弹框*/
esc(refresh) {
@@ -497,7 +505,7 @@
margin: 0 5px;
}
.line-name{
width: calc(100% - 30px);
width: calc(100% - 70px);
}
.form-title{
font-size: 14px;
@@ -527,7 +535,7 @@
height: 100%;
}
.line-width /deep/ .el-input__prefix{
width: 100%;
width: calc(100% - 32px);
display: flex;
align-items: center;
}
@@ -540,6 +548,7 @@
.line-option{
display: flex;
flex-wrap: wrap;
margin-left: 70px;
}
.line-option > div{
width: 50%;
@@ -585,6 +594,13 @@
border-bottom: 1px dashed #dfe7f2;
width: 100%;
}
/deep/ .right-box-form .element-item.form-row-item {
padding: 20px 20px 20px 0;
border: 1px dashed #dfe7f2;
width: calc(100% - 120px);
margin-left: 70px;
position: relative;
}
.element-item.expr /deep/ .el-form-item__content{
position: relative;
margin-left: 0 !important;
@@ -604,8 +620,11 @@
letter-spacing: 0;
line-height: 22px;
}
/deep/.promqlInput .expr-title{
padding-right: 0;
}
.width-option{
width: 217px;
width: 190px;
display: flex;
align-items: center;
justify-content: center;

26
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -2,8 +2,8 @@
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns" v-if="nodeData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<div class="right-box-top-btns right-box-form-delete" v-if="nodeData.id">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -18,7 +18,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
<el-form-item label="Module Name" prop="moduleId">
<el-select v-model="form.moduleId" placeholder="" popper-class="asset-dropdown" size="small">
@@ -59,11 +59,12 @@
{{$t('project.topology.upload')}}
</el-upload>
</el-form-item>
<div class="right-box-sub-title">
<div class="right-box-sub-title" style="padding-bottom: 8px;margin-bottom: 20px">
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row>
<template>
@@ -77,7 +78,6 @@
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
@@ -94,6 +94,7 @@
></el-cascader>
</el-col>
</el-row>
<div>
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -107,12 +108,13 @@
:showRemove="false"
:projectRightBox="true"
></promql-input>
</div>
<el-row>
<template>
<el-col class="expr-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
<i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
@@ -304,6 +306,9 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount >= 1) {
@@ -322,6 +327,9 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
/*关闭弹框*/
esc(refresh) {
@@ -390,7 +398,6 @@
}
.nz-icon-minus{
vertical-align: middle;
margin-left: 5px;
}
.sel-image{
height: 28px;
@@ -446,6 +453,9 @@
letter-spacing: 0;
line-height: 22px;
}
/deep/.promqlInput .expr-title{
padding-right: 0;
}
/* begin--搜索框*/
.endpoint-asset-search {
display: inline-block;

6
nezha-fronted/src/components/common/rightBox/accountBox.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="right-box right-box-account" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="editUser.userId" @click="del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
class="nz-btn nz-btn-size-normal nz-btn-size-alien"
id="account-edit-del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -17,7 +17,7 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="editUser" label-position="top" :rules="rules" ref="accountForm">
<el-form class="right-box-form right-box-form-left" :model="editUser" :rules="rules" ref="accountForm" label-position="right" label-width="120px">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input autocomplete="new-password" type="text" placeholder=""

6
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -20,6 +20,7 @@
<el-form-item :label='$t("alert.config.name")' prop="alertName">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small"></el-input>
</el-form-item>
<div style="width: calc(100% - 70px);margin-left: 70px">
<promql-input
ref="promql"
:expression-list.sync="expressions"
@@ -27,6 +28,7 @@
:styleType="2"
:plugins="['metric-input']"
></promql-input>
</div>
<!--operator-->
<el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
<el-select popper-class="config-dropdown" v-model="editAlertRule.operator" placeholder="" size="small">

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

@@ -1,9 +1,9 @@
<template>
<div class="right-box right-box-asset" v-clickoutside="clickOutside">
<!--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btns right-box-form-delete">
<button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -33,7 +33,7 @@
</div>
</el-form-item>
<div class="right-box-sub-title">{{$t('asset.assetInfo')}}</div>
<div class="line-100 right-box-line"></div>
<div class="right-box-line"></div>
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item :label="$t('asset.assetType')" class="right-box-form-content" prop="model.type.code">
<el-select popper-class="asset-dropdown" size="small" v-model="editAsset.model.type.code" @change="getVendorAndModelOptionData(editAsset.model.type.code,$event)">
@@ -61,7 +61,7 @@
@change="modelChange"
>
</el-cascader>
<div class="right-box-row-btn" @click="addVendor(editAsset.model.type.code)"><i class="nz-icon nz-icon-plus"></i></div>
<span style="vertical-align: middle" class="right-box-form-add" @click="addVendor(editAsset.model.type.code)"><i class="nz-icon nz-icon-plus"></i></span>
</el-form-item>
<el-form-item :label="$t('asset.purchaseDate')">
<div class="select-style">
@@ -75,6 +75,9 @@
</el-date-picker>
</div>
</el-form-item>
<el-form-item :label="$t('asset.location')" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
<location-cascader :disabled="editAsset.modelId ? false : true" :default-model-u-size="modelSize" @change="setLocationData" ref="locationCascader" :idc-option="dcData"></location-cascader>
</el-form-item>
<!--tag-->
<div class="right-box-sub-title">{{$t('overall.tag')}}
<div class="right-box-form-btns">
@@ -85,7 +88,7 @@
</span>
</button>
</div></div>
<div class="line-100 right-box-line"></div>
<div class="right-box-line"></div>
<el-form-item>
<template slot="label">
<span></span>
@@ -104,31 +107,28 @@
<el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.value'">
<el-autocomplete placeholder="value" size="mini" v-model="item.value" :fetch-suggestions="filterValue" popper-class="no-style-class"></el-autocomplete>
</el-form-item>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1"></i></div>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
</div>
</el-scrollbar>
</div>
</el-form-item>
<div class="right-box-sub-title">{{$t('asset.location')}}</div>
<div class="line-100 right-box-line"></div>
<!--<div class="right-box-sub-title">{{$t('asset.location')}}</div>-->
<!--<div class="right-box-line"></div>-->
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="$t('asset.location')" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
<location-cascader :disabled="editAsset.modelId ? false : true" :default-model-u-size="modelSize" @change="setLocationData" ref="locationCascader" :idc-option="dcData"></location-cascader>
</el-form-item>
<!--cli-->
<div class="right-box-sub-title">{{$t('config.account.account')}}
<el-popover placement="right" width="70" trigger="click" :disabled="editAsset.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
<button slot="reference" id="add-type" type="button" class="float-right" :class="{'nz-btn-disabled': editAsset.accounts.length == 3}">
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
<span><i class="nz-icon nz-icon-create-square"></i></span>
</button>
<ul class="el-select-dropdown__list">
<li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" class="el-select-dropdown__item"><span>{{type}}</span></li>
</ul>
</el-popover>
</div>
<div class="line-100 right-box-line"></div>
<div class="nz-tab" style="padding-left: 30px;">
<div class="right-box-line"></div>
<div class="nz-tab" style="padding-left: 70px;">
<div class="nz-tab-item-box" v-for="(account, index) in editAsset.accounts" :key="index" @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
<div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}" style="position: relative;">
<span>{{account.protocol}}</span>
@@ -142,7 +142,7 @@
<account-config-box v-for="(account,index) in editAsset.accounts" :account="account" v-show="account.protocol == accountType" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValidResult" @protocol-type-change="protocolTypeChange"></account-config-box>
<template v-if="accountType == 'SSH' && !editAsset.id">
<el-form-item :label="$t('asset.exporter')" class="exporter-label">
<el-form-item :label="$t('asset.exporter')" class="exporter-label" style="margin-left: 66px">
<el-switch class="exporter-switch" v-model="editAsset.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
</el-form-item>
</template>

4
nezha-fronted/src/components/common/rightBox/cabinetBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<div class="right-box-top-btns right-box-form-delete">
<button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

4
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-dc" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

10
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<div class="right-box-top-btns right-box-form-delete">
<button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -65,8 +65,8 @@
<!--<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
<!--</button>-->
<span id="edit-add-param" @click="addParam" class="add">
<i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i>
<span id="edit-add-param" @click="addParam" class="right-box-form-add">
<i style="" class="nz-icon nz-icon-create-square"></i>
</span>
</div>
<div class="param-box param-box-module">
@@ -79,7 +79,7 @@
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
</div>
</el-scrollbar>
</div>

4
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-mib" v-clickoutside="clickOutside" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

4
nezha-fronted/src/components/common/rightBox/modelBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-model" v-clickoutside="clickOutside" @click="inputHandler">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="model-del" type="button" v-if="editModel.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button id="model-del" type="button" v-if="editModel.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

43
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-module" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -21,11 +21,11 @@
<el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("project.module.moduleName")' prop="name">
<el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="180px" style="width: calc(100% - 8px);margin-left: 8px;">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small"></el-input>
</el-form-item>
<div class="nz-tab module-box-type">
<div class="nz-tab module-box-type" style="margin-bottom: 15px;">
<div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
</div>
@@ -37,7 +37,7 @@
<!-- snmp表单 -->
<span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
<div class="right-box-sub-title">SNMP settings</div>
<div class="line-100 right-box-line"></div>
<div class="right-box-line"></div>
<el-row>
<el-col :span="6">
@@ -118,10 +118,9 @@
</el-row>
<el-row>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="23">
<el-col :span="24">
<div class="right-box-sub-title">Auth</div>
<div class="line-100 right-box-line"></div>
<div class="right-box-line"></div>
</el-col>
</el-row>
@@ -227,9 +226,9 @@
</el-row>
</span>
<div class="right-box-form-tip">
<div class="right-box-form-tip" :style="{'margin-bottom': '15px','margin-left':editModule.type.toLowerCase()=='snmp'?'100px':'0'}">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
<div></div>
{{$t('project.module.tip.relation')}}
</div>
@@ -241,19 +240,17 @@
<el-input placeholder="" v-model="editModule.path" size="small"></el-input>
</el-form-item>
<el-form-item class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
<template slot="label">
<span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns">
<el-form-item :label="$t('project.endpoint.param')" class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
<div style="text-align: right;margin-bottom: 5px">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span><i class="nz-icon nz-icon-delete"></i></span>
</button>
<button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
<!--</button>-->
<span id="module-add-param" type="button" @click="addParam" class="right-box-form-add">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</button>
</span>
</div>
</template>
<div class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
@@ -265,7 +262,7 @@
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
@@ -690,6 +687,10 @@
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
.right-box-form-tip{
color: #999999;
line-height: 21px;
}
</style>
<style>
.sub-label {

4
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -2,8 +2,8 @@
<transition name="right-box-580">
<div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

4
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-project" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<div class="right-box-top-btns right-box-form-delete">
<button id="project-del" type="button" v-if="project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>

6
nezha-fronted/src/components/common/rightBox/promServerBox.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="right-box right-box-prom" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="editPromServer.id" @click="del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
class="nz-btn nz-btn-size-normal nz-btn-size-alien"
id="promServer-edit-del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -17,7 +17,7 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="editPromServer" label-position="top" :rules="rules" ref="promServerForm">
<el-form class="right-box-form right-box-form-left" :model="editPromServer" label-position="right" label-width="120px" :rules="rules" ref="promServerForm">
<!--DC-->
<el-form-item :label="$t('config.dc.dc')" prop="idc.name">
<div class="right-box-form-content">

2
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
View File

@@ -10,7 +10,7 @@
<el-input :disabled="true" v-model="dc.name"></el-input>
</el-form-item>
<traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
<button @click="addAssetSetting" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" style="margin:5px 1px">{{$t('config.dc.traffic.add')}}</button>
<button @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px">{{$t('config.dc.traffic.add')}}</button>
</el-form>
</el-scrollbar>

31
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
View File

@@ -111,14 +111,14 @@
<i class="el-icon-more"></i>
</button>
</el-popover>
<div class="right-box-row-btn" @click="delSelf"><i class="nz-icon nz-icon-minus"></i></div>
<span class="right-box-form-minus-box" @click="delSelf" style="vertical-align: middle"><i class="nz-icon nz-icon-minus"></i></span>
<div>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostRepeat">{{$t('validate.repeat')}}</span>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostInvalid">{{$t('validate.host')}}</span>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostEmpty">{{$t('validate.required')}}</span>
</div>
</el-form-item>
<div class="endpoints-box-endpoints">
<div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
<el-table :data="assetSetting.configs"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
@@ -131,7 +131,7 @@
v-if="refreshTab"
style="width: 100%;">
<el-table-column
label-class-name="endpoints-box-endpoints-title"
label-class-name="traffic-set-table-title"
:resizable="false"
show-overflow-tooltip
v-for="(item, index) in tableLabels"
@@ -220,14 +220,16 @@
</template>
</template>
</el-table-column>
<el-table-column label="" :width="30">
<el-table-column label="" :width="40" :show-overflow-tooltip="false">
<template slot-scope="scope">
<el-button @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="nz-icon nz-icon-minus"></i></el-button>
<span @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" class=".right-box-form-delete" size="mini"><i class="nz-icon nz-icon-minus"></i></span>
</template>
</el-table-column>
</el-table>
<div class="add-btn">
<el-button @click="addTabRow" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
<div class="add-btn" style="margin-top: 10px;">
<span @click="addTabRow" size="mini" class="right-box-form-add">
<i class="nz-icon nz-icon-plus"></i>
</span>
</div>
</div>
<sub-box ref="subBox" @after="refreshTabFunc"></sub-box>
@@ -270,14 +272,14 @@
{
label:'ifDescr',
prop:'ifdescr',
width:250,
width:100,
required:false,
errRows:[],
},
{
label:this.$t('config.dc.traffic.direction'),
prop:'direction',
width:200,
width:100,
required:true,
errRows:[],
},
@@ -605,14 +607,15 @@
<style scoped>
.asset-config-tab{
width: calc(100% - 30px);
width: calc(100% - 160px);
min-height: 100px;
max-height: 400px;
border: 1px solid lightgrey;
border-radius: 5px;
padding:10px 20px 10px 10px;
padding:18px 50px 25px 40px;
margin: 0;
margin-bottom: 10px;
margin-left: 70px;
position: relative;
}
.asset-config-tab .add-btn{
@@ -629,6 +632,12 @@
.asset-config-tab .right-box-row-with-btn{
width: calc(100% - 69px);
}
/deep/ .el-table tr:last-child td{
border-bottom: none;
}
/deep/ .el-table .traffic-set-table-title{
color: #0275b8;
}
</style>
<style lang="scss">
.tab-tags{

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

@@ -1,5 +1,5 @@
<template>
<el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
<el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;margin-left: 66px">
<template v-if="account.protocol == 'SSH'">
<el-form-item :label="$t('asset.account')" prop="params.username">
<el-input autocomplete="new-password" size="small" v-model="account.params.username"/>

14
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -42,6 +42,10 @@
border-bottom: 1px dashed #dfe7f2;
width: 100%;
}
.right-box-form .element-item.form-row-item{
width: calc(100% - 120px);
padding: 20px 20px 20px 0;
}
/*metric样式--end*/
.label-center{
vertical-align: middle;
@@ -62,8 +66,8 @@
</transition>
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<div class="right-box-top-btns right-box-form-delete">
<button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -493,6 +497,9 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount > 1) {
@@ -509,6 +516,9 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
save() {
this.$refs['chartForm'].validate((valid) => {