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

instance state managementt

Browse Source
This commit is contained in:
Peter Olu 2022-05-03 13:34:33 +01:00
parent a2bf601158
commit 3f00a2fd5b
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,15 +15,25 @@ limitations under the License. -->
<template> <template>
<div class="flex-h row"> <div class="flex-h row">
<div class="flex-h"> <div class="flex-h">
<el-button type="secondary"> Instance </el-button> <el-tooltip
<el-button type="secondary"> Status </el-button> class="box-item"
effect="dark"
content="Instance"
placement="top-start"
>
<el-button @click="instanceActive = !instanceActive" type="secondary">
<Icon size="sm" iconName="storage" />
</el-button>
</el-tooltip>
<el-button type="secondary"> Status </el-button>
<el-button type="secondary"> <el-button type="secondary">
<!-- <Icon size="sm" iconName="duration" /> --> <!-- <Icon size="sm" iconName="duration" /> -->
Duration Duration
</el-button> </el-button>
</div> </div>
<div class="wrap-filters"> <div class="wrap-filters">
<div class="filter my-5" v-if="dashboardStore.entity === EntityType[1].value"> <div class="filter my-5" v-if="serviveActive && dashboardStore.entity === EntityType[1].value ">
<span class="grey mr-5">{{ t("service") }}:</span> <span class="grey mr-5">{{ t("service") }}:</span>
<Selector <Selector
size="small" size="small"
@ -33,7 +43,7 @@ limitations under the License. -->
@change="changeField('service', $event)" @change="changeField('service', $event)"
/> />
</div> </div>
<div class="filter my-5" v-if="dashboardStore.entity !== EntityType[3].value"> <div class="filter my-5" v-if="instanceActive && dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5">{{ t("instance") }}:</span> <span class="grey mr-5">{{ t("instance") }}:</span>
<Selector <Selector
size="small" size="small"
@ -55,7 +65,7 @@ limitations under the License. -->
@query="searchEndpoints" @query="searchEndpoints"
/> />
</div> </div>
<div class="filter my-5"> <div v-if="statusActive" 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"
@ -65,25 +75,26 @@ limitations under the License. -->
@change="changeField('status', $event)" @change="changeField('status', $event)"
/> />
</div> </div>
<div class="filter my-5"> <div v-if="traceActive" 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 class="filter my-5"> <div v-if="duractionActive" 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>
<el-input size="small" class="inputs" v-model="maxTraceDuration" /> <el-input size="small" class="inputs" v-model="maxTraceDuration" />
</div> </div>
<ConditionTags :type="'TRACE'" @update="updateTags" /> <ConditionTags v-if="tagsActive" :type="'TRACE'" @update="updateTags" />
<el-button <el-button
class="search-btn" class="search-btn"
size="small" size="small"
type="primary" type="primary"
@click="searchTraces" @click="searchTraces"
> >
{{ t("search") }} <!-- {{ t("search") }} -->
<Icon iconSize="sm" iconName="cancel" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -106,10 +117,12 @@ const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const serviveActive = ref<boolean>(false);
const duractionActive = ref<boolean>(false); const duractionActive = ref<boolean>(false);
const statusActive = ref<boolean>(false); const statusActive = ref<boolean>(false);
const instanceActive = ref<boolean>(false); const instanceActive = ref<boolean>(false);
const tagsActive = ref<boolean>(false); const tagsActive = ref<boolean>(false);
const traceActive = ref<boolean>(false);
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const traceId = ref<string>(""); const traceId = ref<string>("");
@ -271,7 +284,7 @@ watch(
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// flex-direction: column; // flex-direction: column;
align-items: flex-start; align-items: center;
.filter{ .filter{
margin: 5px 0; margin: 5px 0;
} }