Lens restructure (#540)

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

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

@@ -0,0 +1,3 @@
+export * from "./services.route"
+export * from "./services"
+export * from "./service-details"

src/renderer/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>
+    )
+  }
+}

src/renderer/components/+network-services/service-details.scss

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

src/renderer/components/+network-services/service-details.tsx

@@ -0,0 +1,84 @@
+import "./service-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 { 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}/>
+
+        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+          {service.getSelector().map(selector => <Badge key={selector} label={selector}/>)}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Type</Trans>}>
+          {spec.type}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Session Affinity</Trans>}>
+          {spec.sessionAffinity}
+        </DrawerItem>
+
+        <DrawerTitle title={_i18n._(t`Connection`)}/>
+
+        <DrawerItem name={<Trans>Cluster IP</Trans>}>
+          {spec.clusterIP}
+        </DrawerItem>
+
+        {service.getExternalIps().length > 0 && (
+          <DrawerItem name={<Trans>External IPs</Trans>}>
+            {service.getExternalIps().map(ip => <div key={ip}>{ip}</div>)}
+          </DrawerItem>
+        )}
+
+        <DrawerItem name={<Trans>Ports</Trans>}>
+          <ServicePorts service={service}/>
+        </DrawerItem>
+
+        {spec.type === "LoadBalancer" && spec.loadBalancerIP && (
+          <DrawerItem name={<Trans>Load Balancer IP</Trans>}>
+            {spec.loadBalancerIP}
+          </DrawerItem>
+        )}
+        <DrawerTitle title={_i18n._(t`Endpoint`)}/>
+
+        <ServiceDetailsEndpoint endpoint={endpoint} />
+
+        <KubeEventDetails object={service}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(serviceApi, {
+  Details: ServiceDetails,
+})

src/renderer/components/+network-services/service-ports.scss

@@ -0,0 +1,24 @@
+.ServicePorts {
+  &.waiting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  p {
+    &:not(:last-child) {
+      margin-bottom: $margin;
+    }
+
+    span {
+      cursor: pointer;
+      color: $primary;
+      text-decoration: underline;
+    }
+  }
+
+  .Spinner {
+    --spinner-size: #{$unit * 2};
+    margin-left: $margin;
+    position: absolute;
+  }
+}

src/renderer/components/+network-services/service-ports.tsx

@@ -0,0 +1,54 @@
+import "./service-ports.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { t } from "@lingui/macro";
+import { Service, ServicePort } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiBase } from "../../api"
+import { observable } from "mobx";
+import { cssNames } from "../../utils";
+import { Notifications } from "../notifications";
+import { Spinner } from "../spinner"
+
+interface Props {
+  service: Service;
+}
+
+@observer
+export class ServicePorts extends React.Component<Props> {
+  @observable waiting = false;
+
+  async portForward(port: ServicePort) {
+    const { service } = this.props;
+    this.waiting = true;
+    apiBase.post(`/services/${service.getNs()}/${service.getName()}/port-forward/${port.port}`, {})
+      .catch(error => {
+        Notifications.error(error);
+      })
+      .finally(() => {
+        this.waiting = false;
+      });
+  }
+
+  render() {
+    const { service } = this.props;
+    return (
+      <div className={cssNames("ServicePorts", { waiting: this.waiting })}>
+        {
+          service.getPorts().map((port) => {
+            return(
+              <p key={port.toString()}>
+                <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward(port) }>
+                  {port.toString()}
+                  {this.waiting && (
+                    <Spinner />
+                  )}
+                </span>
+              </p>
+            );
+          })}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+import { buildURL } from "../../navigation";
+
+export const servicesRoute: RouteProps = {
+  path: "/services"
+}
+
+export interface IServicesRouteParams {
+}
+
+export const servicesURL = buildURL<IServicesRouteParams>(servicesRoute.path);

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

@@ -0,0 +1,20 @@
+.Services {
+  .TableCell {
+    &.type {
+      flex: 0.6;
+    }
+
+    &.age {
+      flex: 0.4;
+    }
+
+    &.selector {
+      @include table-cell-labels-offsets;
+    }
+
+    &.status {
+      @include service-status-colors;
+      flex: 0.6;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { Service, serviceApi } from "../../api/endpoints/service.api";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class ServiceStore extends KubeObjectStore<Service> {
+  api = serviceApi
+}
+
+export const serviceStore = new ServiceStore();
+apiManager.registerStore(serviceApi, serviceStore);

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

@@ -0,0 +1,89 @@
+import "./services.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { IServicesRouteParams } from "./services.route";
+import { Service, serviceApi } from "../../api/endpoints/service.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { Badge } from "../badge";
+import { serviceStore } from "./services.store";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  selector = "selector",
+  ports = "port",
+  clusterIp = "cluster-ip",
+  age = "age",
+  type = "type",
+  status = "status",
+}
+
+interface Props extends RouteComponentProps<IServicesRouteParams> {
+}
+
+@observer
+export class Services extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="Services" store={serviceStore}
+        sortingCallbacks={{
+          [sortBy.name]: (service: Service) => service.getName(),
+          [sortBy.namespace]: (service: Service) => service.getNs(),
+          [sortBy.selector]: (service: Service) => service.getSelector(),
+          [sortBy.ports]: (service: Service) => (service.spec.ports || []).map(({ port }) => port)[0],
+          [sortBy.clusterIp]: (service: Service) => service.getClusterIp(),
+          [sortBy.type]: (service: Service) => service.getType(),
+          [sortBy.age]: (service: Service) => service.metadata.creationTimestamp,
+          [sortBy.status]: (service: Service) => service.getStatus(),
+        }}
+        searchFilters={[
+          (service: Service) => service.getSearchFields(),
+          (service: Service) => service.getSelector().join(" "),
+          (service: Service) => service.getPorts().join(" "),
+        ]}
+        renderHeaderTitle={<Trans>Services</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
+          { title: <Trans>Cluster IP</Trans>, className: "clusterIp", sortBy: sortBy.clusterIp, },
+          { title: <Trans>Ports</Trans>, className: "ports", sortBy: sortBy.ports },
+          { title: <Trans>External IP</Trans>, className: "externalIp" },
+          { title: <Trans>Selector</Trans>, className: "selector", sortBy: sortBy.selector },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+        ]}
+        renderTableContents={(service: Service) => [
+          service.getName(),
+          service.getNs(),
+          service.getType(),
+          service.getClusterIp(),
+          service.getPorts().join(", "),
+          service.getExternalIps().join(", ") || "-",
+          service.getSelector().map(label => <Badge key={label} label={label}/>),
+          service.getAge(),
+          { title: service.getStatus(), className: service.getStatus().toLowerCase() },
+        ]}
+        renderItemMenu={(item: Service) => {
+          return <ServiceMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function ServiceMenu(props: KubeObjectMenuProps<Service>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(serviceApi, {
+  Menu: ServiceMenu
+})