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

setting active filter states and matching with right filter

Browse Source
This commit is contained in:
Peter Olu 2022-05-03 14:36:19 +01:00
parent b8f7909179
commit cc00d6a93e
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@ limitations under the License. -->
<Icon size="sm" iconName="storage" /> <Icon size="sm" iconName="storage" />
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip
v-if="!activeFilter.length || activeFilter === 'status'" v-if="!activeFilter.length || activeFilter === 'status'"
class="box-item" class="box-item"
@ -37,6 +38,7 @@ limitations under the License. -->
<Icon size="sm" iconName="device_hub" /> <Icon size="sm" iconName="device_hub" />
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip
v-if="!activeFilter.length || activeFilter === 'duration'" v-if="!activeFilter.length || activeFilter === 'duration'"
class="box-item" class="box-item"
@ -45,14 +47,38 @@ limitations under the License. -->
placement="top-start" placement="top-start"
> >
<el-button @click="setFilter('duration')" type="secondary"> <el-button @click="setFilter('duration')" type="secondary">
<Icon size="sm" iconName="av_timer" />
</el-button>
</el-tooltip>
<el-tooltip
v-if="!activeFilter.length || activeFilter === 'traceId'"
class="box-item"
effect="dark"
content="Trace ID"
placement="top-start"
>
<el-button @click="setFilter('traceId')" type="secondary">
<Icon size="sm" iconName="timeline" /> <Icon size="sm" iconName="timeline" />
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip
v-if="!activeFilter.length || activeFilter === 'tags'"
class="box-item"
effect="dark"
content="Tags"
placement="top-start"
>
<el-button @click="setFilter('tags')" type="secondary">
<Icon size="sm" iconName="epic" />
</el-button>
</el-tooltip>
</div> </div>
<div class="wrap-filters"> <div class="wrap-filters">
<div <div
class="filter my-5" class="filter my-5"
v-if="serviveActive && dashboardStore.entity === EntityType[1].value" v-if="activeFilter === 'service' && dashboardStore.entity === EntityType[1].value"
> >
<span class="grey mr-5">{{ t("service") }}:</span> <span class="grey mr-5">{{ t("service") }}:</span>
<Selector <Selector
@ -65,7 +91,7 @@ limitations under the License. -->
</div> </div>
<div <div
class="filter my-5" class="filter my-5"
v-if="instanceActive && dashboardStore.entity !== EntityType[3].value" v-if="activeFilter === 'instance' && dashboardStore.entity !== EntityType[3].value"
> >
<span class="grey mr-5">{{ t("instance") }}:</span> <span class="grey mr-5">{{ t("instance") }}:</span>
<Selector <Selector
@ -76,10 +102,7 @@ limitations under the License. -->
@change="changeField('instance', $event)" @change="changeField('instance', $event)"
/> />
</div> </div>
<div <div class="filter my-5" v-if="dashboardStore.entity !== EntityType[2].value">
class="filter my-5"
v-if="dashboardStore.entity !== EntityType[2].value"
>
<span class="grey mr-5">{{ t("endpoint") }}:</span> <span class="grey mr-5">{{ t("endpoint") }}:</span>
<Selector <Selector
size="small" size="small"
@ -91,7 +114,7 @@ limitations under the License. -->
@query="searchEndpoints" @query="searchEndpoints"
/> />
</div> </div>
<div v-if="statusActive" class="filter my-5"> <div v-if="activeFilter === 'status'" class="filter my-5">
<span class="grey mr-5">{{ t("status") }}:</span> <span class="grey mr-5">{{ t("status") }}:</span>
<Selector <Selector
size="small" size="small"
@ -101,12 +124,12 @@ limitations under the License. -->
@change="changeField('status', $event)" @change="changeField('status', $event)"
/> />
</div> </div>
<div v-if="traceActive" class="filter my-5"> <div v-if="activeFilter === 'traceId'" class="filter my-5">
<span class="grey mr-5">{{ t("traceID") }}:</span> <span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input size="small" v-model="traceId" class="traceId" /> <el-input size="small" v-model="traceId" class="traceId" />
</div> </div>
<div v-if="duractionActive" class="filter my-5"> <div v-if="activeFilter === 'duration'" class="filter my-5">
<span class="sm b grey mr-5">{{ t("duration") }}:</span> <span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" /> <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
<span class="grey mr-5">-</span> <span class="grey mr-5">-</span>
@ -160,7 +183,7 @@ function setFilter(filter: string) {
activeFilter.value = filter; activeFilter.value = filter;
} }
function cancelSearch() { function cancelSearch() {
activeFilter.value = "" activeFilter.value = "";
} }
const traceStore = useTraceStore(); const traceStore = useTraceStore();