Lens app source code (#119)

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

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

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

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

@@ -0,0 +1,3 @@
+.ServicesDetails {
+
+}

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

@@ -0,0 +1,70 @@
+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 } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Service> {
+}
+
+@observer
+export class ServiceDetails extends React.Component<Props> {
+  render() {
+    const { object: service } = this.props;
+    if (!service) return;
+    const { spec } = service;
+    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>} labelsOnly>
+          {service.getPorts().map(port => <Badge key={port} label={port}/>)}
+        </DrawerItem>
+
+        {spec.type === "LoadBalancer" && spec.loadBalancerIP && (
+          <DrawerItem name={<Trans>Load Balancer IP</Trans>}>
+            {spec.loadBalancerIP}
+          </DrawerItem>
+        )}
+
+        <KubeEventDetails object={service}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(serviceApi, {
+  Details: ServiceDetails,
+})

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

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

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

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

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