feat: add filters for list components

src/main.ts

@@ -20,10 +20,10 @@ import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
+import "element-plus/dist/index.css";
 import "./styles/lib.scss";
 import "./styles/reset.scss";
 import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
 
 const app = createApp(App);
 

src/styles/reset.scss

@@ -15,20 +15,23 @@
  * limitations under the License.
  */
 
- body {
+body {
   margin: 0;
   line-height: 1.5;
   font-size: 14px;
   color: #3d444f;
-  font-family: 'Helvetica', 'Arial', 'Source Han Sans CN', 'Microsoft YaHei', 'sans-serif';
+  font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei",
+    sans-serif;
   text-rendering: optimizeLegibility;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
+
 html,
 body {
   height: 100%;
 }
+
 div,
 header,
 footer,
@@ -53,6 +56,7 @@ a,
 img {
   box-sizing: border-box;
 }
+
 input,
 textarea,
 select,
@@ -60,41 +64,51 @@ button {
   font-size: 100%;
   font-family: inherit;
 }
+
 h1 {
   font-size: 26px;
 }
+
 h2 {
   font-size: 24px;
 }
+
 h3 {
   font-size: 21px;
 }
+
 h4 {
   font-size: 18px;
 }
+
 h5 {
   font-size: 14px;
 }
+
 h6 {
   font-size: 1em;
 }
+
 ul,
 ol {
   margin: 0;
   padding-left: 0;
   list-style-type: none;
 }
+
 a {
   text-decoration: none;
   cursor: pointer;
   color: inherit;
   -webkit-tap-highlight-color: transparent;
-  -webkit-appearance: none;
+  appearance: none;
 }
+
 hr {
   border-width: 0;
   border-bottom: 1px solid #e0e0e0;
 }
+
 blockquote {
   margin-left: 0;
   margin-right: 0;
@@ -102,57 +116,76 @@ blockquote {
   border-left: 4px solid #cacaca;
 }
 
+.el-dialog__body {
+  padding: 10px 20px;
+}
+
 code,
 pre {
   font-family: Consolas, Menlo, Courier, monospace;
 }
-/*webkit core*/
+
+/* webkit core */
 .scroll_hide::-webkit-scrollbar {
-  width: 0px;
+  width: 0;
-  height: 0px;
+  height: 0;
 }
+
 .scroll_hide::-webkit-scrollbar-button {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-webkit-scrollbar-track-piece {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-webkit-scrollbar-corner {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-webkit-scrollbar-resizer {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
-/*o core*/
+
+/* o core */
 .scroll_hide .-o-scrollbar {
-  -moz-appearance: none !important;
+  appearance: none !important;
-  background: rgba(0, 255, 0, 0) !important;
+  background: rgb(0 255 0 / 0%) !important;
 }
+
 .scroll_hide::-o-scrollbar-button {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-o-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-o-scrollbar-track-piece {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-o-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-o-scrollbar-corner {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
+
 .scroll_hide::-o-scrollbar-resizer {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
-/*IE10,IE11,IE12*/
+
+/* IE10,IE11,IE12 */
 .scroll_hide {
   -ms-scroll-chaining: chained;
   -ms-overflow-style: none;
@@ -160,18 +193,20 @@ pre {
   -ms-scroll-rails: none;
   -ms-content-zoom-limit-min: 100%;
   -ms-content-zoom-limit-max: 500%;
-  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%);
-  -ms-overflow-style: none;
   overflow: auto;
 }
+
 .scroll_bar_style::-webkit-scrollbar {
   width: 9px;
   height: 6px;
 }
+
 .scroll_bar_style::-webkit-scrollbar-track {
   background-color: #3d444f;
 }
+
 .scroll_bar_style::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background: rgba(196, 200, 225, .2);
+  background: rgb(196 200 225 / 20%);
 }

src/views/dashboard/configuration/ConfigEdit.vue

@@ -370,7 +370,7 @@ export default defineComponent({
 
 .render-chart {
   padding: 5px;
-  height: 360px;
+  height: 400px;
   width: 100%;
 }
 
@@ -405,7 +405,7 @@ export default defineComponent({
 .no-data {
   font-size: 14px;
   text-align: center;
-  line-height: 350px;
+  line-height: 400px;
 }
 
 span.active {

src/views/dashboard/graphs/EndpointList.vue

@@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="table">
+    <div class="search">
+      <el-input
+        v-model="searchText"
+        placeholder="Please input instance name"
+        class="input-with-search"
+        size="small"
+        @change="searchList"
+      >
+        <template #append>
+          <el-button size="small" @click="searchList">
+            <Icon size="lg" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
+    </div>
     <el-table
       v-loading="chartLoading"
       :data="endpoints"
@@ -62,8 +77,10 @@ defineProps({
 });
 const selectorStore = useSelectorStore();
 const chartLoading = ref<boolean>(false);
-const endpoints = ref<{ label: string; value: string }[]>([]);
+const endpoints = ref<{ layer: string; label: string }[]>([]);
+const searchEndpoints = ref<{ layer: string; label: string }[]>([]);
 const pageSize = 7;
+const searchText = ref<string>("");
 
 onBeforeMount(async () => {
   chartLoading.value = true;
@@ -79,23 +96,13 @@ onBeforeMount(async () => {
 function changePage(pageIndex: number) {
   endpoints.value = selectorStore.endpoints.splice(pageIndex - 1, pageSize);
 }
+function searchList() {
+  searchEndpoints.value = selectorStore.instances.filter(
+    (d: { label: string }) => d.label.includes(searchText.value)
+  );
+  endpoints.value = searchEndpoints.value.splice(0, pageSize);
+}
 </script>
 <style lang="scss" scoped>
-.table {
+@import "./style.scss";
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="table">
+    <div class="search">
+      <el-input
+        v-model="searchText"
+        placeholder="Please input instance name"
+        class="input-with-search"
+        size="small"
+        @change="searchList"
+      >
+        <template #append>
+          <el-button size="small" @click="searchList">
+            <Icon size="lg" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
+    </div>
     <el-table
       v-loading="chartLoading"
       :data="instances"
@@ -36,8 +51,8 @@ limitations under the License. -->
       class="pagination"
       background
       layout="prev, pager, next"
-      :page-size="6"
+      :page-size="pageSize"
-      :total="selectorStore.instances.length"
+      :total="searchInstances.length"
       @current-change="changePage"
       @prev-click="changePage"
       @next-click="changePage"
@@ -62,8 +77,10 @@ defineProps({
 });
 const selectorStore = useSelectorStore();
 const chartLoading = ref<boolean>(false);
-const instances = ref<any[]>([]);
+const instances = ref<{ layer: string; label: string }[]>([]);
+const searchInstances = ref<{ layer: string; label: string }[]>([]);
 const pageSize = 7;
+const searchText = ref<string>("");
 
 onBeforeMount(async () => {
   chartLoading.value = true;
@@ -74,28 +91,19 @@ onBeforeMount(async () => {
     ElMessage.error(resp.errors);
     return;
   }
-  instances.value = selectorStore.instances.splice(0, pageSize);
+  searchInstances.value = selectorStore.instances;
+  instances.value = searchInstances.value.splice(0, pageSize);
 });
 function changePage(pageIndex: number) {
-  instances.value = selectorStore.instances.splice(pageIndex - 1, pageSize);
+  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
+}
+function searchList() {
+  searchInstances.value = selectorStore.instances.filter(
+    (d: { label: string }) => d.label.includes(searchText.value)
+  );
+  instances.value = searchInstances.value.splice(0, pageSize);
 }
 </script>
 <style lang="scss" scoped>
-.table {
+@import "./style.scss";
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="table">
+    <div class="search">
+      <el-input
+        v-model="searchText"
+        placeholder="Please input instance name"
+        class="input-with-search"
+        size="small"
+        @change="searchList"
+      >
+        <template #append>
+          <el-button size="small" @click="searchList">
+            <Icon size="lg" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
+    </div>
     <el-table
       v-loading="chartLoading"
       :data="services"
@@ -63,7 +78,9 @@ defineProps({
 const selectorStore = useSelectorStore();
 const chartLoading = ref<boolean>(false);
 const pageSize = 6;
-const services = ref<{ label: string; layer: string }>([]);
+const services = ref<{ label: string; layer: string }[]>([]);
+const searchServices = ref<{ layer: string; label: string }[]>([]);
+const searchText = ref<string>("");
 
 onBeforeMount(async () => {
   chartLoading.value = true;
@@ -78,23 +95,13 @@ onBeforeMount(async () => {
 function changePage(pageIndex: number) {
   services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
 }
+function searchList() {
+  searchServices.value = selectorStore.instances.filter(
+    (d: { label: string }) => d.label.includes(searchText.value)
+  );
+  services.value = searchServices.value.splice(0, pageSize);
+}
 </script>
 <style lang="scss" scoped>
-.table {
+@import "./style.scss";
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
 </style>

src/views/dashboard/graphs/style.scss

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+.table {
+  height: 100%;
+}
+
+.pagination {
+  width: 100%;
+  text-align: center;
+  height: 30px;
+  padding: 8px 0;
+}
+
+.link {
+  cursor: pointer;
+  color: #409eff;
+  display: inline-block;
+  width: 100%;
+}
+
+.search {
+  text-align: right;
+}
+
+.input-with-search {
+  width: 400px;
+}