Skip to content

Commit

Permalink
refactor(core): Extract server group name previewer into its own comp…
Browse files Browse the repository at this point in the history 
…onent (#8842)

refactor(core/serverGroup): Replace server group name preview in angular
  • Loading branch information
@caseyhebebrand
caseyhebebrand committed Jan 13, 2021
1 parent 625ba6f commit a35e8bf
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 76 deletions.
48 changes: 10 additions & 38 deletions ...cripts/modules/amazon/src/serverGroup/configure/wizard/pages/ServerGroupBasicSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
DeployingIntoManagedClusterWarning,
TaskReason,
ServerGroupDetailsField,
ServerGroupNamePreview,
} from '@spinnaker/core';

import { IAmazonImage } from 'amazon/image';
Expand All @@ -39,7 +40,6 @@ export interface IServerGroupBasicSettingsState {
namePreview: string;
createsNewCluster: boolean;
latestServerGroup: IServerGroup;
showPreviewAsWarning: boolean;
}

export class ServerGroupBasicSettings
Expand All @@ -59,11 +59,9 @@ export class ServerGroupBasicSettings
private getStateFromProps(props: IServerGroupBasicSettingsProps) {
const { app } = props;
const { values } = props.formik;
const { mode } = values.viewState;

const namePreview = NameUtils.getClusterName(app.name, values.stack, values.freeFormDetails);
const createsNewCluster = !app.clusters.find((c) => c.name === namePreview);
const showPreviewAsWarning = (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);

const inCluster = (app.serverGroups.data as IServerGroup[])
.filter((serverGroup) => {
Expand All @@ -76,7 +74,7 @@ export class ServerGroupBasicSettings
.sort((a, b) => a.createdTime - b.createdTime);
const latestServerGroup = inCluster.length ? inCluster.pop() : null;

return { namePreview, createsNewCluster, latestServerGroup, showPreviewAsWarning };
return { namePreview, createsNewCluster, latestServerGroup };
}

private imageChanged = (image: IAmazonImage) => {
Expand Down Expand Up @@ -191,7 +189,7 @@ export class ServerGroupBasicSettings
public render() {
const { app, formik } = this.props;
const { errors, values } = formik;
const { createsNewCluster, latestServerGroup, namePreview, showPreviewAsWarning } = this.state;
const { createsNewCluster, latestServerGroup, namePreview } = this.state;

const accounts = values.backingData.accounts;
const readOnlyFields = values.viewState.readOnlyFields || {};
Expand Down Expand Up @@ -311,39 +309,13 @@ export class ServerGroupBasicSettings
/>
)}
{!values.viewState.hideClusterNamePreview && (
<div className="form-group">
<div className="col-md-12">
<div className={`well-compact ${showPreviewAsWarning ? 'alert alert-warning' : 'well'}`}>
<h5 className="text-center">
<p>Your server group will be in the cluster:</p>
<p>
<strong>
{namePreview}
{createsNewCluster && <span> (new cluster)</span>}
</strong>
</p>
{!createsNewCluster && values.viewState.mode === 'create' && latestServerGroup && (
<div className="text-left">
<p>There is already a server group in this cluster. Do you want to clone it?</p>
<p>
Cloning copies the entire configuration from the selected server group, allowing you to modify
whichever fields (e.g. image) you need to change in the new server group.
</p>
<p>
To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view
of the server group.
</p>
<p>
<a className="clickable" onClick={this.navigateToLatestServerGroup}>
Go to details for {latestServerGroup.name}
</a>
</p>
</div>
)}
</h5>
</div>
</div>
</div>
<ServerGroupNamePreview
createsNewCluster={createsNewCluster}
latestServerGroupName={latestServerGroup?.name}
mode={values.viewState.mode}
namePreview={namePreview}
navigateToLatestServerGroup={this.navigateToLatestServerGroup}
/>
)}
<TaskReason reason={values.reason} onChange={this.handleReasonChanged} />
</div>
Expand Down
55 changes: 55 additions & 0 deletions app/scripts/modules/core/src/serverGroup/configure/common/ServerGroupNamePreview.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import * as React from 'react';

export interface IServerGroupNamePreviewProps {
createsNewCluster: boolean;
latestServerGroupName: string;
mode: string;
namePreview: string;
navigateToLatestServerGroup: () => void;
}

export const ServerGroupNamePreview = ({
createsNewCluster,
latestServerGroupName,
mode,
namePreview,
navigateToLatestServerGroup,
}: IServerGroupNamePreviewProps) => {
const showPreviewAsWarning = (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);

return (
<div className="form-group">
<div className="col-md-12">
<div className={`well-compact ${showPreviewAsWarning ? 'alert alert-warning' : 'well'}`}>
<h5 className="text-center">
<p>Your server group will be in the cluster:</p>
<p>
<strong>
{namePreview}
{createsNewCluster && <span> (new cluster)</span>}
</strong>
</p>
{!createsNewCluster && mode === 'create' && latestServerGroupName && (
<div className="text-left">
<p>There is already a server group in this cluster. Do you want to clone it?</p>
<p>
Cloning copies the entire configuration from the selected server group, allowing you to modify
whichever fields (e.g. image) you need to change in the new server group.
</p>
<p>
To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view of
the server group.
</p>
<p>
<a className="clickable" onClick={navigateToLatestServerGroup}>
Go to details for {latestServerGroupName}
</a>
</p>
</div>
)}
</h5>
</div>
</div>
</div>
);
};
1 change: 1 addition & 0 deletions app/scripts/modules/core/src/serverGroup/configure/common/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ export * from './deployInitializer.component';
export * from './serverGroupCommandBuilder.service';
export * from './serverGroupCommandRegistry.provider';
export * from './serverGroupConfiguration.service';
export * from './ServerGroupNamePreview';
export * from './wizard/fields';
48 changes: 10 additions & 38 deletions ...scripts/modules/titus/src/serverGroup/configure/wizard/pages/ServerGroupBasicSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
AccountSelectInput,
AccountTag,
ServerGroupDetailsField,
ServerGroupNamePreview,
} from '@spinnaker/core';

import { DockerImageAndTagSelector, DockerImageUtils } from '@spinnaker/docker';
Expand All @@ -38,7 +39,6 @@ export interface IServerGroupBasicSettingsState {
namePreview: string;
createsNewCluster: boolean;
latestServerGroup: IServerGroup;
showPreviewAsWarning: boolean;
}

export class ServerGroupBasicSettings
Expand All @@ -64,10 +64,8 @@ export class ServerGroupBasicSettings
private getStateFromProps(props: IServerGroupBasicSettingsProps) {
const { app } = props;
const { values } = props.formik;
const { mode } = values.viewState;
const namePreview = NameUtils.getClusterName(app.name, values.stack, values.freeFormDetails);
const createsNewCluster = !app.clusters.find((c) => c.name === namePreview);
const showPreviewAsWarning = (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);

const inCluster = (app.serverGroups.data as IServerGroup[])
.filter((serverGroup) => {
Expand All @@ -80,7 +78,7 @@ export class ServerGroupBasicSettings
.sort((a, b) => a.createdTime - b.createdTime);
const latestServerGroup = inCluster.length ? inCluster.pop() : null;

return { namePreview, createsNewCluster, latestServerGroup, showPreviewAsWarning };
return { namePreview, createsNewCluster, latestServerGroup };
}

private accountUpdated = (account: string): void => {
Expand Down Expand Up @@ -172,7 +170,7 @@ export class ServerGroupBasicSettings
public render() {
const { app, formik } = this.props;
const { errors, setFieldValue, values } = formik;
const { createsNewCluster, latestServerGroup, namePreview, showPreviewAsWarning } = this.state;
const { createsNewCluster, latestServerGroup, namePreview } = this.state;

const accounts = values.backingData.accounts;
const readOnlyFields = values.viewState.readOnlyFields || {};
Expand Down Expand Up @@ -285,39 +283,13 @@ export class ServerGroupBasicSettings
/>
)}
{!values.viewState.hideClusterNamePreview && (
<div className="form-group">
<div className="col-md-12">
<div className={`well-compact ${showPreviewAsWarning ? 'alert alert-warning' : 'well'}`}>
<h5 className="text-center">
<p>Your Titus Job name will be:</p>
<p>
<strong>
{namePreview}
{createsNewCluster && <span> (new cluster)</span>}
</strong>
</p>
{!createsNewCluster && values.viewState.mode === 'create' && latestServerGroup && (
<div className="text-left">
<p>There is already a server group in this cluster. Do you want to clone it?</p>
<p>
Cloning copies the entire configuration from the selected server group, allowing you to modify
whichever fields (e.g. image) you need to change in the new server group.
</p>
<p>
To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view
of the server group.
</p>
<p>
<a className="clickable" onClick={this.navigateToLatestServerGroup}>
Go to details for {latestServerGroup.name}
</a>
</p>
</div>
)}
</h5>
</div>
</div>
</div>
<ServerGroupNamePreview
createsNewCluster={createsNewCluster}
latestServerGroupName={latestServerGroup?.name}
mode={values.viewState.mode}
namePreview={namePreview}
navigateToLatestServerGroup={this.navigateToLatestServerGroup}
/>
)}
</div>
);
Expand Down

0 comments on commit a35e8bf

Please sign in to comment.