Lens restructure (#540)

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

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

@@ -0,0 +1,3 @@
+export * from "./network-policies.route"
+export * from "./network-policies"
+export * from "./network-policy-details"

src/renderer/components/+network-policies/network-policies.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+import { buildURL } from "../../navigation";
+
+export const networkPoliciesRoute: RouteProps = {
+  path: "/network-policies"
+}
+
+export interface INetworkPoliciesRouteParams {
+}
+
+export const networkPoliciesURL = buildURL<INetworkPoliciesRouteParams>(networkPoliciesRoute.path);

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

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

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

@@ -0,0 +1,66 @@
+import "./network-policies.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router-dom";
+import { NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { INetworkPoliciesRouteParams } from "./network-policies.route";
+import { networkPolicyStore } from "./network-policy.store";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<INetworkPoliciesRouteParams> {
+}
+
+@observer
+export class NetworkPolicies extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="NetworkPolicies" store={networkPolicyStore}
+        sortingCallbacks={{
+          [sortBy.name]: (item: NetworkPolicy) => item.getName(),
+          [sortBy.namespace]: (item: NetworkPolicy) => item.getNs(),
+          [sortBy.age]: (item: NetworkPolicy) => item.metadata.creationTimestamp,
+        }}
+        searchFilters={[
+          (item: NetworkPolicy) => item.getSearchFields(),
+        ]}
+        renderHeaderTitle={<Trans>Network Policies</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Policy Types</Trans>, className: "type" },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(item: NetworkPolicy) => [
+          item.getName(),
+          item.getNs(),
+          item.getTypes().join(", "),
+          item.getAge(),
+        ]}
+        renderItemMenu={(item: NetworkPolicy) => {
+          return <NetworkPolicyMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function NetworkPolicyMenu(props: KubeObjectMenuProps<NetworkPolicy>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(networkPolicyApi, {
+  Menu: NetworkPolicyMenu,
+})

src/renderer/components/+network-policies/network-policy-details.scss

@@ -0,0 +1,5 @@
+.NetworkPolicyDetails {
+  .SubTitle {
+    text-transform: none
+  }
+}

src/renderer/components/+network-policies/network-policy-details.tsx

@@ -0,0 +1,149 @@
+import "./network-policy-details.scss"
+
+import get from "lodash/get";
+import React, { Fragment } from "react";
+import { t, Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
+import { Badge } from "../badge";
+import { SubTitle } from "../layout/sub-title";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { observer } from "mobx-react";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<NetworkPolicy> {
+}
+
+@observer
+export class NetworkPolicyDetails extends React.Component<Props> {
+  renderIngressFrom(ingress: IPolicyIngress) {
+    const { from } = ingress;
+    if (!from) return null;
+    return (
+      <>
+        <SubTitle title={<Trans>From</Trans>}/>
+        {from.map(item =>
+          Object.keys(item).map(key => {
+            const data = get(item, key)
+            if (key === "ipBlock") {
+              const { cidr, except } = data as IPolicyIpBlock;
+              if (!cidr) return
+              return (
+                <DrawerItem name={key} key={key}>
+                  cidr: {cidr}, {" "}
+                  {except &&
+                  `except: ${except.join(", ")}`
+                  }
+                </DrawerItem>
+              )
+            }
+            const selector: IPolicySelector = data
+            if (selector.matchLabels) {
+              return (
+                <DrawerItem name={key} key={key}>
+                  {
+                    Object
+                      .entries(selector.matchLabels)
+                      .map(data => data.join(": "))
+                      .join(", ")
+                  }
+                </DrawerItem>
+              )
+            }
+            else {
+              return (<DrawerItem name={key} key={key}>(empty)</DrawerItem>);
+            }
+          })
+        )}
+      </>
+    );
+  }
+
+  renderEgressTo(egress: IPolicyEgress) {
+    const { to } = egress;
+    if (!to) return null;
+    return (
+      <>
+        <SubTitle title={<Trans>To</Trans>}/>
+        {to.map(item => {
+          const { ipBlock } = item
+          if (!ipBlock) return
+          const { cidr, except } = ipBlock
+          if (!cidr) return
+          return (
+            <DrawerItem name="ipBlock" key={cidr}>
+              cidr: {cidr}, {" "}
+              {except &&
+              `except: ${except.join(", ")}`
+              }
+            </DrawerItem>
+          )
+        })}
+      </>
+    );
+  }
+
+  render() {
+    const { object: policy } = this.props;
+    if (!policy) {
+      return null;
+    }
+    const { ingress, egress } = policy.spec;
+    const selector = policy.getMatchLabels();
+    return (
+      <div className="NetworkPolicyDetails">
+        <KubeObjectMeta object={policy}/>
+
+        <DrawerItem name={<Trans>Pod Selector</Trans>} labelsOnly={selector.length > 0}>
+          {selector.length > 0 ?
+            policy.getMatchLabels().map(label => <Badge key={label} label={label}/>) :
+            _i18n._(t`(empty) (Allowing the specific traffic to all pods in this namespace)`)
+          }
+        </DrawerItem>
+
+        {ingress && (
+          <>
+            <DrawerTitle title={_i18n._(t`Ingress`)}/>
+            {ingress.map((ingress, i) => {
+              const { ports } = ingress;
+              return (
+                <Fragment key={i}>
+                  <DrawerItem name={<Trans>Ports</Trans>}>
+                    {ports && ports.map(({ port, protocol }) => `${protocol || ""}:${port || ""}`).join(", ")}
+                  </DrawerItem>
+                  {this.renderIngressFrom(ingress)}
+                </Fragment>
+              )
+            })}
+          </>
+        )}
+
+        {egress && (
+          <>
+            <DrawerTitle title={<Trans>Egress</Trans>}/>
+            {egress.map((egress, i) => {
+              const { ports } = egress;
+              return (
+                <Fragment key={i}>
+                  <DrawerItem name={<Trans>Ports</Trans>}>
+                    {ports && ports.map(({ port, protocol }) => `${protocol || ""}:${port || ""}`).join(", ")}
+                  </DrawerItem>
+                  {this.renderEgressTo(egress)}
+                </Fragment>
+              )
+            })}
+          </>
+        )}
+
+        <KubeEventDetails object={policy}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(networkPolicyApi, {
+  Details: NetworkPolicyDetails
+})

src/renderer/components/+network-policies/network-policy.store.ts

@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class NetworkPolicyStore extends KubeObjectStore<NetworkPolicy> {
+  api = networkPolicyApi
+}
+
+export const networkPolicyStore = new NetworkPolicyStore();
+apiManager.registerStore(networkPolicyApi, networkPolicyStore);