fix: polish the endpoint list graph (#155)

src/locales/lang/en.ts

@@ -152,6 +152,7 @@ const msg = {
   text: "Text",
   query: "Query",
   postgreSQL: "PostgreSQL",
+  endpointTips: "The table shows up to 20 pieces of endpoints.",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -152,6 +152,7 @@ const msg = {
   enableAssociate: "Activar asociación",
   query: "Consulta",
   postgreSQL: "PostgreSQL",
+  endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -149,6 +149,7 @@ const msg = {
   text: "文本",
   query: "查询",
   postgreSQL: "PostgreSQL",
+  endpointTips: "这里最多展示20条endpoints。",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/graphs/EndpointList.vue

@@ -17,17 +17,17 @@ limitations under the License. -->
     <div class="search">
       <el-input
         v-model="searchText"
-        placeholder="Please input endpoint name"
-        size="small"
+        placeholder="Search for more endpoints"
         @change="searchList"
         class="inputs"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
-            <Icon size="sm" iconName="search" />
+          <el-button @click="searchList" class="btn">
+            <Icon size="middle" iconName="search" />
           </el-button>
         </template>
       </el-input>
+      <span class="ml-5 tips">{{ t("endpointTips") }}</span>
     </div>
     <div class="list">
       <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
@@ -56,6 +56,7 @@ limitations under the License. -->
 import { ref, watch, computed } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
 import { Endpoint } from "@/types/selector";
@@ -92,6 +93,7 @@ const props = defineProps({
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 
+const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -191,11 +193,7 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
-  height: 60px;
-}
-
-.inputs {
-  width: 300px;
+.tips {
+  color: rgba(255, 0, 0, 0.5);
 }
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -18,12 +18,11 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input instance name"
-        size="small"
         @change="searchList"
         class="inputs"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
+          <el-button class="btn" @click="searchList">
             <Icon size="sm" iconName="search" />
           </el-button>
         </template>
@@ -243,14 +242,6 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
-  height: 60px;
-}
-
-.inputs {
-  width: 300px;
-}
-
 .attributes {
   max-height: 400px;
   overflow: auto;

src/views/dashboard/graphs/ServiceList.vue

@@ -18,12 +18,11 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input service name"
-        size="small"
         @change="searchList"
         class="inputs mt-5"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
+          <el-button class="btn" @click="searchList">
             <Icon size="sm" iconName="search" />
           </el-button>
         </template>
@@ -286,8 +285,4 @@ watch(
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
-
-.inputs {
-  width: 300px;
-}
 </style>

src/views/dashboard/graphs/style.scss

@@ -23,6 +23,7 @@
 .list {
   margin-top: 10px;
   margin-bottom: 10px;
+  height: calc(100% - 90px);
 }
 
 .pagination {
@@ -40,9 +41,21 @@
 }
 
 .search {
-  text-align: right;
+  margin-top: 5px;
 }
 
 .input-with-search {
   width: 400px;
 }
+
+.btn {
+  margin-top: -12px;
+}
+
+.chart {
+  height: 60px;
+}
+
+.inputs {
+  width: 300px;
+}