@spinnaker/cloudfoundry 0.0.0-main-2

package/src/instance/details/CloudFoundryInstanceDetails.tsx

@@ -0,0 +1,154 @@
+import { UISref } from '@uirouter/react';
+import { UIRouterContext } from '@uirouter/react-hybrid';
+import { flattenDeep } from 'lodash';
+import React from 'react';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { InstanceReader, RecentHistoryService, Spinner } from '@spinnaker/core';
+
+import { CloudFoundryInstanceActions } from './CloudFoundryInstanceActions';
+import type { ICloudFoundryInstance } from '../../domain';
+import { CloudFoundryInstanceDetailsSection } from './sections';
+
+interface InstanceFromStateParams {
+  instanceId: string;
+}
+
+interface InstanceManager {
+  account: string;
+  region: string;
+  category: string; // e.g., serverGroup, loadBalancer.
+  name: string; // Parent resource name, not instance name.
+  instances: ICloudFoundryInstance[];
+}
+
+interface ICloudFoundryInstanceDetailsState {
+  instance?: ICloudFoundryInstance;
+  instanceIdNotFound: string;
+  loading: boolean;
+}
+
+interface ICloudFoundryInstanceDetailsProps {
+  app: Application;
+  instance: InstanceFromStateParams;
+  loading: boolean;
+}
+
+@UIRouterContext
+export class CloudFoundryInstanceDetails extends React.Component<
+  ICloudFoundryInstanceDetailsProps,
+  ICloudFoundryInstanceDetailsState
+> {
+  constructor(props: ICloudFoundryInstanceDetailsProps) {
+    super(props);
+
+    this.state = {
+      loading: true,
+      instanceIdNotFound: props.instance.instanceId,
+    };
+  }
+
+  public componentDidMount(): void {
+    this.props.app.ready().then(() => this.retrieveInstance(this.props.instance));
+  }
+
+  private retrieveInstance(instanceFromParams: InstanceFromStateParams): void {
+    const instanceLocatorPredicate = (dataSource: InstanceManager) => {
+      return dataSource.instances.some((possibleMatch) => possibleMatch.id === instanceFromParams.instanceId);
+    };
+
+    const dataSources: InstanceManager[] = flattenDeep([
+      this.props.app.getDataSource('serverGroups').data,
+      this.props.app.getDataSource('loadBalancers').data,
+      this.props.app
+        .getDataSource('loadBalancers')
+        .data.map((loadBalancer: ILoadBalancer) => loadBalancer.serverGroups),
+    ]);
+
+    const instanceManager = dataSources.find(instanceLocatorPredicate);
+
+    if (instanceManager) {
+      const recentHistoryExtraData: { [key: string]: string } = {
+        region: instanceManager.region,
+        account: instanceManager.account,
+      };
+      if (instanceManager.category === 'serverGroup') {
+        recentHistoryExtraData.serverGroup = instanceManager.name;
+      }
+      RecentHistoryService.addExtraDataToLatest('instances', recentHistoryExtraData);
+      InstanceReader.getInstanceDetails(instanceManager.account, instanceManager.region, instanceFromParams.instanceId)
+        .then((instanceDetails: ICloudFoundryInstance) => {
+          instanceDetails.account = instanceManager.account;
+          instanceDetails.region = instanceManager.region;
+          return instanceDetails;
+        })
+        .then((instance) => {
+          this.setState({
+            instance,
+            loading: false,
+          });
+        });
+    }
+  }
+
+  public render(): JSX.Element {
+    const { app } = this.props;
+    const { instance, instanceIdNotFound, loading } = this.state;
+    const CloseButton = (
+      <div className="close-button">
+        <UISref to="^">
+          <span className="glyphicon glyphicon-remove" />
+        </UISref>
+      </div>
+    );
+    const loadingHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="horizontal center middle">
+          <Spinner size="small" />
+        </div>
+      </div>
+    );
+    const notFoundHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="header-text horizontal middle">
+          <h3 className="horizontal middle space-between flex-1">{instanceIdNotFound}</h3>
+        </div>
+      </div>
+    );
+    const instanceHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="header-text horizontal middle">
+          <span className={'glyphicon glyphicon-hdd ' + instance.healthState} />
+          <h3 className="horizontal middle space-between flex-1">{instance.name}</h3>
+        </div>
+        <CloudFoundryInstanceActions application={app} instance={instance} />
+      </div>
+    );
+    const notFoundContent = () => (
+      <div className="content">
+        <div className="content-section">
+          <div className="content-body text-center">
+            <h3>Instance not found.</h3>
+          </div>
+        </div>
+      </div>
+    );
+    const instanceContent = () => (
+      <div className="content">
+        <CloudFoundryInstanceDetailsSection instance={instance} />
+      </div>
+    );
+    return (
+      <div className="details-panel">
+        {loading && loadingHeader()}
+        {!loading && instance && instanceHeader()}
+        {!loading && instance && instanceContent()}
+        {!loading && !instance && notFoundHeader()}
+        {!loading && !instance && notFoundContent()}
+      </div>
+    );
+  }
+}

package/src/instance/details/index.ts

@@ -0,0 +1 @@
+export * from './CloudFoundryInstanceDetails';

package/src/instance/details/sections/CloudFoundryInstanceDetailsSection.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { AccountTag, CollapsibleSection, timestamp } from '@spinnaker/core';
+import type { ICloudFoundryInstance } from '../../../domain';
+
+export interface ICloudFoundryInstanceDetailsSectionProps {
+  instance: ICloudFoundryInstance;
+}
+
+export class CloudFoundryInstanceDetailsSection extends React.Component<ICloudFoundryInstanceDetailsSectionProps> {
+  constructor(props: ICloudFoundryInstanceDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { instance } = this.props;
+    return (
+      <div>
+        <CollapsibleSection heading="Instance Information" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>Launched</dt>
+            <dd>{timestamp(instance.launchTime)}</dd>
+            <dt>In</dt>
+            <dd>
+              <AccountTag account={instance.account} />
+            </dd>
+            <dt>Region</dt>
+            <dd>{instance.region}</dd>
+          </dl>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Status" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>
+              <span className={'glyphicon glyphicon-' + instance.healthState + '-triangle'} />
+            </dt>
+            <dd>{instance.healthState}</dd>
+
+            {instance.details && (
+              <div>
+                <dt>Details</dt>
+                <dd>{instance.details}</dd>
+              </div>
+            )}
+          </dl>
+        </CollapsibleSection>
+      </div>
+    );
+  }
+}

package/src/instance/details/sections/index.ts

@@ -0,0 +1 @@
+export * from './CloudFoundryInstanceDetailsSection';

package/src/loadBalancer/configure/CloudFoundryMapLoadBalancerModal.tsx

@@ -0,0 +1,210 @@
+import type { IDeferred } from 'angular';
+import type { IModalServiceInstance } from 'angular-ui-bootstrap';
+import type { Formik } from 'formik';
+import { Form } from 'formik';
+import { $q } from 'ngimport';
+import React from 'react';
+import { Modal, ModalFooter } from 'react-bootstrap';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type {
+  Application,
+  IAccount,
+  ILoadBalancerModalProps,
+  IModalComponentProps,
+  IServerGroup,
+} from '@spinnaker/core';
+import {
+  AccountService,
+  ModalClose,
+  noop,
+  ReactInjector,
+  ReactModal,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+} from '@spinnaker/core';
+import type { ICloudFoundryServerGroup } from '../../domain';
+import { AccountRegionClusterSelector, Routes } from '../../presentation';
+
+export interface ICreateCloudFoundryMapLoadBalancerState {
+  accounts: IAccount[];
+  regions: string[];
+  application: Application;
+  selectedValues: ICloudFoundryLoadBalancerModalValues;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudFoundryLoadBalancerModalProps extends IModalComponentProps {
+  application: Application;
+}
+
+export interface ICloudFoundryLoadBalancerModalValues {
+  credentials: string;
+  region: string;
+  cluster: string;
+  routes: string[];
+}
+
+export class CloudFoundryMapLoadBalancerModal extends React.Component<
+  ICloudFoundryLoadBalancerModalProps,
+  ICreateCloudFoundryMapLoadBalancerState
+> {
+  public static defaultProps: Partial<ICloudFoundryLoadBalancerModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private destroy$ = new Subject();
+  private formikRef = React.createRef<Formik<ICloudFoundryLoadBalancerModalValues>>();
+  private $uibModalInstanceEmulation: IModalServiceInstance & { deferred?: IDeferred<any> };
+
+  constructor(props: ICloudFoundryLoadBalancerModalProps) {
+    super(props);
+
+    const deferred = $q.defer();
+    const promise = deferred.promise;
+    this.$uibModalInstanceEmulation = {
+      result: promise,
+      close: () => this.props.dismissModal(),
+      dismiss: () => this.props.dismissModal(),
+    } as IModalServiceInstance;
+    Object.assign(this.$uibModalInstanceEmulation, { deferred });
+    this.state = {
+      accounts: [],
+      regions: [],
+      application: props.application,
+      selectedValues: {
+        credentials: '',
+        region: '',
+        cluster: '',
+        routes: [''],
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Mapping a route to your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+    };
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((rawAccounts: IAccount[]) => this.setState({ accounts: rawAccounts }));
+  }
+
+  public static show(props: ILoadBalancerModalProps): Promise<void> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(
+      CloudFoundryMapLoadBalancerModal,
+      {
+        application: props.app,
+        // className: 'create-pipeline-modal-overflow-visible',
+      },
+      modalProps,
+    );
+  }
+
+  public componentDidMount(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => this.setState({ accounts }));
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private submit = (values: ICloudFoundryLoadBalancerModalValues): void => {
+    const { routes } = values;
+    const serverGroup: ICloudFoundryServerGroup = this.props.application.serverGroups?.data?.find(
+      (sg: ICloudFoundryServerGroup) =>
+        sg.cluster === this.state.selectedValues.cluster &&
+        sg.account === this.state.selectedValues.credentials &&
+        sg.region === this.state.selectedValues.region,
+    );
+
+    const coreServerGroup: IServerGroup = {
+      account: serverGroup.account,
+      cloudProvider: serverGroup.cloudProvider,
+      cluster: serverGroup.cluster,
+      instanceCounts: serverGroup.instanceCounts,
+      instances: serverGroup.instances,
+      loadBalancers: routes,
+      name: serverGroup.name,
+      region: serverGroup.region,
+      type: serverGroup.type,
+    };
+
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.mapLoadBalancers(coreServerGroup, this.props.application, {
+        serverGroupName: serverGroup.name,
+      });
+    });
+  };
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private accountRegionClusterUpdated = (values: any) => {
+    this.setState({
+      selectedValues: {
+        cluster: values.cluster,
+        credentials: values.credentials,
+        region: values.region,
+        routes: [''],
+      },
+    });
+  };
+
+  public render() {
+    const { accounts, application, selectedValues } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<ICloudFoundryLoadBalancerModalValues>
+          ref={this.formikRef}
+          initialValues={selectedValues}
+          onSubmit={this.submit}
+          render={(formik) => {
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Map route</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    <AccountRegionClusterSelector
+                      accounts={accounts}
+                      application={application}
+                      cloudProvider={'cloudfoundry'}
+                      isSingleRegion={true}
+                      onComponentUpdate={this.accountRegionClusterUpdated}
+                      component={selectedValues}
+                    />
+                    <Routes fieldName="routes" isRequired={true} singleRouteOnly={true} />
+                  </Form>
+                </Modal.Body>
+                <ModalFooter>
+                  <button className="btn btn-default" onClick={this.close}>
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    onClick={() => this.submit(formik.values)}
+                    disabled={!formik.isValid}
+                  >
+                    Submit
+                  </button>
+                </ModalFooter>
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}

package/src/loadBalancer/configure/loadBalancerDetails.tsx

@@ -0,0 +1,228 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IAccount, IRegion, IWizardPageComponent } from '@spinnaker/core';
+import { AccountService } from '@spinnaker/core';
+import type { ICloudFoundryAccount, ICloudFoundryDomain, ICloudFoundryLoadBalancerUpsertCommand } from '../../domain';
+import { RouteDomainSelectField } from '../../routeDomains';
+
+export interface ILoadBalancerDetailsProps {
+  app: Application;
+  formik: FormikProps<ICloudFoundryLoadBalancerUpsertCommand>;
+  isNew?: boolean;
+}
+
+export interface ILoadBalancerDetailsState {
+  accounts: IAccount[];
+  availabilityZones: string[];
+  existingLoadBalancerNames: string[];
+  domains: ICloudFoundryDomain[];
+  regions: IRegion[];
+}
+
+export class LoadBalancerDetails
+  extends React.Component<ILoadBalancerDetailsProps, ILoadBalancerDetailsState>
+  implements IWizardPageComponent<ICloudFoundryLoadBalancerUpsertCommand> {
+  private destroy$ = new Subject();
+  public state: ILoadBalancerDetailsState = {
+    accounts: undefined,
+    availabilityZones: [],
+    existingLoadBalancerNames: [],
+    domains: [],
+    regions: [],
+  };
+
+  public validate(values: ICloudFoundryLoadBalancerUpsertCommand) {
+    const errors = {} as FormikErrors<ICloudFoundryLoadBalancerUpsertCommand>;
+    if (!values.host || !values.host.match(/^[a-zA-Z0-9-]*$/)) {
+      errors.host = 'Host name can only contain letters, numbers, and dashes';
+    }
+    if (!values.credentials) {
+      errors.credentials = 'Account must be selected';
+    }
+    if (!values.region) {
+      errors.region = 'Region must be selected';
+    }
+    if (!values.domain) {
+      errors.domain = 'Domain must be selected';
+    }
+    if (values.port && !values.port.match(/^[0-9]*$/)) {
+      errors.port = 'Port can only be a numeric value';
+    }
+    if (values.path && !values.path.match(/^[a-zA-Z0-9-\\]*$/)) {
+      errors.path = 'Path must be in the format of "abcd/bcef/xyz"';
+    }
+    return errors;
+  }
+
+  public componentDidMount(): void {
+    this.loadAccounts();
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private loadAccounts(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => {
+        this.setState({ accounts });
+        this.loadDomainsAndRegions();
+      });
+  }
+
+  private accountUpdated = (option: Option<string>): void => {
+    const account = option.value;
+    this.props.formik.setFieldValue('credentials', account);
+    this.loadDomainsAndRegions();
+  };
+
+  private loadDomainsAndRegions(): void {
+    const account = this.props.formik.values.credentials;
+    if (account) {
+      observableFrom(AccountService.getAccountDetails(account))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((accountDetails: ICloudFoundryAccount) => this.setState({ domains: accountDetails.domains }));
+      observableFrom(AccountService.getRegionsForAccount(account))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((regions) => this.setState({ regions }));
+    }
+  }
+
+  private regionUpdated = (option: Option<string>): void => {
+    const region = option.value;
+    this.props.formik.setFieldValue('region', region);
+    if (region) {
+      const { credentials } = this.props.formik.values;
+      observableFrom(AccountService.getAccountDetails(credentials))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((accountDetails: ICloudFoundryAccount) => {
+          const { domains } = accountDetails;
+          this.setState({
+            domains: domains.filter(
+              (domain) => domain.organization === undefined || region.match('^' + domain.organization.name),
+            ),
+          });
+        });
+    }
+  };
+
+  private domainUpdated = (domainName: string): void => {
+    this.props.formik.setFieldValue('domainName', domainName);
+  };
+
+  private hostChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const host = event.target.value;
+    this.props.formik.values.host = host;
+    this.props.formik.setFieldValue('host', host);
+  };
+
+  private portChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const port = event.target.value;
+    this.props.formik.values.port = port;
+    this.props.formik.setFieldValue('port', port);
+  };
+
+  private pathChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const path = event.target.value;
+    this.props.formik.values.path = path;
+    this.props.formik.setFieldValue('path', path);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const { accounts, domains, regions } = this.state;
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="modal-body">
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Account</div>
+            <div className="col-md-7">
+              <Select
+                options={
+                  accounts &&
+                  accounts.map((acc: IAccount) => ({
+                    label: acc.name,
+                    value: acc.name,
+                  }))
+                }
+                clearable={false}
+                value={values.credentials}
+                onChange={this.accountUpdated}
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Region</div>
+            <div className="col-md-7">
+              <Select
+                options={
+                  regions &&
+                  regions.map((region: IRegion) => ({
+                    label: region.name,
+                    value: region.name,
+                  }))
+                }
+                clearable={false}
+                value={values.region}
+                onChange={this.regionUpdated}
+              />
+            </div>
+          </div>
+          <RouteDomainSelectField
+            labelColumns={3}
+            component={values}
+            field="domain"
+            account={values.credentials}
+            onChange={this.domainUpdated}
+            domains={domains}
+          />
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Host</div>
+            <div className="col-md-7">
+              <input
+                className="form-control input-sm target-group-name"
+                type="text"
+                value={values.host}
+                name="host"
+                required={true}
+                onChange={this.hostChanged}
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Port</div>
+            <div className="col-md-3">
+              <input
+                className="form-control input-sm target-group-name"
+                type="text"
+                value={values.port}
+                required={false}
+                name="port"
+                onChange={this.portChanged}
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Path</div>
+            <div className="col-md-7">
+              <input
+                className="form-control input-sm target-group-name"
+                type="text"
+                value={values.path}
+                required={false}
+                name="path"
+                onChange={this.pathChanged}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}