diff --git a/src/webview/cluster/app/clusterView.scss b/src/webview/cluster/app/clusterView.scss index 710b90fb0..3f357d221 100644 --- a/src/webview/cluster/app/clusterView.scss +++ b/src/webview/cluster/app/clusterView.scss @@ -32,6 +32,16 @@ color: var(--vscode-foreground) !important; } +.status-button { + white-space: nowrap !important; + display: flex !important; + flex-direction: row; + margin-top: 8px !important; + margin-right: 8px !important; + background-color: var(--vscode-button-background) !important; + color: var(--vscode-button-foreground) !important; +} + .button { white-space: nowrap !important; display: inline-block !important; @@ -41,17 +51,20 @@ color: var(--vscode-button-foreground) !important; } +.status-button:hover .button:hover { color: var(--vscode-button-foreground) !important; background-color: var(--vscode-button-hoverBackground) !important; cursor: pointer !important; } +.status-button:focus .button:focus { background-color: var(--vscode-button-hoverBackground) !important; cursor: pointer !important; } +.status-button:disabled .button:disabled { opacity: 0.4 !important; } diff --git a/src/webview/cluster/app/clusterView.tsx b/src/webview/cluster/app/clusterView.tsx index acb5e5412..5e293e7a8 100644 --- a/src/webview/cluster/app/clusterView.tsx +++ b/src/webview/cluster/app/clusterView.tsx @@ -3,7 +3,7 @@ * Licensed under the MIT License. See LICENSE file in the project root for license information. *-----------------------------------------------------------------------------------------------*/ -import { GetApp, InsertDriveFile, VpnKey } from '@mui/icons-material'; +import { GetApp, InsertDriveFile, Launch, VpnKey } from '@mui/icons-material'; import ExitToAppIcon from '@mui/icons-material/ExitToApp'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; @@ -12,7 +12,6 @@ import StopIcon from '@mui/icons-material/Stop'; import { Alert } from '@mui/lab'; import { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Avatar, - Badge, Button, Chip, Divider, @@ -26,14 +25,13 @@ import { Tooltip, Typography } from '@mui/material'; -import { makeStyles, withStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import * as React from 'react'; import * as ClusterViewStyles from './clusterView.style'; import { ClusterViewProps } from '../../common/propertyTypes'; -const prettyBytes = require('pretty-bytes'); +import prettyBytes from 'pretty-bytes'; const useStyles = makeStyles(ClusterViewStyles.useStyles); -const StyledBadge = withStyles(ClusterViewStyles.badgeStyles)(Badge); const crcDefaults = { DefaultCPUs: 4, @@ -76,18 +74,27 @@ export default function addClusterView(props: ClusterViewProps) { const steps = getSteps(); - const setCrcStatus = (message) => { - setStatus({ - crcStatus: message.status.crcStatus, - openshiftStatus: message.status.openshiftStatus, - diskUsage: message.status.diskUsage ? prettyBytes(message.status.diskUsage) : 'N/A', - cacheUsage: prettyBytes(message.status.cacheUsage), - cacheDir: message.status.cacheDir, - crcVer: message.versionInfo.version, - openshiftVer: message.versionInfo.openshiftVersion, - creds: message.creds - }); - } + const setCrcStatus = (message) => { + if (!message.status.success) { + setStatus( + { + crcStatus: 'Stopped', openshiftStatus: 'Stopped', diskUsage: 'N/A', cacheUsage: 'N/A', + cacheDir: '', crcVer: '', openshiftVer: '', creds: [] + } + ); + } else { + setStatus({ + crcStatus: message.status.crcStatus, + openshiftStatus: message.status.openshiftStatus, + diskUsage: message.status.diskUsage ? prettyBytes(message.status.diskUsage) : 'N/A', + cacheUsage: message.status.cacheUsage ? prettyBytes(message.status.cacheUsage) : 'N/A', + cacheDir: message.status.cacheDir, + crcVer: message.versionInfo.version, + openshiftVer: message.versionInfo.openshiftVersion, + creds: message.creds + }); + } + } const messageListener = (event) => { if (event?.data?.action){ @@ -293,19 +300,6 @@ export default function addClusterView(props: ClusterViewProps) { return `${crcDefaults.DefaultCrcUrlBase}/${props.crc}/${crcBundle}`; } - const RunningStatus = ()=> ( - } - /> - ) - - const StoppedStatus = () => ( - - ) - const CrcStatusDialog = () => ( <> {(!statusSkeleton && !crcStopProgress && !statusError) && ( @@ -316,7 +310,7 @@ export default function addClusterView(props: ClusterViewProps) { >
OpenShift Status - {status.openshiftStatus === 'Stopped' ? : } +
CRC Version: {status.crcVer} @@ -365,17 +359,17 @@ export default function addClusterView(props: ClusterViewProps) {
))} {(status.openshiftStatus === 'Stopped') ? - () : - ()} - ) : + ()} + {(status.openshiftStatus !== 'Stopped') && (
- +
)}
} />