Lens app source code (#119)

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

dashboard/client/components/+storage-volume-claims/index.ts

@@ -0,0 +1,4 @@
+export * from "./volume-claims.route"
+export * from "./volume-claims"
+export * from "./volume-claim-details"
+

dashboard/client/components/+storage-volume-claims/volume-claim-details.scss

@@ -0,0 +1,7 @@
+.PersistentVolumeClaimDetails {
+  .pods {
+    a {
+      padding-right: $padding;
+    }
+  }
+}

dashboard/client/components/+storage-volume-claims/volume-claim-details.tsx

@@ -0,0 +1,100 @@
+import "./volume-claim-details.scss"
+
+import React, { Fragment } from "react";
+import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { Link } from "react-router-dom";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { volumeClaimStore } from "./volume-claim.store";
+import { getDetailsUrl } from "../../navigation";
+import { ResourceMetrics } from "../resource-metrics";
+import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
+}
+
+@observer
+export class PersistentVolumeClaimDetails extends React.Component<Props> {
+  @disposeOnUnmount
+  clean = reaction(() => this.props.object, () => {
+    volumeClaimStore.reset();
+  });
+
+  componentWillUnmount() {
+    volumeClaimStore.reset();
+  }
+
+  render() {
+    const { object: volumeClaim } = this.props;
+    if (!volumeClaim) {
+      return null;
+    }
+    const { storageClassName, accessModes } = volumeClaim.spec;
+    const { metrics } = volumeClaimStore;
+    const pods = volumeClaim.getPods(podsStore.items);
+    const metricTabs = [
+      <Trans>Disk</Trans>
+    ];
+    return (
+      <div className="PersistentVolumeClaimDetails">
+        <ResourceMetrics
+          loader={() => volumeClaimStore.loadMetrics(volumeClaim)}
+          tabs={metricTabs} object={volumeClaim} params={{ metrics }}
+        >
+          <VolumeClaimDiskChart/>
+        </ResourceMetrics>
+        <KubeObjectMeta object={volumeClaim}/>
+        <DrawerItem name={<Trans>Access Modes</Trans>}>
+          {accessModes.join(", ")}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Storage Class Name</Trans>}>
+          {storageClassName}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Storage</Trans>}>
+          {volumeClaim.getStorage()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Pods</Trans>} className="pods">
+          {pods.map(pod => (
+            <Link key={pod.getId()} to={getDetailsUrl(pod.selfLink)}>
+              {pod.getName()}
+            </Link>
+          ))}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Status</Trans>}>
+          {volumeClaim.getStatus()}
+        </DrawerItem>
+
+        <DrawerTitle title={_i18n._(t`Selector`)}/>
+
+        <DrawerItem name={<Trans>Match Labels</Trans>} labelsOnly>
+          {volumeClaim.getMatchLabels().map(label => <Badge key={label} label={label}/>)}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Match Expressions</Trans>}>
+          {volumeClaim.getMatchExpressions().map(({ key, operator, values }, i) => (
+            <Fragment key={i}>
+              <DrawerItem name={<Trans>Key</Trans>}>{key}</DrawerItem>
+              <DrawerItem name={<Trans>Operator</Trans>}>{operator}</DrawerItem>
+              <DrawerItem name={<Trans>Values</Trans>}>{values.join(", ")}</DrawerItem>
+            </Fragment>
+          ))}
+        </DrawerItem>
+
+        <KubeEventDetails object={volumeClaim}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(pvcApi, {
+  Details: PersistentVolumeClaimDetails,
+})

dashboard/client/components/+storage-volume-claims/volume-claim-disk-chart.tsx

@@ -0,0 +1,52 @@
+import React, { useContext } from "react";
+import { observer } from "mobx-react";
+import { t } from "@lingui/macro";
+import { IPvcMetrics, PersistentVolumeClaim } from "../../api/endpoints";
+import { BarChart, ChartDataSet, memoryOptions } from "../chart";
+import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
+import { NoMetrics } from "../resource-metrics/no-metrics";
+import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
+import { _i18n } from "../../i18n";
+import { themeStore } from "../../theme.store";
+
+type IContext = IResourceMetricsValue<PersistentVolumeClaim, { metrics: IPvcMetrics }>;
+
+export const VolumeClaimDiskChart = observer(() => {
+  const { params: { metrics }, object } = useContext<IContext>(ResourceMetricsContext);
+  const { chartCapacityColor } = themeStore.activeTheme.colors;
+  const id = object.getId();
+
+  if (!metrics) return null;
+  if (isMetricsEmpty(metrics)) return <NoMetrics/>;
+
+  const { diskUsage, diskCapacity } = metrics;
+  const usage = normalizeMetrics(diskUsage).data.result[0].values;
+  const capacity = normalizeMetrics(diskCapacity).data.result[0].values;
+
+  const datasets: ChartDataSet[] = [
+    {
+      id: `${id}-diskUsage`,
+      label: _i18n._(t`Usage`),
+      tooltip: _i18n._(t`Volume disk usage`),
+      borderColor: "#ffc63d",
+      data: usage.map(([x, y]) => ({ x, y }))
+    },
+    {
+      id: `${id}-diskCapacity`,
+      label: _i18n._(t`Capacity`),
+      tooltip: _i18n._(t`Volume disk capacity`),
+      borderColor: chartCapacityColor,
+      data: capacity.map(([x, y]) => ({ x, y }))
+    }
+  ]
+
+  return (
+    <BarChart
+      className="VolumeClaimDiskChart flex box grow column"
+      name={`pvc-${object.getName()}-disk`}
+      timeLabelStep={10}
+      options={memoryOptions}
+      data={{ datasets }}
+    />
+  );
+});

dashboard/client/components/+storage-volume-claims/volume-claim.store.ts

@@ -0,0 +1,23 @@
+import { action, observable } from "mobx";
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { IPvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class VolumeClaimStore extends KubeObjectStore<PersistentVolumeClaim> {
+  api = pvcApi
+  @observable metrics: IPvcMetrics = null;
+
+  @action
+  async loadMetrics(pvc: PersistentVolumeClaim) {
+    this.metrics = await pvcApi.getMetrics(pvc.getName(), pvc.getNs());
+  }
+
+  reset() {
+    this.metrics = null;
+  }
+}
+
+export const volumeClaimStore = new VolumeClaimStore();
+apiManager.registerStore(pvcApi, volumeClaimStore);

dashboard/client/components/+storage-volume-claims/volume-claims.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+import { buildURL } from "../../navigation";
+
+export const volumeClaimsRoute: RouteProps = {
+  path: "/persistent-volume-claims"
+}
+
+export interface IVolumeClaimsRouteParams {
+}
+
+export const volumeClaimsURL = buildURL<IVolumeClaimsRouteParams>(volumeClaimsRoute.path)

dashboard/client/components/+storage-volume-claims/volume-claims.scss

@@ -0,0 +1,33 @@
+@import "../+storage/storage-mixins";
+
+.PersistentVolumeClaims {
+  .TableCell {
+    &.name {
+      flex-grow: 3;
+    }
+
+    &.storage {
+      flex: 0.6;
+    }
+
+    &.storageClass {
+      flex-grow: 1.5;
+    }
+
+    &.pods {
+      flex-grow: 2;
+
+      a {
+        padding-right: $padding;
+      }
+    }
+
+    &.status {
+      @include pvc-status-colors;
+    }
+
+    &.age {
+      flex: 0.4;
+    }
+  }
+}

dashboard/client/components/+storage-volume-claims/volume-claims.tsx

@@ -0,0 +1,101 @@
+import "./volume-claims.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Link, RouteComponentProps } from "react-router-dom";
+import { Trans } from "@lingui/macro";
+import { volumeClaimStore } from "./volume-claim.store";
+import { PersistentVolumeClaim, pvcApi } from "../../api/endpoints/persistent-volume-claims.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { KubeObjectListLayout } from "../kube-object";
+import { IVolumeClaimsRouteParams } from "./volume-claims.route";
+import { unitsToBytes } from "../../utils/convertMemory";
+import { stopPropagation } from "../../utils";
+import { getDetailsUrl } from "../../navigation";
+import { storageClassApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  pods = "pods",
+  size = "size",
+  storageClass = "storage-class",
+  status = "status",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IVolumeClaimsRouteParams> {
+}
+
+@observer
+export class PersistentVolumeClaims extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="PersistentVolumeClaims"
+        store={volumeClaimStore}
+        dependentStores={[podsStore]}
+        sortingCallbacks={{
+          [sortBy.name]: (pvc: PersistentVolumeClaim) => pvc.getName(),
+          [sortBy.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(),
+          [sortBy.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()),
+          [sortBy.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
+          [sortBy.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
+          [sortBy.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
+          [sortBy.age]: (pvc: PersistentVolumeClaim) => pvc.getAge(false),
+        }}
+        searchFilters={[
+          (item: PersistentVolumeClaim) => item.getSearchFields(),
+          (item: PersistentVolumeClaim) => item.getPods(podsStore.items).map(pod => pod.getName()),
+        ]}
+        renderHeaderTitle={<Trans>Persistent Volume Claims</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Storage class</Trans>, className: "storageClass", sortBy: sortBy.storageClass },
+          { title: <Trans>Size</Trans>, className: "size", sortBy: sortBy.size },
+          { title: <Trans>Pods</Trans>, className: "pods", sortBy: sortBy.pods },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+        ]}
+        renderTableContents={(pvc: PersistentVolumeClaim) => {
+          const pods = pvc.getPods(podsStore.items);
+          const { storageClassName } = pvc.spec;
+          const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
+            name: storageClassName
+          }));
+          return [
+            pvc.getName(),
+            pvc.getNs(),
+            <Link to={storageClassDetailsUrl} onClick={stopPropagation}>
+              {storageClassName}
+            </Link>,
+            pvc.getStorage(),
+            pods.map(pod => (
+              <Link key={pod.getId()} to={getDetailsUrl(pod.selfLink)} onClick={stopPropagation}>
+                {pod.getName()}
+              </Link>
+            )),
+            pvc.getAge(),
+            { title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
+          ]
+        }}
+        renderItemMenu={(item: PersistentVolumeClaim) => {
+          return <PersistentVolumeClaimMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function PersistentVolumeClaimMenu(props: KubeObjectMenuProps<PersistentVolumeClaim>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(pvcApi, {
+  Menu: PersistentVolumeClaimMenu,
+})