Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/+config-autoscalers/autoscaler.mixins.scss

@@ -0,0 +1,14 @@
+$hpa-status-colors: (
+  abletoscale: $colorOk,
+  scalingactive: $colorInfo,
+  scalinglimited: $colorSoftError,
+);
+
+@mixin hpa-status-bgc {
+  @each $status, $color in $hpa-status-colors {
+    &.#{$status} {
+      background: $color;
+      color: white;
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa-details.scss

@@ -0,0 +1,17 @@
+@import "autoscaler.mixins";
+
+.HpaDetails {
+  .Badge {
+    @include hpa-status-bgc;
+  }
+
+  .metrics .Table {
+    .TableCell {
+      word-break: break-word;
+
+      &.name {
+        flex-grow: 2;
+      }
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa-details.tsx

@@ -0,0 +1,133 @@
+import "./hpa-details.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { cssNames } from "../../utils";
+import { HorizontalPodAutoscaler, hpaApi, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { Trans } from "@lingui/macro";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { getDetailsUrl } from "../../navigation";
+import { lookupApiLink } from "../../api/kube-api";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<HorizontalPodAutoscaler> {
+}
+
+@observer
+export class HpaDetails extends React.Component<Props> {
+  renderMetrics() {
+    const { object: hpa } = this.props;
+
+    const renderName = (metric: IHpaMetric) => {
+      switch (metric.type) {
+      case HpaMetricType.Resource:
+        const addition = metric.resource.targetAverageUtilization ? <Trans>(as a percentage of request)</Trans> : "";
+        return <Trans>Resource {metric.resource.name} on Pods {addition}</Trans>;
+
+      case HpaMetricType.Pods:
+        return <Trans>{metric.pods.metricName} on Pods</Trans>;
+
+      case HpaMetricType.Object:
+        const { target } = metric.object;
+        const { kind, name } = target;
+        const objectUrl = getDetailsUrl(lookupApiLink(target, hpa));
+        return (
+          <Trans>
+            {metric.object.metricName} on{" "}
+            <Link to={objectUrl}>{kind}/{name}</Link>
+          </Trans>
+        );
+      case HpaMetricType.External:
+        return (
+          <Trans>
+            {metric.external.metricName} on{" "}
+            {JSON.stringify(metric.external.selector)}
+          </Trans>
+        );
+      }
+    }
+
+    return (
+      <Table>
+        <TableHead>
+          <TableCell className="name"><Trans>Name</Trans></TableCell>
+          <TableCell className="metrics"><Trans>Current / Target</Trans></TableCell>
+        </TableHead>
+        {
+          hpa.getMetrics().map((metric, index) => {
+            const name = renderName(metric);
+            const values = hpa.getMetricValues(metric);
+            return (
+              <TableRow key={index}>
+                <TableCell className="name">{name}</TableCell>
+                <TableCell className="metrics">{values}</TableCell>
+              </TableRow>
+            )
+          })
+        }
+      </Table>
+    );
+  }
+
+  render() {
+    const { object: hpa } = this.props;
+    if (!hpa) return;
+    const { scaleTargetRef } = hpa.spec;
+    return (
+      <div className="HpaDetails">
+        <KubeObjectMeta object={hpa}/>
+
+        <DrawerItem name={<Trans>Reference</Trans>}>
+          {scaleTargetRef && (
+            <Link to={getDetailsUrl(lookupApiLink(scaleTargetRef, hpa))}>
+              {scaleTargetRef.kind}/{scaleTargetRef.name}
+            </Link>
+          )}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Min Pods</Trans>}>
+          {hpa.getMinPods()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Max Pods</Trans>}>
+          {hpa.getMaxPods()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Replicas</Trans>}>
+          {hpa.getReplicas()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+          {hpa.getConditions().map(({ type, tooltip, isReady }) => {
+            if (!isReady) return null;
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            )
+          })}
+        </DrawerItem>
+
+        <DrawerTitle title="Metrics"/>
+        <div className="metrics">
+          {this.renderMetrics()}
+        </div>
+
+        <KubeEventDetails object={hpa}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(hpaApi, {
+  Details: HpaDetails,
+});

dashboard/client/components/+config-autoscalers/hpa.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const hpaRoute: RouteProps = {
+  path: "/hpa"
+}
+
+export interface IHpaRouteParams {
+}
+
+export const hpaURL = buildURL<IHpaRouteParams>(hpaRoute.path)

dashboard/client/components/+config-autoscalers/hpa.scss

@@ -0,0 +1,26 @@
+@import "./autoscaler.mixins";
+
+.HorizontalPodAutoscalers {
+  .TableCell {
+    &.name {
+      flex: 1.5;
+    }
+
+    &.metrics {
+      flex: 1.5;
+    }
+
+    &.status {
+      flex: 1.5;
+      @include table-cell-labels-offsets;
+
+      .Badge {
+        @include hpa-status-bgc;
+      }
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa.store.ts

@@ -0,0 +1,12 @@
+import { autobind } from "../../utils";
+import { KubeObjectStore } from "../../kube-object.store";
+import { HorizontalPodAutoscaler, hpaApi } from "../../api/endpoints/hpa.api";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class HPAStore extends KubeObjectStore<HorizontalPodAutoscaler> {
+  api = hpaApi
+}
+
+export const hpaStore = new HPAStore();
+apiManager.registerStore(hpaApi, hpaStore);

dashboard/client/components/+config-autoscalers/hpa.tsx

@@ -0,0 +1,99 @@
+import "./hpa.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { IHpaRouteParams } from "./hpa.route";
+import { HorizontalPodAutoscaler, hpaApi } from "../../api/endpoints/hpa.api";
+import { hpaStore } from "./hpa.store";
+import { Badge } from "../badge";
+import { cssNames } from "../../utils";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  minPods = "min-pods",
+  maxPods = "max-pods",
+  replicas = "replicas",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IHpaRouteParams> {
+}
+
+@observer
+export class HorizontalPodAutoscalers extends React.Component<Props> {
+  getTargets(hpa: HorizontalPodAutoscaler) {
+    const metrics = hpa.getMetrics();
+    const metricsRemainCount = metrics.length - 1;
+    const metricsRemain = metrics.length > 1 ? <Trans>{metricsRemainCount} more...</Trans> : null;
+    const metricValues = hpa.getMetricValues(metrics[0]);
+    return <p>{metricValues} {metricsRemain && "+"}{metricsRemain}</p>;
+  }
+
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="HorizontalPodAutoscalers" store={hpaStore}
+        sortingCallbacks={{
+          [sortBy.name]: (item: HorizontalPodAutoscaler) => item.getName(),
+          [sortBy.namespace]: (item: HorizontalPodAutoscaler) => item.getNs(),
+          [sortBy.minPods]: (item: HorizontalPodAutoscaler) => item.getMinPods(),
+          [sortBy.maxPods]: (item: HorizontalPodAutoscaler) => item.getMaxPods(),
+          [sortBy.replicas]: (item: HorizontalPodAutoscaler) => item.getReplicas()
+        }}
+        searchFilters={[
+          (item: HorizontalPodAutoscaler) => item.getSearchFields()
+        ]}
+        renderHeaderTitle={<Trans>Horizontal Pod Autoscalers</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Metrics</Trans>, className: "metrics" },
+          { title: <Trans>Min Pods</Trans>, className: "min-pods", sortBy: sortBy.minPods },
+          { title: <Trans>Max Pods</Trans>, className: "max-pods", sortBy: sortBy.maxPods },
+          { title: <Trans>Replicas</Trans>, className: "replicas", sortBy: sortBy.replicas },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status" },
+        ]}
+        renderTableContents={(hpa: HorizontalPodAutoscaler) => [
+          hpa.getName(),
+          hpa.getNs(),
+          this.getTargets(hpa),
+          hpa.getMinPods(),
+          hpa.getMaxPods(),
+          hpa.getReplicas(),
+          hpa.getAge(),
+          hpa.getConditions().map(({ type, tooltip, isReady }) => {
+            if (!isReady) return null;
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames(type.toLowerCase())}
+              />
+            )
+          })
+        ]}
+        renderItemMenu={(item: HorizontalPodAutoscaler) => {
+          return <HpaMenu object={item}/>
+        }}
+      />
+    );
+  }
+}
+
+export function HpaMenu(props: KubeObjectMenuProps<HorizontalPodAutoscaler>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(hpaApi, {
+  Menu: HpaMenu,
+})

dashboard/client/components/+config-autoscalers/index.ts

@@ -0,0 +1,3 @@
+export * from "./hpa"
+export * from "./hpa-details"
+export * from "./hpa.route"