search alarms

src/locales/lang/en.ts

@@ -187,7 +187,7 @@ const msg = {
   list: "List",
   tree: "Tree",
   filterScope: "Filter Scope",
-  searchKeyword: "Search Keyword",
+  searchKeyword: "Keyword",
   quarterHourCutTip: "Last 15 mins",
   halfHourCutTip: "Last 30 mins",
   hourCutTip: "Last 1 hour",

src/locales/lang/zh.ts

@@ -189,7 +189,7 @@ const msg = {
   list: "列表",
   tree: "树结构",
   filterScope: "过滤范围",
-  searchKeyword: "关键字搜索",
+  searchKeyword: "关键字",
   quarterHourCutTip: "最近15分钟",
   halfHourCutTip: "最近30分钟",
   hourCutTip: "最近1小时",

src/views/alarm/Content.vue

@@ -18,12 +18,11 @@ limitations under the License. -->
       v-for="(i, index) in alarmStore.alarms"
       :key="index"
       class="clear timeline-item"
-      @click="showDetails(i)"
     >
       <div class="g-sm-3 grey sm hide-xs time-line tr">
         {{ dateFormat(parseInt(i.startTime)) }}
       </div>
-      <div class="timeline-table-i g-sm-9">
+      <div class="timeline-table-i g-sm-9" @click="showDetails(i)">
         <div class="message mb-5 b">
           {{ i.message }}
         </div>
@@ -42,6 +41,7 @@ limitations under the License. -->
         </div>
       </div>
     </div>
+    <div v-if="!alarmStore.alarms.length" class="tips">{{ t("noData") }}</div>
   </div>
   <el-dialog
     v-model="isShowDetails"
@@ -126,15 +126,15 @@ limitations under the License. -->
         </span>
         <span v-else-if="eventKey.class === 'source'" class="source">
           <span
-            >{{ t("currentService") }}:
+            >{{ t("service") }}:
             {{ currentEvent[eventKey.class].service }}</span
           >
           <div v-show="currentEvent[eventKey.class].endpoint">
-            {{ t("currentEndpoint") }}:
+            {{ t("endpoint") }}:
             {{ currentEvent[eventKey.class].endpoint }}
           </div>
           <div v-show="currentEvent[eventKey.class].serviceInstance">
-            {{ t("currentInstance") }}:
+            {{ t("instance") }}:
             {{ currentEvent[eventKey.class].serviceInstance }}
           </div>
         </span>
@@ -180,4 +180,11 @@ function viewEventDetail(event: Event) {
 </script>
 <style lang="scss" scoped>
 @import "./index.scss";
+
+.tips {
+  width: 100%;
+  margin: 20px 0;
+  text-align: center;
+  font-size: 14px;
+}
 </style>

src/views/alarm/Header.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
           :options="AlarmOptions"
           placeholder="Select a layer"
           @change="changeEntity"
-          class="selectors"
+          class="alarm-tool-input"
           size="small"
         />
       </div>
@@ -34,16 +34,18 @@ limitations under the License. -->
           @change="refreshAlarms({ pageNum: 1 })"
         />
       </div>
-      <el-pagination
-        v-model:currentPage="pageNum"
-        v-model:page-size="pageSize"
-        layout="prev, pager, next, jumper"
-        :total="alarmStore.total"
-        @current-change="changePage"
-        :pager-count="5"
-        small
-        :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
-      />
+      <div class="pagination">
+        <el-pagination
+          v-model:currentPage="pageNum"
+          v-model:page-size="pageSize"
+          layout="prev, jumper, total, next"
+          :total="alarmStore.total"
+          @current-change="changePage"
+          :pager-count="5"
+          small
+          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+        />
+      </div>
     </div>
     <ConditionTags
       :type="'ALARM'"
@@ -91,6 +93,7 @@ async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
 
 function changeEntity(param: any) {
   entity.value = param[0].value;
+  refreshAlarms({ pageNum: 1 });
 }
 
 function changePage(p: number) {
@@ -104,9 +107,7 @@ function changePage(p: number) {
   border-bottom: 1px solid #c1c5ca41;
   background-color: #f0f2f5;
   padding: 10px;
-  // color: #efefef;
-  flex-shrink: 0;
-  justify-content: space-between;
+  position: relative;
 }
 
 .alarm-tool-input {
@@ -116,4 +117,10 @@ function changePage(p: number) {
   width: 250px;
   border-radius: 3px;
 }
+
+.pagination {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+}
 </style>