@@ -20,158 +20,154 @@ import { highlightSearchText, Tooltip, WidgetEventDetails } from '@devtron-labs/
20
20
import { importComponentFromFELibrary } from '@Components/common'
21
21
import { EVENT_LIST } from '../Constants'
22
22
import { EventListType } from '../Types'
23
- import { getScrollableResourceClass } from '../Utils'
24
23
25
24
const ExplainEventButton = importComponentFromFELibrary ( 'ExplainEventButton' , null , 'function' )
26
25
27
26
export const EventList = ( {
28
27
listRef,
29
28
filteredData,
30
29
handleResourceClick,
31
- paginatedView,
32
- syncError,
33
30
searchText,
34
31
setWidgetEventDetails,
35
32
} : EventListType ) => (
36
- < div
37
- ref = { listRef }
38
- className = { `${ getScrollableResourceClass ( 'scrollable-event-list' , paginatedView , syncError ) } dc__min-width-fit-content dc__overflow-auto` }
39
- >
40
- < div
41
- className = { `event-list-row${ ExplainEventButton ? '__explain' : '' } dc__zi-1 dc__min-width-fit-content dc__position-sticky bg__primary dc__top-0 fw-6 cn-7 fs-13 dc__border-bottom px-20 py-8 dc__uppercase h-36` }
42
- >
43
- { Object . values ( EVENT_LIST . headerKeys ) . map ( ( title ) => (
44
- < div >
45
- < Tooltip key = { title } content = { title } alwaysShowTippyOnHover >
46
- < span className = "dc__ellipsis-right" > { title } </ span >
47
- </ Tooltip >
48
- </ div >
49
- ) ) }
50
- </ div >
51
- { filteredData ?. map ( ( eventData ) => {
52
- const eventDetails : WidgetEventDetails = {
53
- message : eventData . message as string ,
54
- namespace : eventData . namespace as string ,
55
- object : eventData [ EVENT_LIST . dataKeys . involvedObject ] as string ,
56
- source : eventData . source as string ,
57
- age : eventData . age as string ,
58
- count : eventData . count as number ,
59
- lastSeen : eventData [ EVENT_LIST . dataKeys . lastSeen ] as string ,
60
- }
61
- const handleExplainEventClick = ( ) => {
62
- setWidgetEventDetails ( eventDetails )
63
- }
64
- return (
65
- < div
66
- key = { Object . values ( eventData ) . join ( '-' ) }
67
- className = { `event-list-row${ ExplainEventButton ? '__explain' : '' } cn-9 fs-13 dc__border-bottom-n1 px-20 py-12 hover-class` }
68
- >
33
+ < div className = "dc__overflow-auto" >
34
+ < div ref = { listRef } className = "scrollable-event-list dc__min-width-fit-content flexbox-col" >
35
+ < div
36
+ className = { `event-list-row${ ExplainEventButton ? '__explain' : '' } dc__zi-1 dc__min-width-fit-content dc__position-sticky bg__primary dc__top-0 fw-6 cn-7 fs-13 dc__border-bottom px-20 py-8 dc__uppercase h-36` }
37
+ >
38
+ { Object . values ( EVENT_LIST . headerKeys ) . map ( ( title ) => (
39
+ < div >
40
+ < Tooltip key = { title } content = { title } alwaysShowTippyOnHover >
41
+ < span className = "dc__ellipsis-right" > { title } </ span >
42
+ </ Tooltip >
43
+ </ div >
44
+ ) ) }
45
+ </ div >
46
+ { filteredData ?. map ( ( eventData ) => {
47
+ const eventDetails : WidgetEventDetails = {
48
+ message : eventData . message as string ,
49
+ namespace : eventData . namespace as string ,
50
+ object : eventData [ EVENT_LIST . dataKeys . involvedObject ] as string ,
51
+ source : eventData . source as string ,
52
+ age : eventData . age as string ,
53
+ count : eventData . count as number ,
54
+ lastSeen : eventData [ EVENT_LIST . dataKeys . lastSeen ] as string ,
55
+ }
56
+ const handleExplainEventClick = ( ) => {
57
+ setWidgetEventDetails ( eventDetails )
58
+ }
59
+ return (
69
60
< div
70
- className = { `app-summary__status-name dc__highlight-text f-${ ( eventData . type as string ) ?. toLowerCase ( ) } ` }
61
+ key = { Object . values ( eventData ) . join ( '-' ) }
62
+ className = { `event-list-row${ ExplainEventButton ? '__explain' : '' } cn-9 fs-13 dc__border-bottom-n1 px-20 py-12 hover-class` }
71
63
>
72
- < span
73
- dangerouslySetInnerHTML = { {
74
- __html : DOMPurify . sanitize (
75
- highlightSearchText ( {
76
- searchText,
77
- text : eventData . type as string ,
78
- highlightClasses : 'p-0 fw-6 bcy-2' ,
79
- } ) ,
80
- ) ,
81
- } }
82
- />
83
- </ div >
84
- < div className = "dc__highlight-text dc__break-word" >
85
- < span
86
- dangerouslySetInnerHTML = { {
87
- __html : DOMPurify . sanitize (
88
- highlightSearchText ( {
89
- searchText,
90
- text : eventData . message as string ,
91
- highlightClasses : 'p-0 fw-6 bcy-2' ,
92
- } ) ,
93
- ) ,
94
- } }
95
- />
96
- </ div >
97
- < Tooltip content = { eventData . namespace } >
98
- < div className = "dc__ellipsis-right dc__highlight-text" >
64
+ < div
65
+ className = { `app-summary__status-name dc__highlight-text f-${ ( eventData . type as string ) ?. toLowerCase ( ) } ` }
66
+ >
67
+ < span
68
+ dangerouslySetInnerHTML = { {
69
+ __html : DOMPurify . sanitize (
70
+ highlightSearchText ( {
71
+ searchText,
72
+ text : eventData . type as string ,
73
+ highlightClasses : 'p-0 fw-6 bcy-2' ,
74
+ } ) ,
75
+ ) ,
76
+ } }
77
+ />
78
+ </ div >
79
+ < div className = "dc__highlight-text dc__break-word" >
99
80
< span
100
81
dangerouslySetInnerHTML = { {
101
82
__html : DOMPurify . sanitize (
102
83
highlightSearchText ( {
103
84
searchText,
104
- text : eventData . namespace as string ,
85
+ text : eventData . message as string ,
105
86
highlightClasses : 'p-0 fw-6 bcy-2' ,
106
87
} ) ,
107
88
) ,
108
89
} }
109
90
/>
110
91
</ div >
111
- </ Tooltip >
112
- < div className = "flexbox dc__align-start" >
113
- < Tooltip content = { eventData [ EVENT_LIST . dataKeys . involvedObject ] } >
114
- < button
115
- type = "button"
116
- className = "dc__unset-button-styles dc__ellipsis-right"
117
- data-name = { eventData [ EVENT_LIST . dataKeys . involvedObject ] }
118
- data-namespace = { eventData . namespace }
119
- data-origin = "event"
120
- onClick = { handleResourceClick }
121
- aria-label = "Select event involved object"
122
- >
92
+ < Tooltip content = { eventData . namespace } >
93
+ < div className = "dc__ellipsis-right dc__highlight-text" >
123
94
< span
124
- className = "dc__link cursor"
125
95
dangerouslySetInnerHTML = { {
126
96
__html : DOMPurify . sanitize (
127
97
highlightSearchText ( {
128
98
searchText,
129
- text : eventData [ EVENT_LIST . dataKeys . involvedObject ] as string ,
99
+ text : eventData . namespace as string ,
130
100
highlightClasses : 'p-0 fw-6 bcy-2' ,
131
101
} ) ,
132
102
) ,
133
103
} }
134
104
/>
135
- </ button >
105
+ </ div >
136
106
</ Tooltip >
137
- </ div >
138
- < Tooltip content = { eventData . source } >
139
- < div className = "dc__ellipsis-right dc__highlight-text" >
107
+ < div className = "flexbox dc__align-start" >
108
+ < Tooltip content = { eventData [ EVENT_LIST . dataKeys . involvedObject ] } >
109
+ < button
110
+ type = "button"
111
+ className = "dc__unset-button-styles dc__ellipsis-right"
112
+ data-name = { eventData [ EVENT_LIST . dataKeys . involvedObject ] }
113
+ data-namespace = { eventData . namespace }
114
+ data-origin = "event"
115
+ onClick = { handleResourceClick }
116
+ aria-label = "Select event involved object"
117
+ >
118
+ < span
119
+ className = "dc__link cursor"
120
+ dangerouslySetInnerHTML = { {
121
+ __html : DOMPurify . sanitize (
122
+ highlightSearchText ( {
123
+ searchText,
124
+ text : eventData [ EVENT_LIST . dataKeys . involvedObject ] as string ,
125
+ highlightClasses : 'p-0 fw-6 bcy-2' ,
126
+ } ) ,
127
+ ) ,
128
+ } }
129
+ />
130
+ </ button >
131
+ </ Tooltip >
132
+ </ div >
133
+ < Tooltip content = { eventData . source } >
134
+ < div className = "dc__ellipsis-right dc__highlight-text" >
135
+ < span
136
+ dangerouslySetInnerHTML = { {
137
+ __html : DOMPurify . sanitize (
138
+ highlightSearchText ( {
139
+ searchText,
140
+ text : eventData . source as string ,
141
+ highlightClasses : 'p-0 fw-6 bcy-2' ,
142
+ } ) ,
143
+ ) ,
144
+ } }
145
+ />
146
+ </ div >
147
+ </ Tooltip >
148
+ < div > { eventData . count } </ div >
149
+ < div className = "dc__highlight-text" >
140
150
< span
141
151
dangerouslySetInnerHTML = { {
142
152
__html : DOMPurify . sanitize (
143
153
highlightSearchText ( {
144
154
searchText,
145
- text : eventData . source as string ,
155
+ text : eventData . age as string ,
146
156
highlightClasses : 'p-0 fw-6 bcy-2' ,
147
157
} ) ,
148
158
) ,
149
159
} }
150
160
/>
151
161
</ div >
152
- </ Tooltip >
153
- < div > { eventData . count } </ div >
154
- < div className = "dc__highlight-text" >
155
- < span
156
- dangerouslySetInnerHTML = { {
157
- __html : DOMPurify . sanitize (
158
- highlightSearchText ( {
159
- searchText,
160
- text : eventData . age as string ,
161
- highlightClasses : 'p-0 fw-6 bcy-2' ,
162
- } ) ,
163
- ) ,
164
- } }
165
- />
162
+ < div > { eventData [ EVENT_LIST . dataKeys . lastSeen ] } </ div >
163
+ { ExplainEventButton && eventData . type === 'Warning' ? (
164
+ < ExplainEventButton handleExplainEventClick = { handleExplainEventClick } />
165
+ ) : (
166
+ < span />
167
+ ) }
166
168
</ div >
167
- < div > { eventData [ EVENT_LIST . dataKeys . lastSeen ] } </ div >
168
- { ExplainEventButton && eventData . type === 'Warning' ? (
169
- < ExplainEventButton handleExplainEventClick = { handleExplainEventClick } />
170
- ) : (
171
- < span />
172
- ) }
173
- </ div >
174
- )
175
- } ) }
169
+ )
170
+ } ) }
171
+ </ div >
176
172
</ div >
177
173
)
0 commit comments