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

only one filter and button show pertime when active

Browse Source
This commit is contained in:
Peter Olu 2022-05-03 14:06:55 +01:00
parent 3f00a2fd5b
commit b8f7909179
2 changed files with 59 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/dashboard/controls/Trace.vue
View File

@ -30,8 +30,7 @@ limitations under the License. -->
</div> </div>
</el-popover> </el-popover>
<div class="header"> <div class="header">
<!-- <h1>Filter</h1> --> <!-- filter was here -->
<!-- <Filter /> -->
</div> </div>
<div class="trace flex-h"> <div class="trace flex-h">
<TraceList /> <TraceList />

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

@ -16,24 +16,44 @@ limitations under the License. -->
<div class="flex-h row"> <div class="flex-h row">
<div class="flex-h"> <div class="flex-h">
<el-tooltip <el-tooltip
v-if="!activeFilter.length || activeFilter === 'instance'"
class="box-item" class="box-item"
effect="dark" effect="dark"
content="Instance" content="Instance"
placement="top-start" placement="top-start"
> >
<el-button @click="instanceActive = !instanceActive" type="secondary"> <el-button @click="setFilter('instance')" type="secondary">
<Icon size="sm" iconName="storage" /> <Icon size="sm" iconName="storage" />
</el-button> </el-button>
</el-tooltip>
<el-tooltip
v-if="!activeFilter.length || activeFilter === 'status'"
class="box-item"
effect="dark"
content="Status"
placement="top-start"
>
<el-button @click="setFilter('status')" type="secondary">
<Icon size="sm" iconName="device_hub" />
</el-button>
</el-tooltip>
<el-tooltip
v-if="!activeFilter.length || activeFilter === 'duration'"
class="box-item"
effect="dark"
content="Duration"
placement="top-start"
>
<el-button @click="setFilter('duration')" type="secondary">
<Icon size="sm" iconName="timeline" />
</el-button>
</el-tooltip> </el-tooltip>
<el-button type="secondary"> Status </el-button>
<el-button type="secondary">
<!-- <Icon size="sm" iconName="duration" /> -->
Duration
</el-button>
</div> </div>
<div class="wrap-filters"> <div class="wrap-filters">
<div class="filter my-5" v-if="serviveActive && 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"
@ -43,7 +63,10 @@ limitations under the License. -->
@change="changeField('service', $event)" @change="changeField('service', $event)"
/> />
</div> </div>
<div class="filter my-5" v-if="instanceActive && 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"
@ -53,7 +76,10 @@ limitations under the License. -->
@change="changeField('instance', $event)" @change="changeField('instance', $event)"
/> />
</div> </div>
<div class="filter my-5" v-if="dashboardStore.entity !== EntityType[2].value"> <div
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"
@ -88,10 +114,21 @@ limitations under the License. -->
</div> </div>
<ConditionTags v-if="tagsActive" :type="'TRACE'" @update="updateTags" /> <ConditionTags v-if="tagsActive" :type="'TRACE'" @update="updateTags" />
<el-button <el-button
v-if="activeFilter"
class="search-btn" class="search-btn"
size="small" size="small"
type="primary" type="primary"
@click="searchTraces" @click="searchTraces"
>
<!-- {{ t("search") }} -->
<Icon iconSize="sm" iconName="search" />
</el-button>
<el-button
v-if="activeFilter"
class="search-btn"
size="small"
type="danger"
@click="cancelSearch"
> >
<!-- {{ t("search") }} --> <!-- {{ t("search") }} -->
<Icon iconSize="sm" iconName="cancel" /> <Icon iconSize="sm" iconName="cancel" />
@ -117,12 +154,14 @@ const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const serviveActive = ref<boolean>(false); const activeFilter = ref<string>("");
const duractionActive = ref<boolean>(false); const showAllBtns = ref<boolean>(true);
const statusActive = ref<boolean>(false); function setFilter(filter: string) {
const instanceActive = ref<boolean>(false); activeFilter.value = filter;
const tagsActive = ref<boolean>(false); }
const traceActive = ref<boolean>(false); function cancelSearch() {
activeFilter.value = ""
}
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const traceId = ref<string>(""); const traceId = ref<string>("");
@ -285,7 +324,7 @@ watch(
flex-wrap: wrap; flex-wrap: wrap;
// flex-direction: column; // flex-direction: column;
align-items: center; align-items: center;
.filter{ .filter {
margin: 5px 0; margin: 5px 0;
} }
} }