Lens restructure (#540)

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

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

@@ -0,0 +1,3 @@
+export * from "./workloads.route"
+export * from "./workloads"
+

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

@@ -0,0 +1,83 @@
+// Pods
+$pod-status-running-color: $colorOk;
+$pod-status-pending-color: $colorWarning;
+$pod-status-evicted-color: $colorError;
+$pod-status-succeeded-color: $colorSuccess;
+$pod-status-failed-color: $colorError;
+$pod-status-terminated-color: $colorTerminated;
+$pod-status-terminating-color: $colorTerminated;
+$pod-status-unknown-color: $colorVague;
+$pod-status-complete-color: $colorSuccess;
+$pod-status-crash-loop-color: $colorError;
+$pod-scheduled: $colorOk;
+$pod-ready: $colorOk;
+$pod-initialized: $colorOk;
+$pod-unschedulable: $colorError;
+$pod-containers-ready: $colorInfo;
+$pod-error: $colorError;
+$pod-container-creating: $colorInfo;
+
+// Deployments
+$deployment-available: $colorOk;
+$deployment-progressing: $colorInfo;
+$deployment-replicafailure: $colorError;
+
+// Jobs
+$job-complete: $colorSuccess;
+$job-failed: $colorError;
+
+// Pod Statuses
+$pod-status-color-list: (
+  running: $pod-status-running-color,
+  pending: $pod-status-pending-color,
+  evicted: $pod-status-evicted-color,
+  waiting: $pod-status-pending-color,
+  succeeded: $pod-status-succeeded-color,
+  failed: $pod-status-failed-color,
+  terminating: $pod-status-terminating-color,
+  terminated: $pod-status-terminated-color,
+  completed: $pod-status-complete-color,
+  crash-loop-back-off: $pod-status-crash-loop-color,
+  error: $pod-error,
+  container-creating: $pod-container-creating,
+);
+
+// Job Conditions
+$job-condition-color-list: (
+  complete: $job-complete,
+  failed: $job-failed,
+);
+
+@mixin pod-status-bgs {
+  @each $status, $color in $pod-status-color-list {
+    &.#{$status} {
+      color: white;
+      background: $color;
+    }
+  }
+}
+
+@mixin pod-status-colors {
+  @each $status, $color in $pod-status-color-list {
+    &.#{$status} {
+      color: $color;
+    }
+  }
+}
+
+@mixin job-condition-bgs {
+  @each $condition, $color in $job-condition-color-list {
+    &.#{$condition} {
+      color: white;
+      background: $color;
+    }
+  }
+}
+
+@mixin job-condition-colors {
+  @each $condition, $color in $job-condition-color-list {
+    &.#{$condition} {
+      color: $color;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import { RouteProps } from "react-router"
+import { Workloads } from "./workloads";
+import { buildURL, IURLParams } from "../../navigation";
+
+export const workloadsRoute: RouteProps = {
+  get path() {
+    return Workloads.tabRoutes.map(({ path }) => path).flat()
+  }
+}
+
+// Routes
+export const overviewRoute: RouteProps = {
+  path: "/workloads"
+}
+export const podsRoute: RouteProps = {
+  path: "/pods"
+}
+export const deploymentsRoute: RouteProps = {
+  path: "/deployments"
+}
+export const daemonSetsRoute: RouteProps = {
+  path: "/daemonsets"
+}
+export const statefulSetsRoute: RouteProps = {
+  path: "/statefulsets"
+}
+export const jobsRoute: RouteProps = {
+  path: "/jobs"
+}
+export const cronJobsRoute: RouteProps = {
+  path: "/cronjobs"
+}
+
+// Route params
+export interface IWorkloadsOverviewRouteParams {
+}
+
+export interface IPodsRouteParams {
+}
+
+export interface IDeploymentsRouteParams {
+}
+
+export interface IDaemonSetsRouteParams {
+}
+
+export interface IStatefulSetsRouteParams {
+}
+
+export interface IJobsRouteParams {
+}
+
+export interface ICronJobsRouteParams {
+}
+
+// URL-builders
+export const workloadsURL = (params?: IURLParams) => overviewURL(params);
+export const overviewURL = buildURL<IWorkloadsOverviewRouteParams>(overviewRoute.path)
+export const podsURL = buildURL<IPodsRouteParams>(podsRoute.path)
+export const deploymentsURL = buildURL<IDeploymentsRouteParams>(deploymentsRoute.path)
+export const daemonSetsURL = buildURL<IDaemonSetsRouteParams>(daemonSetsRoute.path)
+export const statefulSetsURL = buildURL<IStatefulSetsRouteParams>(statefulSetsRoute.path)
+export const jobsURL = buildURL<IJobsRouteParams>(jobsRoute.path)
+export const cronJobsURL = buildURL<ICronJobsRouteParams>(cronJobsRoute.path)

src/renderer/components/+workloads/workloads.scss

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

src/renderer/components/+workloads/workloads.tsx

@@ -0,0 +1,97 @@
+import "./workloads.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 { WorkloadsOverview } from "../+workloads-overview/overview";
+import { cronJobsRoute, cronJobsURL, daemonSetsRoute, daemonSetsURL, deploymentsRoute, deploymentsURL, jobsRoute, jobsURL, overviewRoute, overviewURL, podsRoute, podsURL, statefulSetsRoute, statefulSetsURL, workloadsURL } from "./workloads.route";
+import { namespaceStore } from "../+namespaces/namespace.store";
+import { Pods } from "../+workloads-pods";
+import { Deployments } from "../+workloads-deployments";
+import { DaemonSets } from "../+workloads-daemonsets";
+import { StatefulSets } from "../+workloads-statefulsets";
+import { Jobs } from "../+workloads-jobs";
+import { CronJobs } from "../+workloads-cronjobs";
+import { isAllowedResource } from "../../api/rbac"
+
+interface Props extends RouteComponentProps {
+}
+
+@observer
+export class Workloads extends React.Component<Props> {
+  static get tabRoutes(): TabRoute[] {
+    const query = namespaceStore.getContextParams();
+    const routes: TabRoute[] = [
+      {
+        title: <Trans>Overview</Trans>,
+        component: WorkloadsOverview,
+        url: overviewURL({ query }),
+        path: overviewRoute.path
+      }
+    ]
+    if (isAllowedResource("pods")) {
+      routes.push({
+        title: <Trans>Pods</Trans>,
+        component: Pods,
+        url: podsURL({ query }),
+        path: podsRoute.path
+      })
+    }
+    if (isAllowedResource("deployments")) {
+      routes.push({
+        title: <Trans>Deployments</Trans>,
+        component: Deployments,
+        url: deploymentsURL({ query }),
+        path: deploymentsRoute.path,
+      })
+    }
+    if (isAllowedResource("daemonsets")) {
+      routes.push({
+        title: <Trans>DaemonSets</Trans>,
+        component: DaemonSets,
+        url: daemonSetsURL({ query }),
+        path: daemonSetsRoute.path,
+      })
+    }
+    if (isAllowedResource("statefulsets")) {
+      routes.push({
+        title: <Trans>StatefulSets</Trans>,
+        component: StatefulSets,
+        url: statefulSetsURL({ query }),
+        path: statefulSetsRoute.path,
+      })
+    }
+    if (isAllowedResource("jobs")) {
+      routes.push({
+        title: <Trans>Jobs</Trans>,
+        component: Jobs,
+        url: jobsURL({ query }),
+        path: jobsRoute.path,
+      })
+    }
+    if (isAllowedResource("cronjobs")) {
+      routes.push({
+        title: <Trans>CronJobs</Trans>,
+        component: CronJobs,
+        url: cronJobsURL({ query }),
+        path: cronJobsRoute.path,
+      })
+    }
+    return routes;
+  }
+
+  render() {
+    const tabRoutes = Workloads.tabRoutes;
+    return (
+      <MainLayout className="Workloads" tabs={tabRoutes}>
+        <Switch>
+          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
+          <Redirect to={workloadsURL({ query: namespaceStore.getContextParams() })}/>
+        </Switch>
+      </MainLayout>
+    )
+  }
+}