mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-15 01:33:54 +00:00
toggle trace filters
This commit is contained in:
Peter Olu
parent
7cf5648042
commit
b1fd8923ca
@ -266,7 +266,7 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
function clickTabs(e: Event, idx: number) {
|
||||
function clickTabs(e: Event, idx: number) {
|
||||
e.stopPropagation();
|
||||
activeTabIndex.value = idx;
|
||||
dashboardStore.activeGridItem(props.data.i);
|
||||
@ -279,6 +279,7 @@ export default defineComponent({
|
||||
dashboardStore.layout[l].children[activeTabIndex.value].children
|
||||
);
|
||||
needQuery.value = true;
|
||||
console.log(dashboardStore.layout[0])
|
||||
}
|
||||
function removeTab(e: Event) {
|
||||
e.stopPropagation();
|
||||
|
||||
@ -13,112 +13,116 @@ 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="dashboard-tool flex-h">
|
||||
<div class="flex-h">
|
||||
<div class="selectors-item" v-if="key !== 10">
|
||||
<span class="label">$Service</span>
|
||||
<Selector
|
||||
v-model="states.currentService"
|
||||
:options="selectorStore.services"
|
||||
size="small"
|
||||
placeholder="Select a service"
|
||||
@change="changeService"
|
||||
class="selectors"
|
||||
/>
|
||||
<div class="dashboard-tool">
|
||||
<div class="dashboard-tool flex-h">
|
||||
<div class="flex-h">
|
||||
<div class="selectors-item" v-if="key !== 10">
|
||||
<span class="label">$Service</span>
|
||||
<Selector
|
||||
v-model="states.currentService"
|
||||
:options="selectorStore.services"
|
||||
size="small"
|
||||
placeholder="Select a service"
|
||||
@change="changeService"
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 3 || key === 4">
|
||||
<span class="label">
|
||||
{{
|
||||
["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
|
||||
? "$Endpoint"
|
||||
: "$ServiceInstance"
|
||||
}}
|
||||
</span>
|
||||
<Selector
|
||||
v-model="states.currentPod"
|
||||
:options="selectorStore.pods"
|
||||
size="small"
|
||||
placeholder="Select a data"
|
||||
@change="changePods"
|
||||
@query="searchPods"
|
||||
class="selectorPod"
|
||||
:isRemote="['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 2 || key === 4">
|
||||
<span class="label">$DestinationService</span>
|
||||
<Selector
|
||||
v-model="states.currentDestService"
|
||||
:options="selectorStore.destServices"
|
||||
size="small"
|
||||
placeholder="Select a service"
|
||||
@change="changeDestService"
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 4">
|
||||
<span class="label">
|
||||
{{
|
||||
dashboardStore.entity === "EndpointRelation"
|
||||
? "$DestinationEndpoint"
|
||||
: "$DestinationServiceInstance"
|
||||
}}
|
||||
</span>
|
||||
<Selector
|
||||
v-model="states.currentDestPod"
|
||||
:options="selectorStore.destPods"
|
||||
size="small"
|
||||
placeholder="Select a data"
|
||||
@change="changeDestPods"
|
||||
class="selectorPod"
|
||||
@query="searchDestPods"
|
||||
:isRemote="dashboardStore.entity === 'EndpointRelation'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 3 || key === 4">
|
||||
<span class="label">
|
||||
{{
|
||||
["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
|
||||
? "$Endpoint"
|
||||
: "$ServiceInstance"
|
||||
}}
|
||||
</span>
|
||||
<Selector
|
||||
v-model="states.currentPod"
|
||||
:options="selectorStore.pods"
|
||||
size="small"
|
||||
placeholder="Select a data"
|
||||
@change="changePods"
|
||||
@query="searchPods"
|
||||
class="selectorPod"
|
||||
:isRemote="
|
||||
['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 2 || key === 4">
|
||||
<span class="label">$DestinationService</span>
|
||||
<Selector
|
||||
v-model="states.currentDestService"
|
||||
:options="selectorStore.destServices"
|
||||
size="small"
|
||||
placeholder="Select a service"
|
||||
@change="changeDestService"
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectors-item" v-if="key === 4">
|
||||
<span class="label">
|
||||
{{
|
||||
dashboardStore.entity === "EndpointRelation"
|
||||
? "$DestinationEndpoint"
|
||||
: "$DestinationServiceInstance"
|
||||
}}
|
||||
</span>
|
||||
<Selector
|
||||
v-model="states.currentDestPod"
|
||||
:options="selectorStore.destPods"
|
||||
size="small"
|
||||
placeholder="Select a data"
|
||||
@change="changeDestPods"
|
||||
class="selectorPod"
|
||||
@query="searchDestPods"
|
||||
:isRemote="dashboardStore.entity === 'EndpointRelation'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h tools" v-loading="loading" v-if="$route.query['portal'] !== 'true'">
|
||||
<div class="tool-icons flex-h" v-if="dashboardStore.editMode">
|
||||
<el-dropdown content="Controls" placement="bottom">
|
||||
<i>
|
||||
<Icon class="icon-btn" size="sm" iconName="control" />
|
||||
</i>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
@click="clickIcons(t)"
|
||||
v-for="(t, index) in toolIcons"
|
||||
:key="index"
|
||||
:title="t.content"
|
||||
>
|
||||
<Icon class="mr-5" size="middle" :iconName="t.name" />
|
||||
<span>{{ t.content }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-tooltip content="Apply" placement="bottom" effect="light">
|
||||
<i @click="applyDashboard">
|
||||
<Icon class="icon-btn" size="sm" iconName="save" />
|
||||
</i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<el-switch
|
||||
v-model="dashboardStore.editMode"
|
||||
active-text="Edit"
|
||||
inactive-text="View"
|
||||
size="small"
|
||||
inline-prompt
|
||||
active-color="#409eff"
|
||||
inactive-color="#999"
|
||||
@change="changeMode"
|
||||
/>
|
||||
<div
|
||||
class="flex-h tools"
|
||||
v-loading="loading"
|
||||
v-if="$route.query['portal'] !== 'true'"
|
||||
>
|
||||
<div class="tool-icons flex-h" v-if="dashboardStore.editMode">
|
||||
<el-dropdown content="Controls" placement="bottom">
|
||||
<i>
|
||||
<Icon class="icon-btn" size="sm" iconName="control" />
|
||||
</i>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
@click="clickIcons(t)"
|
||||
v-for="(t, index) in toolIcons"
|
||||
:key="index"
|
||||
:title="t.content"
|
||||
>
|
||||
<Icon class="mr-5" size="middle" :iconName="t.name" />
|
||||
<span>{{ t.content }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-tooltip content="Apply" placement="bottom" effect="light">
|
||||
<i @click="applyDashboard">
|
||||
<Icon class="icon-btn" size="sm" iconName="save" />
|
||||
</i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<el-switch
|
||||
v-model="dashboardStore.editMode"
|
||||
active-text="Edit"
|
||||
inactive-text="View"
|
||||
size="small"
|
||||
inline-prompt
|
||||
active-color="#409eff"
|
||||
inactive-color="#999"
|
||||
@change="changeMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Filter v-if="showFilter" />
|
||||
</div>
|
||||
<Filter />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Filter from "../related/trace/Filter.vue";
|
||||
@ -146,6 +150,10 @@ const dashboardStore = useDashboardStore();
|
||||
const selectorStore = useSelectorStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const params = useRoute().params;
|
||||
const showFilter = computed(
|
||||
() => dashboardStore.layout[0].activedTabIndex === 2
|
||||
);
|
||||
|
||||
|
||||
const { query } = useRoute();
|
||||
dashboardStore.setViewMode(query["fullview"] === "true");
|
||||
@ -172,9 +180,7 @@ const states = reactive<{
|
||||
currentDestPod: "",
|
||||
});
|
||||
const key = computed(() => {
|
||||
const type = EntityType.find(
|
||||
(d: Option) => d.value === dashboardStore.entity
|
||||
);
|
||||
const type = EntityType.find((d: Option) => d.value === dashboardStore.entity);
|
||||
return (type && type.key) || 0;
|
||||
});
|
||||
|
||||
@ -208,9 +214,7 @@ async function setSelector() {
|
||||
].includes(String(params.entity))
|
||||
) {
|
||||
setSourceSelector();
|
||||
if (
|
||||
[EntityType[2].value, EntityType[3].value].includes(String(params.entity))
|
||||
) {
|
||||
if ([EntityType[2].value, EntityType[3].value].includes(String(params.entity))) {
|
||||
return;
|
||||
}
|
||||
setDestSelector();
|
||||
@ -278,11 +282,7 @@ async function setSourceSelector() {
|
||||
async function setDestSelector() {
|
||||
await selectorStore.getService(String(params.destServiceId), true);
|
||||
states.currentDestService = selectorStore.currentDestService.value;
|
||||
await fetchPods(
|
||||
String(params.entity),
|
||||
selectorStore.currentDestService.id,
|
||||
false
|
||||
);
|
||||
await fetchPods(String(params.entity), selectorStore.currentDestService.id, false);
|
||||
if (!(selectorStore.destPods.length && selectorStore.destPods[0])) {
|
||||
selectorStore.setCurrentDestPod(null);
|
||||
states.currentDestPod = "";
|
||||
@ -295,9 +295,7 @@ async function setDestSelector() {
|
||||
(d: { label: string }) => d.label === states.currentDestPod
|
||||
);
|
||||
} else {
|
||||
currentDestPod = selectorStore.destPods.find(
|
||||
(d: { id: string }) => d.id === destPod
|
||||
);
|
||||
currentDestPod = selectorStore.destPods.find((d: { id: string }) => d.id === destPod);
|
||||
}
|
||||
if (currentDestPod) {
|
||||
selectorStore.setCurrentDestPod(currentDestPod);
|
||||
@ -326,9 +324,7 @@ async function getServices() {
|
||||
(d: { label: string }) => d.label === states.currentService
|
||||
);
|
||||
} else {
|
||||
s = (selectorStore.services || []).find(
|
||||
(d: unknown, index: number) => index === 0
|
||||
);
|
||||
s = (selectorStore.services || []).find((d: unknown, index: number) => index === 0);
|
||||
}
|
||||
selectorStore.setCurrentService(s || null);
|
||||
let d;
|
||||
@ -337,9 +333,7 @@ async function getServices() {
|
||||
(d: { label: string }) => d.label === states.currentDestService
|
||||
);
|
||||
} else {
|
||||
d = (selectorStore.services || []).find(
|
||||
(d: unknown, index: number) => index === 1
|
||||
);
|
||||
d = (selectorStore.services || []).find((d: unknown, index: number) => index === 1);
|
||||
}
|
||||
selectorStore.setCurrentDestService(d || null);
|
||||
if (!selectorStore.currentService) {
|
||||
@ -347,18 +341,14 @@ async function getServices() {
|
||||
}
|
||||
states.currentService = selectorStore.currentService.value;
|
||||
const e = dashboardStore.entity.split("Relation")[0];
|
||||
if (
|
||||
[EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
|
||||
) {
|
||||
if ([EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)) {
|
||||
fetchPods(e, selectorStore.currentService.id, true);
|
||||
}
|
||||
if (!selectorStore.currentDestService) {
|
||||
return;
|
||||
}
|
||||
states.currentDestService = selectorStore.currentDestService.value;
|
||||
if (
|
||||
[EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)
|
||||
) {
|
||||
if ([EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)) {
|
||||
fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
|
||||
}
|
||||
}
|
||||
@ -413,10 +403,7 @@ async function applyDashboard() {
|
||||
}
|
||||
|
||||
async function clickIcons(t: { id: string; content: string; name: string }) {
|
||||
if (
|
||||
dashboardStore.selectedGrid &&
|
||||
dashboardStore.selectedGrid.type === "Tab"
|
||||
) {
|
||||
if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
|
||||
setTabControls(t.id);
|
||||
return;
|
||||
}
|
||||
@ -504,9 +491,7 @@ async function fetchPods(
|
||||
(d: { label: unknown }) => d.label === states.currentPod
|
||||
);
|
||||
} else {
|
||||
p = selectorStore.pods.find(
|
||||
(d: unknown, index: number) => index === 0
|
||||
);
|
||||
p = selectorStore.pods.find((d: unknown, index: number) => index === 0);
|
||||
}
|
||||
selectorStore.setCurrentPod(p || null);
|
||||
states.currentPod = selectorStore.currentPod.label;
|
||||
@ -614,12 +599,7 @@ function searchDestPods(query: string) {
|
||||
const param = {
|
||||
keyword: query,
|
||||
};
|
||||
fetchPods(
|
||||
EntityType[6].value,
|
||||
selectorStore.currentDestService.id,
|
||||
false,
|
||||
param
|
||||
);
|
||||
fetchPods(EntityType[6].value, selectorStore.currentDestService.id, false, param);
|
||||
}
|
||||
watch(
|
||||
() => dashboardStore.entity,
|
||||
|
||||
@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="flex-h row">
|
||||
<div class="flex-h">
|
||||
<el-button type="secondary"> Instance </el-button>
|
||||
<el-button type="secondary"> Status </el-button>
|
||||
<el-button type="secondary">
|
||||
<!-- <Icon size="sm" iconName="duration" /> -->
|
||||
Duration
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
|
||||
<span class="grey mr-5">{{ t("service") }}:</span>
|
||||
<Selector
|
||||
|
||||
Loading…
Reference in New Issue
Block a user