Lens app source code (#119)

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

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

@@ -0,0 +1,2 @@
+export * from "./network.route"
+export * from "./network"

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

@@ -0,0 +1,12 @@
+$service-status-color-list: (
+  active: $colorOk,
+  pending: $colorWarning
+);
+
+@mixin service-status-colors {
+  @each $status, $color in $service-status-color-list {
+    &.#{$status} {
+      color: $color;
+    }
+  }
+}

dashboard/client/components/+network/network.route.ts

@@ -0,0 +1,12 @@
+import { RouteProps } from "react-router"
+import { Network } from "./network";
+import { servicesURL } from "../+network-services";
+import { IURLParams } from "../../navigation";
+
+export const networkRoute: RouteProps = {
+  get path() {
+    return Network.tabRoutes.map(({ path }) => path).flat()
+  }
+}
+
+export const networkURL = (params?: IURLParams) => servicesURL(params);

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

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

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

@@ -0,0 +1,55 @@
+import "./network.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Redirect, Route, Switch } from "react-router";
+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 { Ingresses, ingressRoute, ingressURL } from "../+network-ingresses";
+import { NetworkPolicies, networkPoliciesRoute, networkPoliciesURL } from "../+network-policies";
+import { namespaceStore } from "../+namespaces/namespace.store";
+import { networkURL } from "./network.route";
+
+interface Props extends RouteComponentProps<{}> {
+}
+
+@observer
+export class Network extends React.Component<Props> {
+  static get tabRoutes(): TabRoute[] {
+    const query = namespaceStore.getContextParams()
+    return [
+      {
+        title: <Trans>Services</Trans>,
+        component: Services,
+        url: servicesURL({ query }),
+        path: servicesRoute.path,
+      },
+      {
+        title: <Trans>Ingresses</Trans>,
+        component: Ingresses,
+        url: ingressURL({ query }),
+        path: ingressRoute.path,
+      },
+      {
+        title: <Trans>Network Policies</Trans>,
+        component: NetworkPolicies,
+        url: networkPoliciesURL({ query }),
+        path: networkPoliciesRoute.path,
+      },
+    ]
+  }
+
+  render() {
+    const tabRoutes = Network.tabRoutes;
+    return (
+      <MainLayout className="Network" tabs={tabRoutes}>
+        <Switch>
+          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
+          <Redirect to={networkURL({ query: namespaceStore.getContextParams() })}/>
+        </Switch>
+      </MainLayout>
+    )
+  }
+}