Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+network-endpoints/endpoint-details.scss

@@ -0,0 +1,2 @@
+.EndpointDetails {
+}

src/renderer/components/+network-endpoints/endpoint-details.tsx

@@ -0,0 +1,44 @@
+import "./endpoint-details.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Endpoint, endpointApi } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { EndpointSubsetList } from "./endpoint-subset-list";
+
+interface Props extends KubeObjectDetailsProps<Endpoint> {
+}
+
+@observer
+export class EndpointDetails extends React.Component<Props> {
+  render() {
+    const { object: endpoint } = this.props;
+    if (!endpoint) return;
+    return (
+      <div className="EndpointDetails">
+        <KubeObjectMeta object={endpoint}/>
+        <DrawerTitle title={<Trans>Subsets</Trans>}/>
+        {
+          endpoint.getEndpointSubsets().map((subset) => {
+            return(
+              <EndpointSubsetList subset={subset} endpoint={endpoint}/>
+            )
+          })
+        }
+
+        <KubeEventDetails object={endpoint}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(endpointApi, {
+  Details: EndpointDetails,
+})

src/renderer/components/+network-endpoints/endpoint-subset-list.scss

@@ -0,0 +1,7 @@
+.EndpointSubsetList {
+  .title {
+    margin-top: $margin * 2;
+    margin-bottom: $margin;
+    font-weight: bold;
+  }
+}

src/renderer/components/+network-endpoints/endpoint-subset-list.tsx

@@ -0,0 +1,164 @@
+import "./endpoint-subset-list.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Trans } from "@lingui/macro";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { autobind } from "../../utils";
+import { lookupApiLink } from "../../api/kube-api";
+import { getDetailsUrl } from "../../navigation";
+import { Link } from "react-router-dom";
+
+interface Props {
+  subset: EndpointSubset;
+  endpoint: Endpoint;
+}
+
+@observer
+export class EndpointSubsetList extends React.Component<Props> {
+
+  getAddressTableRow(ip: string) {
+    const { subset } = this.props;
+    const address = subset.getAddresses().find(address => address.getId() == ip);
+    return this.renderAddressTableRow(address)
+  }
+
+  @autobind()
+  getNotReadyAddressTableRow(ip: string) {
+    const { subset} = this.props;
+    const address = subset.getNotReadyAddresses().find(address => address.getId() == ip);
+    return this.renderAddressTableRow(address)
+  }
+
+  @autobind()
+  renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
+    return (
+      <div>
+        <div className="title flex gaps"><Trans>Addresses</Trans></div>
+        <Table
+          items={addresses}
+          selectable={false}
+          virtual={virtual}
+          scrollable={false}
+          getTableRow={this.getAddressTableRow}
+          className="box grow"
+        >
+          <TableHead>
+            <TableCell className="ip">IP</TableCell>
+            <TableCell className="name"><Trans>Hostname</Trans></TableCell>
+            <TableCell className="target">Target</TableCell>
+          </TableHead>
+          {
+            !virtual && addresses.map(address => this.getAddressTableRow(address.getId()))
+          }
+        </Table>
+      </div>
+    )
+  }
+
+  @autobind()
+  renderAddressTableRow(address: EndpointAddress) {
+    const { endpoint } = this.props;
+    return (
+      <TableRow
+        key={address.getId()}
+        nowrap
+      >
+        <TableCell className="ip">{address.ip}</TableCell>
+        <TableCell className="name">{address.hostname}</TableCell>
+        <TableCell className="target">
+          { address.targetRef && (
+            <Link to={getDetailsUrl(lookupApiLink(address.getTargetRef(), endpoint))}>
+              {address.targetRef.name}
+            </Link>
+          )}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  render() {
+    const { subset } = this.props;
+    const addresses = subset.getAddresses();
+    const notReadyAddresses = subset.getNotReadyAddresses();
+    const addressesVirtual = addresses.length > 100;
+    const notReadyAddressesVirtual = notReadyAddresses.length > 100;
+
+    return(
+      <div className="EndpointSubsetList flex column">
+        {addresses.length > 0 && (
+          <div>
+            <div className="title flex gaps"><Trans>Addresses</Trans></div>
+            <Table
+              items={addresses}
+              selectable={false}
+              virtual={addressesVirtual}
+              scrollable={false}
+              getTableRow={this.getAddressTableRow}
+              className="box grow"
+            >
+              <TableHead>
+                <TableCell className="ip">IP</TableCell>
+                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="target">Target</TableCell>
+              </TableHead>
+              { !addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId())) }
+            </Table>
+          </div>
+        )}
+
+        {notReadyAddresses.length > 0 && (
+          <div>
+            <div className="title flex gaps"><Trans>Not Ready Addresses</Trans></div>
+            <Table
+              items={notReadyAddresses}
+              selectable
+              virtual={notReadyAddressesVirtual}
+              scrollable={false}
+              getTableRow={this.getNotReadyAddressTableRow}
+              className="box grow"
+            >
+              <TableHead>
+                <TableCell className="ip">IP</TableCell>
+                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="target">Target</TableCell>
+              </TableHead>
+              { !notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId())) }
+            </Table>
+          </div>
+        )}
+
+        <div className="title flex gaps"><Trans>Ports</Trans></div>
+        <Table
+          selectable={false}
+          virtual={false}
+          scrollable={false}
+          className="box grow"
+        >
+          <TableHead>
+            <TableCell className="port"><Trans>Port</Trans></TableCell>
+            <TableCell className="name"><Trans>Name</Trans></TableCell>
+            <TableCell className="protocol">Protocol</TableCell>
+          </TableHead>
+          {
+            subset.ports.map(port => {
+              return (
+                <TableRow
+                  key={port.port}
+                  nowrap
+                >
+                  <TableCell className="name">{port.port}</TableCell>
+                  <TableCell className="name">{port.name}</TableCell>
+                  <TableCell className="node">{port.protocol}</TableCell>
+                </TableRow>
+              );
+            })
+          }
+        </Table>
+      </div>
+    );
+  }
+}

src/renderer/components/+network-endpoints/endpoints.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+import { buildURL } from "../../navigation";
+
+export const endpointRoute: RouteProps = {
+  path: "/endpoints"
+}
+
+export interface EndpointRouteParams {
+}
+
+export const endpointURL = buildURL<EndpointRouteParams>(endpointRoute.path)

src/renderer/components/+network-endpoints/endpoints.scss

@@ -0,0 +1,7 @@
+.Endpoints {
+  .TableCell {
+    &.endpoints {
+      flex-grow: 5.0;
+    }
+  }
+}

src/renderer/components/+network-endpoints/endpoints.store.ts

@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { Endpoint, endpointApi } from "../../api/endpoints/endpoint.api";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class EndpointStore extends KubeObjectStore<Endpoint> {
+  api = endpointApi
+}
+
+export const endpointStore = new EndpointStore();
+apiManager.registerStore(endpointApi, endpointStore);

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -0,0 +1,72 @@
+import "./endpoints.scss"
+
+import React from "react"
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router-dom"
+import { EndpointRouteParams } from "./endpoints.route"
+import { Endpoint, endpointApi } from "../../api/endpoints/endpoint.api"
+import { endpointStore } from "./endpoints.store";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { Trans } from "@lingui/macro";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<EndpointRouteParams> {
+}
+
+@observer
+export class Endpoints extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="Endpoints" store={endpointStore}
+        sortingCallbacks={{
+          [sortBy.name]: (endpoint: Endpoint) => endpoint.getName(),
+          [sortBy.namespace]: (endpoint: Endpoint) => endpoint.getNs(),
+          [sortBy.age]: (endpoint: Endpoint) => endpoint.metadata.creationTimestamp,
+        }}
+        searchFilters={[
+          (endpoint: Endpoint) => endpoint.getSearchFields()
+        ]}
+        renderHeaderTitle={<Trans>Endpoints</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Endpoints</Trans>, className: "endpoints" },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(endpoint: Endpoint) => [
+          endpoint.getName(),
+          endpoint.getNs(),
+          endpoint.toString(),
+          endpoint.getAge(),
+        ]}
+        renderItemMenu={(item: Endpoint) => {
+          return <EndpointMenu object={item}/>
+        }}
+        tableProps={{
+          customRowHeights: (item: Endpoint, lineHeight, paddings) => {
+            const lines = item.getEndpointSubsets().length || 1;
+            return lines * lineHeight + paddings;
+          }
+        }}
+      />
+    )
+  }
+}
+
+export function EndpointMenu(props: KubeObjectMenuProps<Endpoint>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(endpointApi, {
+  Menu: EndpointMenu
+})

src/renderer/components/+network-endpoints/index.ts

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