This is an automated email from the ASF dual-hosted git repository. qiuxiafan pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
commit 1b30216545546ff1df5f3e7416ad5ada308c9e10 Author: Qiuxia Fan <[email protected]> AuthorDate: Wed Dec 15 16:57:00 2021 +0800 feat: add new dashboard --- src/components/TimePicker.vue | 2 +- src/layout/components/NavBar.vue | 1 + src/views/dashboard/New.vue | 133 ++++++++++++----- src/views/dashboard/data.ts | 315 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 415 insertions(+), 36 deletions(-) diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index 2e27195..17625d9 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -492,7 +492,7 @@ watch( } .datepicker-range { - min-width: 260px; + min-width: 238px; } .datepicker-range .datepicker-popup { diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 59f1003..27501d0 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -91,6 +91,7 @@ watch( background-color: #fafbfc; border-bottom: 1px solid #dfe4e8; color: #222; + font-size: 12px; } .nav-bar.dark { background-color: #333840; diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 141042b..45d55f4 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -16,15 +16,23 @@ limitations under the License. --> <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> diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts new file mode 100644 index 0000000..9e521e8 --- /dev/null +++ b/src/views/dashboard/data.ts @@ -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", + }, +];
