update list style

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 data.",
   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 Datos.",
   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条数据。",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/graphs/EndpointList.vue

@@ -27,6 +27,7 @@ limitations under the License. -->
           </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%">
@@ -55,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";
@@ -91,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);
@@ -190,15 +193,8 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
+.tips {
-  height: 60px;
+  color: red;
-}
+  float: right;
-
-.inputs {
-  width: 300px;
-}
-
-.btn {
-  margin-top: -12px;
 }
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -242,20 +242,8 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
-  height: 60px;
-}
-
-.inputs {
-  width: 300px;
-}
-
 .attributes {
   max-height: 400px;
   overflow: auto;
 }
-
-.btn {
-  margin-top: -12px;
-}
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -285,12 +285,4 @@ watch(
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
-
-.inputs {
-  width: 300px;
-}
-
-.btn {
-  margin-top: -12px;
-}
 </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;
+}