Lens restructure (#540)

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

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

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

src/renderer/components/+storage/storage-mixins.scss

@@ -0,0 +1,40 @@
+// PersistentVolumes
+$pv-bound: $colorOk;
+$pv-available: $colorSuccess;
+$pv-released: $colorWarning;
+$pv-failed: $colorError;
+
+// PersistentVolumeClaims
+$pvc-bound: $colorOk;
+$pvc-pending: $colorWarning;
+$pvc-lost: $colorError;
+
+// PersistentVolume Statuses
+$pv-status-color-list: (
+  bound: $pv-bound,
+  available: $pv-available,
+  released: $pv-released,
+  failed: $pv-failed
+);
+
+$pvc-status-color-list: (
+  bound: $pvc-bound,
+  pending: $pvc-pending,
+  lost: $pvc-lost
+);
+
+@mixin pv-status-colors {
+  @each $condition, $color in $pv-status-color-list {
+    &.#{$condition} {
+      color: $color;
+    }
+  }
+}
+
+@mixin pvc-status-colors {
+  @each $condition, $color in $pvc-status-color-list {
+    &.#{$condition} {
+      color: $color;
+    }
+  }
+}

src/renderer/components/+storage/storage.route.ts

@@ -0,0 +1,12 @@
+import { RouteProps } from "react-router"
+import { volumeClaimsURL } from "../+storage-volume-claims";
+import { Storage } from "./storage";
+import { IURLParams } from "../../navigation";
+
+export const storageRoute: RouteProps = {
+  get path() {
+    return Storage.tabRoutes.map(({ path }) => path).flat()
+  }
+}
+
+export const storageURL = (params?: IURLParams) => volumeClaimsURL(params);

src/renderer/components/+storage/storage.scss

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

src/renderer/components/+storage/storage.tsx

@@ -0,0 +1,64 @@
+import "./storage.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 { PersistentVolumes, volumesRoute, volumesURL } from "../+storage-volumes";
+import { StorageClasses, storageClassesRoute, storageClassesURL } from "../+storage-classes";
+import { PersistentVolumeClaims, volumeClaimsRoute, volumeClaimsURL } from "../+storage-volume-claims";
+import { configStore } from "../../config.store";
+import { namespaceStore } from "../+namespaces/namespace.store";
+import { storageURL } from "./storage.route";
+
+interface Props extends RouteComponentProps<{}> {
+}
+
+@observer
+export class Storage extends React.Component<Props> {
+  static get tabRoutes() {
+    const tabRoutes: TabRoute[] = [];
+    const { allowedResources } = configStore;
+    const query = namespaceStore.getContextParams()
+
+    tabRoutes.push({
+      title: <Trans>Persistent Volume Claims</Trans>,
+      component: PersistentVolumeClaims,
+      url: volumeClaimsURL({ query }),
+      path: volumeClaimsRoute.path,
+    })
+
+    if (allowedResources.includes('persistentvolumes')) {
+      tabRoutes.push({
+        title: <Trans>Persistent Volumes</Trans>,
+        component: PersistentVolumes,
+        url: volumesURL(),
+        path: volumesRoute.path,
+      });
+    }
+
+    if (allowedResources.includes('storageclasses')) {
+      tabRoutes.push({
+        title: <Trans>Storage Classes</Trans>,
+        component: StorageClasses,
+        url: storageClassesURL(),
+        path: storageClassesRoute.path,
+      })
+    }
+    return tabRoutes;
+  }
+
+  render() {
+    const tabRoutes = Storage.tabRoutes;
+    return (
+      <MainLayout className="Storage" tabs={tabRoutes}>
+        <Switch>
+          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
+          <Redirect to={storageURL({ query: namespaceStore.getContextParams() })}/>
+        </Switch>
+      </MainLayout>
+    )
+  }
+}