Skip to content

Commit e3f9691

Browse files
Elessar1802Elessar1802
committed
Merge branch 'feat/rb-table' into fix/rb-table
2 parents 69cec58 + 86cea83 commit e3f9691

21 files changed

+175
-384
lines changed

‎src/components/ClusterNodes/NodeDetails.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -771,7 +771,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
771771
{sortedPodList.map((pod) => (
772772
<div className="row-wrapper" key={`${pod.name}-${pod.namespace}`}>
773773
<span className="dc__ellipsis-right">{pod.namespace}</span>
774-
<div className="dc__visible-hover dc__visible-hover--parent hover-trigger dc__position-rel flexbox dc__align-items-center">
774+
<div className="dc__visible-hover dc__visible-hover--parent hover-trigger dc__position-rel flexbox dc__align-items-center dc__content-space">
775775
<Tooltip content={pod.name} interactive>
776776
<span
777777
className="dc__inline-block dc__ellipsis-right cb-5 cursor"
@@ -942,7 +942,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
942942
const parsedManifest = YAML.parse(modifiedManifest)
943943
const requestData: UpdateNodeRequestBody = {
944944
clusterId: +clusterId,
945-
name: name,
945+
name,
946946
manifestPatch: JSON.stringify(parsedManifest),
947947
version: nodeDetail.version,
948948
kind: nodeDetail.kind,

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
Table,
3030
TableColumnType,
3131
TableProps,
32+
URL_FILTER_KEYS,
3233
useSearchString,
3334
} from '@devtron-labs/devtron-fe-common-lib'
3435

@@ -152,11 +153,7 @@ const ClusterUpgradeCompatibilityInfo = ({
152153

153154
const clearFilters = () => {
154155
const searchParams = new URLSearchParams(location.search)
155-
Array.from(searchParams.keys()).forEach((key) => {
156-
if (key !== TARGET_K8S_VERSION_SEARCH_KEY) {
157-
searchParams.delete(key)
158-
}
159-
})
156+
searchParams.delete(URL_FILTER_KEYS.SEARCH_KEY)
160157
push({ search: searchParams.toString() })
161158
}
162159

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
9494
).gvk
9595

9696
return {
97-
gvk: {
98-
Group: gvkFromRawData.Group,
99-
Kind: gvkFromRawData.Kind,
100-
Version: gvkFromRawData.Version,
101-
},
97+
gvk: gvkFromRawData,
10298
}
10399
}
104100

@@ -115,14 +111,14 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
115111
>
116112
<div className="flex left dc__gap-4">
117113
<Tooltip content={resourceData.name}>
114+
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
118115
<button
119116
type="button"
120117
className="dc__unset-button-styles dc__align-left dc__truncate"
121118
data-name={resourceData.name}
122119
data-namespace={resourceData.namespace || ALL_NAMESPACE_OPTION.value}
123120
data-kind={resourceData.kind}
124121
onClick={!shouldHideContextMenu ? handleResourceClick : noop}
125-
aria-label={`Select ${resourceData.name}`}
126122
ref={nameButtonRef}
127123
>
128124
<span
@@ -151,10 +147,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
151147
clusterId={clusterId}
152148
resourceData={resourceData as K8sResourceDetailDataType}
153149
getResourceListData={reloadResourceListData as () => Promise<void>}
154-
selectedResource={{
155-
...getSelectedResourceKindOverride((resourceData.kind as string).toLowerCase()),
156-
namespaced: !!resourceData.namespace,
157-
}}
150+
selectedResource={selectedResource}
158151
hideDeleteResource
159152
handleResourceClick={handleResourceClick}
160153
handleClearBulkSelection={noop}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -201,10 +201,6 @@ export const K8SResourceList = ({
201201
[resourceList?.data],
202202
)
203203

204-
const handleClearCacheAndReload = () => {
205-
reloadResourceList()
206-
}
207-
208204
const tableFilter: TableProps['filter'] = (row, filterData) => {
209205
if (isNodeListing) {
210206
return isItemASearchMatchForNodeListing(row.data, filterData)
@@ -258,7 +254,7 @@ export const K8SResourceList = ({
258254
updateManifestResourceHelmApps,
259255
clusterId: +clusterId,
260256
clusterName: selectedCluster?.label ?? '',
261-
handleReloadDataAfterBulkOperation: handleClearCacheAndReload,
257+
handleReloadDataAfterBulkOperation: reloadResourceList,
262258
},
263259
bulkActionsData: {
264260
showBulkRestartOption:
@@ -296,7 +292,7 @@ export const K8SResourceList = ({
296292
isNodeListing,
297293
isEventListing,
298294
lowercaseKindToResourceGroupMap,
299-
reloadResourceListData: handleClearCacheAndReload,
295+
reloadResourceListData: reloadResourceList,
300296
clusterName: selectedCluster?.label ?? '',
301297
}}
302298
pageSizeOptions={!isNodeListing ? LARGE_PAGE_SIZE_OPTIONS : undefined}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const K8SResourceTabComponent = ({
4141
const abortControllerRef = useRef(new AbortController())
4242

4343
useEffect(() => {
44-
// TODO: once we get tab retention logic, we can remove this
4544
updateTabLastSyncMoment(ResourceBrowserTabsId.k8s_Resources)
4645
}, [])
4746

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

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,13 @@ import {
2929
AI_BUTTON_CONFIG_MAP,
3030
DUMMY_RESOURCE_GVK_VERSION,
3131
K8S_EMPTY_GROUP,
32-
RESOURCE_ACTION_MENU,
3332
RESOURCE_BROWSER_ROUTES,
3433
} from '../Constants'
3534
import { ClusterDetailBaseParams } from '../Types'
3635
import { getRenderInvolvedObjectButton, getRenderNodeButton, renderResourceValue } from '../Utils'
3736
import NodeActionsMenu from './NodeActionsMenu'
3837
import ResourceBrowserActionMenu from './ResourceBrowserActionMenu'
39-
import { K8sResourceListTableCellComponentProps } from './types'
38+
import { K8sResourceListTableCellComponentProps, ResourceBrowserActionMenuEnum } from './types'
4039
import { getClassNameForColumn, getFirstResourceFromKindResourceMap, getShowAIButton, getStatusClass } from './utils'
4140

4241
const ExplainWithAIButton = importComponentFromFELibrary('ExplainWithAIButton', null, 'function')
@@ -84,7 +83,7 @@ const K8sResourceListTableCellComponent = ({
8483
namespace = ALL_NAMESPACE_OPTION.value,
8584
kind,
8685
group: _group,
87-
tab = RESOURCE_ACTION_MENU.manifest,
86+
tab = ResourceBrowserActionMenuEnum.manifest,
8887
} = e.currentTarget.dataset
8988

9089
const url = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
@@ -168,6 +167,34 @@ const K8sResourceListTableCellComponent = ({
168167
}
169168
}
170169

170+
const onClickHandler = isNodeListing ? handleNodeClick : handleResourceClick
171+
172+
const renderActionMenu = () =>
173+
!isNodeListing ? (
174+
<ResourceBrowserActionMenu
175+
ref={contextMenuRef}
176+
clusterId={clusterId}
177+
resourceData={resourceData as K8sResourceDetailDataType}
178+
getResourceListData={reloadResourceListData as () => Promise<void>}
179+
selectedResource={selectedResource}
180+
handleResourceClick={handleResourceClick}
181+
handleClearBulkSelection={noop}
182+
/>
183+
) : (
184+
<NodeActionsMenu
185+
ref={contextMenuRef}
186+
getNodeListData={reloadResourceListData as () => Promise<void>}
187+
addTab={addTab}
188+
nodeData={resourceData as K8sResourceDetailDataType}
189+
handleClearBulkSelection={noop}
190+
/>
191+
)
192+
193+
const getConditionalWrap = () =>
194+
columnName === 'node'
195+
? getRenderNodeButton(resourceData as K8sResourceDetailDataType, columnName, handleNodeClick)
196+
: getRenderInvolvedObjectButton(resourceData[columnName] as string, handleEventInvolvedObjectClick)
197+
171198
if (columnName === 'type' && isEventListing) {
172199
const iconName: IconName =
173200
(resourceData.type as string).toLowerCase() === 'normal' ? 'ic-info-filled-color' : 'ic-warning'
@@ -188,15 +215,15 @@ const K8sResourceListTableCellComponent = ({
188215
>
189216
<div className="flex left dc__gap-4">
190217
<Tooltip content={resourceData.name}>
218+
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
191219
<button
192220
type="button"
193221
className="dc__unset-button-styles dc__align-left dc__truncate"
194222
data-name={resourceData.name}
195223
data-namespace={resourceData.namespace || ALL_NAMESPACE_OPTION.value}
196224
data-kind={selectedResource.gvk.Kind}
197225
data-group={selectedResource.gvk.Group || K8S_EMPTY_GROUP}
198-
onClick={isNodeListing ? handleNodeClick : handleResourceClick}
199-
aria-label={`Select ${resourceData.name}`}
226+
onClick={onClickHandler}
200227
ref={nameButtonRef}
201228
>
202229
<span
@@ -220,25 +247,7 @@ const K8sResourceListTableCellComponent = ({
220247
iconSize={16}
221248
/>
222249
</div>
223-
{!isNodeListing ? (
224-
<ResourceBrowserActionMenu
225-
ref={contextMenuRef}
226-
clusterId={clusterId}
227-
resourceData={resourceData as K8sResourceDetailDataType}
228-
getResourceListData={reloadResourceListData as () => Promise<void>}
229-
selectedResource={selectedResource}
230-
handleResourceClick={handleResourceClick}
231-
handleClearBulkSelection={noop}
232-
/>
233-
) : (
234-
<NodeActionsMenu
235-
ref={contextMenuRef}
236-
getNodeListData={reloadResourceListData as () => Promise<void>}
237-
addTab={addTab}
238-
nodeData={resourceData as K8sResourceDetailDataType}
239-
handleClearBulkSelection={noop}
240-
/>
241-
)}
250+
{renderActionMenu()}
242251
</div>
243252
) : (
244253
<div
@@ -250,18 +259,7 @@ const K8sResourceListTableCellComponent = ({
250259
>
251260
<ConditionalWrap
252261
condition={columnName === 'node' || columnName === 'involved object'}
253-
wrap={
254-
columnName === 'node'
255-
? getRenderNodeButton(
256-
resourceData as K8sResourceDetailDataType,
257-
columnName,
258-
handleNodeClick,
259-
)
260-
: getRenderInvolvedObjectButton(
261-
resourceData[columnName] as string,
262-
handleEventInvolvedObjectClick,
263-
)
264-
}
262+
wrap={getConditionalWrap()}
265263
>
266264
{columnName === 'errors' && isNodeListingAndNodeHasErrors && (
267265
<ICErrorExclamation className="icon-dim-16 dc__no-shrink mr-4" />

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

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { generatePath, useHistory, useLocation, useParams } from 'react-router-d
2020
import {
2121
ActionMenu,
2222
ActionMenuProps,
23-
Button,
2423
ButtonStyleType,
2524
ButtonVariantType,
2625
ComponentSizeType,
@@ -37,7 +36,7 @@ import EditTaintsModal from '../../ClusterNodes/NodeActions/EditTaintsModal'
3736
import { K8S_EMPTY_GROUP, RESOURCE_BROWSER_ROUTES } from '../Constants'
3837
import { NodeActionsMenuProps } from '../Types'
3938
import { getNodeActions } from './constants'
40-
import { K8sResourceListURLParams } from './types'
39+
import { K8sResourceListURLParams, NodeActionMenuOptionIdEnum } from './types'
4140

4241
// TODO: This should be commoned out with ResourceBrowserActionMenu to have consistent styling
4342
const NodeActionsMenu = forwardRef<HTMLButtonElement, NodeActionsMenuProps>(
@@ -154,25 +153,25 @@ const NodeActionsMenu = forwardRef<HTMLButtonElement, NodeActionsMenuProps>(
154153

155154
const onActionMenuClick: ActionMenuProps['onClick'] = (item) => {
156155
switch (item.id) {
157-
case 'terminal':
156+
case NodeActionMenuOptionIdEnum.terminal:
158157
handleOpenTerminalAction()
159158
break
160-
case 'cordon':
159+
case NodeActionMenuOptionIdEnum.cordon:
161160
showCordonNodeModal()
162161
break
163-
case 'uncordon':
162+
case NodeActionMenuOptionIdEnum.uncordon:
164163
showCordonNodeModal()
165164
break
166-
case 'drain':
165+
case NodeActionMenuOptionIdEnum.drain:
167166
showDrainNodeModal()
168167
break
169-
case 'edit-taints':
168+
case NodeActionMenuOptionIdEnum['edit-taints']:
170169
showEditTaintsModal()
171170
break
172-
case 'edit-yaml':
171+
case NodeActionMenuOptionIdEnum['edit-yaml']:
173172
handleEditYamlAction()
174173
break
175-
case 'delete':
174+
case NodeActionMenuOptionIdEnum.delete:
176175
showDeleteNodeModal()
177176
break
178177
default:
@@ -182,23 +181,22 @@ const NodeActionsMenu = forwardRef<HTMLButtonElement, NodeActionsMenuProps>(
182181

183182
return (
184183
<>
185-
<ActionMenu
184+
<ActionMenu<NodeActionMenuOptionIdEnum>
186185
id={nodeData.name as string}
187186
onClick={onActionMenuClick}
188187
options={[{ items: getNodeActions(!!nodeData.unschedulable) }]}
189188
position="bottom"
190-
>
191-
<Button
192-
ref={forwardedRef}
193-
dataTestId={`node-actions-button-${nodeData.name}`}
194-
icon={<MenuDots className="fcn-7" />}
195-
variant={ButtonVariantType.borderLess}
196-
ariaLabel="Open action menu"
197-
style={ButtonStyleType.neutral}
198-
size={ComponentSizeType.xxs}
199-
showAriaLabelInTippy={false}
200-
/>
201-
</ActionMenu>
189+
buttonProps={{
190+
ref: forwardedRef,
191+
dataTestId: `node-actions-button-${nodeData.name}`,
192+
icon: <MenuDots className="fcn-7" />,
193+
variant: ButtonVariantType.borderLess,
194+
ariaLabel: 'Open action menu',
195+
style: ButtonStyleType.neutral,
196+
size: ComponentSizeType.xxs,
197+
showAriaLabelInTippy: false,
198+
}}
199+
/>
202200
{renderModal()}
203201
</>
204202
)

0 commit comments

Comments
 (0)