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

Merge branch 'dev-3.4' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.4

Browse Source
This commit is contained in:
likexuan
2022-06-23 13:40:29 +08:00
parent 99595a2dab 2eba091b7a
commit 71a4a9ecfa
16 changed files with 98 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nezha-fronted/src/assets/css/common.scss
View File

@@ -403,6 +403,9 @@ td .nz-icon-gear:before {
content: "\e6ad";
}
.el-table__header-wrapper {
table{
background-color: $--background-color-empty !important;
}
th {
border-right-color: transparent !important;
}
@@ -467,3 +470,9 @@ textarea {
align-items: center;
transform: scale(0.95);
}
.is-disabled{
color: $--color-text-disabled !important;
}
.ql-tooltip {
background: $--background-color-empty;
}

2
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -297,7 +297,7 @@
outline: none;
i {
font-size: 14px;
color: $--color-text-disabled;
color: $--color-text-label;
}
}
.table-operation-item.table-operation-item--disable:hover {

1
nezha-fronted/src/assets/css/components/common/project/topology.scss
View File

@@ -496,6 +496,7 @@
}
.from-project{
padding: 0px 10px 0 0 !important;
background: $--background-color-empty !important;
.nz-table-list{
padding: 0;
box-sizing: content-box;

1
nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
View File

@@ -124,6 +124,7 @@
width: 75%;
border-left: 1px solid $--border-color-light;
word-break: break-all;
color: $--color-text-secondary;
}
.mib-browser-detail-row:not(:last-of-type) {
border-bottom: 1px solid $--border-color-light;

2
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -114,7 +114,7 @@
top: 0px;
}
.topology-box{
width: 100%;
width: calc(100% - 2px);
height: 242px;
border: 1px solid $--border-color-light;
border-radius: 2px;

2
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -182,7 +182,7 @@ $--overview-project-icon-color: $--time-picker-hover-color;
$--overview-module-icon-color: $--time-picker-hover-color;
$--overview-endpoint-icon-color: $--time-picker-hover-color;
$--overview-alert-icon-color: $--time-picker-hover-color;
$--overview-disabled-icon-color: $--color-text-disabled;
$--overview-disabled-icon-color: $--color-text-label;
$--overview-icon-color: $--color-text-primary;
// background
$--overview-module-icon-background-color: #5F80D5;

14
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -40,7 +40,7 @@ $--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
// 禁用字色
$--color-text-disabled: #FFFFFF;
$--color-text-disabled: #c0c4cc;
// 标签内白色
$--color-text-label: #FFFFFF;
@@ -159,7 +159,7 @@ $--picker-page-background-color: $--background-color-empty;
$--picker-page-border-color: $--select-page-border-color;
$--picker-page-btn-color: $--color-primary;
$--picker-page-btn-border-color: $--color-primary;
$--picker-page-btn-background-color: $--color-text-disabled;
$--picker-page-btn-background-color: $--color-text-label;
// icon 字色
$--nz-icon-color: $--color-primary; //icon
@@ -167,7 +167,7 @@ $--span-nz-icon-border-color: $--asset-label-btn-border-color;
// value
$--value-background-color: #5C6BC0;
$--value-color: $--color-text-disabled;
$--value-color: $--color-text-label;
$--value-input-background-color: $--value-color;
// time picker
@@ -218,26 +218,26 @@ $--export-span-background-color: $--background-color-base;
$--switch-background-color: #dcdfe6;
/* project */
$--project-input-background-color: $--color-text-disabled;
$--project-input-background-color: $--color-text-label;
/* alert rule */
$--alert-rule-background-color: #f5f5f5;
$--alert-rule-color: $--overview-icon-color;
/* webSSH */
$--web-ssh-background-color: $--color-text-disabled;
$--web-ssh-background-color: $--color-text-label;
$--web-ssh-border-bottom-color: transparent;
/* 图表弹框 */
$--chart-background-color: #dde4ed;
$--chart-border-color: $--color-text-disabled;
$--chart-border-color: $--color-text-label;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;
$--chart-box-border-color: $--border-color-light;
/* 14.popover */
$--popover-background-color: $--color-text-disabled;
$--popover-background-color: $--color-text-label;
/* 15.侧滑 */
$--right-box-shadow: -3px 0 8px -3px #ccc;

2
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -454,7 +454,7 @@ export default {
handler (val) {
setTimeout(() => {
this.resize()
}, 100)
})
}
},
dataList: {

2
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -5,7 +5,7 @@
<template>
<div class="project-box list-page" v-my-loading="topologyLoading">
<div class="main-list" style="overflow: hidden">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'" style="background: #fff">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'">
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
<!--工具栏-->
<span v-if="!isPreview" class="project-topology-tool">

36
nezha-fronted/src/components/common/detailView/nzDetailView.vue
View File

@@ -58,6 +58,26 @@
</div>
</div>
</div>
<!-- 全屏查看 -->
<el-dialog
v-if="topologyShow"
:visible.sync="topologyShow"
:show-close="false"
class="nz-dialog chart-fullscreen"
destroy-on-close
fullscreen
:modal-append-to-body="false"
>
<panel-chart
:ref="'chart-fullscreen' + topologyChartInfo.id"
:chart-info="topologyChartInfo"
:close-on-click-modal="false"
:from="from"
:time-range="timeRange"
:is-fullscreen="true"
@showFullscreen="showFullscreen"
></panel-chart>
</el-dialog>
</div>
</template>
@@ -65,11 +85,13 @@
import { fromRoute } from '@/components/common/js/constants'
import { bottomBoxWindow } from '@/components/common/js/tools'
import detailViewRight from '@/components/common/detailView/view/detailViewRight'
import panelChart from "@/components/chart/panelChart";
export default {
name: 'nzDataList',
components: {
detailViewRight
detailViewRight,
panelChart
},
props: {
from: {
@@ -110,6 +132,12 @@ export default {
}
}
return ''
},
topologyShow () {
return this.$store.getters.getTopologyShow
},
topologyChartInfo () {
return this.$store.getters.getTopologyChartInfo
}
},
data () {
@@ -130,7 +158,8 @@ export default {
tableHover: false, // 控制滚动条和top按钮同时出现
showCustomTableTitle: false // 自定义列弹框是否显示
},
showLayout: []
showLayout: [],
timeRange: [new Date(), new Date()]
}
},
methods: {
@@ -165,6 +194,9 @@ export default {
},
changeDetailType (item) {
this.$emit('changeDetailType', item)
},
showFullscreen (flag) {
this.$store.commit('setTopologyShow', flag)
}
},
watch: {

3
nezha-fronted/src/components/common/latlngPicker.vue
View File

@@ -14,7 +14,7 @@
<div class="input-box-item" style="margin-right: unset !important;width: 30px !important;flex:unset;" @click="mapConfigVisible = true"><i class="nz-icon nz-icon-weizhi" style="color:rgb(238, 157, 63)"></i></div>
</div>
<el-dialog :visible.sync="mapConfigVisible" :title="$t('config.system.basic.mapTitle')" width="calc(50% - 10px)" @close="mapClose" @opened="initMap" class=" nz-dialog map-config-dialog" :modal-append-to-body="appendToBody">
<div id="map" style="height: 100%; width: 100%"></div>
<div id="map" style="height: 100%; width: 100%" :style="theme=='dark'? 'filter: invert(1) hue-rotate(0.5turn);opacity: 0.75;': ''"></div>
</el-dialog>
</div>
</template>
@@ -34,6 +34,7 @@ export default {
},
data () {
return {
theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`),
lnglat: '',
oldlnglat: '',
mapParam: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 },

49
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -183,7 +183,7 @@
</el-form-item>
</el-row>
<transition name="el-zoom-in-top">
<div v-show="selection.pen.data.tooltipShow" class="tooltip-box sub-box">
<div v-show="selection.pen.data.tooltipShow" class="sub-box">
<!--title-->
<el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
<el-input v-model="selection.pen.data.chartTitle" class="input" size="small"></el-input>
@@ -468,7 +468,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
:stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
@@ -480,7 +480,7 @@
<el-option v-for="(item,index) in penDash" :value="index" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -498,7 +498,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
>
@@ -510,7 +510,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -528,7 +528,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -542,7 +542,7 @@
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
<g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
stroke-width="1">
<path :d="item.d"></path>
<polygon
@@ -577,7 +577,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -591,7 +591,7 @@
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
<g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
stroke-width="1">
<path :d="item.d"></path>
<polygon
@@ -1112,7 +1112,9 @@ const rz = {
export default {
// pen.type 0为node 1位line
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme: theme,
expressions: [],
chartTypeList: [
{
@@ -1264,26 +1266,28 @@ export default {
}
],
penDash: [
{ d: 'M5 14 l85 0', 'stroke-dasharray': '' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '5,5' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10' }
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
],
penLineType: [
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' }
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
],
penLineFromTOArrow: [
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{
d: 'M5 14 l85 0',
points: '5 14,20 9,20 19',
fill: '#000000',
stroke: '',
'stroke-width': '',
name: 'triangleSolid'
name: 'triangleSolid',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1291,7 +1295,8 @@ export default {
fill: '#ffffff',
stroke: '#000000',
'stroke-width': '1',
name: 'triangle'
name: 'triangle',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1301,7 +1306,8 @@ export default {
cx: '10',
cy: '14',
r: '5',
name: 'circleSolid'
name: 'circleSolid',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1311,7 +1317,8 @@ export default {
cx: '10',
cy: '14',
r: '5',
name: 'circle'
name: 'circle',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
}
],
lineAnimateOptions: [

14
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -62,7 +62,7 @@
<div slot="prefix">
<div class="icon-item" style="width: 100%;padding: 0">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.id==lineName).d"
>
@@ -75,7 +75,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
<div class="icon-item" style="position: relative;width: 100%;padding: 0">
<svg>
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -379,7 +379,9 @@ const canvasOptions = {
export default {
name: 'topologyL5',
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme,
title: this.$t('overall.uploadCustomPicture'),
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo: {},
@@ -477,10 +479,10 @@ export default {
chartData: {},
chartGetData: [],
penLineType: [
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
],
lineName: 'curve',
cachesIndex: 0,

2
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -156,7 +156,7 @@
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('config.system.terminal.terminal')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>

1
nezha-fronted/src/components/common/table/nzDataList.vue
View File

@@ -83,6 +83,7 @@
:visible.sync="topologyShow"
:show-close="false"
class="nz-dialog chart-fullscreen"
:close-on-click-modal="false"
destroy-on-close
fullscreen
:modal-append-to-body="false"

1
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -868,6 +868,7 @@ export default {
if (res.code === 200) {
if (!res.data.vars || !res.data.vars.length) {
this.metricChange(data.expression)
this.initCodeMirror()
return
}
res.data.vars.forEach(item => {