Lens restructure (#540)

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

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+import "./network.scss"
+
+import 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 { 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";
+import { networkURL } from "./network.route";
+import { isAllowedResource } from "../../api/rbac";
+
+interface Props extends RouteComponentProps<{}> {
+}
+
+@observer
+export class Network extends React.Component<Props> {
+  static get tabRoutes(): TabRoute[] {
+    const query = namespaceStore.getContextParams()
+    const routes: TabRoute[] = [];
+    if (isAllowedResource("services")) {
+      routes.push({
+        title: <Trans>Services</Trans>,
+        component: Services,
+        url: servicesURL({ query }),
+        path: servicesRoute.path,
+      })
+    }
+    if (isAllowedResource("endpoints")) {
+      routes.push({
+        title: <Trans>Endpoints</Trans>,
+        component: Endpoints,
+        url: endpointURL({ query }),
+        path: endpointRoute.path,
+      })
+    }
+    if (isAllowedResource("ingresses")) {
+      routes.push({
+        title: <Trans>Ingresses</Trans>,
+        component: Ingresses,
+        url: ingressURL({ query }),
+        path: ingressRoute.path,
+      })
+    }
+    if (isAllowedResource("networkpolicies")) {
+      routes.push({
+        title: <Trans>Network Policies</Trans>,
+        component: NetworkPolicies,
+        url: networkPoliciesURL({ query }),
+        path: networkPoliciesRoute.path,
+      })
+    }
+    return routes
+  }
+
+  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>
+    )
+  }
+}