@spinnaker/kubernetes 0.0.0-main-2

package/src/rawResource/component/K8sResourcesFilters.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import type { Application, ApplicationDataSource } from '@spinnaker/core';
+import { FilterCheckbox, FilterSection } from '@spinnaker/core';
+
+import { RawResourceUtils } from './RawResourceUtils';
+import { FiltersPubSub } from '../controller/FiltersPubSub';
+import { KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY } from '../rawResource.dataSource';
+
+export interface IK8sResourcesFiltersProps {
+  app: Application;
+}
+
+export interface IK8sResourcesFiltersState {
+  accounts: Record<string, boolean>;
+  kinds: Record<string, boolean>;
+  namespaces: Record<string, boolean>;
+  displayNamespaces: Record<string, boolean>;
+}
+
+export class K8sResourcesFilters extends React.Component<IK8sResourcesFiltersProps, IK8sResourcesFiltersState> {
+  private dataSource: ApplicationDataSource<IApiKubernetesResource[]>;
+  private filterPubSub: FiltersPubSub = FiltersPubSub.getInstance(this.props.app.name);
+
+  constructor(props: IK8sResourcesFiltersProps) {
+    super(props);
+    this.dataSource = this.props.app.getDataSource(KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY);
+
+    this.state = {
+      accounts: {},
+      kinds: {},
+      namespaces: {},
+      displayNamespaces: {},
+    };
+  }
+
+  public async componentDidMount() {
+    await this.dataSource.ready();
+    const ns = Object.assign({}, ...this.dataSource.data.map((resource) => ({ [resource.namespace]: false })));
+    const displayNs = { ...ns };
+    if ('' in displayNs) {
+      delete displayNs[''];
+      displayNs[RawResourceUtils.GLOBAL_LABEL] = false;
+    }
+    this.setState({
+      accounts: Object.assign({}, ...this.dataSource.data.map((resource) => ({ [resource.account]: false }))),
+      kinds: Object.assign({}, ...this.dataSource.data.map((resource) => ({ [resource.kind]: false }))),
+      namespaces: ns,
+      displayNamespaces: displayNs,
+    });
+  }
+
+  public render() {
+    return (
+      <div className="content">
+        <FilterSection heading={'Kind'} expanded={true}>
+          {...Object.keys(this.state.kinds)
+            .sort((a, b) => a.localeCompare(b))
+            .map((key) => (
+              <FilterCheckbox
+                heading={key}
+                key={key}
+                sortFilterType={this.state.kinds}
+                onChange={this.onCheckbox.bind(this)}
+              ></FilterCheckbox>
+            ))}
+        </FilterSection>
+        <FilterSection heading={'Account'} expanded={true}>
+          {...Object.keys(this.state.accounts)
+            .sort((a, b) => a.localeCompare(b))
+            .map((key) => (
+              <FilterCheckbox
+                heading={key}
+                key={key}
+                sortFilterType={this.state.accounts}
+                onChange={this.onCheckbox.bind(this)}
+              ></FilterCheckbox>
+            ))}
+        </FilterSection>
+        <FilterSection heading={'Namespace'} expanded={true}>
+          {...Object.keys(this.state.displayNamespaces)
+            .sort((a, b) => a.localeCompare(b))
+            .map((key) => (
+              <FilterCheckbox
+                heading={key}
+                key={key}
+                sortFilterType={this.state.displayNamespaces}
+                onChange={this.onNsCheckbox.bind(this)}
+              ></FilterCheckbox>
+            ))}
+        </FilterSection>
+      </div>
+    );
+  }
+
+  private onNsCheckbox() {
+    const { namespaces, displayNamespaces } = { ...this.state };
+    for (const p in displayNamespaces) {
+      if (p == RawResourceUtils.GLOBAL_LABEL) {
+        namespaces[''] = displayNamespaces[p];
+      }
+      namespaces[p] = displayNamespaces[p];
+    }
+    this.setState({ namespaces });
+    this.filterPubSub.publish(this.state);
+  }
+
+  private onCheckbox() {
+    this.setState(this.state);
+    this.filterPubSub.publish(this.state);
+  }
+}

package/src/rawResource/component/RawResourceUtils.ts

@@ -0,0 +1,19 @@
+export class RawResourceUtils {
+  static GLOBAL_LABEL = '(global)';
+
+  static namespaceDisplayName(ns: string): string {
+    if (ns === null || ns === '') {
+      return RawResourceUtils.GLOBAL_LABEL;
+    }
+    return ns;
+  }
+
+  static resourceKey(resource: IApiKubernetesResource): string {
+    if (resource === null) {
+      return '';
+    }
+    return resource.namespace === ''
+      ? resource.account + '-' + resource.kind + '-' + resource.name
+      : resource.account + '-' + resource.namespace + '-' + resource.kind + '-' + resource.name;
+  }
+}

package/src/rawResource/component/group/RawResouceGroup.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './RawResource.less';
+
+interface IRawResourceGroupProps {
+  title: string;
+  resources?: IApiKubernetesResource[];
+}
+
+interface IRawResourceGroupState {
+  open: boolean;
+}
+
+export class RawResourceGroup extends React.Component<IRawResourceGroupProps, IRawResourceGroupState> {
+  constructor(props: IRawResourceGroupProps) {
+    super(props);
+
+    this.state = {
+      open: true,
+    };
+  }
+
+  public render() {
+    return (
+      <div className="RawResourceGroup">
+        <div className="clickable sticky-header header" onClick={this.onHeaderClick.bind(this)}>
+          <span className={`glyphicon pipeline-toggle glyphicon-chevron-${this.state.open ? 'down' : 'right'}`} />
+          <div className="shadowed">
+            <h4 className="group-title">{this.props.title}</h4>
+          </div>
+        </div>
+        <div className={`items${this.state.open ? '' : ' hidden'}`}>{this.props.children}</div>
+      </div>
+    );
+  }
+
+  private onHeaderClick() {
+    this.setState({
+      open: !this.state.open,
+    });
+  }
+}

package/src/rawResource/component/group/RawResource.less

@@ -0,0 +1,79 @@
+.RawResource {
+  &.card {
+    background-color: white;
+    padding: 1em;
+    margin-top: 1em;
+    margin-left: 3em;
+    border: thin solid lightgrey;
+  }
+
+  &.clickable-row {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-alto);
+    margin: 5px 15px 3px;
+    position: relative;
+    z-index: 1;
+
+    &.active {
+      border-color: var(--color-accent-g1);
+      background-color: var(--color-accent-g3);
+    }
+
+    &:hover {
+      border-color: var(--color-accent-g1);
+      box-shadow: 0 0 4px 2px var(--color-accent-g1);
+      z-index: 2;
+    }
+
+    &.managed {
+      margin: 5px;
+      border-style: dashed;
+    }
+  }
+
+  .details {
+    color: grey;
+    display: flex;
+
+    .column {
+      margin-right: 5em;
+
+      .title {
+        margin-right: 1em;
+      }
+    }
+  }
+
+  .title {
+    margin: 0;
+  }
+}
+
+.RawResourceGroup {
+  margin-top: 2em;
+
+  .header {
+    display: flex;
+    height: 37px;
+    padding: 0;
+    color: var(--color-primary);
+  }
+
+  .title {
+    display: inline-block;
+    padding-left: 1em;
+  }
+
+  .pipeline-toggle {
+    background-color: var(--color-alabaster);
+    display: inline-block;
+    padding: 10px 10px 10px 0;
+    height: 36px;
+    flex: 0 0 auto;
+  }
+
+  .shadowed {
+    position: relative;
+    display: flex;
+  }
+}

package/src/rawResource/component/group/RawResource.tsx

@@ -0,0 +1,51 @@
+import { UISref, UISrefActive } from '@uirouter/react';
+import React from 'react';
+
+import { CloudProviderLogo } from '@spinnaker/core';
+
+import { RawResourceUtils } from '../RawResourceUtils';
+
+import './RawResource.less';
+
+interface IRawResourceProps {
+  resource: IApiKubernetesResource;
+}
+
+interface IRawResourceState {}
+
+export class RawResource extends React.Component<IRawResourceProps, IRawResourceState> {
+  constructor(props: IRawResourceProps) {
+    super(props);
+  }
+
+  public render() {
+    const { account, name, region } = this.props.resource;
+    const params = { account, name, region };
+    return (
+      <UISrefActive class="active">
+        <UISref to=".rawResourceDetails" params={params}>
+          <div className="RawResource card clickable clickable-row">
+            <h4 className="title">
+              <CloudProviderLogo provider="kubernetes" height="20px" width="20px" />
+              {this.props.resource.kind} {this.props.resource.displayName}
+            </h4>
+            <div className="details">
+              <div className="column">
+                <div className="title">account:</div>
+                <div>{this.props.resource.account}</div>
+              </div>
+              <div className="column">
+                <div className="title">namespace:</div>
+                <div>{RawResourceUtils.namespaceDisplayName(this.props.resource.namespace)}</div>
+              </div>
+              <div className="column">
+                <div className="title">apiVersion:</div>
+                <div>{this.props.resource.apiVersion}</div>
+              </div>
+            </div>
+          </div>
+        </UISref>
+      </UISrefActive>
+    );
+  }
+}

package/src/rawResource/component/group/RawResourceDetails.tsx

@@ -0,0 +1,236 @@
+import { UISref } from '@uirouter/react';
+import { get } from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+import { Subject } from 'rxjs';
+
+import type { IManifest } from '@spinnaker/core';
+import {
+  AccountTag,
+  CloudProviderLogo,
+  CollapsibleSection,
+  ConfirmationModalService,
+  logger,
+  ManifestWriter,
+  Overridable,
+  SETTINGS,
+  Spinner,
+  timestamp,
+} from '@spinnaker/core';
+
+import { RawResourceUtils } from '../RawResourceUtils';
+import { ManifestLabels } from '../../../manifest/ManifestLabels';
+import { KubernetesManifestService } from '../../../manifest/manifest.service';
+import { KubernetesManifestCommandBuilder } from '../../../manifest/manifestCommandBuilder.service';
+import type { IKubernetesManifestCondition } from '../../../manifest/status/ManifestCondition';
+import { ManifestCondition } from '../../../manifest/status/ManifestCondition';
+import { ManifestWizard } from '../../../manifest/wizard/ManifestWizard';
+import { ManifestEvents } from '../../../pipelines/stages/deployManifest/manifestStatus/ManifestEvents';
+
+export interface IRawResourceDetailsProps {
+  app: any;
+  $stateParams: {
+    account: string;
+    application: string;
+    name: string;
+    region: string;
+  };
+}
+
+export interface IRawResourcesDetailState {
+  account: string;
+  application: string;
+  name: string;
+  region: string;
+  loading: boolean;
+  manifest?: IManifest;
+}
+
+Overridable('k8s.rawResource.details');
+export class RawResourceDetails extends React.Component<IRawResourceDetailsProps, IRawResourcesDetailState> {
+  constructor(props: IRawResourceDetailsProps) {
+    super(props);
+    this.state = {
+      account: null,
+      application: null,
+      name: null,
+      region: null,
+      loading: true,
+      manifest: null,
+    };
+  }
+  private destroy$ = new Subject();
+  private props$ = new Subject<IRawResourceDetailsProps>();
+  private unsubscribeManifest?: () => void;
+
+  public componentDidMount() {
+    this.setState({
+      account: this.props.$stateParams.account,
+      application: this.props.$stateParams.application,
+      name: this.props.$stateParams.name,
+      region: this.props.$stateParams.region,
+    });
+    const params = {
+      account: this.props.$stateParams.account,
+      location: this.props.$stateParams.region == '' ? '_' : this.props.$stateParams.region,
+      name: this.props.$stateParams.name,
+    };
+    this.unsubscribeManifest = KubernetesManifestService.subscribe(this.props.app, params, (manifest) => {
+      if (this.unsubscribeManifest != null) {
+        this.setState({ manifest, loading: false });
+      }
+    });
+  }
+
+  public componentWillReceiveProps(nextProps: IRawResourceDetailsProps) {
+    this.props$.next(nextProps);
+  }
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+    if (this.unsubscribeManifest) {
+      this.unsubscribeManifest();
+      this.unsubscribeManifest = null;
+    }
+  }
+
+  private editRawResource() {
+    const { app } = this.props;
+    const { account, application, manifest } = this.state;
+
+    KubernetesManifestCommandBuilder.buildNewManifestCommand(
+      app,
+      manifest.manifest,
+      { app: application },
+      account,
+    ).then((builtCommand) => {
+      ManifestWizard.show({ title: 'Edit Manifest', application: app, command: builtCommand });
+    });
+  }
+
+  private deletedRawResource = () => {
+    const { app } = this.props;
+    const { account, manifest } = this.state;
+    const name = manifest?.manifest?.metadata?.name ?? null;
+    const kind = manifest?.manifest?.kind;
+    const taskMonitor = {
+      application: app,
+      title: 'Deleting ' + name,
+    };
+
+    const submitMethod = () => {
+      logger.log({ category: 'RawResource', action: 'Delete clicked' });
+      const command = {
+        manifestName: this.state.name,
+        location: this.state.region,
+        account: this.state.account,
+        reason: null as string,
+        cloudProvider: 'kubernetes',
+        options: {
+          cascading: false,
+        },
+      };
+      return ManifestWriter.deleteManifest(command, this.props.app);
+    };
+
+    ConfirmationModalService.confirm({
+      header: 'Are you sure you want to delete the ' + kind + ' ' + name + '?',
+      buttonText: 'Delete',
+      account: account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod,
+    });
+  };
+
+  private handleEditClick = (): void => {
+    logger.log({ category: 'RawResource', action: 'Edit clicked' });
+    this.editRawResource();
+  };
+
+  public render() {
+    const { account, region, manifest } = this.state;
+    const kind = manifest?.manifest?.kind;
+    const apiVersion = manifest?.manifest?.apiVersion;
+    const metadata = manifest?.manifest?.metadata;
+    const name = metadata?.name;
+    const creationUnixMs =
+      get(metadata, 'creationTimestamp') && DateTime.fromISO(metadata.creationTimestamp).toMillis();
+
+    return (
+      <div className="details-panel">
+        <div className="header">
+          <div className="close-button">
+            <UISref to="^">
+              <span className="glyphicon glyphicon-remove" />
+            </UISref>
+          </div>
+          {this.state.loading ? (
+            <div className="horizontal center middle">
+              <Spinner size="small" />
+            </div>
+          ) : (
+            <div className="header-text horizontal middle">
+              <CloudProviderLogo provider="kubernetes" height="36px" width="36px" />
+              <h3 className="horizontal middle space-between flex-1">
+                {kind} {name}
+              </h3>
+            </div>
+          )}
+          {!this.state.loading && SETTINGS.kubernetesAdHocInfraWritesEnabled && (
+            <div className="actions">
+              <Dropdown className="dropdown" id="resource-actions-dropdown">
+                <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+                  <span>{kind} Actions</span>
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <li key="action-edit" id="resource-action-edit">
+                    <a onClick={this.handleEditClick}>Edit</a>
+                  </li>
+                  <li key="action-delete" id="resource-action-delete">
+                    <a onClick={this.deletedRawResource}>Delete</a>
+                  </li>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+          )}
+        </div>
+        {!this.state.loading && (
+          <div className="content">
+            <CollapsibleSection heading="Information" defaultExpanded={true}>
+              <dl className="dl-horizontal dl-narrow">
+                <dt>Created</dt>
+                <dd>{timestamp(creationUnixMs)}</dd>
+                <dt>Account</dt>
+                <dd>
+                  <AccountTag account={account} />
+                </dd>
+                <dt>API Version</dt>
+                <dd>{apiVersion}</dd>
+                <dt>Kind</dt>
+                <dd>{kind}</dd>
+                <dt>Namespace</dt>
+                <dd>{RawResourceUtils.namespaceDisplayName(region)}</dd>
+              </dl>
+            </CollapsibleSection>
+            <CollapsibleSection key="status" heading="status" defaultExpanded={true}>
+              <ul>
+                {(manifest?.manifest?.status?.conditions ?? []).map((condition: IKubernetesManifestCondition) => (
+                  <li key={condition.type + condition.lastTransitionTime} style={{ marginBottom: '10px' }}>
+                    <ManifestCondition condition={condition} />
+                  </li>
+                ))}
+              </ul>
+            </CollapsibleSection>
+            <CollapsibleSection key="events" heading="events" defaultExpanded={true}>
+              <ManifestEvents manifest={manifest} />
+            </CollapsibleSection>
+            <CollapsibleSection key="labels" heading="labels" defaultExpanded={true}>
+              <ManifestLabels manifest={get(manifest, ['manifest'], {})} />
+            </CollapsibleSection>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/rawResource/component/group/RawResourceGroups.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { RawResourceGroup } from './RawResouceGroup';
+import { RawResource } from './RawResource';
+import { RawResourceUtils } from '../RawResourceUtils';
+
+interface IRawResourceGroupsProps {
+  resources: IApiKubernetesResource[];
+  groupBy: string;
+}
+
+interface IRawResourceGroupsState {}
+
+export class RawResourceGroups extends React.Component<IRawResourceGroupsProps, IRawResourceGroupsState> {
+  constructor(props: IRawResourceGroupsProps) {
+    super(props);
+  }
+
+  private buildGroupByModel(resources: IApiKubernetesResource[]) {
+    const values = resources.map((r: Record<string, any>) => String(r[this.props.groupBy]));
+    return Object.assign(
+      {},
+      ...values.map((value) => ({
+        [value]: resources.filter((r: Record<string, any>) => String(r[this.props.groupBy]) === value),
+      })),
+    ) as Record<string, IApiKubernetesResource[]>;
+  }
+
+  private groupTitle(title: string): string {
+    if (this.props.groupBy == 'namespace') {
+      return RawResourceUtils.namespaceDisplayName(title);
+    }
+    return title;
+  }
+
+  public render() {
+    const groups = this.buildGroupByModel(this.props.resources);
+    return (
+      <div className="RawResourceGroups">
+        {...Object.entries(groups).map(([key, value]) => {
+          return key !== 'undefined' ? (
+            <RawResourceGroup title={this.groupTitle(key)} key={key}>
+              {...value.map((resource) => (
+                <RawResource resource={resource} key={RawResourceUtils.resourceKey(resource)}></RawResource>
+              ))}
+            </RawResourceGroup>
+          ) : (
+            <></>
+          );
+        })}
+      </div>
+    );
+  }
+}

package/src/rawResource/controller/FiltersPubSub.ts

@@ -0,0 +1,35 @@
+import type { IK8sResourcesFiltersState } from '../component/K8sResourcesFilters';
+
+type ISubscriber = (message: IK8sResourcesFiltersState) => void;
+
+export class FiltersPubSub {
+  private subscribers: ISubscriber[] = [];
+  private static intances: Record<string, FiltersPubSub> = {};
+
+  private constructor() {}
+
+  public static getInstance(name: string) {
+    let instance = FiltersPubSub.intances[name];
+    if (!FiltersPubSub.intances[name]) {
+      FiltersPubSub.intances[name] = new FiltersPubSub();
+      instance = FiltersPubSub.intances[name];
+    }
+    return instance;
+  }
+
+  public subscribe(subscriber: ISubscriber) {
+    this.subscribers.push(subscriber);
+    return () => (this.subscribers = this.subscribers.filter((x) => x !== subscriber));
+  }
+
+  public unsubscribe(subscriber: ISubscriber) {
+    const index = this.subscribers.indexOf(subscriber);
+    if (index > -1) {
+      this.subscribers.splice(index, 1);
+    }
+  }
+
+  public publish(message: IK8sResourcesFiltersState) {
+    this.subscribers.forEach((sub) => sub(message));
+  }
+}

package/src/rawResource/index.ts

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

package/src/rawResource/model/resource.ts

@@ -0,0 +1,18 @@
+interface IResource {
+  name: String;
+  labels: {
+    [key: string]: String;
+  };
+}
+
+interface IApiKubernetesResource {
+  account: string;
+  apiVersion: string;
+  displayName: string;
+  kind: string;
+  labels: Record<string, string>;
+  moniker: Record<string, string>;
+  name: string;
+  namespace: string;
+  region: string;
+}

package/src/rawResource/rawResource.dataSource.ts

@@ -0,0 +1,39 @@
+import type { IQService } from 'angular';
+import { module } from 'angular';
+
+import type { Application } from '@spinnaker/core';
+import { ApplicationDataSourceRegistry, INFRASTRUCTURE_KEY, REST } from '@spinnaker/core';
+
+export const KUBERNETS_RAW_RESOURCE_DATA_SOURCE = 'spinnaker.core.rawresource.dataSource';
+export const KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY = 'k8s';
+const KUBERNETS_RAW_RESOURCE_DATA_SOURCE_SREF = `.insight.${KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY}`;
+
+type ApiK8sResource = any;
+
+const fetchK8sResources = (application: Application): PromiseLike<ApiK8sResource> =>
+  REST('applications').path(application.name, 'rawResources').get();
+
+const formatK8sResources = ($q: IQService) => (_: Application, result: ApiK8sResource): PromiseLike<ApiK8sResource> =>
+  $q.resolve(result);
+
+module(KUBERNETS_RAW_RESOURCE_DATA_SOURCE, []).run([
+  '$q',
+  ($q: IQService) => {
+    ApplicationDataSourceRegistry.registerDataSource({
+      key: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY,
+      label: 'Kubernetes',
+      category: INFRASTRUCTURE_KEY,
+      sref: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_SREF,
+      primary: true,
+      icon: 'fas fa-xs fa-fw fa-th-large',
+      iconName: 'spMenuK8s',
+      loader: fetchK8sResources,
+      onLoad: formatK8sResources($q),
+      providerField: 'cloudProvider',
+      credentialsField: 'account',
+      regionField: 'region',
+      description: 'Collections of kubernetes resources',
+      defaultData: [],
+    });
+  },
+]);