@spinnaker/kubernetes 0.0.0-main-2

package/src/manifest/ManifestQos.tsx

@@ -0,0 +1,68 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import { HoverablePopover } from '@spinnaker/core';
+
+import './manifestLabels.less';
+
+// TODO(dpeach) https://github.com/spinnaker/spinnaker/issues/3239
+export interface IManifestQosProps {
+  manifest?: {
+    status?: {
+      qosClass?: string;
+    };
+  };
+}
+
+export class ManifestQos extends React.Component<IManifestQosProps> {
+  private qosClass(): string {
+    return get(this.props, ['manifest', 'status', 'qosClass'], 'Unknown');
+  }
+
+  private qosStyle(): string {
+    const qosClass = this.qosClass();
+    if (qosClass === 'Guaranteed') {
+      return 'success';
+    } else if (qosClass === 'BestEffort') {
+      return 'alert';
+    } else {
+      return 'warn';
+    }
+  }
+
+  private description = () => {
+    return (
+      <div>
+        <p>There are three QOS (Quality of Service) classes:</p>
+        <p>
+          <b>Guaranteed</b>: Pods are considered highest-priority, and will only be killed if they exceed their resource
+          requests when other containers require their resources.
+        </p>
+        <p>
+          <b>Burstable</b>: Pods have some minimum guaranteed resources and can exceed them, but are more likely to be
+          killed than <b>Guaranteed</b> pods.
+        </p>
+        <p>
+          <b>BestEffort</b>: These are the lowest-priority pods, and will be the first to be evicted when resources run
+          out.
+        </p>
+        <p>
+          To understand how to set the QOS class of a pod, read{' '}
+          <a href="https://kubernetes.io/docs/tasks/configure-pod-container/quality-service-pod/">
+            the Kubernetes documentation
+          </a>
+          .
+        </p>
+      </div>
+    );
+  };
+
+  public render() {
+    const style = `sp-badge ${this.qosStyle()}`;
+    return (
+      <HoverablePopover Component={this.description} title="QOS Class" className={`ephemeral-popover`}>
+        <div className={style}>{this.qosClass()}</div>
+      </HoverablePopover>
+    );
+  }
+}

package/src/manifest/ManifestResources.tsx

@@ -0,0 +1,69 @@
+import { get } from 'lodash';
+import React from 'react';
+
+export interface IManifestResources {
+  cpu?: string;
+  memory?: string;
+}
+
+// TODO(dpeach) https://github.com/spinnaker/spinnaker/issues/3239
+export interface IManifestResourceProps {
+  manifest?: {
+    spec?: {
+      containers?: [
+        {
+          name?: string;
+          resources?: {
+            limits?: IManifestResources;
+            requests?: IManifestResources;
+          };
+        },
+      ];
+    };
+    status?: {
+      qosClass?: string;
+    };
+  };
+  metrics?: [
+    {
+      containerName?: string;
+      metrics?: IPodMetricsMap;
+    },
+  ];
+}
+
+export interface IPodMetricsMap {
+  [key: string]: string;
+}
+
+export class ManifestResources extends React.Component<IManifestResourceProps> {
+  public render() {
+    const containers = get(this.props, ['manifest', 'spec', 'containers'], []);
+    const metrics = get(this.props, ['metrics'], []);
+
+    if (!metrics) {
+      return <div>No metrics reported.</div>;
+    }
+    const containerToMetricMap = metrics.reduce((acc, val) => {
+      acc[val.containerName] = { metrics: val.metrics };
+      return acc;
+    }, {});
+
+    return (
+      <div>
+        {containers.map((c, i) => (
+          <div key={c.name}>
+            Resource usage for <b>{c.name}</b>
+            <dl className="dl-horizontal dl-narrow">
+              <dt>CPU</dt>
+              <dd>{get(containerToMetricMap, [c.name, 'metrics', 'CPU(cores)'], 'Unknown')}</dd>
+              <dt>MEMORY</dt>
+              <dd>{get(containerToMetricMap, [c.name, 'metrics', 'MEMORY(bytes)'], 'Unknown')}</dd>
+            </dl>
+            {i < containers.length - 1 ? <hr /> : ''}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

package/src/manifest/ManifestSource.ts

@@ -0,0 +1,4 @@
+export enum ManifestSource {
+  TEXT = 'text',
+  ARTIFACT = 'artifact',
+}

package/src/manifest/annotationCustomSections.component.ts

@@ -0,0 +1,114 @@
+import type { IComponentOptions, IController, IInterpolateService, ISCEService } from 'angular';
+import { module } from 'angular';
+import DOMPurify from 'dompurify';
+import { get, partition } from 'lodash';
+
+interface IAnnotationsMap {
+  [key: string]: string;
+}
+
+interface ICustomSection {
+  title: string;
+  key: string;
+  isHtml: boolean;
+  content: string;
+}
+
+interface ICustomSectionMap {
+  [key: string]: ICustomSection[];
+}
+
+class KubernetesAnnotationCustomSections implements IController {
+  private resource: any;
+  public manifest: any;
+  public customSections: ICustomSectionMap;
+
+  public static $inject = ['$sce', '$interpolate'];
+  constructor(private $sce: ISCEService, private $interpolate: IInterpolateService) {}
+
+  public $onInit() {
+    const annotations: IAnnotationsMap = get(this, ['manifest', 'metadata', 'annotations']);
+    if (annotations == null) {
+      return;
+    }
+    this.populateCustomSections(annotations);
+  }
+
+  private populateCustomSections(annotations: IAnnotationsMap) {
+    const customSections: ICustomSectionMap = Object.keys(annotations).reduce(
+      (memo: ICustomSectionMap, annotationKey: string) => {
+        const entry = this.annotationToEntry(annotations[annotationKey], annotationKey);
+        if (entry != null && entry.title) {
+          memo[entry.title] = memo[entry.title] || [];
+          memo[entry.title].push(entry);
+        }
+        return memo;
+      },
+      {},
+    );
+    // Sort section contents such that text entries appear before HTML entries.
+    this.customSections = Object.keys(customSections).reduce((memo: ICustomSectionMap, sectionTitle: string) => {
+      const entriesHtmlText = partition(customSections[sectionTitle], (section) => section.isHtml);
+      memo[sectionTitle] = entriesHtmlText[1].concat(entriesHtmlText[0]);
+      return memo;
+    }, {});
+  }
+
+  private annotationToEntry(content: string, annotationKey: string): ICustomSection {
+    const parsed = this.parseAnnotationKey(annotationKey);
+    if (parsed == null) {
+      return null;
+    }
+    if (this.resource && content.includes('{{')) {
+      content = this.$interpolate(content)({ ...this.resource, manifest: this.manifest });
+    }
+    return {
+      title: parsed.title.replace(/-/g, ' ').trim(),
+      key: parsed.key.replace(/-/g, ' ').trim(),
+      content: parsed.isHtml ? this.sanitizeContent(content) : content,
+      isHtml: parsed.isHtml,
+    };
+  }
+
+  private parseAnnotationKey(annotationKey: string): { title: string; key: string; isHtml: boolean } {
+    const keyParts = /([^.]+)\.details\.(html\.)?spinnaker\.io(?:\/(.*))?/.exec(annotationKey);
+    if (keyParts == null || keyParts.length !== 4) {
+      return null;
+    }
+    return {
+      title: keyParts[1] || '',
+      key: keyParts[3] || '',
+      isHtml: !!keyParts[2],
+    };
+  }
+
+  private sanitizeContent(unsanitized: string): any {
+    const sanitized = DOMPurify.sanitize(unsanitized, {
+      ADD_ATTR: ['target'],
+    });
+    return this.$sce.trustAsHtml(sanitized);
+  }
+}
+
+const kubernetesAnnotationCustomSectionsComponent: IComponentOptions = {
+  bindings: { manifest: '<', resource: '<' },
+  controller: ['$sce', '$interpolate', KubernetesAnnotationCustomSections],
+  controllerAs: 'ctrl',
+  template: `
+    <collapsible-section expanded="true" ng-if="ctrl.manifest" ng-repeat="(section, entries) in ctrl.customSections" heading="{{ section }}">
+      <div ng-repeat="entry in entries">
+        <div ng-if="entry.isHtml" ng-bind-html="entry.content"></div>
+        <div ng-if="!entry.isHtml">
+          <span ng-if="entry.key" style="font-weight:bold">{{ entry.key }}</span>
+          <span>{{ entry.content }}</span>
+        </div>
+      </div>
+    </collapsible-section>
+  `,
+};
+
+export const KUBERNETES_ANNOTATION_CUSTOM_SECTIONS = 'spinnaker.kubernetes.v2.manifest.annotation.custom.sections';
+module(KUBERNETES_ANNOTATION_CUSTOM_SECTIONS, []).component(
+  'kubernetesAnnotationCustomSections',
+  kubernetesAnnotationCustomSectionsComponent,
+);

package/src/manifest/artifact/artifact.component.ts

@@ -0,0 +1,23 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+
+import type { IArtifact } from '@spinnaker/core';
+
+class KubernetesManifestArtifactCtrl implements IController {
+  public artifact: IArtifact;
+}
+
+const kubernetesManifestArtifactComponent: IComponentOptions = {
+  bindings: { artifact: '<' },
+  controller: KubernetesManifestArtifactCtrl,
+  controllerAs: 'ctrl',
+  template: `
+      <span>
+        <b>{{ctrl.artifact.type}}</b>
+        <i>{{ctrl.artifact.reference}}</i>
+      </span>
+  `,
+};
+
+export const KUBERNETES_MANIFEST_ARTIFACT = 'spinnaker.kubernetes.v2.manifest.artifact.component';
+module(KUBERNETES_MANIFEST_ARTIFACT, []).component('kubernetesManifestArtifact', kubernetesManifestArtifactComponent);

package/src/manifest/delete/delete.controller.ts

@@ -0,0 +1,80 @@
+import type { IController } from 'angular';
+import { copy, module } from 'angular';
+import type { IModalServiceInstance } from 'angular-ui-bootstrap';
+
+import type { Application } from '@spinnaker/core';
+import { ManifestWriter, TaskMonitor } from '@spinnaker/core';
+import type { IManifestCoordinates } from '../IManifestCoordinates';
+import { KUBERNETES_DELETE_MANIFEST_OPTIONS_FORM } from './deleteOptionsForm.component';
+
+export interface IDeleteCommand {
+  manifestName: string;
+  location: string;
+  account: string;
+  reason: string;
+  options: IDeleteOptions;
+}
+
+export interface IDeleteOptions {
+  gracePeriodSeconds?: number;
+  cascading: boolean;
+}
+
+class KubernetesManifestDeleteController implements IController {
+  public taskMonitor: TaskMonitor;
+  public command: IDeleteCommand;
+  public verification = {
+    verified: false,
+  };
+
+  public static $inject = ['coordinates', '$uibModalInstance', 'application', 'manifestController'];
+  constructor(
+    coordinates: IManifestCoordinates,
+    private $uibModalInstance: IModalServiceInstance,
+    private application: Application,
+    public manifestController: string,
+  ) {
+    this.taskMonitor = new TaskMonitor({
+      title: `Deleting ${coordinates.name} in ${coordinates.namespace}`,
+      application,
+      modalInstance: $uibModalInstance,
+    });
+
+    this.command = {
+      manifestName: coordinates.name,
+      location: coordinates.namespace,
+      account: coordinates.account,
+      reason: null,
+      options: {
+        cascading: true,
+      },
+    };
+  }
+
+  public isValid(): boolean {
+    return this.verification.verified;
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  public delete(): void {
+    this.taskMonitor.submit(() => {
+      const payload = copy(this.command) as any;
+      payload.cloudProvider = 'kubernetes';
+      // cascading is the kubectl term (more familiar) orphanDependants is the k8s server term
+      payload.options.orphanDependants = !payload.options.cascading;
+      delete payload.options.cascading;
+
+      return ManifestWriter.deleteManifest(payload, this.application);
+    });
+  }
+}
+
+export const KUBERNETES_MANIFEST_DELETE_CTRL = 'spinnaker.kubernetes.v2.manifest.delete.controller';
+
+module(KUBERNETES_MANIFEST_DELETE_CTRL, [KUBERNETES_DELETE_MANIFEST_OPTIONS_FORM]).controller(
+  'kubernetesV2ManifestDeleteCtrl',
+  KubernetesManifestDeleteController,
+);

package/src/manifest/delete/delete.html

@@ -0,0 +1,42 @@
+<div modal-page class="confirmation-modal">
+  <task-monitor monitor="ctrl.taskMonitor"></task-monitor>
+  <form role="form" name="deleteForm">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Delete {{ctrl.command.manifestName | robotToHuman}} in {{ctrl.command.location}}</h4>
+    </div>
+    <div ng-if="ctrl.manifestController">
+      <div class="alert alert-warning">
+        Manifest is controlled by
+        <a
+          ui-sref="^.serverGroupManager({
+                      accountId: ctrl.command.account,
+                      region: ctrl.command.location,
+                      serverGroupManager: ctrl.manifestController,
+                      provider: 'kubernetes'})"
+        >
+          {{ctrl.manifestController | robotToHuman }}
+        </a>
+        and may be recreated after deletion.
+      </div>
+    </div>
+    <div class="modal-body confirmation-modal">
+      <kubernetes-delete-manifest-options-form options="ctrl.command.options"></kubernetes-delete-manifest-options-form>
+      <task-reason command="ctrl.command"></task-reason>
+    </div>
+    <div class="modal-footer">
+      <user-verification account="ctrl.command.account" verification="ctrl.verification"></user-verification>
+      <button type="submit" ng-click="ctrl.delete()" style="display: none"></button>
+      <!-- Allows form submission via enter keypress-->
+      <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+      <button
+        type="submit"
+        class="btn btn-primary"
+        ng-click="ctrl.delete()"
+        ng-disabled="!ctrl.isValid() || !deleteForm.$valid"
+      >
+        Submit
+      </button>
+    </div>
+  </form>
+</div>

package/src/manifest/delete/deleteOptionsForm.component.ts

@@ -0,0 +1,52 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+
+import type { IDeleteOptions } from './delete.controller';
+
+class KubernetesDeleteManifestOptionsFormCtrl implements IController {
+  public options: IDeleteOptions;
+}
+
+const kubernetesDeletManifestOptionsFormComponent: IComponentOptions = {
+  bindings: { options: '=' },
+  controller: KubernetesDeleteManifestOptionsFormCtrl,
+  controllerAs: 'ctrl',
+  template: `
+    <div class="form-horizontal">
+      <div class="form-group form-inline">
+        <div class="col-md-3 sm-label-right">
+          Cascading
+          <help-field key="kubernetes.manifest.delete.cascading"></help-field>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <input type="checkbox"
+                  ng-model="ctrl.options.cascading"/>
+          </div>
+        </div>
+      </div>
+      <div class="form-group form-inline">
+        <div class="col-md-3 sm-label-right">
+          Grace Period
+          <help-field key="kubernetes.manifest.delete.gracePeriod"></help-field>
+        </div>
+        <div class="col-md-4">
+          <div class="input-group">
+            <input type="number"
+                  class="form-control input-sm highlight-pristine"
+                  ng-model="ctrl.options.gracePeriodSeconds"
+                  min="0"/>
+            <span class="input-group-addon">second<span ng-if="ctrl.options.gracePeriodSeconds !== 1">s</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+export const KUBERNETES_DELETE_MANIFEST_OPTIONS_FORM =
+  'spinnaker.kubernetes.v2.kubernetes.manifest.delete.options.component';
+module(KUBERNETES_DELETE_MANIFEST_OPTIONS_FORM, []).component(
+  'kubernetesDeleteManifestOptionsForm',
+  kubernetesDeletManifestOptionsFormComponent,
+);

package/src/manifest/editor/json/JsonEditor.tsx

@@ -0,0 +1,56 @@
+import 'brace/mode/json';
+import 'brace/theme/textmate';
+import { $log } from 'ngimport';
+import React from 'react';
+import AceEditor from 'react-ace';
+
+export interface IJsonEditorProps {
+  value: string;
+  onChange(raw: string, obj: any): void;
+}
+
+export const JSON_EDITOR_TAB_SIZE = 2;
+
+export class JsonEditor extends React.Component<IJsonEditorProps> {
+  private handleChange = (raw: string) => {
+    try {
+      const obj = JSON.parse(raw);
+      this.props.onChange
+        ? this.props.onChange(raw, obj)
+        : $log.warn('No `onChange` handler provided for JSON editor.');
+    } catch (e) {
+      this.props.onChange
+        ? this.props.onChange(raw, null)
+        : $log.warn('No `onChange` handler provided for JSON editor.');
+      $log.warn(`Error loading JSON from string ${raw}: `, e);
+    }
+  };
+
+  public render = () => {
+    return (
+      <AceEditor
+        mode="json"
+        theme="textmate"
+        name="json-editor"
+        style={{ width: 'inherit' }}
+        onChange={this.handleChange}
+        fontSize={12}
+        showGutter={true}
+        cursorStart={0}
+        showPrintMargin={false}
+        minLines={50}
+        maxLines={100}
+        highlightActiveLine={true}
+        value={this.props.value || undefined}
+        setOptions={{
+          firstLineNumber: 1,
+          tabSize: JSON_EDITOR_TAB_SIZE,
+          showLineNumbers: false,
+          showFoldWidgets: false,
+        }}
+        editorProps={{ $blockScrolling: Infinity }}
+        className="ace-editor"
+      />
+    );
+  };
+}

package/src/manifest/editor/json/jsonEditor.component.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { JsonEditor } from './JsonEditor';
+
+export const JSON_EDITOR_COMPONENT = 'spinnaker.kubernetes.jsonEditor.component';
+module(JSON_EDITOR_COMPONENT, []).component(
+  'jsonEditor',
+  react2angular(withErrorBoundary(JsonEditor, 'jsonEditor'), ['onChange', 'value']),
+);

package/src/manifest/index.ts

@@ -0,0 +1,10 @@
+export * from './manifest.service';
+export * from './manifestCommandBuilder.service';
+export * from './IManifestCoordinates';
+export * from './artifact/artifact.component';
+export * from './delete/delete.controller';
+export * from './rollout/pause.controller';
+export * from './rollout/undo.controller';
+export * from './scale/scale.controller';
+export * from './status/condition.component';
+export * from './status/status.component';

package/src/manifest/manifest.service.ts

@@ -0,0 +1,90 @@
+import type { Application, IManifest } from '@spinnaker/core';
+import { ManifestReader } from '@spinnaker/core';
+
+export interface IStageManifest {
+  kind: string;
+  apiVersion: string;
+  metadata: {
+    namespace: string;
+    name: string;
+  };
+}
+
+export interface IManifestParams {
+  account: string;
+  location: string;
+  name: string;
+}
+
+export type IManifestCallback = (manifest: IManifest) => void;
+
+export class KubernetesManifestService {
+  public static subscribe(app: Application, params: IManifestParams, fn: IManifestCallback): () => void {
+    KubernetesManifestService.updateManifest(params, fn);
+    return app.onRefresh(null, () => KubernetesManifestService.updateManifest(params, fn));
+  }
+
+  private static updateManifest(params: IManifestParams, fn: IManifestCallback) {
+    ManifestReader.getManifest(params.account, params.location, params.name).then((manifest) => fn(manifest));
+  }
+
+  public static manifestIdentifier(manifest: IStageManifest) {
+    const kind = manifest.kind.toLowerCase();
+    // manifest.metadata.namespace doesn't exist if it's a namespace being deployed
+    const namespace = (manifest.metadata.namespace || '_').toLowerCase();
+    const name = manifest.metadata.name.toLowerCase();
+    const apiVersion = (manifest.apiVersion || '_').toLowerCase();
+    // assuming this identifier is opaque and not parsed anywhere. Including the
+    // apiVersion will prevent collisions with CRD kinds without having any visible
+    // effect elsewhere
+    return `${namespace} ${kind} ${apiVersion} ${name}`;
+  }
+
+  public static stageManifestToManifestParams(manifest: IStageManifest, account: string): IManifestParams {
+    return {
+      account,
+      name: KubernetesManifestService.scopedKind(manifest) + ' ' + manifest.metadata.name,
+      location: manifest.metadata.namespace == null ? '_' : manifest.metadata.namespace,
+    };
+  }
+
+  private static apiGroup(manifest: IStageManifest): string {
+    const parts = (manifest.apiVersion || '_').split('/');
+    if (parts.length < 2) {
+      return '';
+    }
+    return parts[0];
+  }
+
+  private static isCRDGroup(manifest: IStageManifest): boolean {
+    return !KubernetesManifestService.BUILT_IN_GROUPS.includes(KubernetesManifestService.apiGroup(manifest));
+  }
+
+  private static scopedKind(manifest: IStageManifest): string {
+    if (KubernetesManifestService.isCRDGroup(manifest)) {
+      return manifest.kind + '.' + KubernetesManifestService.apiGroup(manifest);
+    }
+
+    return manifest.kind;
+  }
+
+  // from https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.12/
+  private static readonly BUILT_IN_GROUPS = [
+    '',
+    'core',
+    'batch',
+    'apps',
+    'extensions',
+    'storage.k8s.io',
+    'apiextensions.k8s.io',
+    'apiregistration.k8s.io',
+    'policy',
+    'scheduling.k8s.io',
+    'settings.k8s.io',
+    'authorization.k8s.io',
+    'authentication.k8s.io',
+    'rbac.authorization.k8s.io',
+    'certifcates.k8s.io',
+    'networking.k8s.io',
+  ];
+}