Fix/cp table (#809)
* fix(ui): add ellipsis to alert assets column * refactor(ui): adjust column widths and scroll settings across various components for improved layout consistency * style(ui): update filter component classes to ensure minimum width for better layout consistency * fix(alerts): enhance IOC rendering to support fallback values for ioc_value, ioc_type, and ioc_description --------- Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>
taylor_socfortress committed
Apr 23, 2026 at 13:45 UTC
986a925e9aaf3214ec61212a4bf8acdee99ffd53
8 files changed
+22
-32
customer-portal/src/components/agents/List.vue
+5
-6
@@ -27,7 +27,7 @@
27
size="small"
28
:data="dataPaginated"
29
:columns
30
- :scroll-x="1500"
30
+ :scroll-x="1400"
31
class="[&_.n-data-table-th\_\_title]:whitespace-nowrap"
32
>
33
<template #empty>
@@ -166,19 +166,18 @@ const columns = computed<DataTableColumns<Agent>>(() => [
166
{
167
title: "IP Address",
168
key: "ip_address",
169
- width: 180,
169
+ width: 160,
170
render: row => <div class="font-mono">{row.ip_address}</div>
171
},
172
{
173
title: "Operating System",
174
key: "os",
175
- width: "100%",
175
render: row => <div>{row.os}</div>
176
},
177
{
178
title: "Last Seen",
179
key: "wazuh_last_seen",
181
- width: 200,
180
+ width: 180,
181
render: row => <div class="font-mono">{formatDate(row.wazuh_last_seen, dFormats.datetime)}</div>
182
},
183
{
@@ -196,7 +195,7 @@ const columns = computed<DataTableColumns<Agent>>(() => [
195
{
196
title: "Critical Asset",
197
key: "critical_asset",
199
- minWidth: 180,
198
+ width: 200,
199
render: row => {
200
return (
201
<AgentCriticalSelect
@@ -210,7 +209,7 @@ const columns = computed<DataTableColumns<Agent>>(() => [
209
{
210
title: "Actions",
211
key: "actions",
213
- minWidth: 180,
212
+ width: 194,
213
render: row => {
214
return <AgentDetailsButton agentId={row.agent_id} onCriticalAssetUpdated={handleCriticalAssetUpdated} />
215
}
customer-portal/src/components/alerts/AlertDetails/AlertIocs.vue
+3
-3
@@ -1,9 +1,9 @@
1
<template>
2
<div v-if="alert.iocs?.length" class="flex flex-col gap-2">
3
<CardEntity v-for="ioc in alert.iocs" :key="ioc.id" size="small" embedded>
4
- <template #header-main>{{ ioc.ioc_value }}</template>
5
- <template #header-extra>{{ ioc.ioc_type }}</template>
6
- <template #default>{{ ioc.ioc_description }}</template>
4
+ <template #header-main>{{ ioc.ioc_value || ioc.value }}</template>
5
+ <template #header-extra>{{ ioc.ioc_type || ioc.type }}</template>
6
+ <template #default>{{ ioc.ioc_description || ioc.description }}</template>
7
</CardEntity>
8
</div>
9
customer-portal/src/components/alerts/Filters.vue
+2
-2
@@ -5,7 +5,7 @@
5
:options="filtersKeysOptions"
6
clearable
7
placeholder="Filter key"
8
- class="basis-1/2"
8
+ class="min-w-20 basis-1/2"
9
:consistent-menu-width="false"
10
/>
11
<n-select
@@ -15,7 +15,7 @@
15
filterable
16
clearable
17
placeholder="Filter value"
18
- class="basis-1/2"
18
+ class="min-w-20 basis-1/2"
19
:consistent-menu-width="false"
20
/>
21
</n-input-group>
customer-portal/src/components/alerts/List.vue
+4
-10
@@ -116,14 +116,8 @@ const columns = computed<DataTableColumns<Alert>>(() => [
116
{
117
title: "Assets",
118
key: "assets",
119
- width: "100%",
120
- render: row => (
121
- <div class="flex max-w-80 flex-col gap-0.5">
122
- <NEllipsis class="text-sm" tooltip={{ contentClass: "text-xs max-w-90" }}>
123
- {row.assets.map(asset => asset.asset_name).join(", ")}
124
- </NEllipsis>
125
- </div>
126
- )
119
+ ellipsis: true,
120
+ render: row => row.assets.map(asset => asset.asset_name).join(", ")
121
},
122
{
123
title: "Created",
@@ -134,7 +128,7 @@ const columns = computed<DataTableColumns<Alert>>(() => [
128
{
129
title: "Status",
130
key: "status",
137
- width: 120,
131
+ width: 200,
132
render: row => {
133
return (
134
<div class="flex items-center gap-2">
@@ -154,7 +148,7 @@ const columns = computed<DataTableColumns<Alert>>(() => [
148
{
149
title: "Actions",
150
key: "actions",
157
- minWidth: 180,
151
+ width: 194,
152
render: row => {
153
return <AlertDetailsButton alertId={row.id} onStatusUpdated={handleStatusUpdateSuccess} />
154
}
customer-portal/src/components/cases/Filters.vue
+2
-2
@@ -5,7 +5,7 @@
5
:options="filtersKeysOptions"
6
clearable
7
placeholder="Filter key"
8
- class="basis-1/2"
8
+ class="min-w-20 basis-1/2"
9
:consistent-menu-width="false"
10
/>
11
<n-select
@@ -15,7 +15,7 @@
15
filterable
16
clearable
17
placeholder="Filter value"
18
- class="basis-1/2"
18
+ class="min-w-20 basis-1/2"
19
:consistent-menu-width="false"
20
/>
21
</n-input-group>
customer-portal/src/components/cases/List.vue
+2
-3
@@ -115,7 +115,6 @@ const columns = computed<DataTableColumns<Case>>(() => [
115
{
116
title: "Created",
117
key: "case_creation_time",
118
- width: "100%",
118
minWidth: 200,
119
render: row => <span class="font-mono text-sm">{formatDate(row.case_creation_time, dFormats.datetime)}</span>
120
},
@@ -137,7 +136,7 @@ const columns = computed<DataTableColumns<Case>>(() => [
136
{
137
title: "Status",
138
key: "status",
140
- width: 120,
139
+ width: 200,
140
render: row => {
141
return (
142
<div class="flex items-center gap-2">
@@ -157,7 +156,7 @@ const columns = computed<DataTableColumns<Case>>(() => [
156
{
157
title: "Actions",
158
key: "actions",
160
- minWidth: 180,
159
+ width: 194,
160
render: row => {
161
return (
162
<CaseDetailsButton
customer-portal/src/components/dashboards/List.vue
+2
-3
@@ -117,19 +117,18 @@ const columns = computed<DataTableColumns<EnabledDashboard>>(() => [
117
{
118
title: "Template",
119
key: "template_id",
120
- width: "100%",
120
render: row => <div>{row.template_id}</div>
121
},
122
{
123
title: "Created",
124
key: "created_at",
126
- width: 200,
125
+ width: 180,
126
render: row => <div>{formatDate(row.created_at, dFormats.datetime)}</div>
127
},
128
{
129
title: "Actions",
130
key: "actions",
132
- minWidth: 130,
131
+ width: 180,
132
render: row => {
133
return (
134
<NButton
customer-portal/src/components/eventSearch/List.vue
+2
-3
@@ -29,7 +29,7 @@
29
size="small"
30
:data="events"
31
:columns
32
- :scroll-x="1500"
32
+ :scroll-x="1200"
33
class="[&_.n-data-table-th\_\_title]:whitespace-nowrap"
34
>
35
<template #empty>
@@ -123,13 +123,12 @@ const columns = computed<DataTableColumns<EventSearchResult>>(() => [
123
{
124
title: "Rule",
125
key: "Rule",
126
- width: "100%",
126
render: row => <div>{row.rule_description || row.rule?.description || "-"}</div>
127
},
128
{
129
title: "Actions",
130
key: "actions",
132
- minWidth: 150,
131
+ width: 150,
132
fixed: simpleMode.value ? undefined : "right",
133
render: row => {
134
return (