github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-06-29 18:47:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add filters on dasboard

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-28 15:34:47 +08:00
parent fde5baa42e
commit fa3cce939f
5 changed files with 172 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Selector.vue
View File

@ -18,6 +18,8 @@ limitations under the License. -->
v-model="selected"
:placeholder="placeholder"
@change="changeSelected"
filterable
:style="{ borderRadius }"
>
<el-option
v-for="item in options"
@ -47,6 +49,7 @@ const props = defineProps({
value: { type: String, default: "" },
size: { type: String, default: "small" },
placeholder: { type: String, default: "Select a option" },
borderRadius: { type: Number, default: 3 },
});
const selected = ref<string>(props.value);
function changeSelected() {
@ -92,4 +95,8 @@ function changeSelected() {
width: 30px;
}
}
.el-input__inner {
border-radius: unset !important;
}
</style>

2
src/router/dashboard.ts
View File

@ -48,7 +48,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
},
},
{
path: "/dashboard/edit/:layerId/:entityId/:dashboardId",
path: "/dashboard/edit/:layerId/:entity/:dashboardId",
component: () => import("@/views/dashboard/Edit.vue"),
name: "Edit",
meta: {

2
src/views/dashboard/Edit.vue
View File

@ -15,7 +15,7 @@ limitations under the License. -->
<template>
<Tool />
<div class="ds-main">
<GridLayout />
<grid-layout />
<el-dialog
v-model="dashboardStore.showConfig"
title="Configurations"

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

@ -33,23 +33,67 @@ export const EntityType = [
];
export const Options = [
{
value: "layer1",
label: "layer1",
value: "Option1",
label: "Option1",
},
{
value: "layer2",
label: "layer2",
value: "Option2",
label: "Option2",
},
{
value: "layer3",
label: "layer3",
value: "Option3",
label: "Option3",
},
{
value: "layer4",
label: "layer4",
value: "Option4",
label: "Option4",
},
{
value: "layer5",
label: "layer5",
value: "Option5",
label: "Option5",
},
];
export const SelectOpts = [
{
value: "guide",
label: "Guide",
children: [
{
value: "disciplines",
label: "Disciplines",
children: [
{
value: "consistency",
label: "Consistency",
},
{
value: "feedback",
label: "Feedback",
},
{
value: "efficiency",
label: "Efficiency",
},
{
value: "controllability",
label: "Controllability",
},
],
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "side nav",
label: "Side Navigation",
},
{
value: "top nav",
label: "Top Navigation",
},
],
},
],
},
];

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

@ -13,40 +13,104 @@ 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">
<el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
<span class="icon-btn" @click="dashboardStore.addWidget">
<Icon size="sm" iconName="playlist_add" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Settings" placement="top">
<span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
<Icon size="sm" iconName="settings" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Import" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="folder_open" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Export" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save_alt" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Apply" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save" />
</span>
</el-tooltip>
<div class="dashboard-tool flex-h">
<div class="flex-h">
<div class="selectors-item">
<span class="label">$Service</span>
<Selector
:value="states.service"
:options="Options"
size="mini"
placeholder="Select a service"
:borderRadius="0"
@change="changeService"
class="selectors"
/>
</div>
<div class="selectors-item">
<span class="label">$ServiceInstance</span>
<el-cascader
placeholder="Select a instance"
:options="SelectOpts"
size="mini"
filterable
:style="{ minWidth: '230px' }"
/>
</div>
<div class="selectors-item">
<span class="label">$DestinationService</span>
<Selector
:value="states.service"
:options="Options"
size="mini"
placeholder="Select a service"
:borderRadius="0"
@change="changeService"
class="selectors"
/>
</div>
<div class="selectors-item">
<span class="label">$DestinationServiceInstance</span>
<el-cascader
placeholder="Select a instance"
:options="SelectOpts"
size="mini"
filterable
:style="{ minWidth: '230px' }"
/>
</div>
</div>
<div class="tool-icons">
<el-tooltip
class="item"
effect="dark"
content="Add Widget"
placement="top"
>
<span class="icon-btn" @click="dashboardStore.addWidget">
<Icon size="sm" iconName="playlist_add" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Settings" placement="top">
<span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
<Icon size="sm" iconName="settings" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Import" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="folder_open" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Export" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save_alt" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Apply" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save" />
</span>
</el-tooltip>
</div>
</div>
</template>
<script lang="ts" setup>
import { ElTooltip } from "element-plus";
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";
const dashboardStore = useDashboardStore();
const params = useRoute().params;
const states = reactive({
service: Options[0].value,
});
console.log(params);
function changeService(val: { value: string; label: string }) {
states.service = val.value;
}
</script>
<style lang="scss" scoped>
.dashboard-tool {
@ -54,6 +118,16 @@ const dashboardStore = useDashboardStore();
padding: 5px 10px;
background: rgb(240, 242, 245);
border-bottom: 1px solid #dfe4e8;
justify-content: space-between;
}
.label {
font-size: 12px;
display: inline-block;
padding: 4px;
border: var(--el-input-border, var(--el-border-base));
border-right: none;
border-radius: 2px;
}
.icon-btn {
@ -67,4 +141,12 @@ const dashboardStore = useDashboardStore();
background-color: #eee;
color: #666;
}
.selectors {
min-width: 180px;
}
.selectors-item {
margin-right: 5px;
}
</style>