优化ds事件和pod页面 (#787)

pixiu-io · Jan 11, 2025 · 8bd9872 · 8bd9872
1 parent 5026da1
commit 8bd9872
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 50 deletions.
diff --git a/src/page/container/daemonset/details.vue b/src/page/container/daemonset/details.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card class="contend-card-container2" style="margin-top: 1px">
     <div style="margin-top: 10px; float: right">
-      <button class="pixiu-two-button2" style="width: 60px" @click="goToDeployment">返回</button>
+      <button class="pixiu-two-button2" style="width: 60px" @click="goToDaemonset">返回</button>
     </div>
 
     <el-space style="display: flex; margin: 20px 15px">
@@ -31,7 +31,7 @@
         </div>
 
         <div style="margin-bottom: -10px; margin-left: 10px">
-          <button class="pixiu-two-button" @click="GetDeployment">刷新</button>
+          <button class="pixiu-two-button" @click="GetDaemonset">刷新</button>
 
           <button
             class="pixiu-two-button2"
@@ -282,6 +282,57 @@
       </el-table>
       <pagination :total="data.podData.pageInfo.total" @on-change="onChange"></pagination>
     </div>
+
+    <div v-if="data.activeName === 'third'">
+      <el-card class="detail-docs" style="margin-left: 10px">
+        <el-icon
+          style="vertical-align: middle; font-size: 16px; margin-left: -25px; margin-top: -50px"
+          ><WarningFilled
+        /></el-icon>
+        <div style="vertical-align: middle; margin-top: -40px">
+          Deployment 关联事件查询，更多查询请至事件中心
+        </div>
+      </el-card>
+
+      <el-row>
+        <el-col>
+          <div style="margin-left: 10px">
+            <button class="pixiu-two-button" @click="GetEvents">查询</button>
+            <button
+              style="margin-left: 10px; width: 85px"
+              class="pixiu-two-button2"
+              @click="handleDeleteEventsDialog"
+            >
+              批量删除
+            </button>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-table
+        v-loading="data.eventData.loading"
+        :data="data.eventData.eventTableData"
+        stripe
+        style="margin-top: 10px"
+        header-row-class-name="pixiu-table-header"
+        :cell-style="{
+          'font-size': '12px',
+          color: '#191919',
+        }"
+        @selection-change="handleEventSelectionChange"
+      >
+        <el-table-column type="selection" width="30px" />
+        <el-table-column prop="lastTimestamp" label="最后出现时间" :formatter="formatterTime" />
+        <el-table-column prop="type" label="级别" />
+        <el-table-column prop="involvedObject.kind" label="资源类型"> </el-table-column>
+        <el-table-column prop="count" label="出现次数"> </el-table-column>
+        <el-table-column prop="message" label="内容" min-width="260px" />
+        <template #empty>
+          <div class="table-inline-word">选择的该命名空间的列表为空，可以切换到其他命名空间</div>
+        </template>
+      </el-table>
+      <pagination :total="data.eventData.pageInfo.total" @on-change="onEventChange"></pagination>
+    </div>
   </el-card>
 
   <PiXiuDiffView
@@ -305,8 +356,8 @@ import { useRouter } from 'vue-router';
 import { reactive, getCurrentInstance, onMounted, ref } from 'vue';
 import jsYaml from 'js-yaml';
 import pixiuDialog from '@/components/pixiuDialog/index.vue';
-import { getTableData, copy } from '@/utils/utils';
-import { formatterTime } from '@/utils/formatter';
+import { getTableData, copy, formatTimestamp } from '@/utils/utils';
+import { formatterTime, formatterPodStatus, formatterRestartCount } from '@/utils/formatter';
 import Pagination from '@/components/pagination/index.vue';
 import { getPodsByLabels, deletePod, getPodLog } from '@/services/kubernetes/podService';
 import {
@@ -315,7 +366,7 @@ import {
   rolloBackDaemonset,
 } from '@/services/kubernetes/daemonsetService';
 import PiXiuDiffView from '@/components/pixiuyaml/diffView/index.vue';
-import { getEventByResourceList } from '@/services/kubernetes/eventService';
+import { getEventByResourceList, getDaemonSetEventList } from '@/services/kubernetes/eventService';
 import { getDaemonsetReplicasets } from '@/services/kubernetes/replicasetService';
 
 const { proxy } = getCurrentInstance();
@@ -517,13 +568,6 @@ const onChange = (v) => {
   }
 };
 
-const onEventChange = (v) => {
-  data.pageEventInfo.limit = v.limit;
-  data.pageEventInfo.page = v.page;
-
-  data.eventTableData = getTableData(data.pageEventInfo, data.daemonsetEvents);
-};
-
 const getPodLogs = async () => {
   // 在指定 pod 和容器的情况下，才请求log
   if (data.selectedPod === '' || data.selectedContainer === '') {
@@ -568,7 +612,7 @@ const getPodLogs = async () => {
 };
 
 const GetDaemonsetPods = async () => {
-  let matchLabels = data.daemonset.spec.selector.matchLabels;
+  let matchLabels = data.object.spec.selector.matchLabels;
   let labels = [];
   for (let key in matchLabels) {
     labels.push(key + '=' + matchLabels[key]);
@@ -601,42 +645,64 @@ const searchDaemonsetPods = async () => {
   data.tableData = getTableData(data.pageInfo, allSearchedPods);
 };
 
-const getDaemonsetEvents = async () => {
-  const [result, err] = await getEventByResourceList(
-    data.cluster,
-    data.namespace,
-    data.name,
-    'daemonsets',
-  );
+// 事件处理开始
+const GetEvents = async () => {
+  data.eventData.loading = true;
+  const [result, err] = await getDaemonSetEventList(data.cluster, data.namespace, data.name);
+  data.eventData.loading = false;
   if (err) {
     proxy.$notify.error({ title: 'Event', message: err.response.data.message });
     return;
   }
-  data.daemonsetEvents = result;
-  data.pageEventInfo.total = result.length;
-  data.eventTableData = getTableData(data.pageEventInfo, data.daemonsetEvents);
+  data.eventData.events = result;
+  data.eventData.pageInfo.total = result.length;
+  data.eventData.eventTableData = getTableData(data.eventData.pageInfo, data.eventData.events);
 };
 
-const deleteEventObject = async (row) => {
-  const [result, err] = await deleteEvent(data.cluster, data.namespace, row.metadata.name);
-  if (err) {
-    proxy.$notify.error({ title: 'Event', message: err.response.data.message });
+const onEventChange = (v) => {
+  data.eventData.pageInfo.limit = v.limit;
+  data.eventData.pageInfo.page = v.page;
+  data.eventData.eventTableData = getTableData(data.eventData.pageInfo, data.nodeEvents);
+};
+
+const handleEventSelectionChange = (events) => {
+  data.eventData.multipleEventSelection = [];
+  for (let event of events) {
+    data.eventData.multipleEventSelection.push(event.metadata);
+  }
+};
+const handleDeleteEventsDialog = (row) => {
+  if (data.eventData.multipleEventSelection.length === 0) {
+    proxy.$notify.warning('未选择待删除事件');
     return;
   }
-  await getDaemonsetEvents();
-  proxy.$notify.success({ title: 'Event', message: `${row.metadata.name} 删除成功` });
+
+  data.deleteEventDialog.close = true;
+  data.deleteEventDialog.deleteName = 'events';
+  data.deleteEventDialog.namespace = '';
 };
 
-const deleteEventsInBatch = async () => {
-  for (let event of data.multipleEventSelection) {
-    const [result, err] = await deleteEvent(data.cluster, data.namespace, event);
+const confirmEvent = async () => {
+  for (let event of data.eventData.multipleEventSelection) {
+    const [result, err] = await deleteEvent(data.cluster, event.namespace, event.name);
     if (err) {
-      proxy.$notify.error({ title: 'Pod', message: err.response.data.message });
+      proxy.$notify.error(err.response.data.message);
+      return;
     }
   }
-  await getDaemonsetEvents();
-  proxy.$notify.success({ title: 'Events', message: '批量删除事件成功' });
+
+  cancelEvent();
+  proxy.$notify.success('批量删除事件成功');
+  GetEvents();
+};
+
+const cancelEvent = () => {
+  data.deleteEventDialog.close = false;
+  setTimeout(() => {
+    data.deleteEventDialog.deleteName = '';
+  }, 100);
 };
+// 事件处理结束
 
 const handlePodSelectionChange = (pods) => {
   data.multiplePodSelection = [];
@@ -645,23 +711,32 @@ const handlePodSelectionChange = (pods) => {
   }
 };
 
-const handleEventSelectionChange = (events) => {
-  data.multipleEventSelection = [];
-  for (let event of events) {
-    data.multipleEventSelection.push(event.metadata.name);
-  }
-};
-
 const handleClick = (tab, event) => {};
 
 const handleChange = async (name) => {
-  switch (name) {
-    case 'second':
-      await GetDaemonsetPods();
-      break;
-    case 'third':
+  if (name === 'second') {
+    GetDaemonsetPods();
+  } else {
+    data.podData.pods = [];
+    data.podData.pageInfo.total = 0;
+    data.podData.tableData = [];
+  }
+
+  if (name === 'third') {
+    GetEvents();
+  } else {
+    data.eventData.events = [];
+    data.eventData.pageInfo.total = 0;
+    data.eventData.eventTableData = [];
   }
 };
+
+const goToDaemonset = () => {
+  proxy.$router.push({
+    name: 'Daemonset',
+    query: { cluster: data.cluster },
+  });
+};
 </script>
 
 <style scoped="scoped"></style>
diff --git a/src/page/container/deployment/details.vue b/src/page/container/deployment/details.vue
@@ -703,7 +703,7 @@ import jsYaml from 'js-yaml';
 import { getTableData, copy, formatTimestamp } from '@/utils/utils';
 import { formatterTime, formatterPodStatus, formatterRestartCount } from '@/utils/formatter';
 import Pagination from '@/components/pagination/index.vue';
-import { getPodsByLabels, deletePod, getPodLog } from '@/services/kubernetes/podService';
+import { getPodsByLabels, deletePod, getPodContainerLog } from '@/services/kubernetes/podService';
 import PiXiuViewOrEdit from '@/components/pixiuyaml/viewOrEdit/index.vue';
 import {
   getDeployment,
@@ -1162,7 +1162,7 @@ const GetPodLogs = async () => {
   }
 
   data.logData.loading = true;
-  const [result, err] = await getPodLog(
+  const [result, err] = await getPodContainerLog(
     data.cluster,
     data.namespace,
     data.logData.selectedPod,
@@ -1175,7 +1175,7 @@ const GetPodLogs = async () => {
     return;
   }
   data.logData.podLogs = [];
-  for (let content of result.split('\n')) {
+  for (let content of result) {
     data.logData.podLogs.push({ lineContent: content });
   }
 };

diff --git a/src/services/kubernetes/eventService.js b/src/services/kubernetes/eventService.js
@@ -90,3 +90,7 @@ export const getNodeEventList = async (cluster, uid, name) => {
 export const getServiceEventList = async (cluster, uid, namespace, name) => {
   return getRawEventList(cluster, uid, namespace, name, '', false);
 };
+
+export const getDaemonSetEventList = async (cluster, uid, namespace, name) => {
+  return getRawEventList(cluster, uid, namespace, name, 'DaemonSet', true);
+};
diff --git a/src/services/kubernetes/podService.js b/src/services/kubernetes/podService.js
@@ -118,6 +118,38 @@ export const getPodLog = async (cluster, namespace, name, container, line) => {
   return [result, err];
 };
 
+export const getPodContainerLog = async (cluster, namespace, name, container, line) => {
+  const [err, result] = await awaitWrap(
+    http({
+      method: 'get',
+      url: `/pixiu/proxy/${cluster}/api/v1/namespaces/${namespace}/pods/${name}/log`,
+      data: {
+        container: container,
+        tailLines: line,
+      },
+    }),
+  );
+  if (err) {
+    return [result, err];
+  }
+  if (result === '') {
+    return [[], err];
+  }
+  return [result.split('\n'), err];
+};
+
+export const getPodContainersLog = async (cluster, namespace, name, containers, line) => {
+  let logs = [];
+  for (let i = 0; i < containers.length; i++) {
+    const [log, err] = getPodContainerLog(cluster, namespace, name, containers[i], line);
+    if (err) {
+      return [logs, err];
+    }
+    logs = logs.concat(log);
+  }
+  return [logs, err];
+};
+
 export const watchPodLog = (cluster, namespace, name, container, line) => {
   const baseUrl = http({ method: 'watch' });
   const url = `${baseUrl}/pixiu/kubeproxy/clusters/${cluster}/namespaces/${namespace}/pods/${name}/log?container=${container}&tailLines=${line}`;