github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

slim fit filters to tool bar

Browse Source
This commit is contained in:
Peter Olu 2022-05-04 09:43:48 +01:00
parent 36f3adf6de
commit 7708087180
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/dashboard/panel/Tool.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="dashboard-tool flex-h">
<div class="dashboard-tool flex-h">
<div class="flex-h">
<div class="flex-h">
<div class="selectors-item" v-if="key !== 10">
<el-tooltip
@ -24,9 +24,11 @@ limitations under the License. -->
placement="top-start"
>
<el-button
style="margin-left: 4px"
v-if="!selectedSelector.length || selectedSelector === '$service'"
@click="setSelectedSelector('$service')"
class="tool-btn"
type="secondary"
size="xs"
>
<Icon size="sm" iconName="playlist_add" />
</el-button>
@ -45,7 +47,7 @@ limitations under the License. -->
<el-button
style="margin-left: 4px"
v-if="selectedSelector === '$service'"
class="search-btn"
class="search-btn tool-btn"
size="small"
type="danger"
@click="closeSelector"
@ -55,6 +57,7 @@ limitations under the License. -->
</div>
<div class="selectors-item" v-if="key === 3 || key === 4">
<el-tooltip
v-if="!selectedSelector.length || selectedSelector === '$endpoint'"
class="box-item"
effect="dark"
content="Endpoint"
@ -63,6 +66,7 @@ limitations under the License. -->
<el-button
style="margin-left: 4px"
@click="setSelectedSelector('$endpoint')"
class="tool-btn"
type="secondary"
>
<Icon size="sm" iconName="view" />
@ -88,7 +92,7 @@ limitations under the License. -->
['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
"
/>
<!-- <el-button
<el-button
style="margin-left: 4px"
v-if="selectedSelector === '$endpoint'"
class="search-btn"
@ -97,7 +101,7 @@ limitations under the License. -->
@click="closeSelector"
>
<Icon iconSize="sm" iconName="cancel" />
</el-button> -->
</el-button>
</div>
<div class="selectors-item" v-if="key === 2 || key === 4">
<span class="label">$DestinationService</span>
@ -431,6 +435,7 @@ async function getServices() {
}
async function changeService(service: any) {
selectedSelector.value = ""
if (service[0]) {
states.currentService = service[0].value;
selectorStore.setCurrentService(service[0]);
@ -450,6 +455,7 @@ function changeDestService(service: any) {
}
function changePods(pod: any) {
selectedSelector.value = ""
if (pod[0]) {
selectorStore.setCurrentPod(pod[0]);
} else {
@ -705,6 +711,7 @@ watch(
background: rgb(240, 242, 245);
border-bottom: 1px solid #dfe4e8;
justify-content: space-between;
align-items: center;
}
.switch {
@ -751,4 +758,8 @@ watch(
.selectorPod {
width: 300px;
}
.tool-btn{
height: 18px;
}
</style>

23
src/views/dashboard/related/trace/Filter.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="flex-h row">
<div class="flex-h">
<div class="flex-h">
<el-tooltip
v-if="!activeFilter.length || activeFilter === 'service'"
@ -22,7 +22,7 @@ limitations under the License. -->
content="Service"
placement="top-start"
>
<el-button @click="setFilter('service')" type="secondary">
<el-button class="filter-btn" @click="setFilter('service')" type="secondary">
<Icon size="sm" iconName="cloud_queue" />
</el-button>
</el-tooltip>
@ -34,7 +34,7 @@ limitations under the License. -->
content="Instance"
placement="top-start"
>
<el-button @click="setFilter('instance')" type="secondary">
<el-button class="filter-btn" @click="setFilter('instance')" type="secondary">
<Icon size="sm" iconName="storage" />
</el-button>
</el-tooltip>
@ -46,7 +46,7 @@ limitations under the License. -->
content="Status"
placement="top-start"
>
<el-button @click="setFilter('status')" type="secondary">
<el-button class="filter-btn" @click="setFilter('status')" type="secondary">
<Icon size="sm" iconName="device_hub" />
</el-button>
</el-tooltip>
@ -58,7 +58,7 @@ limitations under the License. -->
content="Duration"
placement="top-start"
>
<el-button @click="setFilter('duration')" type="secondary">
<el-button class="filter-btn" @click="setFilter('duration')" type="secondary">
<Icon size="sm" iconName="av_timer" />
</el-button>
</el-tooltip>
@ -70,7 +70,7 @@ limitations under the License. -->
content="Trace ID"
placement="top-start"
>
<el-button @click="setFilter('traceId')" type="secondary">
<el-button class="filter-btn" @click="setFilter('traceId')" type="secondary">
<Icon size="sm" iconName="timeline" />
</el-button>
</el-tooltip>
@ -82,7 +82,7 @@ limitations under the License. -->
content="Tags"
placement="top-start"
>
<el-button @click="setFilter('tags')" type="secondary">
<el-button class="filter-btn" @click="setFilter('tags')" type="secondary">
<Icon size="sm" iconName="epic" />
</el-button>
</el-tooltip>
@ -153,7 +153,7 @@ limitations under the License. -->
/>
<el-button
v-if="activeFilter"
class="search-btn"
class="search-btn filter-btn"
size="small"
type="primary"
@click="searchTraces"
@ -163,7 +163,7 @@ limitations under the License. -->
</el-button>
<el-button
v-if="activeFilter"
class="search-btn"
class="search-btn filter-btn"
size="small"
type="danger"
@click="cancelSearch"
@ -362,9 +362,12 @@ watch(
// flex-direction: column;
align-items: center;
.filter {
margin: 5px 0;
margin: 0;
}
}
.filter-btn {
height: 18px;
}
</style>
//