github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-07 18:52:54 +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.
*/
export const EntityType = [
{ value: "service", label: "Service" },
{ value: "all", label: "All" },
{ value: "endpoint", label: "Service Endpoint" },
{ value: "serviceInstance", label: "Service Instance" },
{ value: "serviceRelationClient", label: "Service Relation(client)" },
{ value: "serviceRelationServer", label: "Service Relation(server)" },
{ value: "service", label: "Service", key: 1 },
{ value: "all", label: "All", key: 10 },
{ value: "endpoint", label: "Service Endpoint", key: 3 },
{ value: "serviceInstance", label: "Service Instance", key: 3 },
{ value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
{ value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
{
value: "serviceInstanceRelationClient",
label: "Service Instance Relation(client)",
key: 4,
},
{
value: "serviceInstanceRelationServer",
label: "Service Instance Relation(server)",
key: 4,
},
{ value: "endpointRelation", label: "Endpoint Relation" },
{ value: "endpointRelation", label: "Endpoint Relation", key: 4 },
];
export const Options = [
{

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

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