github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-07 10:42:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update filters

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-28 16:03:47 +08:00
parent fa3cce939f
commit c9eab02431
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/dashboard/data.ts
View File

@ -15,21 +15,23 @@
* limitations under the License. * limitations under the License.
*/ */
export const EntityType = [ export const EntityType = [
{ value: "service", label: "Service" }, { value: "service", label: "Service", key: 1 },
{ value: "all", label: "All" }, { value: "all", label: "All", key: 10 },
{ value: "endpoint", label: "Service Endpoint" }, { value: "endpoint", label: "Service Endpoint", key: 3 },
{ value: "serviceInstance", label: "Service Instance" }, { value: "serviceInstance", label: "Service Instance", key: 3 },
{ value: "serviceRelationClient", label: "Service Relation(client)" }, { value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
{ value: "serviceRelationServer", label: "Service Relation(server)" }, { value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
{ {
value: "serviceInstanceRelationClient", value: "serviceInstanceRelationClient",
label: "Service Instance Relation(client)", label: "Service Instance Relation(client)",
key: 4,
}, },
{ {
value: "serviceInstanceRelationServer", value: "serviceInstanceRelationServer",
label: "Service Instance Relation(server)", label: "Service Instance Relation(server)",
key: 4,
}, },
{ value: "endpointRelation", label: "Endpoint Relation" }, { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
]; ];
export const Options = [ export const Options = [
{ {

22
src/views/dashboard/panel/Tool.vue
View File

@ -15,7 +15,7 @@ limitations under the License. -->
<template> <template>
<div class="dashboard-tool flex-h"> <div class="dashboard-tool flex-h">
<div class="flex-h"> <div class="flex-h">
<div class="selectors-item"> <div class="selectors-item" v-if="states.key < 3">
<span class="label">$Service</span> <span class="label">$Service</span>
<Selector <Selector
:value="states.service" :value="states.service"
@ -27,17 +27,17 @@ limitations under the License. -->
class="selectors" class="selectors"
/> />
</div> </div>
<div class="selectors-item"> <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
<span class="label">$ServiceInstance</span> <span class="label">$ServiceInstance</span>
<el-cascader <el-cascader
placeholder="Select a instance" placeholder="Select a instance"
:options="SelectOpts" :options="SelectOpts"
size="mini" size="mini"
filterable filterable
:style="{ minWidth: '230px' }" :style="{ minWidth: '300px' }"
/> />
</div> </div>
<div class="selectors-item"> <div class="selectors-item" v-if="states.key === 2">
<span class="label">$DestinationService</span> <span class="label">$DestinationService</span>
<Selector <Selector
:value="states.service" :value="states.service"
@ -49,14 +49,14 @@ limitations under the License. -->
class="selectors" class="selectors"
/> />
</div> </div>
<div class="selectors-item"> <div class="selectors-item" v-if="states.key === 4">
<span class="label">$DestinationServiceInstance</span> <span class="label">$DestinationServiceInstance</span>
<el-cascader <el-cascader
placeholder="Select a instance" placeholder="Select a instance"
:options="SelectOpts" :options="SelectOpts"
size="mini" size="mini"
filterable filterable
:style="{ minWidth: '230px' }" :style="{ minWidth: '300px' }"
/> />
</div> </div>
</div> </div>
@ -100,14 +100,20 @@ import { reactive } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ElTooltip, ElCascader } from "element-plus"; import { ElTooltip, ElCascader } from "element-plus";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { Options, SelectOpts } from "../data"; import { Options, SelectOpts, EntityType } from "../data";
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const params = useRoute().params; const params = useRoute().params;
const states = reactive({ const states = reactive({
service: Options[0].value, service: Options[0].value,
pod: Options[0].value, // instances and endpoints
destService: "",
destPod: "",
key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
...params,
}); });
console.log(params); console.log(states);
function changeService(val: { value: string; label: string }) { function changeService(val: { value: string; label: string }) {
states.service = val.value; states.service = val.value;
} }