@spinnaker/core 0.0.0-2025.1-0

package/src/instance/InstanceListBody.tsx

@@ -0,0 +1,248 @@
+import classNames from 'classnames';
+import { isEqual } from 'lodash';
+import React from 'react';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+
+import type { IInstance, ILoadBalancerHealth, IServerGroup } from '../domain';
+import { Tooltip } from '../presentation';
+import { ReactInjector } from '../reactShims';
+import { ClusterState } from '../state';
+import { timestamp } from '../utils/timeFormatters';
+
+export interface IInstanceListBodyProps {
+  serverGroup: IServerGroup;
+  instances: IInstance[];
+  hasDiscovery: boolean;
+  hasLoadBalancers: boolean;
+}
+
+export interface IInstanceListBodyState {
+  selectedInstanceIds: string[];
+  activeInstanceId: string;
+  multiselect: boolean;
+  instanceSort?: string;
+}
+
+export class InstanceListBody extends React.Component<IInstanceListBodyProps, IInstanceListBodyState> {
+  private $uiRouter = ReactInjector.$uiRouter;
+  private $state = ReactInjector.$state;
+  private destroy$ = new Subject();
+
+  constructor(props: IInstanceListBodyProps) {
+    super(props);
+    this.state = {
+      selectedInstanceIds: this.getSelectedInstanceIds(),
+      activeInstanceId: this.$state.params.instanceId,
+      multiselect: this.$state.params.multiselect,
+      instanceSort: this.$state.params.instanceSort,
+    };
+  }
+
+  public componentDidMount() {
+    ClusterState.multiselectModel.instancesStream.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.setState({ selectedInstanceIds: this.getSelectedInstanceIds() });
+    });
+
+    this.$uiRouter.globals.params$
+      .pipe(
+        map((params) => [params.instanceId, params.multiselect, params.instanceSort]),
+        distinctUntilChanged(isEqual),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(() => {
+        const { params } = this.$state;
+        this.setState({
+          activeInstanceId: params.instanceId,
+          multiselect: params.multiselect,
+          instanceSort: params.instanceSort,
+        });
+      });
+  }
+
+  private getSelectedInstanceIds(): string[] {
+    const { instances, serverGroup } = this.props;
+    if (this.$state.params.multiselect) {
+      return instances
+        .filter((i) => ClusterState.multiselectModel.instanceIsSelected(serverGroup, i.id))
+        .map((i) => i.id);
+    }
+    return [];
+  }
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+  }
+
+  public shouldComponentUpdate(nextProps: IInstanceListBodyProps, nextState: IInstanceListBodyState): boolean {
+    if (this.props.serverGroup.stringVal !== nextProps.serverGroup.stringVal) {
+      return true;
+    }
+    if (
+      this.props.instances
+        .map((i) => i.id)
+        .sort()
+        .join(',') !==
+      nextProps.instances
+        .map((i) => i.id)
+        .sort()
+        .join(',')
+    ) {
+      return true;
+    }
+    const { state } = this;
+    return (
+      state.activeInstanceId !== nextState.activeInstanceId ||
+      state.selectedInstanceIds.sort().join(',') !== nextState.selectedInstanceIds.sort().join(',') ||
+      state.multiselect !== nextState.multiselect ||
+      state.instanceSort !== nextState.instanceSort
+    );
+  }
+
+  private instanceSorter = (a1: IInstance, b1: IInstance): number => {
+    const { instanceSort = 'launchTime' } = this.state;
+    const filterSplit = instanceSort.split('-');
+    const filterType = filterSplit.length === 1 ? filterSplit[0] : filterSplit[1];
+    const reverse = filterSplit.length === 2;
+    const a = reverse ? b1 : a1;
+    const b = reverse ? a1 : b1;
+
+    switch (filterType) {
+      case 'id':
+        return a.id.localeCompare(b.id);
+      case 'launchTime':
+        return a.launchTime === b.launchTime ? a.id.localeCompare(b.id) : a.launchTime - b.launchTime;
+      case 'availabilityZone':
+        return a.availabilityZone === b.availabilityZone
+          ? a.launchTime === b.launchTime
+            ? a.id.localeCompare(b.id)
+            : a.launchTime - b.launchTime
+          : a.availabilityZone.localeCompare(b.availabilityZone);
+      case 'discoveryState': {
+        const aHealth = (a.health || []).filter((health) => health.type === 'Discovery');
+        const bHealth = (b.health || []).filter((health) => health.type === 'Discovery');
+        if (aHealth.length && !bHealth.length) {
+          return -1;
+        }
+        if (!aHealth.length && bHealth.length) {
+          return 1;
+        }
+        return (!aHealth.length && !bHealth.length) || aHealth[0].state === bHealth[0].state
+          ? a.launchTime === b.launchTime
+            ? a.id.localeCompare(b.id)
+            : a.launchTime - b.launchTime
+          : aHealth[0].state.localeCompare(bHealth[0].state);
+      }
+      case 'loadBalancerSort': {
+        const aHealth2 = (a.health || []).filter((health) => health.type === 'LoadBalancer');
+        const bHealth2 = (b.health || []).filter((health) => health.type === 'LoadBalancer');
+
+        if (aHealth2.length && !bHealth2.length) {
+          return -1;
+        }
+        if (!aHealth2.length && bHealth2.length) {
+          return 1;
+        }
+        const aHealthStr = aHealth2.map((h) => h.loadBalancers.map((l) => l.name + ':' + l.state)).join(',');
+        const bHealthStr = bHealth2.map((h) => h.loadBalancers.map((l) => l.name + ':' + l.state)).join(',');
+        return aHealthStr === bHealthStr
+          ? a.launchTime === b.launchTime
+            ? a.id.localeCompare(b.id)
+            : a.launchTime - b.launchTime
+          : aHealthStr.localeCompare(bHealthStr);
+      }
+      default:
+        return -1;
+    }
+  };
+
+  private renderRow(instance: IInstance): JSX.Element {
+    const { hasLoadBalancers, hasDiscovery } = this.props;
+    const showProviderHealth = !hasLoadBalancers && !hasDiscovery;
+
+    const healthMetrics = instance.health || [];
+    let discoveryStatus = '-';
+    let providerStatus = '';
+    let loadBalancers: ILoadBalancerHealth[] = [];
+
+    healthMetrics.forEach((health) => {
+      if (hasLoadBalancers && health.type === 'LoadBalancer') {
+        loadBalancers = health.loadBalancers;
+      }
+      if (hasDiscovery && health.type === 'Discovery') {
+        discoveryStatus = health.state;
+      }
+      if (showProviderHealth) {
+        providerStatus = health.state;
+      }
+    });
+
+    const isActive = this.state.activeInstanceId === instance.id;
+    const rowClass = classNames({
+      clickable: true,
+      active: isActive,
+    });
+
+    return (
+      <tr key={instance.id} data-instance-id={instance.id} className={rowClass}>
+        {this.$state.params.multiselect && (
+          <td className="no-hover">
+            <input type="checkbox" checked={this.state.selectedInstanceIds.includes(instance.id)} />
+          </td>
+        )}
+        <td>
+          <span className={`glyphicon glyphicon-${instance.healthState}-triangle`} />
+          {instance.name || instance.id}
+        </td>
+        <td>{timestamp(instance.launchTime)}</td>
+        <td>{instance.availabilityZone}</td>
+        {hasDiscovery && <td className="text-center small">{discoveryStatus}</td>}
+        {hasLoadBalancers && this.renderLoadBalancerCell(loadBalancers)}
+        {showProviderHealth && <td className="text-center small">{providerStatus}</td>}
+      </tr>
+    );
+  }
+
+  private renderLoadBalancerCell(loadBalancerHealths: ILoadBalancerHealth[]): JSX.Element {
+    return (
+      <td>
+        {loadBalancerHealths.length === 0 && <span>-</span>}
+        {loadBalancerHealths.map((h) => {
+          const tooltip = h.state === 'OutOfService' ? h.description.replace(/"/g, '&quot;') : null;
+          const icon = h.healthState === 'Up' || h.state === 'InService' ? 'Up' : 'Down';
+          return (
+            <div key={h.name}>
+              {tooltip && (
+                <Tooltip value={tooltip} placement="left">
+                  <div>
+                    <span className={`glyphicon-${icon}-triangle`} />
+                    {h.name}
+                  </div>
+                </Tooltip>
+              )}
+              {!tooltip && <span className={`glyphicon-${icon}-triangle`}>{h.name}</span>}
+            </div>
+          );
+        })}
+      </td>
+    );
+  }
+
+  private instanceBodyClicked = (event: React.MouseEvent<HTMLElement>): void => {
+    const target = event.target as HTMLElement;
+    const targetRow = target.closest('tr');
+    if (!targetRow) {
+      return;
+    }
+    ClusterState.multiselectModel.toggleInstance(this.props.serverGroup, targetRow.getAttribute('data-instance-id'));
+    event.stopPropagation();
+  };
+
+  public render() {
+    return (
+      <tbody onClick={this.instanceBodyClicked}>
+        {this.props.instances.sort(this.instanceSorter).map((i) => this.renderRow(i))}
+      </tbody>
+    );
+  }
+}

package/src/instance/InstanceReader.ts

@@ -0,0 +1,27 @@
+import { REST } from '../api/ApiService';
+import type { IInstance } from '../domain';
+
+export interface IInstanceConsoleOutput {
+  output: string | IInstanceMultiOutputLog[];
+}
+
+export interface IInstanceMultiOutputLog {
+  name: string;
+  output: string;
+  formattedOutput?: string;
+}
+
+export class InstanceReader {
+  public static getInstanceDetails(account: string, region: string, id: string): PromiseLike<IInstance> {
+    return REST('/instances').path(account, region, id).get();
+  }
+
+  public static getConsoleOutput(
+    account: string,
+    region: string,
+    id: string,
+    cloudProvider: string,
+  ): PromiseLike<IInstanceConsoleOutput> {
+    return REST('/instances').path(account, region, id, 'console').query({ provider: cloudProvider }).get();
+  }
+}

package/src/instance/Instances.tsx

@@ -0,0 +1,120 @@
+import type { Transition, UIRouter } from '@uirouter/core';
+import type { UIViewAddress } from '@uirouter/react';
+import { useParentView, useRouter } from '@uirouter/react';
+import React from 'react';
+import type { Subscription } from 'rxjs';
+
+import { Instance } from './Instance';
+import type { IInstance } from '../domain';
+
+export interface IInstancesProps {
+  instances: IInstance[];
+  highlight?: string;
+}
+
+export interface IInstancesState {
+  detailsInstanceId: string;
+}
+
+export const Instances = (props: IInstancesProps) => {
+  const router = useRouter();
+  const uiview = useParentView();
+  return <InstancesInternal {...props} router={router} uiview={uiview} />;
+};
+
+export interface IInstancesInternalProps extends IInstancesProps {
+  router: UIRouter;
+  uiview: UIViewAddress;
+}
+
+class InstancesInternal extends React.Component<IInstancesInternalProps, IInstancesState> {
+  private subscription: Subscription;
+
+  constructor(props: IInstancesInternalProps) {
+    super(props);
+    this.state = {
+      detailsInstanceId: null,
+    };
+  }
+
+  public componentDidMount() {
+    this.subscription = this.props.router.globals.success$.subscribe(this.onStateChange);
+  }
+
+  public componentWillUnmount() {
+    this.subscription.unsubscribe();
+  }
+
+  private onStateChange = (transition: Transition) => {
+    const isShowingDetails = !!/\.instanceDetails/.exec(transition.to().name);
+    const detailsInstanceId = isShowingDetails ? transition.params().instanceId : null;
+    this.setState({ detailsInstanceId });
+  };
+
+  public shouldComponentUpdate(nextProps: IInstancesInternalProps, nextState: IInstancesState) {
+    const propsKeys: Array<keyof IInstancesInternalProps> = ['instances', 'highlight'];
+    if (propsKeys.some((key) => this.props[key] !== nextProps[key])) {
+      return true;
+    }
+
+    if (this.state.detailsInstanceId !== nextState.detailsInstanceId) {
+      const ids = nextProps.instances.map((x) => x.id);
+      if (ids.includes(this.state.detailsInstanceId) || ids.includes(nextState.detailsInstanceId)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private handleInstanceClicked = (instance: IInstance) => {
+    const { router, uiview } = this.props;
+    const params = { instanceId: instance.id, provider: instance.cloudProvider || instance.provider };
+    const options = { relative: uiview.context };
+
+    router.stateService.go('.instanceDetails', params, options);
+  };
+
+  private partitionInstances(): IInstance[][] {
+    const partitions: IInstance[][] = [];
+    const instances = (this.props.instances || []).sort(
+      (a, b) => a.launchTime - b.launchTime || a.id.localeCompare(b.id),
+    );
+    if (!instances.length) {
+      return partitions;
+    }
+    let currentPartition: IInstance[] = [];
+    let currentState = instances[0].healthState;
+    instances.forEach((i) => {
+      if (i.healthState !== currentState) {
+        partitions.push(currentPartition);
+        currentPartition = [];
+      }
+      currentPartition.push(i);
+      currentState = i.healthState;
+    });
+    partitions.push(currentPartition);
+    return partitions;
+  }
+
+  public render() {
+    const partitions = this.partitionInstances();
+    return (
+      <div className="instances">
+        {partitions.map((p, i) => (
+          <span key={i} className={`instance-group instance-group-${p[0].healthState}`}>
+            {p.map((instance) => (
+              <Instance
+                key={instance.id}
+                instance={instance}
+                active={this.state.detailsInstanceId === instance.id}
+                highlight={this.props.highlight}
+                onInstanceClicked={this.handleInstanceClicked}
+              />
+            ))}
+          </span>
+        ))}
+      </div>
+    );
+  }
+}

package/src/instance/details/InstanceActions.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+export interface Action {
+  label: string;
+  triggerAction: () => void;
+}
+
+export interface IInstanceActionsProps {
+  actions: Action[];
+  title?: string;
+}
+
+export const InstanceActions = ({ actions, title }: IInstanceActionsProps) => (
+  <div style={{ display: 'inline-block' }}>
+    <Dropdown className="dropdown" id="instace-actions-dropdown">
+      <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+        <span>{title || 'Instance Actions'}</span>
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {(actions || []).map((action) => (
+          <li key={`action-${action.label}`} id={`instance-action-${action.label}`}>
+            <a onClick={action.triggerAction}>{action.label}</a>
+          </li>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  </div>
+);

package/src/instance/details/InstanceDetails.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { forkJoin as observableForkJoin, from as observableFrom, Subject } from 'rxjs';
+import { mergeMap, switchMap, takeUntil, tap } from 'rxjs/operators';
+
+import { InstanceDetailsPane } from './InstanceDetailsPane';
+import { AccountService } from '../../account/AccountService';
+import type { Application } from '../../application';
+import type { IMoniker } from '../../naming';
+import { NameUtils } from '../../naming';
+import type { IOverridableProps } from '../../overrideRegistry';
+import { Overridable } from '../../overrideRegistry';
+import { Spinner } from '../../widgets';
+
+export interface IInstanceDetailsProps extends IOverridableProps {
+  $stateParams: {
+    provider: string;
+    instanceId: string;
+  };
+  app: Application;
+  moniker: IMoniker;
+  environment: string;
+}
+export interface IInstanceDetailsState {
+  accountId: string;
+  environment: string;
+  instanceId: string;
+  loading: boolean;
+  moniker: IMoniker;
+  provider: string;
+}
+
+export class InstanceDetails extends React.Component<IInstanceDetailsProps, IInstanceDetailsState> {
+  public state: IInstanceDetailsState = {
+    accountId: null,
+    environment: null,
+    instanceId: null,
+    loading: false,
+    moniker: null,
+    provider: null,
+  };
+
+  private destroy$ = new Subject();
+  private props$ = new Subject<IInstanceDetailsProps>();
+
+  public componentDidMount() {
+    this.props$
+      .pipe(
+        tap(({ $stateParams: { provider, instanceId } }) => {
+          this.setState({ provider, instanceId, loading: true, accountId: null, moniker: null, environment: null });
+        }),
+        switchMap(({ app, $stateParams }) => {
+          const { provider, instanceId } = $stateParams;
+          const accountId = observableFrom(AccountService.getAccountForInstance(provider, instanceId, app));
+          const moniker = observableFrom(NameUtils.getMonikerForInstance(provider, instanceId, app));
+          const accountDetails = accountId.pipe(mergeMap((id) => AccountService.getAccountDetails(id)));
+          return observableForkJoin(accountId, moniker, accountDetails);
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(([accountId, moniker, accountDetails]) => {
+        const environment = accountDetails && accountDetails.environment;
+        this.setState({ accountId, moniker, environment, loading: false });
+      });
+
+    this.props$.next(this.props);
+  }
+
+  public componentWillReceiveProps(nextProps: IInstanceDetailsProps) {
+    this.props$.next(nextProps);
+  }
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+  }
+
+  public render() {
+    const { accountId, instanceId, moniker, environment, loading, provider } = this.state;
+
+    if (loading) {
+      return (
+        <InstanceDetailsPane>
+          <Spinner size="medium" message=" " />
+        </InstanceDetailsPane>
+      );
+    } else if (!accountId || !moniker || !environment) {
+      return (
+        <InstanceDetailsPane>
+          <h4>
+            Could not find {provider} instance {instanceId}.
+          </h4>
+        </InstanceDetailsPane>
+      );
+    }
+
+    return <InstanceDetailsCmp {...this.props} accountId={accountId} moniker={moniker} environment={environment} />;
+  }
+}
+
+@Overridable('instance.details')
+export class InstanceDetailsCmp extends React.Component<IInstanceDetailsProps> {
+  public render() {
+    return <h3>Instance Details</h3>;
+  }
+}

package/src/instance/details/InstanceDetailsHeader.less

@@ -0,0 +1,13 @@
+.InstanceDetailsHeader {
+  .spinner-container {
+    height: 8px;
+    width: 100%;
+  }
+
+  .header-text {
+    .clipboard-btn .glyphicon {
+      color: inherit;
+      font-size: 150%;
+    }
+  }
+}

package/src/instance/details/InstanceDetailsHeader.tsx

@@ -0,0 +1,53 @@
+import { UISref } from '@uirouter/react';
+import { UIRouterContextComponent } from '@uirouter/react-hybrid';
+import React from 'react';
+
+import { CloudProviderLogo } from '../../cloudProvider/CloudProviderLogo';
+import { CopyToClipboard } from '../../utils/clipboard/CopyToClipboard';
+import { Spinner } from '../../widgets/spinners/Spinner';
+
+import './InstanceDetailsHeader.less';
+
+export interface IInstanceDetailsHeaderProps {
+  cloudProvider?: string;
+  healthState: string;
+  instanceId: string;
+  loading: boolean;
+  sshLink?: string;
+  standalone: boolean;
+}
+export const InstanceDetailsHeader = ({
+  cloudProvider,
+  healthState,
+  instanceId,
+  loading,
+  sshLink,
+  standalone,
+}: IInstanceDetailsHeaderProps) => (
+  <div className="InstanceDetailsHeader">
+    {!standalone && (
+      <div className="close-button">
+        <UIRouterContextComponent>
+          <UISref to="^">
+            <a className="btn btn-link">
+              <span className="glyphicon glyphicon-remove"></span>
+            </a>
+          </UISref>
+        </UIRouterContextComponent>
+      </div>
+    )}
+    {loading && (
+      <div className="horizontal center spinner-container">
+        <Spinner size="small" />
+      </div>
+    )}
+    {!loading && (
+      <div className="header-text horizontal middle">
+        {cloudProvider && <CloudProviderLogo provider={cloudProvider} height="36px" width="36px" />}
+        {!cloudProvider && <span className={`glyphicon glyphicon-hdd ${healthState}`}></span>}
+        <h3 className="horizontal middle space-between flex-1">{instanceId}</h3>
+        <CopyToClipboard text={sshLink || instanceId} toolTip="Copy to clipboard" />
+      </div>
+    )}
+  </div>
+);

package/src/instance/details/InstanceDetailsPane.tsx

@@ -0,0 +1,23 @@
+import { UISref } from '@uirouter/react';
+import React from 'react';
+
+import { ReactInjector } from '../../reactShims';
+
+export const InstanceDetailsPane = (props: { children: React.ReactNode }) => {
+  const isStandalone = ReactInjector.$uiRouter.globals.current.name === 'instanceDetails';
+
+  return (
+    <div className="details-panel">
+      <div className="header">
+        <div className="close-button">
+          <UISref to={isStandalone ? 'home.infrastructure' : '^'}>
+            <a className="btn btn-link">
+              <span className="glyphicon glyphicon-remove" />
+            </a>
+          </UISref>
+        </div>
+        {props.children}
+      </div>
+    </div>
+  );
+};

package/src/instance/details/InstanceInsights.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+import type { IInstance } from '../../domain';
+import { logger } from '../../utils';
+
+export interface Insight {
+  label: string;
+  url: string;
+}
+
+export interface IInstanceInsightsProps {
+  analytics?: boolean;
+  insights: Insight[];
+  instance: IInstance;
+  title?: string;
+}
+
+export const InstanceInsights = ({ analytics, insights, instance, title }: IInstanceInsightsProps) => {
+  const logClickEvent = (label: string) => {
+    logger.log({
+      category: 'Insight Menu (Instance)',
+      action: `${label} clicked`,
+      data: { label: `${instance.account}/${instance.region}/${instance.name}/${instance.serverGroup}` },
+    });
+  };
+
+  if (!insights?.length) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: 'inline-block' }}>
+      <Dropdown className="dropdown" id="instace-actions-dropdown">
+        <Dropdown.Toggle className="btn btn-sm dropdown-toggle">
+          <span>{title || 'Insight'}</span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {insights.map((insight) => (
+            <li
+              key={`insight-${insight.label}`}
+              id={`insight-action-${insight.label}`}
+              onClick={() => (analytics ? logClickEvent(insight.label) : null)}
+            >
+              <a target="_blank" href={insight.url}>
+                {insight.label}
+              </a>
+            </li>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+};