[Bug] The list style of Security event page is broken (Additional fix on the popups)

Author: xingzhang-suse

pkg/neuvector-ui-ext/components/SecurityEvents/SecurityEventsView.vue

@@ -66,15 +66,6 @@
                     autoCompleteData: null,
                 },
                 securityEventsDataCtx: null,
-                showPacketModal: null,
-                packet: null,
-                showHostInfoModal: null,
-                host: null,
-                showWorkloadInfoModal: null,
-                workload: null,
-                showEnforcerInfoModal: null,
-                enforcer: null,
-                showAdvFilterModal: null,
                 errorRes: null,
             };
         },
@@ -93,15 +84,6 @@
                     this.securityEventsDataCtx = secEventVar.dateSliderCtx.value;
                     prepareContext4TwoWayInfinityScroll(this.securityEventsDataCtx);
                     console.log('this.securityEventsDataCtx', this.securityEventsDataCtx)
-                    this.showPacketModal = nvVariables.showPacketModal;
-                    this.packet = nvVariables.packet;
-                    this.showHostInfoModal = nvVariables.showHostInfoModal;
-                    this.host = nvVariables.host;
-                    this.showWorkloadInfoModal = nvVariables.showWorkloadInfoModal;
-                    this.workload = nvVariables.workload;
-                    this.showEnforcerInfoModal = nvVariables.showEnforcerInfoModal;
-                    this.enforcer = nvVariables.enforcer;
-                    this.showAdvFilterModal = nvVariables.showAdvFilterModal;
                     filterSecEvents();
                 } catch(error) {
                     console.error(error);
@@ -128,25 +110,49 @@
                 return e[0].scrollWidth <= e[0].clientWidth;
             },
             closePacketModal: function() {
-                this.showPacketModal.value = false;
+                nvVariables.showPacketModal.value = false;
             },
             closeHostInfoModal: function() {
-                this.showHostInfoModal.value = false;
+                nvVariables.showHostInfoModal.value = false;
             },
             closeWorkloadInfoModal: function() {
-                this.showWorkloadInfoModal.value = false;
+                nvVariables.showWorkloadInfoModal.value = false;
             },
             closeEnforcerInfoModal: function() {
-                this.showEnforcerInfoModal.value = false;
+                nvVariables.showEnforcerInfoModal.value = false;
             },
             closeAdvFilterModal: function() {
-                this.showAdvFilterModal.value = false;
+                nvVariables.showAdvFilterModal.value = false;
             }
         },
         computed: {
             isLightTheme: function() {
                 nvVariables.isLightTheme = sessionStorage.getItem(RANCHER_CONST.R_THEME) !== RANCHER_CONST.THEME.DARK;
                 return nvVariables.isLightTheme;
+            },
+            packetModalVisible: function() {
+                return nvVariables.showPacketModal.value;
+            },
+            packetData: function() {
+                return nvVariables.packet.value;
+            },
+            hostInfoModalVisible: function() {
+                return nvVariables.showHostInfoModal.value;
+            },
+            hostData: function() {
+                return nvVariables.host.value;
+            },
+            workloadInfoModalVisible: function() {
+                return nvVariables.showWorkloadInfoModal.value;
+            },
+            workloadData: function() {
+                return nvVariables.workload.value;
+            },
+            enforcerInfoModalVisible: function() {
+                return nvVariables.showEnforcerInfoModal.value;
+            },
+            enforcerData: function() {
+                return nvVariables.enforcer.value;
             }
         },
         directives: {
@@ -195,6 +201,7 @@
                 <TimeSparklingChart
                     v-if="processedSecEvents.cachedSecurityEvents"
                     :securityEventsList="processedSecEvents.cachedSecurityEvents"
+                    :height="70"
                 />
                 <TimeSlider
                     :securityEventsList="processedSecEvents.cachedSecurityEvents"
@@ -251,10 +258,10 @@
                     </div>
                 </li>
             </ul>
-            <Packet v-if="showPacketModal && showPacketModal.value" :packet="packet.value" @close="closePacketModal"></Packet>
-            <NodeInfo v-if="showHostInfoModal && showHostInfoModal.value" :host="host.value" @close="closeHostInfoModal"></NodeInfo>
-            <PodInfo v-if="showWorkloadInfoModal && showWorkloadInfoModal.value" :workload="workload.value" @close="closeWorkloadInfoModal"></PodInfo>
-            <EnforcerInfo v-if="showEnforcerInfoModal && showEnforcerInfoModal.value" :enforcer="enforcer.value" @close="closeEnforcerInfoModal"></EnforcerInfo>
+            <Packet v-if="packetModalVisible" :packet="packetData" @close="closePacketModal"></Packet>
+            <NodeInfo v-if="hostInfoModalVisible" :host="hostData" @close="closeHostInfoModal"></NodeInfo>
+            <PodInfo v-if="workloadInfoModalVisible" :workload="workloadData" @close="closeWorkloadInfoModal"></PodInfo>
+            <EnforcerInfo v-if="enforcerInfoModalVisible" :enforcer="enforcerData" @close="closeEnforcerInfoModal"></EnforcerInfo>
         </div>
         <div v-else class="text-center mt-5">
             {{ t('general.NO_ROWS') }}

pkg/neuvector-ui-ext/components/SecurityEvents/contents/views/DualEndpointsEventBrief.vue

@@ -30,7 +30,7 @@
             showPacket: async function(threatId, event) {
                 try {
                     let packetRes = await getPackets(threatId);
-                    nvVariables.packet.value = packetRes.threat.packet;
+                    nvVariables.packet.value = packetRes.data.threat.packet;
                     nvVariables.showPacketModal.value = true;
                 } catch(error) {
                     console.error(error);

pkg/neuvector-ui-ext/components/SecurityEvents/contents/views/SingleEndpointEventBrief.vue

@@ -28,7 +28,7 @@
             showPacket: async function(threatId, event) {
                 try {
                     let packetRes = await getPackets(threatId);
-                    nvVariables.packet.value = packetRes.threat.packet;
+                    nvVariables.packet.value = packetRes.data.threat.packet;
                     nvVariables.showPacketModal.value = true;
                 } catch(error) {
                     console.error(error);

pkg/neuvector-ui-ext/components/SecurityEvents/dialogs/Packet.vue

@@ -114,4 +114,48 @@
             </Card>
         </div>
     </div>
-</template>
+</template>
+
+<style lang="scss" scoped>
+    @import '../../../styles/neuvector.scss';
+
+    .packetContent {
+        max-width: 1160px;
+        max-height: 340px;
+        overflow-y: scroll;
+        overflow-x: auto;
+    }
+
+    .view {
+        width: 320px;
+        float: left;
+        margin-left: 20px;
+    }
+    .view span {
+        float: left;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        font-size: 11px;
+        cursor: pointer;
+    }
+    .view span:hover,
+    .view span.current {
+        background: lightblue;
+    }
+    .view-char {
+        width: 160px;
+    }
+    .view-char span {
+        width: 10px;
+    }
+    .view-offset {
+        width: 50px;
+    }
+    .view-offset b {
+        float: left;
+        font-size: 12px;
+        line-height: 20px;
+    }
+</style>

pkg/neuvector-ui-ext/components/SecurityEvents/timeSlider/TimeSparklingChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="chart-container">
+    <div class="chart-container" ref="chartWrap">
         <LineChart
             :chartData="chartData"
             :options="chartOptions"
@@ -113,6 +113,13 @@
 
             return { chartData, chartOptions };
         },
+        mounted() {
+            const canvas = this.$refs.chartWrap?.querySelector('canvas');
+            if (canvas) {
+                canvas.style.height = '70px';
+                canvas.style.maxHeight = '70px';
+            }
+        },
     });
 </script>
 
@@ -126,4 +133,10 @@
     .chart-container :deep(> div) {
       width: 100%;
     }
+
+    .chart-container :deep(canvas) {
+      width: 100% !important;
+      height: 70px !important;
+      max-height: 70px !important;
+    }
 </style>

pkg/neuvector-ui-ext/components/common/dialogs/EnforcerInfo.vue

@@ -103,4 +103,12 @@
 
 <style lang="scss" scoped>
     @import '../../../styles/neuvector.scss';
+
+    .modal-backdrop ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+    }
 </style>

pkg/neuvector-ui-ext/components/common/dialogs/NodeInfo.vue

@@ -219,4 +219,12 @@
 
 <style lang="scss" scoped>
     @import '../../../styles/neuvector.scss';
+
+    .modal-backdrop ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+    }
 </style>

pkg/neuvector-ui-ext/components/common/dialogs/PodInfo.vue

@@ -345,4 +345,15 @@
 
 <style lang="scss" scoped>
     @import '../../../styles/neuvector.scss';
+
+    .modal-backdrop ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+    }
+    .text-white {
+        color: #fff !important;
+    }
 </style>

pkg/neuvector-ui-ext/types/neuvector.ts

@@ -1,3 +1,5 @@
+import { ref } from 'vue';
+
 export const NEUVECTOR_PRODUCT_NAME = "neuvector";
 
 export interface FilterOptions {
@@ -853,32 +855,14 @@ export const nvVariables = {
     advFilter: null,
   },
   isLightTheme: true,
-  showPacketModal: {
-    value: false
-  },
-  packet: {
-    value: ''
-  },
-  showHostInfoModal: {
-    value: false
-  },
-  host: {
-    value: {} as any
-  },
-  showWorkloadInfoModal: {
-    value: false
-  },
-  workload: {
-    value: {} as any
-  },
-  showEnforcerInfoModal: {
-    value: false
-  },
-  enforcer: {
-    value: {} as any
-  },
-  showAdvFilterModal: {
-    value: false
-  },
+  showPacketModal: ref(false),
+  packet: ref(''),
+  showHostInfoModal: ref(false),
+  host: ref({} as any),
+  showWorkloadInfoModal: ref(false),
+  workload: ref({} as any),
+  showEnforcerInfoModal: ref(false),
+  enforcer: ref({} as any),
+  showAdvFilterModal: ref(false),
   vulnerabilityAdvFilter: null,
 };