feat: update Icons and add Selector

src/views/dashboard/Edit.vue

@@ -14,31 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool">
-    <el-button size="mini" @click="addWidget"> Add Widget </el-button>
-    <el-button size="mini">Dashboard Settings</el-button>
-    <el-button size="mini">Discard</el-button>
-    <el-button size="mini" type="primary">Apply</el-button>
+    <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 class="flex-h ds-main">
-    <div class="layout">
-      <div class="grids">
-        <GridLayout />
-      </div>
-    </div>
-    <div
-      class="ds-config"
-      v-show="dashboardStore.showConfig"
-      @click="dashboardStore.setConfigPanel(true)"
+  <div class="ds-main">
+    <GridLayout />
+    <el-dialog
+      v-model="dashboardStore.showConfig"
+      title="Configurations"
+      width="95%"
+      @closed="dashboardStore.setConfigPanel(false)"
     >
-      Configurations
-    </div>
+      <span>Configurations</span>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
-import { ElButton } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { ElDialog, ElTooltip } from "element-plus";
 
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
@@ -60,13 +78,6 @@ const layout: LayoutConfig[] = [
   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 ];
 dashboardStore.setLayout(layout);
-document.addEventListener("click", setConfig, true);
-function setConfig() {
-  dashboardStore.setConfigPanel(false);
-}
-function addWidget() {
-  dashboardStore.addWidget();
-}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@@ -98,4 +109,16 @@ function addWidget() {
   text-align: center;
   border-left: 1px solid #eee;
 }
+
+.icon-btn {
+  display: inline-block;
+  padding: 0 5px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-left: 8px;
+  cursor: pointer;
+  background-color: #eee;
+  color: #666;
+}
 </style>

src/views/dashboard/New.vue

@@ -25,37 +25,21 @@ limitations under the License. -->
     </div>
     <div class="item">
       <div class="label">{{ t("layer") }}</div>
-      <el-select
+      <Selector
+        :options="Options"
         size="small"
-        v-model="state.layer"
         placeholder="Select a layer"
-        class="selectors"
-      >
-        <el-option
-          v-for="item in Options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+        @change="changeLayer"
+      />
     </div>
     <div class="item">
       <div class="label">{{ t("entityType") }}</div>
-      <el-select
+      <Selector
+        :options="EntityType"
         size="small"
-        v-model="state.entity"
         placeholder="Select a entity"
-        class="selectors"
-      >
-        <el-option
-          v-for="item in EntityType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+        @change="changeEntity"
+      />
     </div>
     <div class="btn">
       <el-button class="create" size="small" type="primary" @click="onCreate">
@@ -68,7 +52,7 @@ limitations under the License. -->
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import router from "@/router";
-import { ElSelect, ElOption, ElInput, ElButton } from "element-plus";
+import { ElInput, ElButton } from "element-plus";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType, Options } from "./data";
 import uuid from "@/utils/uuid";
@@ -86,6 +70,12 @@ const onCreate = () => {
   router.push(path);
 };
 selectorStore.fetchServices("general");
+function changeLayer(val: { label: string; value: string }) {
+  state.layer = val.value;
+}
+function changeEntity(val: { label: string; value: string }) {
+  state.entity = val.value;
+}
 </script>
 <style lang="scss" scoped>
 .title {

src/views/dashboard/data.ts

@@ -23,36 +23,6 @@ export const EntityType = [
   { value: "serviceInstanceRelation", label: "Service Instance Relation" },
   { value: "endpointRelation", label: "Endpoint Relation" },
 ];
-export const SelectOpt = [
-  {
-    value: "service1",
-    label: "Service1",
-    children: [
-      {
-        value: "instance1",
-        label: "Instance1",
-      },
-      {
-        value: "instance2",
-        label: "Instance2",
-      },
-    ],
-  },
-  {
-    value: "service2",
-    label: "Service2",
-    children: [
-      {
-        value: "instance1",
-        label: "Instance1",
-      },
-      {
-        value: "instance2",
-        label: "Instance2",
-      },
-    ],
-  },
-];
 export const Options = [
   {
     value: "Option1",