Skip to content

Commit adbec59

Browse files
Elessar1802Elessar1802
committed
fix: manifest editor height & events listing scroll on zoom
1 parent 6a1092d commit adbec59

File tree

10 files changed

+112
-147
lines changed

10 files changed

+112
-147
lines changed

‎src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ import {
6767
SEARCH_QUERY_PARAM_KEY,
6868
SIDEBAR_KEYS,
6969
} from '../Constants'
70-
import { getScrollableResourceClass, getRenderNodeButton, renderResourceValue, updateQueryString } from '../Utils'
70+
import { getRenderNodeButton, renderResourceValue, updateQueryString } from '../Utils'
7171
import { importComponentFromFELibrary } from '../../common/helpers/Helpers'
7272
import ResourceBrowserActionMenu from './ResourceBrowserActionMenu'
7373
import { EventList } from './EventList'
@@ -86,7 +86,6 @@ const BaseResourceListContent = ({
8686
resourceList,
8787
clusterId,
8888
clusterName,
89-
showStaleDataWarning,
9089
selectedResource,
9190
reloadResourceListData,
9291
selectedNamespace,
@@ -581,20 +580,11 @@ const BaseResourceListContent = ({
581580
listRef={resourceListRef}
582581
filteredData={filteredResourceList.slice(resourceListOffset, resourceListOffset + pageSize)}
583582
handleResourceClick={handleResourceClick}
584-
paginatedView={showPaginatedView}
585-
syncError={showStaleDataWarning}
586583
searchText={searchText}
587584
setWidgetEventDetails={setWidgetEventDetails}
588585
/>
589586
) : (
590-
<div
591-
ref={resourceListRef}
592-
className={`${getScrollableResourceClass(
593-
'scrollable-resource-list',
594-
showPaginatedView,
595-
showStaleDataWarning,
596-
)} dc__overflow-auto`}
597-
>
587+
<div ref={resourceListRef} className="scrollable-resource-list dc__overflow-auto">
598588
<div
599589
className="scrollable-resource-list__row no-hover-bg h-36 fw-6 cn-7 fs-12 dc__gap-16 dc__zi-2 dc__position-sticky dc__border-bottom dc__uppercase bg__primary dc__top-0"
600590
style={{ gridTemplateColumns }}

‎src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ const ClusterUpgradeCompatibilityInfo = ({
114114
resourceList={resourceListForCurrentData}
115115
clusterId={clusterId}
116116
clusterName={clusterName}
117-
showStaleDataWarning={false}
118117
selectedResource={{
119118
gvk: SIDEBAR_KEYS.upgradeClusterGVK,
120119
namespaced: false,

‎src/components/ResourceBrowser/ResourceList/EventList.tsx

Lines changed: 103 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -20,158 +20,154 @@ import { highlightSearchText, Tooltip, WidgetEventDetails } from '@devtron-labs/
2020
import { importComponentFromFELibrary } from '@Components/common'
2121
import { EVENT_LIST } from '../Constants'
2222
import { EventListType } from '../Types'
23-
import { getScrollableResourceClass } from '../Utils'
2423

2524
const ExplainEventButton = importComponentFromFELibrary('ExplainEventButton', null, 'function')
2625

2726
export const EventList = ({
2827
listRef,
2928
filteredData,
3029
handleResourceClick,
31-
paginatedView,
32-
syncError,
3330
searchText,
3431
setWidgetEventDetails,
3532
}: 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 (
6960
<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`}
7163
>
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">
9980
<span
10081
dangerouslySetInnerHTML={{
10182
__html: DOMPurify.sanitize(
10283
highlightSearchText({
10384
searchText,
104-
text: eventData.namespace as string,
85+
text: eventData.message as string,
10586
highlightClasses: 'p-0 fw-6 bcy-2',
10687
}),
10788
),
10889
}}
10990
/>
11091
</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">
12394
<span
124-
className="dc__link cursor"
12595
dangerouslySetInnerHTML={{
12696
__html: DOMPurify.sanitize(
12797
highlightSearchText({
12898
searchText,
129-
text: eventData[EVENT_LIST.dataKeys.involvedObject] as string,
99+
text: eventData.namespace as string,
130100
highlightClasses: 'p-0 fw-6 bcy-2',
131101
}),
132102
),
133103
}}
134104
/>
135-
</button>
105+
</div>
136106
</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">
140150
<span
141151
dangerouslySetInnerHTML={{
142152
__html: DOMPurify.sanitize(
143153
highlightSearchText({
144154
searchText,
145-
text: eventData.source as string,
155+
text: eventData.age as string,
146156
highlightClasses: 'p-0 fw-6 bcy-2',
147157
}),
148158
),
149159
}}
150160
/>
151161
</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+
)}
166168
</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>
176172
</div>
177173
)

‎src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export const K8SResourceList = ({
4444
addTab,
4545
renderRefreshBar,
4646
isOpen,
47-
showStaleDataWarning,
4847
updateK8sResourceTab,
4948
setWidgetEventDetails,
5049
handleResourceClick,
@@ -116,7 +115,6 @@ export const K8SResourceList = ({
116115
resourceList={resourceList}
117116
clusterId={clusterId}
118117
clusterName={clusterName}
119-
showStaleDataWarning={showStaleDataWarning}
120118
selectedResource={selectedResource}
121119
reloadResourceListData={reloadResourceListData}
122120
selectedNamespace={selectedNamespace}

‎src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const K8SResourceTabComponent = ({
3030
renderRefreshBar,
3131
addTab,
3232
isOpen,
33-
showStaleDataWarning,
3433
updateK8sResourceTab,
3534
updateK8sResourceTabLastSyncMoment,
3635
setWidgetEventDetails,
@@ -90,7 +89,6 @@ const K8SResourceTabComponent = ({
9089
addTab={addTab}
9190
isOpen={isOpen}
9291
renderRefreshBar={renderRefreshBar}
93-
showStaleDataWarning={showStaleDataWarning}
9492
updateK8sResourceTab={updateK8sResourceTab}
9593
setWidgetEventDetails={setWidgetEventDetails}
9694
handleResourceClick={handleResourceClick}

‎src/components/ResourceBrowser/ResourceList/ResourceList.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -482,7 +482,6 @@ const ResourceList = () => {
482482
refreshData,
483483
)}
484484
isOpen={!!getTabById(ResourceBrowserTabsId.k8s_Resources)?.isSelected}
485-
showStaleDataWarning={isDataStale}
486485
updateK8sResourceTab={getUpdateTabUrlForId(getTabById(ResourceBrowserTabsId.k8s_Resources)?.id)}
487486
updateK8sResourceTabLastSyncMoment={updateK8sResourceTabLastSyncMoment}
488487
setWidgetEventDetails={setWidgetEventDetails}

‎src/components/ResourceBrowser/ResourceList/types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export interface BaseResourceListProps
4141
| 'renderRefreshBar'
4242
| 'selectedCluster'
4343
| 'selectedResource'
44-
| 'showStaleDataWarning'
4544
| 'clusterName'
4645
| 'setWidgetEventDetails'
4746
| 'handleResourceClick'

‎src/components/ResourceBrowser/Types.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ export interface ResourceFilterOptionsProps extends Pick<SidebarType, 'updateK8s
123123

124124
export interface K8SResourceListType extends Omit<ResourceFilterOptionsProps, 'areFiltersHidden'> {
125125
addTab: UseTabsReturnType['addTab']
126-
showStaleDataWarning: boolean
127126
setWidgetEventDetails: React.Dispatch<WidgetEventDetails>
128127
handleResourceClick: (e: React.MouseEvent<HTMLButtonElement>, shouldOverrideSelectedResourceKind?: boolean) => void
129128
lowercaseKindToResourceGroupMap: Record<string, ApiResourceGroupType>
@@ -171,8 +170,6 @@ export interface EventListType extends Pick<K8SResourceListType, 'setWidgetEvent
171170
listRef: React.MutableRefObject<HTMLDivElement>
172171
filteredData: K8sResourceDetailType['data']
173172
handleResourceClick: (e: React.MouseEvent<HTMLButtonElement>) => void
174-
paginatedView: boolean
175-
syncError: boolean
176173
searchText: string
177174
}
178175

@@ -207,7 +204,6 @@ export interface K8SResourceTabComponentProps
207204
selectedCluster: ClusterOptionType
208205
renderRefreshBar: () => JSX.Element
209206
addTab: UseTabsReturnType['addTab']
210-
showStaleDataWarning: boolean
211207
updateK8sResourceTabLastSyncMoment: () => void
212208
isOpen: boolean
213209
}

0 commit comments

Comments
 (0)