Skip to content

Commit

Permalink
refactor(kubernetes): convert deploy manifest stage to react (#7002)
Browse files Browse the repository at this point in the history
  • Loading branch information
maggieneterval committed May 16, 2019
1 parent 96ac95a commit 53cb422
Show file tree
Hide file tree
Showing 29 changed files with 438 additions and 419 deletions.
1 change: 1 addition & 0 deletions app/scripts/modules/core/src/artifact/index.ts
Expand Up @@ -22,3 +22,4 @@ export * from './react/ExpectedArtifactSourceSelector';
export * from './react/ExpectedArtifactModal';
export * from './react/StageArtifactSelector';
export * from './react/PreRewriteStageArtifactSelector';
export * from './react/StageArtifactSelectorDelegate';
Expand Up @@ -77,7 +77,7 @@ describe('<PreRewriteStageArtifactSelector />', () => {
it('renders only an ExpectedArtifactSelector by default', () => {
component = mount(
<PreRewriteStageArtifactSelector
excludedArtifactTypes={[]}
excludedArtifactTypePatterns={[]}
selectedArtifactId={null}
pipeline={pipeline}
selectedArtifactAccount={null}
Expand All @@ -98,7 +98,7 @@ describe('<PreRewriteStageArtifactSelector />', () => {
it('renders an ExpectedArtifactSelector and ArtifactAccountSelector when an expected artifact with more than one possible account is selected', () => {
component = mount(
<PreRewriteStageArtifactSelector
excludedArtifactTypes={[]}
excludedArtifactTypePatterns={[]}
selectedArtifactId="626ce062-6e60-498d-a562-289db3f7faf5"
pipeline={pipeline}
selectedArtifactAccount="github-account-2"
Expand All @@ -119,7 +119,7 @@ describe('<PreRewriteStageArtifactSelector />', () => {
it('renders an ExpectedArtifactSelector and ExpectedArtifactEditor (which includes an ArtifactAccountSelector) when "Create new" is selected', () => {
component = mount(
<PreRewriteStageArtifactSelector
excludedArtifactTypes={[]}
excludedArtifactTypePatterns={[]}
selectedArtifactId={null}
pipeline={pipeline}
selectedArtifactAccount={null}
Expand Down
Expand Up @@ -20,8 +20,10 @@ import {
StageConfigField,
} from '@spinnaker/core';

interface IPreRewriteArtifactSelectorProps {
excludedArtifactTypes?: RegExp[];
export interface IPreRewriteArtifactSelectorProps {
excludedArtifactTypePatterns?: RegExp[];
helpKey: string;
label: string;
selectedArtifactId: string;
pipeline: IPipeline;
selectedArtifactAccount: string;
Expand All @@ -43,7 +45,7 @@ export class PreRewriteStageArtifactSelector extends React.Component<
IPreRewriteArtifactSelectorState
> {
public static defaultProps: Partial<IPreRewriteArtifactSelectorProps> = {
excludedArtifactTypes: defaultExcludedArtifactTypes,
excludedArtifactTypePatterns: defaultExcludedArtifactTypes,
};
private destroy$ = new Subject();

Expand Down Expand Up @@ -134,7 +136,7 @@ export class PreRewriteStageArtifactSelector extends React.Component<
private getKinds = (): IArtifactKindConfig[] => {
return Registry.pipeline
.getMatchArtifactKinds()
.filter((a: IArtifactKindConfig) => !this.props.excludedArtifactTypes.find(t => t.test(a.type)));
.filter((a: IArtifactKindConfig) => !this.props.excludedArtifactTypePatterns.find(t => t.test(a.type)));
};

private getSources = (): IExpectedArtifactSourceOption[] => {
Expand Down Expand Up @@ -168,14 +170,14 @@ export class PreRewriteStageArtifactSelector extends React.Component<
}

public render() {
const { excludedArtifactTypes, selectedArtifactId, setArtifactAccount } = this.props;
const { excludedArtifactTypePatterns, helpKey, label, selectedArtifactId, setArtifactAccount } = this.props;
const { accountsForArtifact, allArtifactAccounts, showCreateArtifactForm } = this.state;

return (
<>
<StageConfigField label="Artifact">
<StageConfigField helpKey={helpKey} label={label || 'Artifact'}>
<ExpectedArtifactSelector
excludedArtifactTypes={excludedArtifactTypes}
excludedArtifactTypes={excludedArtifactTypePatterns}
expectedArtifacts={this.state.expectedArtifacts}
selected={this.getSelectedExpectedArtifact(selectedArtifactId)}
onChange={this.onArtifactChange}
Expand Down
@@ -0,0 +1,24 @@
import * as React from 'react';

import { StageConfigField } from 'core/pipeline';
import { SETTINGS } from 'core/config/settings';

import { StageArtifactSelector, IStageArtifactSelectorProps } from './StageArtifactSelector';
import { PreRewriteStageArtifactSelector, IPreRewriteArtifactSelectorProps } from './PreRewriteStageArtifactSelector';

interface IStageArtifactSelectorDelegateProps {
helpKey: string;
label: string;
}

export const StageArtifactSelectorDelegate = (
props: IStageArtifactSelectorProps & IPreRewriteArtifactSelectorProps & IStageArtifactSelectorDelegateProps,
) => {
return SETTINGS.feature['artifactsRewrite'] ? (
<StageConfigField label={props.label} helpKey={props.helpKey}>
<StageArtifactSelector {...props} />
</StageConfigField>
) : (
<PreRewriteStageArtifactSelector {...props} />
);
};
Expand Up @@ -129,7 +129,7 @@ export class GoogleCloudBuildStageForm extends React.Component<
)}
{stage.buildDefinitionSource === buildDefinitionSources.ARTIFACT && !SETTINGS.feature['artifactsRewrite'] && (
<PreRewriteStageArtifactSelector
excludedArtifactTypes={[
excludedArtifactTypePatterns={[
ArtifactTypePatterns.DOCKER_IMAGE,
ArtifactTypePatterns.KUBERNETES,
ArtifactTypePatterns.FRONT50_PIPELINE_TEMPLATE,
Expand Down
9 changes: 3 additions & 6 deletions app/scripts/modules/kubernetes/src/v2/kubernetes.v2.module.ts
Expand Up @@ -4,11 +4,9 @@ import { CloudProviderRegistry, STAGE_ARTIFACT_SELECTOR_COMPONENT_REACT, YAML_ED

import '../logo/kubernetes.logo.less';

import { KUBERNETES_MANIFEST_BASIC_SETTINGS } from './manifest/wizard/basicSettings.component';
import { KUBERNETES_MANIFEST_DELETE_CTRL } from './manifest/delete/delete.controller';
import { KUBERNETES_MANIFEST_SCALE_CTRL } from './manifest/scale/scale.controller';
import { KUBERNETES_V2_INSTANCE_DETAILS_CTRL } from './instance/details/details.controller';
import { KUBERNETES_DEPLOY_MANIFEST_STAGE } from './pipelines/stages/deployManifest/deployManifestStage';
import { KUBERNETES_DELETE_MANIFEST_STAGE } from './pipelines/stages/deleteManifest/deleteManifestStage';
import { KUBERNETES_PATCH_MANIFEST_STAGE } from './pipelines/stages/patchManifest/patchManifestStage';
import { KUBERNETES_SCALE_MANIFEST_STAGE } from './pipelines/stages/scaleManifest/scaleManifestStage';
Expand Down Expand Up @@ -36,14 +34,16 @@ import { KUBERNETES_V2_LOAD_BALANCER_TRANSFORMER } from './loadBalancer/transfor
import { KUBERNETES_V2_SECURITY_GROUP_TRANSFORMER } from './securityGroup/transformer';
import { KUBERNETES_ANNOTATION_CUSTOM_SECTIONS } from './manifest/annotationCustomSections.component';
import { KUBERNETES_V2_RESOURCE_STATES } from './resources/resources.state';
import { KUBERNETES_COPY_FROM_TEMPLATE_BUTTON } from './pipelines/stages/deployManifest/CopyFromTemplateButton';
import { KUBERNETES_MANIFEST_IMAGE_DETAILS } from 'kubernetes/v2/manifest/manifestImageDetails.component';
import { JSON_EDITOR_COMPONENT } from './manifest/editor/json/jsonEditor.component';
import { ManifestWizard } from 'kubernetes/v2/manifest/wizard/ManifestWizard';
import { KUBERNETES_ENABLE_MANIFEST_STAGE } from 'kubernetes/v2/pipelines/stages/traffic/enableManifest.stage';
import { KUBERNETES_DISABLE_MANIFEST_STAGE } from 'kubernetes/v2/pipelines/stages/traffic/disableManifest.stage';
import { KUBERNETES_V2_RUN_JOB_STAGE } from 'kubernetes/v2/pipelines/stages/runJob/runJobStage';

// React stages
import './pipelines/stages/deployManifest/deployManifestStage';

import './pipelines/validation/manifestSelector.validator';

// load all templates into the $templateCache
Expand All @@ -55,8 +55,6 @@ templates.keys().forEach(function(key) {
export const KUBERNETES_V2_MODULE = 'spinnaker.kubernetes.v2';

module(KUBERNETES_V2_MODULE, [
KUBERNETES_COPY_FROM_TEMPLATE_BUTTON,
KUBERNETES_MANIFEST_BASIC_SETTINGS,
KUBERNETES_V2_INSTANCE_DETAILS_CTRL,
KUBERNETES_V2_LOAD_BALANCER_DETAILS_CTRL,
KUBERNETES_V2_SECURITY_GROUP_DETAILS_CTRL,
Expand All @@ -77,7 +75,6 @@ module(KUBERNETES_V2_MODULE, [
KUBERNETES_V2_LOAD_BALANCER_TRANSFORMER,
KUBERNETES_V2_SECURITY_GROUP_TRANSFORMER,
require('../securityGroup/reader').name,
KUBERNETES_DEPLOY_MANIFEST_STAGE,
KUBERNETES_DELETE_MANIFEST_STAGE,
KUBERNETES_PATCH_MANIFEST_STAGE,
KUBERNETES_SCALE_MANIFEST_STAGE,
Expand Down
@@ -1,6 +1,6 @@
import { module } from 'angular';
import { react2angular } from 'react2angular';
import { ManifestEvents } from 'kubernetes/v2/pipelines/stages/deployManifest/react/ManifestEvents';
import { ManifestEvents } from 'kubernetes/v2/pipelines/stages/deployManifest/manifestStatus/ManifestEvents';

export const KUBERNETES_MANIFEST_EVENTS = 'spinnaker.kubernetes.v2.manifest.events';
module(KUBERNETES_MANIFEST_EVENTS, []).component(
Expand Down

This file was deleted.

@@ -1,6 +1,5 @@
import * as React from 'react';
import { module } from 'angular';
import { react2angular } from 'react2angular';

import { Application, IManifest } from '@spinnaker/core';

import { ManifestCopier } from './ManifestCopier';
Expand All @@ -14,7 +13,7 @@ export interface ICopyFromTemplateState {
show: boolean;
}

class CopyFromTemplateButton extends React.Component<ICopyFromTemplateProps, ICopyFromTemplateState> {
export class CopyFromTemplateButton extends React.Component<ICopyFromTemplateProps, ICopyFromTemplateState> {
constructor(props: ICopyFromTemplateProps) {
super(props);
this.state = { show: false };
Expand All @@ -37,16 +36,10 @@ class CopyFromTemplateButton extends React.Component<ICopyFromTemplateProps, ICo
onDismiss={this.toggle}
onManifestSelected={this.handleManifestSelected}
/>
<a className="clickable" onClick={this.toggle}>
copy from running infrastructure
</a>
<button className="link" onClick={this.toggle} style={{ paddingLeft: 0 }}>
Copy from running infrastructure
</button>
</>
);
}
}

export const KUBERNETES_COPY_FROM_TEMPLATE_BUTTON = 'spinnaker.kubernetes.copyFromTemplateButton.component';
module(KUBERNETES_COPY_FROM_TEMPLATE_BUTTON, []).component(
'kubernetesCopyFromTemplateButton',
react2angular(CopyFromTemplateButton, ['application', 'handleCopy']),
);
@@ -0,0 +1,80 @@
import * as React from 'react';
import { cloneDeep } from 'lodash';
import { Observable, Subject } from 'rxjs';

import { AccountService, FormikStageConfig, IAccountDetails, IStage, IStageConfigProps } from '@spinnaker/core';

import { DeployManifestStageForm } from './DeployManifestStageForm';
import { defaultTrafficManagementConfig } from './ManifestDeploymentOptions';

interface IDeployManifestStageConfigState {
accounts: IAccountDetails[];
}

export class DeployManifestStageConfig extends React.Component<IStageConfigProps, IDeployManifestStageConfigState> {
private stage: IStage;
private destroy$ = new Subject();

public constructor(props: IStageConfigProps) {
super(props);
this.state = {
accounts: [],
};
const { stage: initialStageConfig } = props;
const stage = cloneDeep(initialStageConfig);
if (!stage.source) {
stage.source = 'text';
}
if (!stage.skipExpressionEvaluation) {
stage.skipExpressionEvaluation = false;
}
if (!stage.trafficManagement) {
stage.trafficManagement = defaultTrafficManagementConfig;
}
if (!stage.cloudProvider) {
stage.cloudProvider = 'kubernetes';
}
if (!stage.moniker) {
stage.moniker = {};
}
if (!stage.moniker.app) {
stage.moniker.app = props.application.name;
}
// Intentionally initializing the stage config only once in the constructor
// The stage config is then completely owned within FormikStageConfig's Formik state
this.stage = stage;
}

public componentDidMount() {
this.fetchAccounts();
}

private fetchAccounts = (): void => {
Observable.fromPromise(AccountService.getAllAccountDetailsForProvider('kubernetes', 'v2'))
.takeUntil(this.destroy$)
.subscribe((accounts: IAccountDetails[]) => {
this.setState({ accounts });
});
};

public componentWillUnmount() {
this.destroy$.next();
}

public render() {
return (
<FormikStageConfig
{...this.props}
stage={this.stage}
onChange={this.props.updateStage}
render={props => (
<DeployManifestStageForm
{...props}
accounts={this.state.accounts}
updatePipeline={this.props.updatePipeline}
/>
)}
/>
);
}
}

0 comments on commit 53cb422

Please sign in to comment.