refactor(cf): reactify load balancer details pane (#6295)

- spinnaker/spinnaker#3792

app/scripts/modules/cloudfoundry/src/cf.module.ts

@@ -69,8 +69,8 @@ module(CLOUD_FOUNDRY_MODULE, [
     },
     loadBalancer: {
       transformer: 'cfLoadBalancerTransformer',
-      detailsTemplateUrl: require('./loadBalancer/details/loadBalancer.details.html'),
-      detailsController: 'cfLoadBalancerDetailsCtrl',
+      detailsTemplateUrl: require('./loadBalancer/details/cloudFoundryLoadBalancerDetails.html'),
+      detailsController: 'cloudfoundryLoadBalancerDetailsCtrl',
       CreateLoadBalancerModal: CloudFoundryNoLoadBalancerModal,
     },
     serverGroup: {

app/scripts/modules/cloudfoundry/src/loadBalancer/details/CloudFoundryLoadBalancerActions.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import { Dropdown } from 'react-bootstrap';
+
+import {
+  Application,
+  ConfirmationModalService,
+  ILoadBalancer,
+  ILoadBalancerDeleteCommand,
+  LoadBalancerWriter,
+  ReactInjector,
+} from '@spinnaker/core';
+
+export interface ICloudFoundryLoadBalancerActionsProps {
+  application: Application;
+  confirmationModalService: ConfirmationModalService;
+  loadBalancer: ILoadBalancer;
+}
+
+export class CloudFoundryLoadBalancerActions extends React.Component<ICloudFoundryLoadBalancerActionsProps> {
+  private deleteLoadBalancer = () => {
+    const { application, confirmationModalService, loadBalancer } = this.props;
+    const taskMonitor = {
+      application: application,
+      title: 'Deleting ' + loadBalancer.name,
+      onTaskComplete() {
+        if (ReactInjector.$state.includes('**.serverGroup', { instanceId: loadBalancer.name })) {
+          ReactInjector.$state.go('^');
+        }
+      },
+    };
+
+    const submitMethod = () => {
+      const loadBalancerDeleteCommand: ILoadBalancerDeleteCommand = {
+        cloudProvider: loadBalancer.cloudProvider,
+        credentials: loadBalancer.account,
+        regions: [loadBalancer.region],
+        loadBalancerName: loadBalancer.name,
+      };
+      return LoadBalancerWriter.deleteLoadBalancer(loadBalancerDeleteCommand, application);
+    };
+
+    confirmationModalService.confirm({
+      header: 'Really delete ' + loadBalancer.name + '?',
+      buttonText: 'Delete ' + loadBalancer.name,
+      account: loadBalancer.account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod,
+    });
+  };
+
+  public render(): JSX.Element {
+    return (
+      <div className="actions">
+        <Dropdown className="dropdown" id="instance-actions-dropdown">
+          <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">Load Balancer Actions</Dropdown.Toggle>
+          <Dropdown.Menu className="dropdown-menu">
+            <li>
+              <a className="clickable" onClick={this.deleteLoadBalancer}>
+                Delete Load Balancer
+              </a>
+            </li>
+          </Dropdown.Menu>
+        </Dropdown>
+      </div>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/loadBalancer/details/CloudFoundryLoadBalancerDetails.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { UISref } from '@uirouter/react';
+import { UIRouterContext } from '@uirouter/react-hybrid';
+
+import { Application, ConfirmationModalService, LoadBalancerWriter, Spinner } from '@spinnaker/core';
+import { CloudFoundryLoadBalancerActions } from 'cloudfoundry/loadBalancer/details/CloudFoundryLoadBalancerActions';
+import { CloudFoundryLoadBalancerDetailsSection } from 'cloudfoundry/loadBalancer/details/sections';
+import { ICloudFoundryLoadBalancer } from 'cloudfoundry/domain';
+import { CloudFoundryLoadBalancerStatusSection } from 'cloudfoundry/loadBalancer/details/sections/CloudFoundryLoadBalancerStatusSection';
+import { CloudFoundryLoadBalancerLinksSection } from 'cloudfoundry/loadBalancer/details/sections/CloudFoundryLoadBalancerLinksSection';
+
+export interface ICloudFoundryLoadBalancerDetailsProps {
+  application: Application;
+  confirmationModalService: ConfirmationModalService;
+  loadBalancer: ICloudFoundryLoadBalancer;
+  loadBalancerNotFound: string;
+  loadBalancerWriter: LoadBalancerWriter;
+  loading: boolean;
+}
+
+@UIRouterContext
+export class CloudFoundryLoadBalancerDetails extends React.Component<ICloudFoundryLoadBalancerDetailsProps> {
+  constructor(props: ICloudFoundryLoadBalancerDetailsProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { application, confirmationModalService, loadBalancer, loadBalancerNotFound, loading } = this.props;
+
+    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">{loadBalancerNotFound}</h3>
+        </div>
+      </div>
+    );
+    const loadBalancerHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="header-text horizontal middle">
+          <i className="fa icon-sitemap" />
+          <h3 className="horizontal middle space-between flex-1">{loadBalancer.name}</h3>
+        </div>
+        <CloudFoundryLoadBalancerActions
+          application={application}
+          confirmationModalService={confirmationModalService}
+          loadBalancer={loadBalancer}
+        />
+      </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 loadBalancerContent = () => (
+      <div className="content">
+        <CloudFoundryLoadBalancerDetailsSection loadBalancer={loadBalancer} />
+        <CloudFoundryLoadBalancerStatusSection loadBalancer={loadBalancer} />
+        <CloudFoundryLoadBalancerLinksSection loadBalancer={loadBalancer} />
+      </div>
+    );
+    return (
+      <div className="details-panel">
+        {loading && loadingHeader()}
+        {!loading && loadBalancer && loadBalancerHeader()}
+        {!loading && loadBalancer && loadBalancerContent()}
+        {!loading && !loadBalancer && notFoundHeader()}
+        {!loading && !loadBalancer && notFoundContent()}
+      </div>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/loadBalancer/details/cloudFoundryLoadBalancerDetails.html

@@ -0,0 +1,7 @@
+<cf-load-balancer-details
+  application="application"
+  confirmation-modal-service="confirmationModalService"
+  load-balancer="loadBalancer"
+  load-balancer-not-found="loadBalancerNotFound"
+  loading="loading"
+  ng-style="{ display: 'flex', width: '100%' }"/>

app/scripts/modules/cloudfoundry/src/loadBalancer/details/cloudFoundryLoadBalancerDetails.module.ts

@@ -0,0 +1,73 @@
+import { IController, IQService, IScope, module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { CloudFoundryLoadBalancerDetails } from './CloudFoundryLoadBalancerDetails';
+import { Application, ConfirmationModalService, ILoadBalancer } from '@spinnaker/core';
+
+import { ICloudFoundryLoadBalancer } from 'cloudfoundry/domain';
+
+interface ILoadBalancerFromStateParams {
+  accountId: string;
+  name: string;
+  region: string;
+}
+
+class CloudFoundryLoadBalancerDetailsCtrl implements IController {
+  private loadBalancerFromParams: ILoadBalancerFromStateParams;
+  public loadBalancer: ICloudFoundryLoadBalancer;
+
+  constructor(
+    public $scope: IScope,
+    private app: Application,
+    private confirmationModalService: ConfirmationModalService,
+    loadBalancer: ILoadBalancerFromStateParams,
+    private $q: IQService,
+  ) {
+    'ngInject';
+    this.$scope.application = this.app;
+    this.$scope.confirmationModalService = this.confirmationModalService;
+    this.$scope.loading = true;
+    this.$scope.qService = this.$q;
+    this.loadBalancerFromParams = loadBalancer;
+    this.app
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => this.extractLoadBalancer());
+  }
+
+  private extractLoadBalancer(): void {
+    this.$scope.loadBalancer = this.app.getDataSource('loadBalancers').data.find((test: ILoadBalancer) => {
+      return test.name === this.loadBalancerFromParams.name && test.account === this.loadBalancerFromParams.accountId;
+    }) as ICloudFoundryLoadBalancer;
+    if (this.$scope.loadBalancer) {
+      this.$scope.loading = false;
+      this.app.getDataSource('loadBalancers').onRefresh(this.$scope, () => this.extractLoadBalancer());
+    } else {
+      this.$scope.loadBalancerNotFound = this.loadBalancerFromParams.name;
+      this.$scope.loading = false;
+      this.autoClose();
+    }
+  }
+
+  private autoClose(): void {
+    if (this.$scope.$$destroyed) {
+      return;
+    } else {
+      this.$scope.params.allowModalToStayOpen = true;
+    }
+  }
+}
+
+export const CLOUD_FOUNDRY_LOAD_BALANCER_DETAILS = 'spinnaker.cloudfoundry.loadBalancerDetails';
+module(CLOUD_FOUNDRY_LOAD_BALANCER_DETAILS, [])
+  .component(
+    'cfLoadBalancerDetails',
+    react2angular(CloudFoundryLoadBalancerDetails, [
+      'application',
+      'confirmationModalService',
+      'loadBalancer',
+      'loadBalancerNotFound',
+      'loading',
+    ]),
+  )
+  .controller('cloudfoundryLoadBalancerDetailsCtrl', CloudFoundryLoadBalancerDetailsCtrl);

app/scripts/modules/cloudfoundry/src/loadBalancer/details/index.ts

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