feat: add new dashboard

src/components/TimePicker.vue

@@ -492,7 +492,7 @@ watch(
 }
 
 .datepicker-range {
-  min-width: 260px;
+  min-width: 238px;
 }
 
 .datepicker-range .datepicker-popup {

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;

src/views/dashboard/New.vue

@@ -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"
+        v-model="state.layer"
-        placeholder="Select"
+        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"
+        v-model="state.entity"
-        placeholder="Select"
+        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"
+        v-model="state.service"
-        placeholder="Select"
+        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"
+        v-model="state.serviceEndpoint"
-        :options="options"
+        :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"
+        v-model="state.destServiceEndpoint"
-        :options="options"
+        :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 { reactive } from "vue";
-import { ElSelect, ElOption, ElCascader } from "element-plus";
+import {
-import { useSelectorStore } from "@/store/modules/selectors";
+  ElSelect,
+  ElOption,
+  ElCascader,
+  ElInput,
+  ElButton,
+} from "element-plus";
+// import { useSelectorStore } from "@/store/modules/selectors";
+import { EntityType, SelectOpt, Options } from "./data";
 
-const EntityType = [
+// const selectorStore = useSelectorStore();
-  { value: "Service", label: "Service" },
+const props = {
-  { value: "All", label: "All" },
+  expandTrigger: "hover",
-  { value: "Endpoint", label: "Service Endpoint" },
+};
-  { value: "ServiceInstance", label: "Service Instance" },
+const state = reactive({
-  { value: "ServiceRelation", label: "Service Relation" },
+  name: "",
-  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
+  layer: "",
-  { value: "EndpointRelation", label: "Endpoint Relation" },
+  entity: EntityType[0].value,
-];
+  service: "",
-const selectorStore = useSelectorStore();
+  serviceEndpoint: "",
-const entity = ref("");
+  serviceInstance: "",
-const template = ref("");
+  destService: "",
-const options = ref([]);
+  destServiceEndpoint: "",
-selectorStore.fetchServices("general");
+  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>

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",
+  },
+];