Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Signed-off-by: Cody Belcher <cody.t.belcher@gmail.com>
2025-05-20 05:10:56 +00:00 · 2020-04-16 11:23:35 -05:00
1 parent 492ea272d1
commit d057cb17c6
@@ -0,0 +1,138 @@
+import "./crd-details.scss";
+
+import * as React from "react";
+import { Trans } from "@lingui/macro";
+import { Link } from "react-router-dom";
+import { observer } from "mobx-react";
+import { apiManager } from "../../api/api-manager";
+import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { cssNames } from "../../utils";
+import { AceEditor } from "../ace-editor";
+import { Badge } from "../badge";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { Input } from "../input";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
+}
+
+@observer
+export class CRDDetails extends React.Component<Props> {
+  render() {
+    const { object: crd } = this.props;
+    if (!crd) return null;
+    const { plural, singular, kind, listKind } = crd.getNames();
+    const printerColumns = crd.getPrinterColumns();
+    const validation = crd.getValidation();
+    return (
+      <div className="CRDDetails">
+        <KubeObjectMeta object={crd}/>
+
+        <DrawerItem name={<Trans>Group</Trans>}>
+          {crd.getGroup()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Version</Trans>}>
+          {crd.getVersion()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Stored versions</Trans>}>
+          {crd.getStoredVersions()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Scope</Trans>}>
+          {crd.getScope()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Resource</Trans>}>
+          <Link to={crd.getResourceUrl()}>
+            {crd.getResourceTitle()}
+          </Link>
+        </DrawerItem>
+        <DrawerItem name={<Trans>Conversion</Trans>} className="flex gaps align-flex-start">
+          <Input
+            multiLine
+            theme="round-black"
+            className="box grow"
+            value={crd.getConversion()}
+            readOnly
+          />
+        </DrawerItem>
+        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+          {
+            crd.getConditions().map(condition => {
+              const { type, message, lastTransitionTime, status } = condition
+              return (
+                <Badge
+                  key={type}
+                  label={type}
+                  className={cssNames({ disabled: status === "False" }, type)}
+                  tooltip={(
+                    <>
+                      <p>{message}</p>
+                      <p><Trans>Last transition time: {lastTransitionTime}</Trans></p>
+                    </>
+                  )}
+                />
+              );
+            })
+          }
+        </DrawerItem>
+        <DrawerTitle title={<Trans>Names</Trans>}/>
+        <Table selectable className="names box grow">
+          <TableHead>
+            <TableCell><Trans>plural</Trans></TableCell>
+            <TableCell><Trans>singular</Trans></TableCell>
+            <TableCell><Trans>kind</Trans></TableCell>
+            <TableCell><Trans>listKind</Trans></TableCell>
+          </TableHead>
+          <TableRow>
+            <TableCell>{plural}</TableCell>
+            <TableCell>{singular}</TableCell>
+            <TableCell>{kind}</TableCell>
+            <TableCell>{listKind}</TableCell>
+          </TableRow>
+        </Table>
+        {printerColumns.length > 0 &&
+        <>
+          <DrawerTitle title={<Trans>Additional Printer Columns</Trans>}/>
+          <Table selectable className="printer-columns box grow">
+            <TableHead>
+              <TableCell className="name"><Trans>Name</Trans></TableCell>
+              <TableCell className="type"><Trans>Type</Trans></TableCell>
+              <TableCell className="json-path"><Trans>JSON Path</Trans></TableCell>
+            </TableHead>
+            {
+              printerColumns.map((column, index) => {
+                const { name, type, JSONPath } = column;
+                return (
+                  <TableRow key={index}>
+                    <TableCell className="name">{name}</TableCell>
+                    <TableCell className="type">{type}</TableCell>
+                    <TableCell className="json-path">
+                      <Badge label={JSONPath}/>
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            }
+          </Table>
+        </>
+        }
+        {validation &&
+        <>
+          <DrawerTitle title={<Trans>Validation</Trans>}/>
+          <AceEditor
+            mode="json"
+            className="validation"
+            value={validation}
+            readOnly
+          />
+        </>
+        }
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(crdApi, {
+  Details: CRDDetails
+})