Implement endpoints section (#246)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

dashboard/client/components/+network-endpoints/endpoint-details.scss

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

dashboard/client/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,
+})

dashboard/client/components/+network-endpoints/endpoint-subset-list.scss

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

dashboard/client/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>
+    );
+  }
+}

dashboard/client/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)

dashboard/client/components/+network-endpoints/endpoints.scss

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

dashboard/client/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);

dashboard/client/components/+network-endpoints/endpoints.tsx

@@ -0,0 +1,72 @@
+import "./endpoints.scss"
+
+import * as 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.getAge(false),
+        }}
+        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
+})

dashboard/client/components/+network-endpoints/index.ts

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

dashboard/client/components/+network-services/service-details-endpoint.tsx

@@ -0,0 +1,49 @@
+import { KubeObject } from "../../api/kube-object";
+import { observer } from "mobx-react";
+import React from "react";
+import { Table, TableHead, TableCell, TableRow } from "../table";
+import { prevDefault } from "../../utils";
+import { showDetails } from "../../navigation";
+import { Trans } from "@lingui/macro";
+import { endpointStore } from "../+network-endpoints/endpoints.store";
+import { Spinner } from "../spinner";
+
+interface Props {
+  endpoint: KubeObject;
+}
+
+@observer
+export class ServiceDetailsEndpoint extends React.Component<Props> {
+  render() {
+    const { endpoint } = this.props
+    if (!endpoint && !endpointStore.isLoaded) return (
+      <div className="PodDetailsList flex justify-center"><Spinner/></div>
+    );
+    if (!endpoint) {
+      return null
+    }
+    return (
+        <div className="EndpointList flex column">
+        <Table
+        selectable
+        virtual={false}
+        scrollable={false}
+        className="box grow"
+        >
+        <TableHead>
+          <TableCell className="name" ><Trans>Name</Trans></TableCell>
+          <TableCell className="endpoints"><Trans>Endpoints</Trans></TableCell>
+        </TableHead>
+        <TableRow
+        key={endpoint.getId()}
+        nowrap
+        onClick={prevDefault(() => showDetails(endpoint.selfLink, false))}
+        >
+        <TableCell className="name">{endpoint.getName()}</TableCell>
+        <TableCell className="endpoints">{ endpoint.toString()}</TableCell>
+        </TableRow>
+        </Table>
+      </div>
+    )
+  }
+}

dashboard/client/components/+network-services/service-details.scss

@@ -1,2 +1,9 @@
 .ServicesDetails {
+    .EndpointList{
+        .TableCell {
+          &.endpoints {
+            flex-grow: 3;
+          }
+        }
+      }
 }

dashboard/client/components/+network-services/service-details.tsx

@@ -7,21 +7,31 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Service, serviceApi } from "../../api/endpoints";
+import { Service, serviceApi, endpointApi } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
 import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { ServicePorts } from "./service-ports";
+import { endpointStore } from "../+network-endpoints/endpoints.store";
+import { ServiceDetailsEndpoint } from "./service-details-endpoint";
 
 interface Props extends KubeObjectDetailsProps<Service> {
 }
 
 @observer
 export class ServiceDetails extends React.Component<Props> {
+  componentDidMount() {
+    if (!endpointStore.isLoaded) {
+      endpointStore.loadAll();
+    }
+    endpointApi.watch()
+  }
+
   render() {
     const { object: service } = this.props;
     if (!service) return;
     const { spec } = service;
+    const endpoint = endpointStore.getByName(service.getName(), service.getNs())
     return (
       <div className="ServicesDetails">
         <KubeObjectMeta object={service}/>
@@ -59,6 +69,9 @@ export class ServiceDetails extends React.Component<Props> {
             {spec.loadBalancerIP}
           </DrawerItem>
         )}
+        <DrawerTitle title={_i18n._(t`Endpoint`)}/>
+
+        <ServiceDetailsEndpoint endpoint={endpoint} />
 
         <KubeEventDetails object={service}/>
       </div>

dashboard/client/components/+network/network.tsx

@@ -7,6 +7,7 @@ import { RouteComponentProps } from "react-router-dom";
 import { Trans } from "@lingui/macro";
 import { MainLayout, TabRoute } from "../layout/main-layout";
 import { Services, servicesRoute, servicesURL } from "../+network-services";
+import { Endpoints, endpointRoute, endpointURL } from "../+network-endpoints";
 import { Ingresses, ingressRoute, ingressURL } from "../+network-ingresses";
 import { NetworkPolicies, networkPoliciesRoute, networkPoliciesURL } from "../+network-policies";
 import { namespaceStore } from "../+namespaces/namespace.store";
@@ -26,6 +27,12 @@ export class Network extends React.Component<Props> {
         url: servicesURL({ query }),
         path: servicesRoute.path,
       },
+      {
+        title: <Trans>Endpoints</Trans>,
+        component: Endpoints,
+        url: endpointURL({ query }),
+        path: endpointRoute.path,
+      },
       {
         title: <Trans>Ingresses</Trans>,
         component: Ingresses,