feat: add filters for list components

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 {
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
+@import "./style.scss";
 </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"
-      :total="selectorStore.instances.length"
+      :page-size="pageSize"
+      :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 {
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
+@import "./style.scss";
 </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 {
-  height: 100%;
-}
-
-.pagination {
-  width: 100%;
-  text-align: center;
-  height: 30px;
-  padding: 3px 0;
-}
-
-.link {
-  cursor: pointer;
-  color: #409eff;
-  display: inline-block;
-  width: 100%;
-}
+@import "./style.scss";
 </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;
+}