mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-04 16:45:22 +00:00
created filter file replacer
This commit is contained in:
Peter Olu
parent
dd92af68d7
commit
89ab06f5e4
473
src/views/dashboard/related/trace/JbFilter.vue
Normal file
473
src/views/dashboard/related/trace/JbFilter.vue
Normal file
@ -0,0 +1,473 @@
|
|||||||
|
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
contributor license agreements. See the NOTICE file distributed with
|
||||||
|
this work for additional information regarding copyright ownership.
|
||||||
|
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
(the "License"); you may not use this file except in compliance with
|
||||||
|
the License. You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
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">
|
||||||
|
<div class="flex-h filter-container">
|
||||||
|
<div v-for="(filter, index) in arrayOfFilters" :key="index">
|
||||||
|
<el-tooltip
|
||||||
|
v-if="!activeFilter.length || activeFilter === filter.name"
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="filter.description"
|
||||||
|
placement="bottom-start"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
:class="[
|
||||||
|
listOfActiveFilters.includes(filter.name) ? 'active-filter' : '',
|
||||||
|
]"
|
||||||
|
class="filter-btn mx-3"
|
||||||
|
@click="setFilter(filter.name)"
|
||||||
|
>
|
||||||
|
<Icon size="sm" :iconName="filter.iconName" />
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wrap-filters">
|
||||||
|
<div class="filter" v-if="activeFilter === 'service'">
|
||||||
|
<span class="grey mr-5">{{ t("service") }}:</span>
|
||||||
|
<Selector
|
||||||
|
size="small"
|
||||||
|
:value="state.service.value"
|
||||||
|
:options="traceStore.services"
|
||||||
|
placeholder="Select a service"
|
||||||
|
@change="changeField('service', $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter"
|
||||||
|
v-if="
|
||||||
|
activeFilter === 'instance' &&
|
||||||
|
dashboardStore.entity !== EntityType[3].value
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span class="grey mr-5">{{ t("instance") }}:</span>
|
||||||
|
<Selector
|
||||||
|
size="small"
|
||||||
|
:value="state.instance.value"
|
||||||
|
:options="traceStore.instances"
|
||||||
|
placeholder="Select a instance"
|
||||||
|
@change="changeField('instance', $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter"
|
||||||
|
v-if="
|
||||||
|
dashboardStore.entity !== EntityType[2].value &&
|
||||||
|
activeFilter === 'endpoints'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span class="grey mr-5">{{ t("endpoint") }}:</span>
|
||||||
|
<Selector
|
||||||
|
size="small"
|
||||||
|
:value="state.endpoint.value"
|
||||||
|
:options="traceStore.endpoints"
|
||||||
|
placeholder="Select a endpoint"
|
||||||
|
:isRemote="true"
|
||||||
|
@change="changeField('endpoint', $event)"
|
||||||
|
@query="searchEndpoints"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="activeFilter === 'status'" class="filter">
|
||||||
|
<span class="grey mr-5">{{ t("status") }}:</span>
|
||||||
|
<Selector
|
||||||
|
size="small"
|
||||||
|
:value="state.status.value"
|
||||||
|
:options="Status"
|
||||||
|
placeholder="Select a status"
|
||||||
|
@change="changeField('status', $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="activeFilter === 'traceId'" class="filter">
|
||||||
|
<span class="grey mr-5">{{ t("traceID") }}:</span>
|
||||||
|
<el-input size="small" v-model="traceId" class="traceId" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activeFilter === 'duration'" class="filter">
|
||||||
|
<span class="sm b grey mr-5">{{ t("duration") }}:</span>
|
||||||
|
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
|
||||||
|
<span class="grey mr-5">-</span>
|
||||||
|
<el-input size="small" class="inputs" v-model="maxTraceDuration" />
|
||||||
|
</div>
|
||||||
|
<keep-alive>
|
||||||
|
<ConditionTags
|
||||||
|
v-if="activeFilter === 'tags'"
|
||||||
|
ref="traceTagsComponent"
|
||||||
|
:type="'TRACE'"
|
||||||
|
@update="updateTags"
|
||||||
|
/>
|
||||||
|
</keep-alive>
|
||||||
|
<el-button
|
||||||
|
v-if="activeFilter"
|
||||||
|
class="search-btn filter-btn"
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="searchTraces"
|
||||||
|
>
|
||||||
|
<Icon iconSize="sm" iconName="search" />
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="activeFilter"
|
||||||
|
class="search-btn filter-btn"
|
||||||
|
size="small"
|
||||||
|
type="danger"
|
||||||
|
@click="cancelSearch"
|
||||||
|
>
|
||||||
|
<Icon iconSize="sm" iconName="cancel" />
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, watch, computed } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { Option } from "@/types/app";
|
||||||
|
import { Status } from "../../data";
|
||||||
|
import { useTraceStore } from "@/store/modules/trace";
|
||||||
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
|
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||||
|
import { useSelectorStore } from "@/store/modules/selectors";
|
||||||
|
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { EntityType } from "../../data";
|
||||||
|
|
||||||
|
interface filtersObject {
|
||||||
|
name: string;
|
||||||
|
iconName: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const appStore = useAppStoreWithOut();
|
||||||
|
const selectorStore = useSelectorStore();
|
||||||
|
const dashboardStore = useDashboardStore();
|
||||||
|
const traceStore = useTraceStore();
|
||||||
|
const listOfActiveFilters = ref<string[]>([]);
|
||||||
|
const arrayOfFilters = ref<filtersObject[]>([
|
||||||
|
{
|
||||||
|
name: "service",
|
||||||
|
iconName: "cloud_queue",
|
||||||
|
description: "Service",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "instance",
|
||||||
|
iconName: "storage",
|
||||||
|
description: "Instance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "status",
|
||||||
|
iconName: "device_hub",
|
||||||
|
description: "Status",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "duration",
|
||||||
|
iconName: "av_timer",
|
||||||
|
description: "Duration",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "traceId",
|
||||||
|
iconName: "timeline",
|
||||||
|
description: "Trace ID",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "tags",
|
||||||
|
iconName: "epic",
|
||||||
|
description: "Tags",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "endpoints",
|
||||||
|
iconName: "device_hub",
|
||||||
|
description: "Endpoints",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const activeFilter = ref<string>("");
|
||||||
|
function setFilter(filter: string) {
|
||||||
|
activeFilter.value = filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
const traceId = ref<string>("");
|
||||||
|
const minTraceDuration = ref<string>("");
|
||||||
|
const maxTraceDuration = ref<string>("");
|
||||||
|
const tagsList = ref<string[]>([]);
|
||||||
|
const tagsMap = ref<Option[]>([]);
|
||||||
|
const state = reactive<any>({
|
||||||
|
status: { label: "All", value: "ALL" },
|
||||||
|
instance: { value: "0", label: "All" },
|
||||||
|
endpoint: { value: "0", label: "All" },
|
||||||
|
service: { value: "", label: "" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const traceTagsComponent = ref<InstanceType<typeof ConditionTags> | null>(null);
|
||||||
|
|
||||||
|
// const dateTime = computed(() => [
|
||||||
|
// appStore.durationRow.start,
|
||||||
|
// appStore.durationRow.end,
|
||||||
|
// ]);
|
||||||
|
init();
|
||||||
|
async function init() {
|
||||||
|
if (dashboardStore.entity === EntityType[1].value) {
|
||||||
|
await getServices();
|
||||||
|
}
|
||||||
|
if (dashboardStore.entity === EntityType[2].value) {
|
||||||
|
await getInstances();
|
||||||
|
}
|
||||||
|
if (dashboardStore.entity === EntityType[3].value) {
|
||||||
|
await getEndpoints();
|
||||||
|
}
|
||||||
|
if (dashboardStore.entity === EntityType[0].value) {
|
||||||
|
await getInstances();
|
||||||
|
await getEndpoints();
|
||||||
|
}
|
||||||
|
await searchTraces();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getServices() {
|
||||||
|
const resp = await traceStore.getServices(dashboardStore.layerId);
|
||||||
|
if (resp.errors) {
|
||||||
|
ElMessage.error(resp.errors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.service = traceStore.services[0];
|
||||||
|
getEndpoints(state.service.id);
|
||||||
|
getInstances(state.service.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getEndpoints(id?: string, keyword?: string) {
|
||||||
|
const resp = await traceStore.getEndpoints(id, keyword);
|
||||||
|
if (resp.errors) {
|
||||||
|
ElMessage.error(resp.errors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.endpoint = traceStore.endpoints[0];
|
||||||
|
}
|
||||||
|
async function getInstances(id?: string) {
|
||||||
|
const resp = await traceStore.getInstances(id);
|
||||||
|
if (resp.errors) {
|
||||||
|
ElMessage.error(resp.errors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.instance = traceStore.instances[0];
|
||||||
|
}
|
||||||
|
function addToActiveFilterList() {
|
||||||
|
listOfActiveFilters.value.push(activeFilter.value);
|
||||||
|
}
|
||||||
|
function removeFromActiveFilters() {
|
||||||
|
listOfActiveFilters.value = listOfActiveFilters.value.filter(
|
||||||
|
(filter) => filter !== activeFilter.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function cancelSearch() {
|
||||||
|
switch (activeFilter.value) {
|
||||||
|
case "status":
|
||||||
|
state.status = { label: "All", value: "ALL" };
|
||||||
|
break;
|
||||||
|
case "instance":
|
||||||
|
state.instance = { value: "0", label: "All" };
|
||||||
|
break;
|
||||||
|
case "endpoints":
|
||||||
|
state.endpoint = { value: "0", label: "All" };
|
||||||
|
break;
|
||||||
|
case "service":
|
||||||
|
state.service = { value: "", label: "" };
|
||||||
|
break;
|
||||||
|
case "duration":
|
||||||
|
minTraceDuration.value = "";
|
||||||
|
maxTraceDuration.value = "";
|
||||||
|
break;
|
||||||
|
case "tags":
|
||||||
|
tagsList.value = [];
|
||||||
|
tagsMap.value = [];
|
||||||
|
updateTags({ tagsMap: [], tagsList: [] });
|
||||||
|
traceTagsComponent.value?.emptyTags();
|
||||||
|
break;
|
||||||
|
case "traceId":
|
||||||
|
traceId.value = "";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
removeFromActiveFilters();
|
||||||
|
activeFilter.value = "";
|
||||||
|
traceStore.activeFilter = "";
|
||||||
|
searchTraces();
|
||||||
|
}
|
||||||
|
function handleActiveFilterState() {
|
||||||
|
switch (activeFilter.value) {
|
||||||
|
case "traceId":
|
||||||
|
if (!traceId.value.length) return;
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "tags":
|
||||||
|
if (!tagsList.value.length) return;
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "duration":
|
||||||
|
if (!minTraceDuration.value.length || !maxTraceDuration.value.length)
|
||||||
|
return;
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "service":
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "instance":
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "status":
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "endpoints":
|
||||||
|
traceStore.setActiveFilter(activeFilter.value);
|
||||||
|
addToActiveFilterList();
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function searchTraces() {
|
||||||
|
handleActiveFilterState();
|
||||||
|
activeFilter.value = "";
|
||||||
|
let endpoint = "",
|
||||||
|
instance = "";
|
||||||
|
if (dashboardStore.entity === EntityType[2].value) {
|
||||||
|
endpoint = selectorStore.currentPod.id;
|
||||||
|
}
|
||||||
|
if (dashboardStore.entity === EntityType[3].value) {
|
||||||
|
instance = selectorStore.currentPod.id;
|
||||||
|
}
|
||||||
|
traceStore.setTraceCondition({
|
||||||
|
serviceId: selectorStore.currentService
|
||||||
|
? selectorStore.currentService.id
|
||||||
|
: state.service.id,
|
||||||
|
traceId: traceId.value || undefined,
|
||||||
|
endpointId: endpoint || state.endpoint.id || undefined,
|
||||||
|
serviceInstanceId: instance || state.instance.id || undefined,
|
||||||
|
traceState: state.status.value || "ALL",
|
||||||
|
queryDuration: appStore.durationTime,
|
||||||
|
minTraceDuration: minTraceDuration.value || undefined,
|
||||||
|
maxTraceDuration: maxTraceDuration.value || undefined,
|
||||||
|
queryOrder: "BY_DURATION",
|
||||||
|
tags: tagsMap.value.length ? tagsMap.value : undefined,
|
||||||
|
paging: { pageNum: 1, pageSize: 15, needTotal: true },
|
||||||
|
});
|
||||||
|
queryTraces();
|
||||||
|
}
|
||||||
|
async function queryTraces() {
|
||||||
|
const res = await traceStore.getTraces();
|
||||||
|
if (res && res.errors) {
|
||||||
|
ElMessage.error(res.errors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function changeField(type: string, opt: any) {
|
||||||
|
state[type] = opt[0];
|
||||||
|
if (type === "service") {
|
||||||
|
getEndpoints(state.service.id);
|
||||||
|
getInstances(state.service.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
|
||||||
|
tagsList.value = data.tagsList;
|
||||||
|
tagsMap.value = data.tagsMap;
|
||||||
|
}
|
||||||
|
async function searchEndpoints(keyword: string) {
|
||||||
|
const resp = await traceStore.getEndpoints(state.service.id, keyword);
|
||||||
|
if (resp.errors) {
|
||||||
|
ElMessage.error(resp.errors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => [selectorStore.currentPod],
|
||||||
|
() => {
|
||||||
|
if (dashboardStore.entity === EntityType[0].value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => [selectorStore.currentService],
|
||||||
|
() => {
|
||||||
|
if (dashboardStore.entity !== EntityType[0].value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => appStore.durationTime,
|
||||||
|
() => {
|
||||||
|
if (dashboardStore.entity === EntityType[1].value) {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.inputs {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.traceId {
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
margin-left: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-container {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap-filters {
|
||||||
|
padding: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
height: 18px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-filter.filter-btn {
|
||||||
|
background: rgba(4, 147, 114, 1) !important;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #275410 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user