Skip to content

Commit 9cc5bf4

Browse files
AbhishekA1509AbhishekA1509
committed
refactor: remove unused TerminalLineIcon and replace action spans with Button components in NodeDetails
1 parent ca02760 commit 9cc5bf4

File tree

2 files changed

+90
-94
lines changed

2 files changed

+90
-94
lines changed

‎src/assets/icons/ic-terminal-line.svg

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/ClusterNodes/NodeDetails.tsx

Lines changed: 90 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ import {
3838
AppThemeType,
3939
Icon,
4040
NodeDetailTabsInfoType,
41+
Button,
42+
ButtonVariantType,
43+
ButtonStyleType,
4144
} from '@devtron-labs/devtron-fe-common-lib'
4245
import { useParams, useLocation, useHistory } from 'react-router-dom'
4346
import YAML from 'yaml'
@@ -49,14 +52,7 @@ import { ReactComponent as AlertTriangle } from '@Icons/ic-alert-triangle.svg'
4952
import { ReactComponent as Storage } from '@Icons/ic-storage.svg'
5053
import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
5154
import { ReactComponent as Dropdown } from '@Icons/ic-chevron-down.svg'
52-
import { ReactComponent as CordonIcon } from '@Icons/ic-cordon.svg'
53-
import { ReactComponent as UncordonIcon } from '@Icons/ic-play-outline.svg'
54-
import { ReactComponent as DrainIcon } from '@Icons/ic-clean-brush.svg'
55-
import { ReactComponent as EditTaintsIcon } from '@Icons/ic-spraycan.svg'
56-
import { ReactComponent as DeleteIcon } from '@Icons/ic-delete-interactive.svg'
5755
import { ReactComponent as Success } from '@Icons/appstatus/healthy.svg'
58-
import { ReactComponent as Check } from '@Icons/ic-check.svg'
59-
import { ReactComponent as Review } from '@Icons/ic-visibility-on.svg'
6056
import { getNodeCapacity, updateNodeManifest } from './clusterNodes.service'
6157
import {
6258
ClusterListType,
@@ -68,7 +64,6 @@ import {
6864
} from './types'
6965
import { OrderBy } from '../app/list/types'
7066
import { MODES, URLS } from '../../config'
71-
import { ReactComponent as TerminalLineIcon } from '../../assets/icons/ic-terminal-line.svg'
7267
import EditTaintsModal from './NodeActions/EditTaintsModal'
7368
import { AUTO_SELECT, CLUSTER_NODE_ACTIONS_LABELS, NODE_DETAILS_TABS } from './constants'
7469
import CordonNodeModal from './NodeActions/CordonNodeModal'
@@ -227,7 +222,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
227222
const renderConditions = (): JSX.Element => {
228223
return (
229224
<div className="node-details-container flex-grow-1 flexbox-col dc__overflow-auto">
230-
<div className="ml-20 mr-20 mb-12 mt-16 bg__primary br-8 en-2 bw-1">
225+
<div className="ml-20 mr-20 mb-12 mt-12 bg__primary br-8 en-2 bw-1">
231226
<div className="condition-grid cn-7 fw-6 fs-13 dc__border-bottom pt-8 pl-20 pb-8 pr-20">
232227
<div>Type</div>
233228
<div>Status</div>
@@ -321,7 +316,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
321316
}))
322317

323318
return (
324-
<div className="pl-20 dc__border-bottom flex dc__gap-16">
319+
<div className="px-20 dc__border-bottom flex dc__gap-16">
325320
<TabGroup tabs={tabs} size={ComponentSizeType.medium} />
326321
{nodeControls()}
327322
</div>
@@ -826,82 +821,102 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
826821
const renderTabControls = () => {
827822
const selectedTab = NODE_TABS_INFO[selectedTabIndex]
828823

829-
if (selectedTab.id === getSanitizedNodeTabId(NODE_DETAILS_TABS.summary)) {
830-
return (
831-
<>
832-
<span className="flex left fw-6 cb-5 fs-12 cursor" onClick={showCordonNodeModal}>
833-
{nodeDetail?.unschedulable ? (
834-
<>
835-
<UncordonIcon className="icon-dim-16 mr-5 scb-5" />
836-
{CLUSTER_NODE_ACTIONS_LABELS.uncordon}
837-
</>
838-
) : (
839-
<>
840-
<CordonIcon className="icon-dim-16 mr-5 scb-5" />
841-
{CLUSTER_NODE_ACTIONS_LABELS.cordon}
842-
</>
843-
)}
844-
</span>
845-
<span className="flex left fw-6 cb-5 ml-16 fs-12 cursor" onClick={showDrainNodeModal}>
846-
<DrainIcon className="icon-dim-16 mr-5 scb-5" />
847-
{CLUSTER_NODE_ACTIONS_LABELS.drain}
848-
</span>
849-
<span className="flex left fw-6 cb-5 ml-16 fs-12 cursor" onClick={showEditTaintsModal}>
850-
<EditTaintsIcon className="icon-dim-16 mr-5 scb-5" />
851-
{CLUSTER_NODE_ACTIONS_LABELS.taints}
852-
</span>
853-
</>
854-
)
855-
}
856824
if (selectedTab.id === getSanitizedNodeTabId(NODE_DETAILS_TABS.yaml)) {
857825
if (!isEdit) {
858826
return (
859-
<span className="cb-5 fs-12 scb-5 fw-6 cursor flex" onClick={setYAMLEdit}>
860-
<Edit className="icon-dim-16 mr-6" /> Edit YAML
861-
</span>
827+
<Button
828+
dataTestId="edit-yaml"
829+
variant={ButtonVariantType.text}
830+
size={ComponentSizeType.small}
831+
text="Edit YAML"
832+
onClick={setYAMLEdit}
833+
startIcon={<Icon name="ic-pencil" color={null} />}
834+
/>
862835
)
863836
}
864837
return (
865-
<>
866-
{apiInProgress ? (
867-
<Progressing />
868-
) : (
869-
<span className="flex scb-5 cb-5 left fw-6 fs-12 cursor" onClick={saveYAML}>
870-
{isReviewState ? (
871-
<>
872-
<Check className="icon-dim-16 mr-6" /> Apply changes
873-
</>
874-
) : (
875-
<>
876-
<Review className="icon-dim-16 mr-6" /> Review & Save changes
877-
</>
878-
)}
879-
</span>
838+
<div className="flexbox dc__align-items-center dc__gap-12">
839+
<Button
840+
dataTestId={isReviewState ? 'apply-changes' : 'review-changes'}
841+
variant={ButtonVariantType.text}
842+
size={ComponentSizeType.small}
843+
text={isReviewState ? 'Apply changes' : 'Review & Save changes'}
844+
onClick={saveYAML}
845+
startIcon={isReviewState ? <Icon name="ic-check" color={null} /> : null}
846+
isLoading={apiInProgress}
847+
/>
848+
849+
{!apiInProgress && (
850+
<Button
851+
dataTestId="cancel-changes"
852+
variant={ButtonVariantType.text}
853+
size={ComponentSizeType.small}
854+
style={ButtonStyleType.negativeGrey}
855+
onClick={cancelYAMLEdit}
856+
text="Cancel"
857+
/>
880858
)}
881-
<span className="flex left fw-6 fs-12 cn-6 cursor ml-12" onClick={cancelYAMLEdit}>
882-
Cancel
883-
</span>
884-
</>
859+
</div>
885860
)
886861
}
862+
863+
return <div />
887864
}
888865

889866
const nodeControls = () => (
890-
<div className="fw-6 flex dc__content-space flex-grow-1 mr-12">
891-
<div className="flex left">
892-
<span className="flex left fw-6 cb-5 fs-12 cursor" onClick={openDebugTerminal}>
893-
<TerminalLineIcon className="icon-dim-16 mr-5" />
894-
{NODE_DETAILS_TABS.debug}
895-
</span>
896-
<span className="cn-2 mr-16 ml-16">|</span>
897-
{renderTabControls()}
898-
</div>
899-
<span className="flex left fw-6 cr-5 ml-16 fs-12 cursor" onClick={showDeleteNodeModal}>
900-
<DeleteIcon className="icon-dim-16 mr-5 scr-5" />
901-
{CLUSTER_NODE_ACTIONS_LABELS.delete}
902-
</span>
867+
<div className="flex-grow-1 flexbox dc__content-space dc__gap-12">
868+
{renderTabControls()}
869+
870+
<div className="flexbox dc__gap-12 dc__align-items-center">
871+
<Button
872+
dataTestId="open-debug-terminal"
873+
variant={ButtonVariantType.text}
874+
text={NODE_DETAILS_TABS.debug}
875+
onClick={openDebugTerminal}
876+
size={ComponentSizeType.small}
877+
startIcon={<Icon name="ic-terminal" color={null} />}
878+
/>
879+
880+
<Button
881+
dataTestId={nodeDetail?.unschedulable ? 'un-cordon-node' : 'cordon-node'}
882+
variant={ButtonVariantType.text}
883+
size={ComponentSizeType.small}
884+
text={
885+
nodeDetail?.unschedulable
886+
? CLUSTER_NODE_ACTIONS_LABELS.uncordon
887+
: CLUSTER_NODE_ACTIONS_LABELS.cordon
888+
}
889+
onClick={showCordonNodeModal}
890+
/>
891+
892+
<Button
893+
dataTestId="drain-node"
894+
variant={ButtonVariantType.text}
895+
size={ComponentSizeType.small}
896+
text={CLUSTER_NODE_ACTIONS_LABELS.drain}
897+
onClick={showDrainNodeModal}
898+
/>
899+
900+
<Button
901+
dataTestId="edit-taints"
902+
variant={ButtonVariantType.text}
903+
size={ComponentSizeType.small}
904+
onClick={showEditTaintsModal}
905+
text={CLUSTER_NODE_ACTIONS_LABELS.taints}
906+
/>
907+
908+
<Button
909+
dataTestId="delete-node"
910+
variant={ButtonVariantType.text}
911+
style={ButtonStyleType.negative}
912+
size={ComponentSizeType.small}
913+
onClick={showDeleteNodeModal}
914+
text={CLUSTER_NODE_ACTIONS_LABELS.delete}
915+
startIcon={<Icon name="ic-delete" color={null} />}
916+
/>
903917
</div>
904-
)
918+
</div>
919+
)
905920

906921
const cancelYAMLEdit = (): void => {
907922
setIsReviewStates(false)
@@ -977,7 +992,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
977992
}
978993
}
979994

980-
const renderTabs = (): JSX.Element => {
995+
const renderTabContent = (): JSX.Element => {
981996
const selectedTab = NODE_TABS_INFO[selectedTabIndex]
982997
const renderNode = selectedTab?.node
983998

@@ -1048,7 +1063,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
10481063
) : (
10491064
<>
10501065
{renderNodeDetailsTabs()}
1051-
{renderTabs()}
1066+
{renderTabContent()}
10521067
{showCordonNodeDialog && (
10531068
<CordonNodeModal
10541069
name={node}

0 commit comments

Comments
 (0)