Skip to content

Commit 238f7cb

Browse files
msivasubramaniaanmsivasubramaniaan
authored
fixed CRC status indications and some UI improvements (#3737)
* fixed the status indecation and some UI improvements * added color instead of span Signed-off-by: msivasubramaniaan <[email protected]> * added color instead of span Signed-off-by: msivasubramaniaan <[email protected]> * remove un-used code and imports --------- Signed-off-by: msivasubramaniaan <[email protected]>
1 parent 395476f commit 238f7cb

File tree

2 files changed

+44
-37
lines changed

2 files changed

+44
-37
lines changed

‎src/webview/cluster/app/clusterView.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@
3232
color: var(--vscode-foreground) !important;
3333
}
3434

35+
.status-button {
36+
white-space: nowrap !important;
37+
display: flex !important;
38+
flex-direction: row;
39+
margin-top: 8px !important;
40+
margin-right: 8px !important;
41+
background-color: var(--vscode-button-background) !important;
42+
color: var(--vscode-button-foreground) !important;
43+
}
44+
3545
.button {
3646
white-space: nowrap !important;
3747
display: inline-block !important;
@@ -41,17 +51,20 @@
4151
color: var(--vscode-button-foreground) !important;
4252
}
4353

54+
.status-button:hover
4455
.button:hover {
4556
color: var(--vscode-button-foreground) !important;
4657
background-color: var(--vscode-button-hoverBackground) !important;
4758
cursor: pointer !important;
4859
}
4960

61+
.status-button:focus
5062
.button:focus {
5163
background-color: var(--vscode-button-hoverBackground) !important;
5264
cursor: pointer !important;
5365
}
5466

67+
.status-button:disabled
5568
.button:disabled {
5669
opacity: 0.4 !important;
5770
}

‎src/webview/cluster/app/clusterView.tsx‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License. See LICENSE file in the project root for license information.
44
*-----------------------------------------------------------------------------------------------*/
55

6-
import { GetApp, InsertDriveFile, VpnKey } from '@mui/icons-material';
6+
import { GetApp, InsertDriveFile, Launch, VpnKey } from '@mui/icons-material';
77
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
88
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
99
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
@@ -12,7 +12,6 @@ import StopIcon from '@mui/icons-material/Stop';
1212
import { Alert } from '@mui/lab';
1313
import {
1414
Accordion, AccordionActions, AccordionDetails, AccordionSummary, Avatar,
15-
Badge,
1615
Button,
1716
Chip,
1817
Divider,
@@ -26,14 +25,13 @@ import {
2625
Tooltip,
2726
Typography
2827
} from '@mui/material';
29-
import { makeStyles, withStyles } from '@mui/styles';
28+
import { makeStyles } from '@mui/styles';
3029
import * as React from 'react';
3130
import * as ClusterViewStyles from './clusterView.style';
3231
import { ClusterViewProps } from '../../common/propertyTypes';
33-
const prettyBytes = require('pretty-bytes');
32+
import prettyBytes from 'pretty-bytes';
3433

3534
const useStyles = makeStyles(ClusterViewStyles.useStyles);
36-
const StyledBadge = withStyles(ClusterViewStyles.badgeStyles)(Badge);
3735

3836
const crcDefaults = {
3937
DefaultCPUs: 4,
@@ -76,18 +74,27 @@ export default function addClusterView(props: ClusterViewProps) {
7674

7775
const steps = getSteps();
7876

79-
const setCrcStatus = (message) => {
80-
setStatus({
81-
crcStatus: message.status.crcStatus,
82-
openshiftStatus: message.status.openshiftStatus,
83-
diskUsage: message.status.diskUsage ? prettyBytes(message.status.diskUsage) : 'N/A',
84-
cacheUsage: prettyBytes(message.status.cacheUsage),
85-
cacheDir: message.status.cacheDir,
86-
crcVer: message.versionInfo.version,
87-
openshiftVer: message.versionInfo.openshiftVersion,
88-
creds: message.creds
89-
});
90-
}
77+
const setCrcStatus = (message) => {
78+
if (!message.status.success) {
79+
setStatus(
80+
{
81+
crcStatus: 'Stopped', openshiftStatus: 'Stopped', diskUsage: 'N/A', cacheUsage: 'N/A',
82+
cacheDir: '', crcVer: '', openshiftVer: '', creds: []
83+
}
84+
);
85+
} else {
86+
setStatus({
87+
crcStatus: message.status.crcStatus,
88+
openshiftStatus: message.status.openshiftStatus,
89+
diskUsage: message.status.diskUsage ? prettyBytes(message.status.diskUsage) : 'N/A',
90+
cacheUsage: message.status.cacheUsage ? prettyBytes(message.status.cacheUsage) : 'N/A',
91+
cacheDir: message.status.cacheDir,
92+
crcVer: message.versionInfo.version,
93+
openshiftVer: message.versionInfo.openshiftVersion,
94+
creds: message.creds
95+
});
96+
}
97+
}
9198

9299
const messageListener = (event) => {
93100
if (event?.data?.action){
@@ -293,19 +300,6 @@ export default function addClusterView(props: ClusterViewProps) {
293300
return `${crcDefaults.DefaultCrcUrlBase}/${props.crc}/${crcBundle}`;
294301
}
295302

296-
const RunningStatus = ()=> (
297-
<Chip label={status.openshiftStatus} size='small'
298-
avatar={<StyledBadge
299-
overlap='circular'
300-
anchorOrigin={{ vertical: 'top', horizontal: 'left'}}
301-
variant='dot'></StyledBadge>}
302-
/>
303-
)
304-
305-
const StoppedStatus = () => (
306-
<Chip label={status.openshiftStatus} size='small' />
307-
)
308-
309303
const CrcStatusDialog = () => (
310304
<>
311305
{(!statusSkeleton && !crcStopProgress && !statusError) && (
@@ -316,7 +310,7 @@ export default function addClusterView(props: ClusterViewProps) {
316310
>
317311
<div className={classes.column}>
318312
<span style={{ marginRight: 10 }}>OpenShift Status</span>
319-
{status.openshiftStatus === 'Stopped' ? <StoppedStatus /> : <RunningStatus />}
313+
<Chip label={status.openshiftStatus} size='small' color={ status.openshiftStatus === 'Stopped' ? 'error' : 'success'} />
320314
</div>
321315
<div className={classes.column}>
322316
<span style={{ marginRight: 10 }}>CRC Version: {status.crcVer}</span>
@@ -365,17 +359,17 @@ export default function addClusterView(props: ClusterViewProps) {
365359
</div>))}
366360
</AccordionDetails><Divider /><AccordionActions>
367361
{(status.openshiftStatus === 'Stopped') ?
368-
(<Button size='small' component='span' className='button' onClick={handleStartProcess} startIcon={<PlayArrowIcon />}>Start Cluster</Button>) :
369-
(<Button size='small' component='span' className='button' onClick={handleStopProcess} startIcon={<StopIcon />}>Stop Cluster</Button>)}
370-
<Button size='small' component='span' className='button' onClick={handleRefresh} startIcon={<RefreshIcon />}>
362+
(<Button size='small' component='span' className='status-button' onClick={handleStartProcess} startIcon={<PlayArrowIcon />}>Start Cluster</Button>) :
363+
(<Button size='small' component='span' className='status-button' onClick={handleStopProcess} startIcon={<StopIcon />}>Stop Cluster</Button>)}
364+
<Button size='small' component='span' className='status-button' onClick={handleRefresh} startIcon={<RefreshIcon />}>
371365
Refresh Status
372366
</Button>
373367
{(status.openshiftStatus !== 'Stopped') && (
374368
<div>
375369
<a href={crcDefaults.DefaultWebConsoleURL} style={{ textDecoration: 'none' }}>
376-
<Button size='small' component='span' className='button'>
377-
Open Console Dashboard
378-
</Button>
370+
<Button size='small' component='span' className='status-button' endIcon={<Launch />}>
371+
Open Console Dashboard
372+
</Button>
379373
</a>
380374
</div>)}
381375
</AccordionActions></>} />

0 commit comments

Comments
 (0)