Lens app source code (#119)

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

dashboard/client/components/+events/event-details.tsx

@@ -0,0 +1,79 @@
+import "./event-details.scss";
+
+import React from "react";
+import kebabCase from "lodash/kebabCase";
+import { Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Link } from "react-router-dom";
+import { observer } from "mobx-react";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { eventApi, KubeEvent } from "../../api/endpoints/events.api";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { getDetailsUrl } from "../../navigation";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { lookupApiLink } from "../../api/kube-api";
+
+interface Props extends KubeObjectDetailsProps<KubeEvent> {
+}
+
+@observer
+export class EventDetails extends React.Component<Props> {
+  render() {
+    const { object: event } = this.props;
+    if (!event) return;
+    const { message, reason, count, type, involvedObject } = event;
+    const { kind, name, namespace, fieldPath } = involvedObject;
+    return (
+      <div className="EventDetails">
+        <KubeObjectMeta object={event}/>
+
+        <DrawerItem name={<Trans>Message</Trans>}>
+          {message}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Reason</Trans>}>
+          {reason}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Source</Trans>}>
+          {event.getSource()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>First seen</Trans>}>
+          {event.getFirstSeenTime()} <Trans>ago</Trans> {event.firstTimestamp}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Last seen</Trans>}>
+          {event.getLastSeenTime()} <Trans>ago</Trans> {event.lastTimestamp}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Count</Trans>}>
+          {count}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Type</Trans>} className="type">
+          <span className={kebabCase(type)}>{type}</span>
+        </DrawerItem>
+
+        <DrawerTitle title={<Trans>Involved object</Trans>}/>
+        <Table>
+          <TableHead>
+            <TableCell><Trans>Name</Trans></TableCell>
+            <TableCell><Trans>Namespace</Trans></TableCell>
+            <TableCell><Trans>Kind</Trans></TableCell>
+            <TableCell><Trans>Field Path</Trans></TableCell>
+          </TableHead>
+          <TableRow>
+            <TableCell>
+              <Link to={getDetailsUrl(lookupApiLink(involvedObject, event))}>
+                {name}
+              </Link>
+            </TableCell>
+            <TableCell>{namespace}</TableCell>
+            <TableCell>{kind}</TableCell>
+            <TableCell>{fieldPath}</TableCell>
+          </TableRow>
+        </Table>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(eventApi, {
+  Details: EventDetails,
+});