Skip to content

[risk=low][RW-9006] Extract a runtime-status-icon component #7118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 3, 2022
Merged

[risk=low][RW-9006] Extract a runtime-status-icon component #7118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 11 additions & 134 deletions ui/src/app/components/help-sidebar-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
import { faDna } from '@fortawesome/free-solid-svg-icons/faDna';
import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
import { faTerminal } from '@fortawesome/free-solid-svg-icons/faTerminal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
Expand All @@ -20,41 +19,31 @@ import {
CdrVersionTiersResponse,
Criteria,
GenomicExtractionJob,
RuntimeStatus,
TerraJobStatus,
} from 'generated/fetch';

import colors, { colorWithWhiteness } from 'app/styles/colors';
import { DEFAULT, reactStyles, switchCase } from 'app/utils';
import { getCdrVersion } from 'app/utils/cdr-versions';
import { ComputeSecuritySuspendedError } from 'app/utils/runtime-utils';
import {
CompoundRuntimeOpStore,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only used by the runtime status icon

RuntimeStore,
serverConfigStore,
} from 'app/utils/stores';
import { RuntimeStore, serverConfigStore } from 'app/utils/stores';
import { WorkspaceData } from 'app/utils/workspace-data';
import { WorkspacePermissionsUtil } from 'app/utils/workspace-permissions';
import { supportUrls } from 'app/utils/zendesk';
import arrowLeft from 'assets/icons/arrow-left-regular.svg';
import runtime from 'assets/icons/thunderstorm-solid.svg';
import times from 'assets/icons/times-light.svg';
import thunderstorm from 'assets/icons/thunderstorm-solid.svg';
import moment from 'moment/moment';

import { RouteLink } from './app-router';
import { FlexRow } from './flex';
import { TooltipTrigger } from './popups';
import { RuntimeStatusIcon } from './runtime-status-icon';

const styles = reactStyles({
asyncOperationStatusIcon: {
width: '.5rem',
height: '.5rem',
zIndex: 2,
},
runtimeStatusIconOutline: {
border: `1px solid ${colors.white}`,
borderRadius: '.25rem',
},
statusIconContainer: {
alignSelf: 'flex-end',
margin: '0 .1rem .1rem auto',
Expand Down Expand Up @@ -120,32 +109,11 @@ export interface IconConfig {
hasContent: boolean;
}

export const proIcons = {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO this indirection was more confusing than helpful

arrowLeft: arrowLeft,
runtime: runtime,
times: times,
};

const displayRuntimeIcon = (
icon: IconConfig,
workspace: WorkspaceData,
store: RuntimeStore,
compoundRuntimeOps: CompoundRuntimeOpStore
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the RuntimeStatusIcon can access this store directly - no need to pass it in

workspaceNamespace: string,
store: RuntimeStore
) => {
let status = store?.runtime?.status;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this logic is now inside the new RuntimeStatusIcon

if (
(!status || status === RuntimeStatus.Deleted) &&
workspace.namespace in compoundRuntimeOps
) {
// If a compound operation is still pending, and we're transitioning
// through the "Deleted" phase of the runtime, we want to keep showing
// an activity spinner. Avoids an awkward UX during a delete/create cycle.
// There also be some lag during the runtime creation flow between when
// the compound operation starts, and the runtime is set in the store; for
// this reason use Creating rather than Deleting here.
status = RuntimeStatus.Creating;
}

// We always want to show the thunderstorm icon.
// For most runtime statuses (Deleting and Unknown currently excepted), we will show a small
// overlay icon in the bottom right of the tab showing the runtime status.
Expand All @@ -159,92 +127,10 @@ const displayRuntimeIcon = (
>
<img
data-test-id={'help-sidebar-icon-' + icon.id}
src={proIcons[icon.id]}
src={thunderstorm}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's always runtime here, so this is equivalent

style={{ ...icon.style, position: 'absolute' }}
/>
<FlexRow
data-test-id='runtime-status-icon-container'
style={styles.statusIconContainer}
>
{(() => {
const errIcon = (
<FontAwesomeIcon
icon={faCircle}
style={{
...styles.asyncOperationStatusIcon,
...styles.runtimeStatusIconOutline,
color: colors.asyncOperationStatus.error,
}}
/>
);

if (store.loadingError) {
if (store.loadingError instanceof ComputeSecuritySuspendedError) {
return (
<FontAwesomeIcon
icon={faLock}
style={{
...styles.asyncOperationStatusIcon,
color: colors.asyncOperationStatus.stopped,
}}
/>
);
}
return errIcon;
}
switch (status) {
case RuntimeStatus.Creating:
case RuntimeStatus.Starting:
case RuntimeStatus.Updating:
return (
<FontAwesomeIcon
icon={faSyncAlt}
style={{
...styles.asyncOperationStatusIcon,
...styles.rotate,
color: colors.asyncOperationStatus.starting,
}}
/>
);
case RuntimeStatus.Stopped:
return (
<FontAwesomeIcon
icon={faCircle}
style={{
...styles.asyncOperationStatusIcon,
...styles.runtimeStatusIconOutline,
color: colors.asyncOperationStatus.stopped,
}}
/>
);
case RuntimeStatus.Running:
return (
<FontAwesomeIcon
icon={faCircle}
style={{
...styles.asyncOperationStatusIcon,
...styles.runtimeStatusIconOutline,
color: colors.asyncOperationStatus.running,
}}
/>
);
case RuntimeStatus.Stopping:
case RuntimeStatus.Deleting:
return (
<FontAwesomeIcon
icon={faSyncAlt}
style={{
...styles.asyncOperationStatusIcon,
...styles.rotate,
color: colors.asyncOperationStatus.stopping,
}}
/>
);
case RuntimeStatus.Error:
return errIcon;
}
})()}
</FlexRow>
<RuntimeStatusIcon {...{ store, workspaceNamespace }} />
</FlexRow>
);
};
Expand Down Expand Up @@ -408,18 +294,11 @@ interface DisplayIconProps {
criteria: Array<Selection>;
concept?: Array<Criteria>;
runtimeStore: RuntimeStore;
compoundRuntimeOps: CompoundRuntimeOpStore;
genomicExtractionJobs: GenomicExtractionJob[];
}
const displayIcon = (icon: IconConfig, props: DisplayIconProps) => {
const {
workspace,
runtimeStore,
compoundRuntimeOps,
genomicExtractionJobs,
criteria,
concept,
} = props;
const { workspace, runtimeStore, genomicExtractionJobs, criteria, concept } =
props;
return switchCase(
icon.id,
[
Expand All @@ -436,8 +315,7 @@ const displayIcon = (icon: IconConfig, props: DisplayIconProps) => {
],
[
'runtime',
() =>
displayRuntimeIcon(icon, workspace, runtimeStore, compoundRuntimeOps),
() => displayRuntimeIcon(icon, workspace.namespace, runtimeStore),
],
[
'terminal',
Expand All @@ -464,7 +342,7 @@ const displayIcon = (icon: IconConfig, props: DisplayIconProps) => {
icon.faIcon === null ? (
<img
data-test-id={'help-sidebar-icon-' + icon.id}
src={proIcons[icon.id]}
src={icon.id === 'runtime' && thunderstorm}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

equivalent logic because there's no other proIcons entry which matched a SidebarIconId

style={icon.style}
/>
) : (
Expand Down Expand Up @@ -612,7 +490,6 @@ const iconConfig = (
interface HelpSidebarIconsProps extends IconConfigProps {
workspace: WorkspaceData;
cdrVersionTiersResponse: CdrVersionTiersResponse;
compoundRuntimeOps: CompoundRuntimeOpStore;
genomicExtractionJobs: GenomicExtractionJob[];
activeIcon: string;
onIconClick: (icon: IconConfig) => void;
Expand Down
47 changes: 17 additions & 30 deletions ui/src/app/components/help-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,6 @@ import {
} from 'generated/fetch';

import { SelectionList } from 'app/cohort-search/selection-list/selection-list.component';
import { Clickable, StyledExternalLink } from 'app/components/buttons';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re-sorted after linting

import { ConfirmDeleteModal } from 'app/components/confirm-delete-modal';
import { FlexColumn, FlexRow } from 'app/components/flex';
import { GenomicsExtractionTable } from 'app/components/genomics-extraction-table';
import { HelpTips } from 'app/components/help-tips';
import { withErrorModal } from 'app/components/modals';
import { TooltipTrigger } from 'app/components/popups';
import { PopupTrigger } from 'app/components/popups';
import { RuntimeConfigurationPanel } from 'app/components/runtime-configuration-panel';
import { Spinner } from 'app/components/spinners';
import { SidebarContent } from 'app/pages/data/cohort-review/sidebar-content.component';
import { ConceptListPage } from 'app/pages/data/concept/concept-list';
import { WorkspaceActionsMenu } from 'app/pages/workspace/workspace-actions-menu';
Expand All @@ -50,27 +40,34 @@ import {
} from 'app/utils/navigation';
import { withRuntimeStore } from 'app/utils/runtime-utils';
import {
CompoundRuntimeOpStore,
compoundRuntimeOpStore,
routeDataStore,
RuntimeStore,
runtimeStore,
withGenomicExtractionJobs,
withStore,
} from 'app/utils/stores';
import { withNavigation } from 'app/utils/with-navigation-hoc';
import { WorkspaceData } from 'app/utils/workspace-data';
import { openZendeskWidget, supportUrls } from 'app/utils/zendesk';
import times from 'assets/icons/times-light.svg';

import { Clickable, StyledExternalLink } from './buttons';
import { ConfirmDeleteModal } from './confirm-delete-modal';
import { FlexColumn, FlexRow } from './flex';
import { GenomicsExtractionTable } from './genomics-extraction-table';
import {
HelpSidebarIcons,
IconConfig,
proIcons,
showConceptIcon,
showCriteriaIcon,
SidebarIconId,
} from './help-sidebar-icons';
import { HelpTips } from './help-tips';
import { withErrorModal } from './modals';
import { TooltipTrigger } from './popups';
import { PopupTrigger } from './popups';
import { RuntimeConfigurationPanel } from './runtime-configuration-panel';
import { RuntimeErrorModal } from './runtime-error-modal';
import { Spinner } from './spinners';

export const LOCAL_STORAGE_KEY_SIDEBAR_STATE = 'WORKSPACE_SIDEBAR_STATE';

Expand Down Expand Up @@ -118,7 +115,7 @@ const styles = reactStyles({
verticalAlign: 'middle',
},
sectionTitle: {
marginTop: '0.5rem',
marginTop: 0,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all uses of sectionTitle overrode marginTop with 0, so it's now included here

fontWeight: 600,
color: colors.primary,
},
Expand Down Expand Up @@ -170,7 +167,6 @@ interface Props extends NavigationProps {
criteria: Array<Selection>;
concept?: Array<Criteria>;
runtimeStore: RuntimeStore;
compoundRuntimeOps: CompoundRuntimeOpStore;
cdrVersionTiersResponse: CdrVersionTiersResponse;
genomicExtractionJobs: GenomicExtractionJob[];
cohortContext: any;
Expand Down Expand Up @@ -201,7 +197,6 @@ export const HelpSidebar = fp.flow(
withGenomicExtractionJobs,
withCurrentWorkspace(),
withRuntimeStore(),
withStore(compoundRuntimeOpStore, 'compoundRuntimeOps'),
withUserProfile(),
withCdrVersions(),
withNavigation
Expand Down Expand Up @@ -383,7 +378,6 @@ export const HelpSidebar = fp.flow(
<h3
style={{
...styles.sectionTitle,
marginTop: 0,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all uses of sectionTitle had this override, so it's now included

lineHeight: 1.75,
}}
>
Expand All @@ -407,7 +401,6 @@ export const HelpSidebar = fp.flow(
<h3
style={{
...styles.sectionTitle,
marginTop: 0,
lineHeight: 1.75,
}}
>
Expand All @@ -428,9 +421,7 @@ export const HelpSidebar = fp.flow(
return {
headerPadding: '0.5rem',
renderHeader: () => (
<h3 style={{ ...styles.sectionTitle, marginTop: 0 }}>
Workspace storage
</h3>
<h3 style={styles.sectionTitle}>Workspace storage</h3>
),
renderBody: () => (
<HelpTips allowSearch={false} pageKey='notebook' />
Expand Down Expand Up @@ -458,9 +449,7 @@ export const HelpSidebar = fp.flow(
return {
headerPadding: '0.75rem',
renderHeader: () => (
<h3 style={{ ...styles.sectionTitle, marginTop: 0 }}>
Selected Concepts
</h3>
<h3 style={styles.sectionTitle}>Selected Concepts</h3>
),
bodyWidthRem: '20',
bodyPadding: '0.75rem 0.75rem 0',
Expand All @@ -486,9 +475,7 @@ export const HelpSidebar = fp.flow(
overflow: 'visible',
headerPadding: '0.75rem',
renderHeader: () => (
<h3 style={{ ...styles.sectionTitle, marginTop: 0 }}>
Genomic Extractions
</h3>
<h3 style={styles.sectionTitle}>Genomic Extractions</h3>
),
bodyWidthRem: '30',
renderBody: () => <GenomicsExtractionTable />,
Expand Down Expand Up @@ -627,7 +614,7 @@ export const HelpSidebar = fp.flow(
onClick={() => this.setActiveIcon(null)}
>
<img
src={proIcons.times}
src={times}
style={{ height: '27px', width: '17px' }}
alt='Close'
/>
Expand All @@ -649,7 +636,7 @@ export const HelpSidebar = fp.flow(

{sidebarContent.showFooter && (
<div style={{ ...styles.footer }}>
<h3 style={{ ...styles.sectionTitle, marginTop: 0 }}>
<h3 style={styles.sectionTitle}>
Not finding what you're looking for?
</h3>
<p style={styles.contentItem}>
Expand Down
Loading