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

perf: explore样式

Browse Source
This commit is contained in:
chenjinsong
2021-04-30 18:54:11 +08:00
parent a1c4445a68
commit 06f988caac
4 changed files with 68 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,7 +53,10 @@
} }
.top-tool-btn-group { .top-tool-btn-group {
display: flex; display: flex;
.top-tool-btn:not(:last-of-type):not(:first-of-type) {
border-left: none;
border-radius: 0;
}
.top-tool-btn:first-of-type:not(:last-of-type) { .top-tool-btn:first-of-type:not(:last-of-type) {
border-radius: $--button-border-radius 0 0 $--button-border-radius; border-radius: $--button-border-radius 0 0 $--button-border-radius;
} }

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

@@ -300,7 +300,7 @@
@change="expressionChange" @change="expressionChange"
@removeExpression="removeExpression" @removeExpression="removeExpression"
></promql-input> ></promql-input>
<el-row> <el-row style="margin-top: 18px">
<el-col class="legend-title"> <el-col class="legend-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211"> <el-popover placement="top" trigger="hover" width="211">

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="explore list-page"> <div class="explore list-page">
<div class="main-list"> <div class="main-list">
<div class="main-container"> <div class="main-container" style="overflow: auto;">
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<div class="top-tools" style="z-index: 1"> <div class="top-tools" style="z-index: 1">
<div class="top-tool-left"></div> <div class="top-tool-left"></div>
@@ -16,8 +16,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="top-tools" style="width: 100%;box-sizing: border-box; padding-left: 10px;"> <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
<div id="explore-promql-box" class="expression-room">
<!--坑，这个index居然是从1开始--> <!--坑，这个index居然是从1开始-->
<promql-input <promql-input
v-for="index of promqlKeys.length" v-for="index of promqlKeys.length"
@@ -34,8 +33,7 @@
@removeExpression="removeExpression" @removeExpression="removeExpression"
></promql-input> ></promql-input>
</div> </div>
</div> <div ref="scrollWrap" class="nz-table2" style="height: auto; padding-bottom: 10px;">
<div ref="scrollWrap" style="height: 100%; overflow: auto;">
<div class="chart-view right-margin" v-show="!showIntroduce" <div class="chart-view right-margin" v-show="!showIntroduce"
:class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;"> :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
<div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div> <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div>
@@ -725,7 +723,6 @@ export default {
padding: 24px; padding: 24px;
background-color: #e9edf2; background-color: #e9edf2;
border-top: 3px solid #3274d9; border-top: 3px solid #3274d9;
margin-bottom: 16px;
-webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-webkit-box-flex: 1; -webkit-box-flex: 1;
@@ -919,4 +916,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.explore .promqlInput:not(:first-of-type) {
margin-top: 10px;
}
</style> </style>

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

@@ -1,17 +1,16 @@
<template> <template>
<div class="promqlInput"> <div class="promqlInput">
<div class="query-row"> <div class="query-row">
<div class="query-input">
<!--explore页面的样式--> <!--explore页面的样式-->
<template v-if="styleType == 1"> <template v-if="styleType == 1">
<div v-if="plugins.indexOf('metric-selector') > -1"> <div v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown class="metric-selector"> <el-dropdown class="metric-selector">
<el-dropdown-menu style="display: none"></el-dropdown-menu> <el-dropdown-menu style="display: none"></el-dropdown-menu>
<button class="top-tool-btn" type="button" @click="toggleDropdown">Metric <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">Metric
&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></button> &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
<el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown" <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading" v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
:options="metricOptions" @change="metricChange"> :props="{emitPath:false,}" @change="metricChange">
<template slot-scope="{ node, data }"> <template slot-scope="{ node, data }">
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}"> <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
@@ -23,12 +22,20 @@
</el-cascader-panel> </el-cascader-panel>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1"> <div v-if="plugins.indexOf('metric-input') > -1" class="input-box" @click="dropDownVisible=false">
<el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId" <el-input :id="inputId" v-model="expressionList[index]" :autosize="{ minRows: 1, maxRows: 6}"
@input="metricKeyDown" type="textarea" class="not-fixed-height no-resize" type="textarea"
:autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input> @input="metricKeyDown" @keyup.enter.native="expressionChange"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div> <div v-if="errorMsg" class="append-msg error"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div> <div v-if="appendMsg" class="append-msg error"><span>{{appendMsg}}</span></div>
</div>
<div class="top-tool-btn-group">
<button v-if="plugins.indexOf('add') > -1" class="top-tool-btn"
@click="addExpression"><i class="nz-icon nz-icon-plus"></i></button>
<button v-if="plugins.indexOf('copy') > -1" class="top-tool-btn"
@click="copyExpression"><i class="nz-icon nz-icon-override"></i></button>
<button v-if="plugins.indexOf('remove') > -1" class="top-tool-btn"
@click="removeExpression"><i class="nz-icon nz-icon-minus"></i></button>
</div> </div>
</template> </template>
<!--right-box里的样式--> <!--right-box里的样式-->
@@ -70,17 +77,6 @@
</el-row> </el-row>
</template> </template>
</div> </div>
</div>
<div v-if="styleType == 1" style="margin-left: 10px">
<div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"
v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
<div @click="copyExpression" class="option nz-btn nz-btn-size-normal nz-btn-style-light"
v-if="plugins.indexOf('copy') > -1"><i class="nz-icon nz-icon-override"></i></div>
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"
v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
</div>
</div>
<div v-if="styleType == 2&&showRemove"> <div v-if="styleType == 2&&showRemove">
<div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i> <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i>
</div> </div>
@@ -548,10 +544,11 @@ export default {
position: relative; position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
margin-bottom: 18px;
} }
.promqlInput .query-row { .promqlInput .query-row {
display: flex;
flex-wrap: wrap;
width: 100%; width: 100%;
} }
@@ -564,10 +561,6 @@ export default {
.input-box .error { .input-box .error {
color: #F56C6C; color: #F56C6C;
} }
.query-row .query-input {
display: flex;
justify-content: flex-start;
}
.promqlInput .query-options { .promqlInput .query-options {
/*display: flex;*/ /*display: flex;*/
@@ -589,14 +582,9 @@ export default {
background-color: rgb(247, 248, 250); background-color: rgb(247, 248, 250);
} }
.query-input .metric-btn { .query-row .input-box {
width: 100px; flex: auto;
margin-right: 10px; margin: 0 10px;
}
.query-input .input-box {
width: 100%;
height: 100%;
} }
.metric-btn { .metric-btn {