fix(ips): fixed styling (#506)

src/components/standalone/dashboard/IpsServiceCard.vue

@@ -14,6 +14,7 @@ const errorTitle = ref<string>()
 const errorDescription = ref<string>()
 
 onMounted(() => {
+  ips.fetchStatus()
   intervalId.value = setInterval(ips.fetchStatus, REFRESH_INTERVAL)
 })
 
@@ -58,12 +59,8 @@ watch(
       />
       <div>
         <p>
-          <span class="mr-1 text-xl">{{ ips.alerts }}</span>
-          {{ t('standalone.ips.alerts_today', ips.alerts) }}
-        </p>
-        <p>
-          <span class="mr-1 text-xl">{{ ips.drops }}</span>
-          {{ t('standalone.ips.drops_today', ips.drops) }}
+          <span class="mr-1 text-xl">{{ ips.events }}</span>
+          {{ t('standalone.ips.events_today', ips.events) }}
         </p>
       </div>
     </div>

src/components/standalone/security/ips/IpsDisabledRules.vue

@@ -127,7 +127,9 @@ function handleEnabled() {
 <template>
   <div class="space-y-8">
     <div class="flex flex-wrap items-start justify-between gap-4">
-      <p class="max-w-lg">{{ t('standalone.ips.disabled_rules_description') }}</p>
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.ips.disabled_rules_description') }}
+      </p>
       <IpsEnabledBadge />
     </div>
 

src/components/standalone/security/ips/IpsEventList.vue

@@ -209,7 +209,9 @@ function suppressedAlertHandler() {
 <template>
   <div class="space-y-8">
     <div class="flex flex-wrap items-start justify-between gap-4">
-      <p class="max-w-lg">{{ t('standalone.ips.event_list_description') }}</p>
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.ips.event_list_description') }}
+      </p>
       <IpsEnabledBadge v-if="ipsStatus.enabled" />
     </div>
     <NeSkeleton v-if="loading" :lines="8" size="lg" />

src/components/standalone/security/ips/IpsFilterBypass.vue

@@ -131,7 +131,9 @@ function handleDeleted() {
 <template>
   <div class="space-y-8">
     <div class="flex flex-wrap items-start justify-between gap-4">
-      <p class="max-w-lg">{{ t('standalone.ips.filter_bypass_description') }}</p>
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.ips.filter_bypass_description') }}
+      </p>
       <IpsEnabledBadge />
     </div>
 

src/components/standalone/security/ips/IpsSuppressedAlerts.vue

@@ -129,7 +129,9 @@ function handleDeleted() {
 <template>
   <div class="space-y-8">
     <div class="flex flex-wrap items-start justify-between gap-4">
-      <p class="max-w-lg">{{ t('standalone.ips.suppressed_alerts_description') }}</p>
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.ips.suppressed_alerts_description') }}
+      </p>
       <IpsEnabledBadge />
     </div>
 

src/i18n/en/translation.json

@@ -2283,7 +2283,7 @@
     "ips": {
       "title": "Intrusion Prevention System",
       "sidebar_title": "IPS",
-      "event_list_tab": "Event list",
+      "event_list_tab": "Today event list",
       "filter_bypass_tab": "Filter bypass",
       "disabled_rules_tab": "Disabled rules",
       "suppressed_alerts_tab": "Suppressed alerts",
@@ -2356,7 +2356,7 @@
       "error_suppressing_alert": "Cannot suppress alert",
       "event_list_description": "The IPS analyzes network traffic and checks it against a rule set to identify matches. Matched traffic may be blocked or generate an alert. This page displays all events related to blocked traffic and alerts.",
       "error_loading_events": "Cannot load events",
-      "event_list_no_events": "No events, all good",
+      "event_list_no_events": "No events today, all good",
       "type": "Type",
       "filter_events": "Filter events",
       "event_list_date": "Date",
@@ -2370,8 +2370,7 @@
       "destination_suppress_alert": "Suppress alert for destination",
       "max_detect_info": "Policy 'max-detect' is enabled.",
       "max_detect_description": "Please refer to the manual for more information.",
-      "alerts_today": "alert today | alerts today",
-      "drops_today": "connection dropped today | connections dropped today"
+      "events_today": "event today | events today"
     }
   },
   "controller": {

src/stores/standalone/ipsStatus.ts

@@ -6,24 +6,21 @@ import type { AxiosResponse } from 'axios'
 type IpsStatus = AxiosResponse<{
   status: {
     enabled: boolean
-    alerts: number
-    drops: number
+    events: number
   }
 }>
 
 export const useIpsStatusStore = defineStore('ipsStatus', () => {
   const enabled = ref<boolean>(false)
-  const alerts = ref<number>(0)
-  const drops = ref<number>(0)
+  const events = ref<number>(0)
   const loading = ref(true)
   const error = ref<Error>()
 
   function fetchStatus() {
     ubusCall('ns.snort', 'status', {})
       .then((response: IpsStatus) => {
         enabled.value = response.data.status.enabled
-        alerts.value = response.data.status.alerts
-        drops.value = response.data.status.drops
+        events.value = response.data.status.events
       })
       .catch((reason: Error) => {
         error.value = reason
@@ -41,8 +38,7 @@ export const useIpsStatusStore = defineStore('ipsStatus', () => {
     enabled,
     loading,
     error,
-    alerts,
-    drops,
+    events,
     fetchStatus
   }
 })

src/views/standalone/security/IpsView.vue

@@ -25,7 +25,7 @@ const { tabs, selectedTab } = useTabs([
 
 <template>
   <div class="space-y-8">
-    <NeHeading>{{ t('standalone.ips.title') }}</NeHeading>
+    <NeHeading tag="h3">{{ t('standalone.ips.title') }}</NeHeading>
     <NeTabs
       :selected="selectedTab"
       :srSelectTabLabel="t('ne_tabs.select_a_tab')"