From 7f10c1ea1314d94fe3be09e36e666c08a9fba8c7 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 1 Oct 2024 15:25:42 +0530 Subject: [PATCH 1/3] chore: terminal css fixes --- .../ClusterNodes/ClusterTerminal.tsx | 2 +- .../terminal/TerminalWrapper.component.tsx | 4 ++-- .../terminal/terminal.utils.tsx | 20 +++++++++---------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/ClusterNodes/ClusterTerminal.tsx b/src/components/ClusterNodes/ClusterTerminal.tsx index 108c02a7eb..fc4e80fa95 100644 --- a/src/components/ClusterNodes/ClusterTerminal.tsx +++ b/src/components/ClusterNodes/ClusterTerminal.tsx @@ -759,7 +759,7 @@ node-details-full-screen ] return ( -
+
) diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/TerminalWrapper.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/TerminalWrapper.component.tsx index 2ba04d037b..a0f51b1d9f 100644 --- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/TerminalWrapper.component.tsx +++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/TerminalWrapper.component.tsx @@ -32,7 +32,7 @@ export default function TerminalWrapper({ }: TerminalWrapperProps) { const firstStrip = () => { return ( -
+
{selectionListData.firstRow.map((ele) => { return terminalStripTypeData(ele) })} @@ -77,7 +77,7 @@ export default function TerminalWrapper({
{firstStrip()}
{selectionListData.secondRow && ( -
{secondStrip()}
+
{secondStrip()}
)} {typeof selectionListData.tabSwitcher.terminalTabWrapper === 'function' ? selectionListData.tabSwitcher.terminalTabWrapper(renderTerminalView()) diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx index f7bf7be096..27a3cf76b9 100644 --- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx +++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx @@ -60,7 +60,7 @@ const creatableSelectWrapper = (selectData: SelectWrapperType) => { iconClassName="icon-dim-16 fcn-6" /> )} -
{selectData.title}
+
{selectData.title}
{ content={connectData.connectTerminal ? 'Disconnect and terminate pod' : 'Connect to terminal'} > {connectData.connectTerminal ? ( - + { /> ) : ( - + { } return ( <> - + { content={switchProps.toggleButton ? 'Disconnect from pod' : 'Reconnect to pod'} > {switchProps.toggleButton ? ( - + ) : ( - + )} @@ -222,7 +222,7 @@ const clearTerminal = (clearProps: ClearTerminalType) => { } return ( -
+
@@ -235,7 +235,7 @@ const debugModeToggleButton = (selectData: DebugModeType) => { } return ( <> - + {selectData.showInfoTippy && ( { /> )} Debug Mode - + @@ -314,7 +314,7 @@ const manifestEditButtons = ({ return ( <> - + {renderButtons()} {buttonSelectionState !== EditModeType.NON_EDIT && ( Date: Tue, 1 Oct 2024 15:47:38 +0530 Subject: [PATCH 2/3] chore: css of Min Size reduces to 56px from 100px > assignment operator in task --- src/components/ciPipeline/ciPipeline.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ciPipeline/ciPipeline.scss b/src/components/ciPipeline/ciPipeline.scss index db3e1b0d5d..61fd046364 100644 --- a/src/components/ciPipeline/ciPipeline.scss +++ b/src/components/ciPipeline/ciPipeline.scss @@ -460,7 +460,7 @@ .condition-container { display: grid; grid-row-gap: 8px; - grid-template-columns: 80px 200px 100px auto 30px; + grid-template-columns: 80px 200px 56px auto 30px; } .custom-input__port-map { From f724953779c13240c948a9189b1d221c0d43c26a Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 1 Oct 2024 16:10:27 +0530 Subject: [PATCH 3/3] chore: commented app details code --- .../app/details/appDetails/AppDetails.tsx | 682 +++++++++--------- 1 file changed, 341 insertions(+), 341 deletions(-) diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx index a167f443f9..70488192fe 100644 --- a/src/components/app/details/appDetails/AppDetails.tsx +++ b/src/components/app/details/appDetails/AppDetails.tsx @@ -1027,347 +1027,347 @@ export const EventsLogsTabSelector = ({ onMouseDown = null }) => { ) } -export const NodeSelectors: React.FC = ({ - logsPaused = false, - socketConnection = true, - nodeName, - selectedNodes, - nodes, - containerName, - selectedContainer, - shell, - isReconnection, - nodeItems, - logsCleared, - isAppDeployment, - setIsReconnection, - selectShell, - setTerminalCleared, - handleLogsPause = null, - setSocketConnection, - selectNode, - setSelectNode, - selectContainer, - setLogsCleared, - children = null, -}) => { - const params = useParams<{ appId: string; envId: string; kind: Nodes; tab: NodeDetailTabs; showOldOrNewSuffix }>() - const { queryParams, searchParams } = useSearchString() - const { url, path } = useRouteMatch() - const history = useHistory() - - if (!searchParams?.kind) { - queryParams.set('kind', params.kind) - history.replace(`${url}?${queryParams.toString()}`) - return null - } - const kind: Nodes = searchParams.kind as Nodes - - const nodesMap = nodes.nodes[kind] || new Map() - - let containers = [] - let initContainers = [] - let selectedNodesItem = [] - if (selectedNodes) { - selectedNodesItem = getSelectedNodeItems(selectedNodes, nodeItems, isAppDeployment, nodesMap, kind) - } - - if (selectedNodesItem) { - selectedNodesItem.forEach((item) => { - if ((kind === Nodes.Pod || searchParams.kind === Nodes.Pod) && nodesMap && nodesMap.has(item.value)) { - containers.push(nodesMap.get(item.value)?.containers) - initContainers.push(nodesMap.get(item.value)?.initContainers) - } else { - containers.push(null) - initContainers.push(null) - } - }) - } - - const additionalOptions = [ - { label: 'All pods', value: 'All pods' }, - { label: 'All new pods', value: 'All new pods' }, - { label: 'All old pods', value: 'All old pods' }, - ] - let options = [] - if (nodeItems?.length > 1) { - options = additionalOptions.concat(nodeItems) - } else { - options = nodeItems - } - - if (!containers) { - containers = [] - } - if (!initContainers) { - initContainers = [] - } - - if (params.tab === NodeDetailTabs.TERMINAL) { - initContainers = [] - } - - const total = containers.concat(initContainers) - const allContainers = total.filter((item) => !!item) - - allContainers.forEach((item) => { - if (item?.length < 2) { - const contAvailable = allContainers[0] - if (contAvailable && !selectedContainer) { - selectContainer(contAvailable[0]) - } - } else if (!selectedContainer) { - selectContainer(null) - } - }) - - function selectPod(selected) { - setSelectNode(selected.value) - onLogsCleared() - } - - function onLogsCleared() { - setLogsCleared(true) - setTimeout(() => setLogsCleared(false), 1000) - } - - const onClickDisconnectTab = () => { - setSocketConnection('DISCONNECTING') - setIsReconnection(true) - } - - const onClickConnectTab = () => { - setSocketConnection('CONNECTING') - } - - const onClickAbort = () => { - setTerminalCleared(true) - } - - const onClickPlayStop = () => { - handleLogsPause(!logsPaused) - } - - const isSocketConnecting = socketConnection === 'CONNECTING' || socketConnection === 'CONNECTED' - const podItems = params.tab?.toLowerCase() == 'logs' ? selectedNodes : nodeName - return ( -
- {params.tab === NodeDetailTabs.TERMINAL && ( - <> -
- -
- {isSocketConnecting ? ( - - ) : ( - - )} -
- - - -
- -
- -
- - - )} - {handleLogsPause && params.tab === NodeDetailTabs.LOGS && ( - <> - -
- {logsPaused ? ( - - ) : ( - - )} -
- - - -
- -
- - - - )} -
- {kind} -
- ({ label: container, value: container })) - } - value={containerName ? { label: containerName, value: containerName } : null} - onChange={(selected) => { - selectContainer(selected.value) - onLogsCleared() - }} - styles={{ - ...multiSelectStyles, - menu: (base) => ({ ...base, zIndex: 12, textAlign: 'left' }), - control: (base, state) => ({ - ...base, - backgroundColor: 'transparent', - borderColor: 'transparent', - }), - singleValue: (base, state) => ({ - ...base, - direction: 'rtl', - textAlign: 'left', - color: 'var(--N000)', - }), - input: (base, state) => ({ - ...base, - caretColor: 'var(--N000)', - color: 'var(--N000)', - }), - option: (base, state) => ({ - ...base, - backgroundColor: state.isFocused ? 'var(--N100)' : 'white', - color: 'var(--N900)', - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - direction: 'rtl', - }), - }} - components={{ - IndicatorSeparator: null, - Option, - }} - /> -
-
- - )} - {params.tab === NodeDetailTabs.TERMINAL && ( - <> - -
- ({ +// label: name + getPodNameSuffix(selectedNodes, isAppDeployment, nodesMap, kind), +// value: name, +// })) +// } +// closeMenuOnSelect={false} +// onChange={(selected) => { +// params.tab?.toLowerCase() == 'logs' ? selectPod(selected) : selectNode(selected.value) +// }} +// components={{ +// IndicatorSeparator: null, +// Option, +// }} +// styles={{ +// ...multiSelectStyles, +// menu: (base) => ({ ...base, zIndex: 12, textAlign: 'left' }), +// control: (base, state) => ({ +// ...base, +// backgroundColor: 'transparent', +// borderColor: 'transparent', +// }), +// singleValue: (base, state) => ({ +// ...base, +// marginLeft: '0', +// marginRight: '0', +// textAlign: 'left', +// direction: 'rtl', +// color: 'var(--N000)', +// }), +// input: (base, state) => ({ ...base, caretColor: 'var(--N000)', color: 'var(--N000)' }), +// option: (base, state) => ({ +// ...base, +// backgroundColor: state.isFocused ? 'var(--N100)' : 'white', +// color: 'var(--N900)', +// textOverflow: 'ellipsis', +// overflow: 'hidden', +// whiteSpace: 'nowrap', +// direction: 'rtl', +// }), +// }} +// /> +//
+//
+// {Array.isArray(allContainers) && +// (params.tab === NodeDetailTabs.LOGS || params.tab === NodeDetailTabs.TERMINAL) && ( +// <> +// +//
+// Containers +//
+// {/* { +// selectShell(selected) +// }} +// styles={{ +// menu: (base) => ({ ...base, zIndex: 12 }), +// control: (base, state) => ({ +// ...base, +// backgroundColor: 'transparent', +// borderColor: 'transparent', +// }), +// singleValue: (base, state) => ({ +// ...base, +// textAlign: 'left', +// color: 'var(--N000)', +// }), +// input: (base, state) => ({ ...base, caretColor: 'var(--N000)', color: 'var(--N000)' }), +// option: (base, state) => ({ +// ...base, +// backgroundColor: state.isFocused ? 'var(--N100)' : 'var(--N000)', +// color: 'var(--N900)', +// }), +// }} +// components={{ +// IndicatorSeparator: null, +// Option, +// }} +// /> */} +//
+// +// )} +// {children} +//
+// ) +// } export const AppNotConfigured = ({ image,