mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 18:53:40 +00:00
feat: add new dashboard
This commit is contained in:
Qiuxia Fan
parent
9cb8e2b64d
commit
1b30216545
@ -492,7 +492,7 @@ watch(
|
||||
}
|
||||
|
||||
.datepicker-range {
|
||||
min-width: 260px;
|
||||
min-width: 238px;
|
||||
}
|
||||
|
||||
.datepicker-range .datepicker-popup {
|
||||
|
||||
@ -91,6 +91,7 @@ watch(
|
||||
background-color: #fafbfc;
|
||||
border-bottom: 1px solid #dfe4e8;
|
||||
color: #222;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-bar.dark {
|
||||
background-color: #333840;
|
||||
|
||||
@ -15,16 +15,24 @@ limitations under the License. -->
|
||||
<template>
|
||||
<div class="new-dashboard">
|
||||
<h4>Create a new dashboard</h4>
|
||||
<div class="item">
|
||||
<div class="label">Name</div>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="state.name"
|
||||
placeholder="Please input name"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">Layer</div>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="template"
|
||||
placeholder="Select"
|
||||
v-model="state.layer"
|
||||
placeholder="Select a layer"
|
||||
class="selectors"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in Options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -36,8 +44,8 @@ limitations under the License. -->
|
||||
<div class="label">Entity</div>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="entity"
|
||||
placeholder="Select"
|
||||
v-model="state.entity"
|
||||
placeholder="Select a entity"
|
||||
class="selectors"
|
||||
>
|
||||
<el-option
|
||||
@ -49,16 +57,16 @@ limitations under the License. -->
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" v-show="state.entity === 'Service'">
|
||||
<div class="label">Service</div>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="template"
|
||||
placeholder="Select"
|
||||
v-model="state.service"
|
||||
placeholder="Select a service"
|
||||
class="selectors"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in Options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -66,24 +74,38 @@ limitations under the License. -->
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" v-show="state.entity === 'Endpoint'">
|
||||
<div class="label">Service / Endpoint</div>
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
v-model="state.serviceEndpoint"
|
||||
:options="SelectOpt"
|
||||
:props="props"
|
||||
size="small"
|
||||
@change="handleChange"
|
||||
:style="{ width: '600px' }"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" v-show="state.entity === 'ServiceInstance'">
|
||||
<div class="label">Service / Instance</div>
|
||||
<el-cascader
|
||||
v-model="state.serviceInstance"
|
||||
:options="SelectOpt"
|
||||
:props="props"
|
||||
size="small"
|
||||
@change="handleChange"
|
||||
:style="{ width: '600px' }"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div class="item" v-show="state.entity === 'ServiceRelation'">
|
||||
<div class="label">Destination Service</div>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="template"
|
||||
v-model="state.destService"
|
||||
placeholder="Select"
|
||||
class="selectors"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in Options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -91,35 +113,67 @@ limitations under the License. -->
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" v-show="state.entity === 'EndpointRelation'">
|
||||
<span class="label">Destination Service / Endpoint</span>
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
v-model="state.destServiceEndpoint"
|
||||
:options="SelectOpt"
|
||||
:props="props"
|
||||
@change="handleChange"
|
||||
:style="{ width: '600px' }"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div class="item" v-show="state.entity === 'ServiceInstanceRelation'">
|
||||
<span class="label">Destination Service / Instance</span>
|
||||
<el-cascader
|
||||
v-model="state.destServiceInstance"
|
||||
:options="SelectOpt"
|
||||
:props="props"
|
||||
@change="handleChange"
|
||||
:style="{ width: '600px' }"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button class="create" size="small" type="primary" @click="onCreate">
|
||||
Create
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ElSelect, ElOption, ElCascader } from "element-plus";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { reactive } from "vue";
|
||||
import {
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElCascader,
|
||||
ElInput,
|
||||
ElButton,
|
||||
} from "element-plus";
|
||||
// import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { EntityType, SelectOpt, Options } from "./data";
|
||||
|
||||
const EntityType = [
|
||||
{ value: "Service", label: "Service" },
|
||||
{ value: "All", label: "All" },
|
||||
{ value: "Endpoint", label: "Service Endpoint" },
|
||||
{ value: "ServiceInstance", label: "Service Instance" },
|
||||
{ value: "ServiceRelation", label: "Service Relation" },
|
||||
{ value: "ServiceInstanceRelation", label: "Service Instance Relation" },
|
||||
{ value: "EndpointRelation", label: "Endpoint Relation" },
|
||||
];
|
||||
const selectorStore = useSelectorStore();
|
||||
const entity = ref("");
|
||||
const template = ref("");
|
||||
const options = ref([]);
|
||||
selectorStore.fetchServices("general");
|
||||
// const selectorStore = useSelectorStore();
|
||||
const props = {
|
||||
expandTrigger: "hover",
|
||||
};
|
||||
const state = reactive({
|
||||
name: "",
|
||||
layer: "",
|
||||
entity: EntityType[0].value,
|
||||
service: "",
|
||||
serviceEndpoint: "",
|
||||
serviceInstance: "",
|
||||
destService: "",
|
||||
destServiceEndpoint: "",
|
||||
destServiceInstance: "",
|
||||
});
|
||||
const handleChange = (value: any) => {
|
||||
console.log(value);
|
||||
};
|
||||
const onCreate = () => {
|
||||
console.log(state);
|
||||
};
|
||||
// selectorStore.fetchServices("general");
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.new-dashboard {
|
||||
@ -132,4 +186,13 @@ selectorStore.fetchServices("general");
|
||||
.selectors {
|
||||
width: 600px;
|
||||
}
|
||||
.el-cascader-menu {
|
||||
width: 600px;
|
||||
}
|
||||
.create {
|
||||
width: 160px;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
315
src/views/dashboard/data.ts
Normal file
315
src/views/dashboard/data.ts
Normal file
@ -0,0 +1,315 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* 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.
|
||||
*/
|
||||
export const EntityType = [
|
||||
{ value: "Service", label: "Service" },
|
||||
{ value: "All", label: "All" },
|
||||
{ value: "Endpoint", label: "Service Endpoint" },
|
||||
{ value: "ServiceInstance", label: "Service Instance" },
|
||||
{ value: "ServiceRelation", label: "Service Relation" },
|
||||
{ value: "ServiceInstanceRelation", label: "Service Instance Relation" },
|
||||
{ value: "EndpointRelation", label: "Endpoint Relation" },
|
||||
];
|
||||
export const SelectOpt = [
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "component",
|
||||
label: "Component",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout",
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color",
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography",
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon",
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio",
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox",
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input",
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber",
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select",
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader",
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch",
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider",
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker",
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker",
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker",
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload",
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate",
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table",
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag",
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress",
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree",
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination",
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert",
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading",
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message",
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox",
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "Menu",
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs",
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb",
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown",
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog",
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip",
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover",
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card",
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel",
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "resource",
|
||||
label: "Resource",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components",
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates",
|
||||
},
|
||||
{
|
||||
value: "docs",
|
||||
label: "Design Documentation",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const Options = [
|
||||
{
|
||||
value: "Option1",
|
||||
label: "Option1",
|
||||
},
|
||||
{
|
||||
value: "Option2",
|
||||
label: "Option2",
|
||||
},
|
||||
{
|
||||
value: "Option3",
|
||||
label: "Option3",
|
||||
},
|
||||
{
|
||||
value: "Option4",
|
||||
label: "Option4",
|
||||
},
|
||||
{
|
||||
value: "Option5",
|
||||
label: "Option5",
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user