feat: add selector module

src/views/dashboard/List.vue

@@ -28,7 +28,9 @@ limitations under the License. -->
         </template>
       </el-input>
       <router-link to="/dashboard/new">
-        <el-button size="small" type="primary">+ New Dashboard</el-button>
+        <el-button size="small" type="primary">
+          + {{ t("newDashboard") }}
+        </el-button>
       </router-link>
     </div>
     <el-table :data="tableData" style="width: 100%" max-height="550">
@@ -57,6 +59,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 //  # - os-linux
 //  # - k8s
@@ -69,6 +72,7 @@ import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 //  # - cache
 //  # - browser
 //  # - skywalking
+const { t } = useI18n();
 const searchText = ref<string>("");
 const tableData = [
   {

src/views/dashboard/New.vue

@@ -13,11 +13,123 @@ 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="new-dashboard">{{ props.msg }}</div>
+  <div class="new-dashboard">
+    <h4>Create a new dashboard</h4>
+    <div class="item">
+      <div class="label">Layer</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Entity</div>
+      <el-select
+        size="small"
+        v-model="entity"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in EntityType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Service</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Service / Endpoint</div>
+      <el-cascader
+        v-model="value"
+        :options="options"
+        :props="props"
+      ></el-cascader>
+    </div>
+    <div class="item">
+      <div class="label">Destination Service</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <span class="label">Destination Service / Endpoint</span>
+      <el-cascader
+        v-model="value"
+        :options="options"
+        :props="props"
+      ></el-cascader>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
-const props = defineProps({
-  msg: String,
-});
+import { ref } from "vue";
+import { ElSelect, ElOption, ElCascader } from "element-plus";
+import { useSelectorStore } from "@/store/modules/selectors";
+
+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");
 </script>
+<style lang="scss" scoped>
+.new-dashboard {
+  width: 600px;
+  margin: 0 auto;
+}
+.item {
+  margin-top: 20px;
+}
+.selectors {
+  width: 600px;
+}
+</style>