Lens restructure (#540)

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

src/renderer/components/+user-management-roles/add-role-dialog.scss

@@ -0,0 +1,5 @@
+.AddRoleDialog {
+  .AceEditor {
+    min-height: 200px;
+  }
+}

src/renderer/components/+user-management-roles/add-role-dialog.tsx

@@ -0,0 +1,79 @@
+import "./add-role-dialog.scss"
+
+import React from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { _i18n } from "../../i18n";
+import { Dialog, DialogProps } from "../dialog";
+import { Wizard, WizardStep } from "../wizard";
+import { Notifications } from "../notifications";
+import { rolesStore } from "./roles.store";
+import { Input } from "../input";
+import { showDetails } from "../../navigation";
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class AddRoleDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+
+  @observable roleName = "";
+
+  static open() {
+    AddRoleDialog.isOpen = true;
+  }
+
+  static close() {
+    AddRoleDialog.isOpen = false;
+  }
+
+  close = () => {
+    AddRoleDialog.close();
+  }
+
+  reset = () => {
+    this.roleName = ""
+  }
+
+  createRole = async () => {
+    try {
+      const role = await rolesStore.create({ name: this.roleName });
+      showDetails(role.selfLink);
+      this.reset();
+      this.close();
+    } catch (err) {
+      Notifications.error(err.toString());
+    }
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const header = <h5><Trans>Create Role</Trans></h5>;
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddRoleDialog"
+        isOpen={AddRoleDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel={<Trans>Create</Trans>}
+            next={this.createRole}
+          >
+            <Input
+              required autoFocus
+              placeholder={_i18n._(t`Role name`)}
+              iconLeft="supervisor_account"
+              value={this.roleName}
+              onChange={v => this.roleName = v}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

src/renderer/components/+user-management-roles/index.ts

@@ -0,0 +1,3 @@
+export * from "./roles"
+export * from "./role-details"
+export * from "./add-role-dialog"

src/renderer/components/+user-management-roles/role-details.scss

@@ -0,0 +1,21 @@
+.RoleDetails {
+  .rule {
+    display: grid;
+    grid-template-columns: min-content auto;
+    gap: $margin;
+
+    border: 1px solid $borderColor;
+    border-radius: $radius;
+    padding: $padding * 1.5;
+
+    > .name {
+      color: $textColorSecondary;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $margin * 2;
+    }
+  }
+}

src/renderer/components/+user-management-roles/role-details.tsx

@@ -0,0 +1,71 @@
+import "./role-details.scss"
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { DrawerTitle } from "../drawer";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { observer } from "mobx-react";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Role> {
+}
+
+@observer
+export class RoleDetails extends React.Component<Props> {
+  render() {
+    const { object: role } = this.props;
+    if (!role) return;
+    const rules = role.getRules();
+    return (
+      <div className="RoleDetails">
+        <KubeObjectMeta object={role}/>
+
+        <DrawerTitle title={<Trans>Rules</Trans>}/>
+        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
+          return (
+            <div className="rule" key={index}>
+              {resources && (
+                <>
+                  <div className="name"><Trans>Resources</Trans></div>
+                  <div className="value">{resources.join(", ")}</div>
+                </>
+              )}
+              {verbs && (
+                <>
+                  <div className="name"><Trans>Verbs</Trans></div>
+                  <div className="value">{verbs.join(", ")}</div>
+                </>
+              )}
+              {apiGroups && (
+                <>
+                  <div className="name"><Trans>Api Groups</Trans></div>
+                  <div className="value">
+                    {apiGroups
+                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+                      .join(", ")
+                    }
+                  </div>
+                </>
+              )}
+              {resourceNames && (
+                <>
+                  <div className="name"><Trans>Resource Names</Trans></div>
+                  <div className="value">{resourceNames.join(", ")}</div>
+                </>
+              )}
+            </div>
+          )
+        })}
+
+        <KubeEventDetails object={role}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews([roleApi, clusterRoleApi], {
+  Details: RoleDetails,
+})

src/renderer/components/+user-management-roles/roles.scss

@@ -0,0 +1,5 @@
+.Roles {
+  .help-icon {
+    margin-left: $margin / 2;
+  }
+}

src/renderer/components/+user-management-roles/roles.store.ts

@@ -0,0 +1,51 @@
+import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
+import { autobind } from "../../utils";
+import { KubeObjectStore } from "../../kube-object.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class RolesStore extends KubeObjectStore<Role> {
+  api = clusterRoleApi
+
+  subscribe() {
+    return super.subscribe([roleApi, clusterRoleApi])
+  }
+
+  protected sortItems(items: Role[]) {
+    return super.sortItems(items, [
+      role => role.kind,
+      role => role.getName(),
+    ])
+  }
+
+  protected loadItem(params: { name: string; namespace?: string }) {
+    if (params.namespace) return roleApi.get(params)
+    return clusterRoleApi.get(params)
+  }
+
+  protected loadItems(namespaces?: string[]): Promise<Role[]> {
+    if (namespaces) {
+      return Promise.all(
+        namespaces.map(namespace => roleApi.list({ namespace }))
+      ).then(items => items.flat())
+    }
+    else {
+      return Promise.all([clusterRoleApi.list(), roleApi.list()])
+        .then(items => items.flat())
+    }
+  }
+
+  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<Role>) {
+    if (params.namespace) {
+      return roleApi.create(params, data)
+    }
+    else {
+      return clusterRoleApi.create(params, data)
+    }
+  }
+}
+
+export const rolesStore = new RolesStore();
+
+apiManager.registerStore(roleApi, rolesStore);
+apiManager.registerStore(clusterRoleApi, rolesStore);

src/renderer/components/+user-management-roles/roles.tsx

@@ -0,0 +1,73 @@
+import "./roles.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { IRolesRouteParams } from "../+user-management/user-management.routes";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { rolesStore } from "./roles.store";
+import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
+import { KubeObjectListLayout } from "../kube-object";
+import { AddRoleDialog } from "./add-role-dialog";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IRolesRouteParams> {
+}
+
+@observer
+export class Roles extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          className="Roles"
+          store={rolesStore}
+          sortingCallbacks={{
+            [sortBy.name]: (role: Role) => role.getName(),
+            [sortBy.namespace]: (role: Role) => role.getNs(),
+            [sortBy.age]: (role: Role) => role.metadata.creationTimestamp,
+          }}
+          searchFilters={[
+            (role: Role) => role.getSearchFields(),
+          ]}
+          renderHeaderTitle={<Trans>Roles</Trans>}
+          renderTableHeader={[
+            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          ]}
+          renderTableContents={(role: Role) => [
+            role.getName(),
+            role.getNs() || "-",
+            role.getAge(),
+          ]}
+          renderItemMenu={(item: Role) => {
+            return <RoleMenu object={item}/>
+          }}
+          addRemoveButtons={{
+            onAdd: () => AddRoleDialog.open(),
+            addTooltip: <Trans>Create new Role</Trans>,
+          }}
+        />
+        <AddRoleDialog/>
+      </>
+    )
+  }
+}
+
+export function RoleMenu(props: KubeObjectMenuProps<Role>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews([roleApi, clusterRoleApi], {
+  Menu: RoleMenu,
+});