add selectors

src/components/Select.vue

@@ -0,0 +1,159 @@
+<!-- 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. -->
+<template>
+  <div class="rk-bar-select cp flex-h" :class="{ active: visible }">
+    <div class="rk-bar-i" @click="visible = !visible">
+      <span v-if="selected.value">
+        {{ selected.label }}
+      </span>
+      <span class="no-data" v-else>Please select a option</span>
+      <span class="remove-icon" @click="removeSelected">×</span>
+    </div>
+    <div class="rk-opt-wrapper" v-show="visible">
+      <div
+        class="rk-opt ell"
+        @click="handleSelect(i)"
+        :class="{ 'select-disabled': selected.value === i.value }"
+        v-for="i in options"
+        :key="i.value"
+      >
+        {{ i.label }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { PropType } from "vue";
+import { Option } from "@/types/app";
+
+/*global  defineProps, defineEmits*/
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  options: {
+    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    default: () => [],
+  },
+  value: {
+    type: String as PropType<string>,
+    default: () => "",
+  },
+  clearable: { type: Boolean, default: false },
+});
+const visible = ref<boolean>(false);
+const opt = props.options.find((d: Option) => props.value === d.value);
+const selected = ref<Option>(opt || { label: "", value: "" });
+
+function handleSelect(i: Option) {
+  selected.value = i;
+  emit("change", i.value);
+  visible.value = false;
+}
+function removeSelected() {
+  selected.value = { label: "", value: "" };
+  emit("change", "");
+}
+</script>
+<style lang="scss" scoped>
+.rk-bar-select {
+  position: relative;
+  justify-content: space-between;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 3px;
+  color: #000;
+  font-size: 12px;
+  height: 24px;
+
+  .selected {
+    padding: 0 3px;
+    border-radius: 3px;
+    margin: 3px;
+    color: #409eff;
+    background-color: #fafafa;
+    border: 1px solid #e8e8e8;
+    text-align: center;
+  }
+}
+
+.no-data {
+  color: #c0c4cc;
+}
+
+.rk-bar-i {
+  height: 100%;
+  width: 100%;
+  padding: 2px 10px;
+  overflow: auto;
+  color: #606266;
+  position: relative;
+
+  &:hover {
+    .remove-icon {
+      display: block;
+    }
+  }
+}
+
+.remove-icon {
+  position: absolute;
+  right: 5px;
+  top: 0;
+  font-size: 14px;
+  display: none;
+  color: #aaa;
+  cursor: pointer;
+}
+
+.rk-opt-wrapper {
+  position: absolute;
+  top: 26px;
+  left: 0;
+  background: #fff;
+  box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+  border: 1px solid #ddd;
+  width: 100%;
+  border-radius: 0 0 3px 3px;
+  border-right-width: 1px !important;
+  z-index: 10;
+  overflow: auto;
+  max-height: 200px;
+  padding-bottom: 2px;
+
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.rk-opt {
+  padding: 7px 15px;
+
+  &.select-disabled {
+    color: #409eff;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+</style>

src/components/index.ts

@@ -19,6 +19,7 @@ import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
 import Radio from "./Radio.vue";
+import SelectSingle from "./Select.vue";
 import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
 
@@ -29,6 +30,7 @@ const components: { [key: string]: any } = {
   Selector,
   Graph,
   Radio,
+  SelectSingle,
 };
 const componentsName: string[] = Object.keys(components);
 

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -57,7 +57,6 @@ limitations under the License. -->
       </template>
       <Standard
         @update="queryMetrics"
-        @close="showConfig = false"
         :currentMetricConfig="currentMetricConfig"
         :index="index"
       />
@@ -122,7 +121,6 @@ const { t } = useI18n();
 const emit = defineEmits(["update", "loading", "changeOpt"]);
 const dashboardStore = useDashboardStore();
 const { metrics, metricTypes, graph } = dashboardStore.selectedGrid;
-const showConfig = ref<boolean>(false);
 const states = reactive<{
   metrics: string[];
   metricTypes: string[];
@@ -425,7 +423,6 @@ function setMetricTypeList(type: string) {
   return MetricTypes[type];
 }
 function setMetricConfig(index: number) {
-  showConfig.value = true;
   const n = {
     unit: "",
     label: "",
@@ -444,7 +441,6 @@ function setMetricConfig(index: number) {
     ...n,
     ...dashboardStore.selectedGrid.metricConfig[index],
   };
-  showConfig.value = true;
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="config-panel">
-    <Icon
-      class="cp mr-5 close"
-      iconName="cancel"
-      size="middle"
-      @click="closePopper"
-    />
     <div class="item mb-10">
       <span class="label">{{ t("unit") }}</span>
       <el-input
@@ -54,12 +48,10 @@ limitations under the License. -->
     </div>
     <div class="item mb-10">
       <span class="label">{{ t("aggregation") }}</span>
-      <Selector
+      <SelectSingle
         :value="currentMetric.calculation"
         :options="CalculationOpts"
-        size="small"
+        @change="changeConfigs(index, { calculation: $event })"
-        placeholder="Select a option"
-        @change="changeConfigs(index, { calculation: $event[0].value })"
         class="selectors"
         :clearable="true"
       />
@@ -69,13 +61,11 @@ limitations under the License. -->
       v-show="['sortMetrics', 'readLabeledMetricsValues'].includes(metricType)"
     >
       <span class="label">{{ t("sortOrder") }}</span>
-      <Selector
+      <SelectSingle
         :value="currentMetric.sortOrder || 'DES'"
         :options="SortOrder"
-        size="small"
-        placeholder="Select a sort order"
         class="selectors"
-        @change="changeConfigs(index, { sortOrder: $event[0].value })"
+        @change="changeConfigs(index, { sortOrder: $event })"
       />
     </div>
   </div>
@@ -97,7 +87,7 @@ const props = defineProps({
   index: { type: Number, default: 0 },
 });
 const { t } = useI18n();
-const emit = defineEmits(["update", "close"]);
+const emit = defineEmits(["update"]);
 const dashboardStore = useDashboardStore();
 const currentMetric = ref<MetricConfigOpt>(props.currentMetricConfig);
 const metricType = ref<string>(
@@ -113,10 +103,6 @@ function changeConfigs(index: number, param: { [key: string]: string }) {
   });
   emit("update");
 }
-
-function closePopper() {
-  emit("close");
-}
 </script>
 <style lang="scss" scoped>
 .config-panel {

src/views/dashboard/graphs/EndpointList.vue

@@ -157,6 +157,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
       return;
     }
     const metricConfig = props.config.metricConfig || [];
+    console.log(props.config.metricConfig);
     endpoints.value = usePodsSource(currentPods, json, {
       ...props.config,
       metricConfig: metricConfig,