Lens restructure (#540)

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

src/renderer/components/+namespaces/add-namespace-dialog.scss

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

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -0,0 +1,79 @@
+import "./add-namespace-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 { namespaceStore } from "./namespace.store";
+import { Namespace } from "../../api/endpoints";
+import { Input } from "../input";
+import { systemName } from "../input/input.validators";
+import { Notifications } from "../notifications";
+
+interface Props extends DialogProps {
+  onSuccess?(ns: Namespace): void;
+  onError?(error: any): void;
+}
+
+@observer
+export class AddNamespaceDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+  @observable namespace = "";
+
+  static open() {
+    AddNamespaceDialog.isOpen = true;
+  }
+
+  static close() {
+    AddNamespaceDialog.isOpen = false;
+  }
+
+  close = () => {
+    AddNamespaceDialog.close();
+  }
+
+  addNamespace = async () => {
+    const { namespace } = this;
+    const { onSuccess, onError } = this.props;
+    try {
+      await namespaceStore.create({ name: namespace }).then(onSuccess);
+      this.close();
+    } catch (err) {
+      Notifications.error(err);
+      onError && onError(err);
+    }
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const { namespace } = this;
+    const header = <h5><Trans>Create Namespace</Trans></h5>;
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddNamespaceDialog"
+        isOpen={AddNamespaceDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel={<Trans>Create</Trans>}
+            next={this.addNamespace}
+          >
+            <Input
+              required autoFocus
+              iconLeft="layers"
+              placeholder={_i18n._(t`Namespace`)}
+              validators={systemName}
+              value={namespace} onChange={v => this.namespace = v.toLowerCase()}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from "./namespaces.route"
+export * from "./namespaces"
+export * from "./namespace-details"
+export * from "./add-namespace-dialog"

src/renderer/components/+namespaces/namespace-details.scss

@@ -0,0 +1,11 @@
+.NamespaceDetails {
+  .status {
+    @include namespaceStatus;
+  }
+
+  .quotas {
+    .value a {
+      margin-right: $margin;
+    }
+  }
+}

src/renderer/components/+namespaces/namespace-details.tsx

@@ -0,0 +1,61 @@
+import "./namespace-details.scss";
+
+import React from "react";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { DrawerItem } from "../drawer";
+import { cssNames } from "../../utils";
+import { Namespace, namespacesApi } from "../../api/endpoints";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Link } from "react-router-dom";
+import { getDetailsUrl } from "../../navigation";
+import { Spinner } from "../spinner";
+import { resourceQuotaStore } from "../+config-resource-quotas/resource-quotas.store";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Namespace> {
+}
+
+@observer
+export class NamespaceDetails extends React.Component<Props> {
+  @computed get quotas() {
+    const namespace = this.props.object.getName();
+    return resourceQuotaStore.getAllByNs(namespace);
+  }
+
+  componentDidMount() {
+    resourceQuotaStore.loadAll();
+  }
+
+  render() {
+    const { object: namespace } = this.props;
+    if (!namespace) return;
+    const status = namespace.getStatus();
+    return (
+      <div className="NamespaceDetails">
+        <KubeObjectMeta object={namespace}/>
+
+        <DrawerItem name={<Trans>Status</Trans>}>
+          <span className={cssNames("status", status.toLowerCase())}>{status}</span>
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Resource Quotas</Trans>} className="quotas flex align-center">
+          {!this.quotas && resourceQuotaStore.isLoading && <Spinner/>}
+          {this.quotas.map(quota => {
+            return (
+              <Link key={quota.getId()} to={getDetailsUrl(quota.selfLink)}>
+                {quota.getName()}
+              </Link>
+            );
+          })}
+        </DrawerItem>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(namespacesApi, {
+  Details: NamespaceDetails
+});

src/renderer/components/+namespaces/namespace-select.scss

@@ -0,0 +1,22 @@
+@mixin namespaceSelectCommon {
+  .Icon {
+    margin-right: $margin / 2;
+  }
+}
+
+.NamespaceSelect {
+  @include namespaceSelectCommon;
+
+  .Select {
+    &__placeholder {
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+
+.NamespaceSelectMenu {
+  @include namespaceSelectCommon;
+}

src/renderer/components/+namespaces/namespace-select.tsx

@@ -0,0 +1,109 @@
+import "./namespace-select.scss"
+
+import React from "react";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { Select, SelectOption, SelectProps } from "../select";
+import { cssNames, noop } from "../../utils";
+import { Icon } from "../icon";
+import { namespaceStore } from "./namespace.store";
+import { _i18n } from "../../i18n";
+import { FilterIcon } from "../item-object-list/filter-icon";
+import { FilterType } from "../item-object-list/page-filters.store";
+import { isAllowedResource } from "../../api/rbac"
+
+interface Props extends SelectProps {
+  showIcons?: boolean;
+  showClusterOption?: boolean; // show cluster option on the top (default: false)
+  clusterOptionLabel?: React.ReactNode; // label for cluster option (default: "Cluster")
+  customizeOptions?(nsOptions: SelectOption[]): SelectOption[];
+}
+
+const defaultProps: Partial<Props> = {
+  showIcons: true,
+  showClusterOption: false,
+  get clusterOptionLabel() {
+    return _i18n._(t`Cluster`);
+  },
+};
+
+@observer
+export class NamespaceSelect extends React.Component<Props> {
+  static defaultProps = defaultProps as object;
+  private unsubscribe = noop;
+
+  async componentDidMount() {
+    if (!namespaceStore.isLoaded) {
+      await namespaceStore.loadAll();
+    }
+    this.unsubscribe = namespaceStore.subscribe();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  @computed get options(): SelectOption[] {
+    const { customizeOptions, showClusterOption, clusterOptionLabel } = this.props;
+    let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
+    options = customizeOptions ? customizeOptions(options) : options;
+    if (showClusterOption) {
+      options.unshift({ value: null, label: clusterOptionLabel });
+    }
+    return options;
+  }
+
+  formatOptionLabel = (option: SelectOption) => {
+    const { showIcons } = this.props;
+    const { value, label } = option;
+    return label || (
+      <>
+        {showIcons && <Icon small material="layers"/>}
+        {value}
+      </>
+    );
+  }
+
+  render() {
+    const { className, showIcons, showClusterOption, clusterOptionLabel, customizeOptions, ...selectProps } = this.props;
+    return (
+      <Select
+        className={cssNames("NamespaceSelect", className)}
+        menuClass="NamespaceSelectMenu"
+        formatOptionLabel={this.formatOptionLabel}
+        options={this.options}
+        {...selectProps}
+      />
+    );
+  }
+}
+
+@observer
+export class NamespaceSelectFilter extends React.Component {
+  render() {
+    const { contextNs, hasContext, toggleContext } = namespaceStore;
+    let placeholder = <Trans>All namespaces</Trans>;
+    if (contextNs.length == 1) placeholder = <Trans>Namespace: {contextNs[0]}</Trans>
+    if (contextNs.length >= 2) placeholder = <Trans>Namespaces: {contextNs.join(", ")}</Trans>
+    return (
+      <NamespaceSelect
+        placeholder={placeholder}
+        closeMenuOnSelect={false}
+        isOptionSelected={() => false}
+        controlShouldRenderValue={false}
+        onChange={({ value: namespace }: SelectOption) => toggleContext(namespace)}
+        formatOptionLabel={({ value: namespace }: SelectOption) => {
+          const isSelected = hasContext(namespace);
+          return (
+            <div className="flex gaps align-center">
+              <FilterIcon type={FilterType.NAMESPACE}/>
+              <span>{namespace}</span>
+              {isSelected && <Icon small material="check" className="box right"/>}
+            </div>
+          )
+        }}
+      />
+    )
+  }
+}

src/renderer/components/+namespaces/namespace.store.ts

@@ -0,0 +1,93 @@
+import { action, observable, reaction } from "mobx";
+import { autobind, createStorage } from "../../utils";
+import { KubeObjectStore } from "../../kube-object.store";
+import { Namespace, namespacesApi } from "../../api/endpoints";
+import { IQueryParams, navigation, setQueryParams } from "../../navigation";
+import { apiManager } from "../../api/api-manager";
+import { isAllowedResource } from "../..//api/rbac";
+
+@autobind()
+export class NamespaceStore extends KubeObjectStore<Namespace> {
+  api = namespacesApi;
+  contextNs = observable.array<string>();
+
+  protected storage = createStorage<string[]>("context_ns", this.contextNs);
+
+  get initNamespaces() {
+    const fromUrl = navigation.searchParams.getAsArray("namespaces");
+    return fromUrl.length ? fromUrl : this.storage.get();
+  }
+
+  constructor() {
+    super();
+
+    // restore context namespaces
+    const { initNamespaces: namespaces } = this;
+    this.setContext(namespaces);
+    this.updateUrl(namespaces);
+
+    // sync with local-storage & url-search-params
+    reaction(() => this.contextNs.toJS(), namespaces => {
+      this.storage.set(namespaces);
+      this.updateUrl(namespaces);
+    });
+  }
+
+  getContextParams(): Partial<IQueryParams> {
+    return {
+      namespaces: this.contextNs
+    }
+  }
+
+  protected updateUrl(namespaces: string[]) {
+    setQueryParams({ namespaces }, { replace: true })
+  }
+
+  protected async loadItems(namespaces?: string[]) {
+    if (!isAllowedResource("namespaces")) {
+      if (namespaces) return namespaces.map(this.getDummyNamespace);
+      return []
+    }
+    if (namespaces) {
+      return Promise.all(namespaces.map(name => this.api.get({ name })))
+    } else {
+      return super.loadItems();
+    }
+  }
+
+  protected getDummyNamespace(name: string) {
+    return new Namespace({
+      kind: "Namespace",
+      apiVersion: "v1",
+      metadata: {
+        name: name,
+        uid: "",
+        resourceVersion: "",
+        selfLink: `/api/v1/namespaces/${name}`
+      }
+    })
+  }
+
+  setContext(namespaces: string[]) {
+    this.contextNs.replace(namespaces);
+  }
+
+  hasContext(namespace: string | string[]) {
+    const context = Array.isArray(namespace) ? namespace : [namespace];
+    return context.every(namespace => this.contextNs.includes(namespace));
+  }
+
+  toggleContext(namespace: string) {
+    if (this.hasContext(namespace)) this.contextNs.remove(namespace);
+    else this.contextNs.push(namespace);
+  }
+
+  @action
+  reset() {
+    super.reset();
+    this.contextNs.clear();
+  }
+}
+
+export const namespaceStore = new NamespaceStore();
+apiManager.registerStore(namespacesApi, namespaceStore);

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

@@ -0,0 +1,9 @@
+
+@mixin namespaceStatus {
+  &.active {
+    color: $colorOk;
+  }
+  &.terminating {
+    color: $colorError;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+import { buildURL } from "../../navigation";
+
+export const namespacesRoute: RouteProps = {
+  path: "/namespaces"
+}
+
+export interface INamespacesRouteParams {
+}
+
+export const namespacesURL = buildURL<INamespacesRouteParams>(namespacesRoute.path)

src/renderer/components/+namespaces/namespaces.scss

@@ -0,0 +1,16 @@
+.Namespaces {
+  .TableCell {
+    &.name {
+      flex: 2;
+    }
+
+    &.labels {
+      flex: 4;
+      @include table-cell-labels-offsets;
+    }
+
+    &.status {
+      @include namespaceStatus;
+    }
+  }
+}

src/renderer/components/+namespaces/namespaces.tsx

@@ -0,0 +1,81 @@
+import "./namespaces.scss"
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { Namespace, namespacesApi, NamespaceStatus } from "../../api/endpoints";
+import { AddNamespaceDialog } from "./add-namespace-dialog";
+import { MainLayout } from "../layout/main-layout";
+import { Badge } from "../badge";
+import { RouteComponentProps } from "react-router";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { INamespacesRouteParams } from "./namespaces.route";
+import { namespaceStore } from "./namespace.store";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  labels = "labels",
+  age = "age",
+  status = "status",
+}
+
+interface Props extends RouteComponentProps<INamespacesRouteParams> {
+}
+
+export class Namespaces extends React.Component<Props> {
+  render() {
+    return (
+      <MainLayout>
+        <KubeObjectListLayout
+          isClusterScoped
+          className="Namespaces" store={namespaceStore}
+          sortingCallbacks={{
+            [sortBy.name]: (ns: Namespace) => ns.getName(),
+            [sortBy.labels]: (ns: Namespace) => ns.getLabels(),
+            [sortBy.age]: (ns: Namespace) => ns.metadata.creationTimestamp,
+            [sortBy.status]: (ns: Namespace) => ns.getStatus(),
+          }}
+          searchFilters={[
+            (item: Namespace) => item.getSearchFields(),
+            (item: Namespace) => item.getStatus()
+          ]}
+          renderHeaderTitle={<Trans>Namespaces</Trans>}
+          renderTableHeader={[
+            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
+            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+            { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+          ]}
+          renderTableContents={(item: Namespace) => [
+            item.getName(),
+            item.getLabels().map(label => <Badge key={label} label={label}/>),
+            item.getAge(),
+            { title: item.getStatus(), className: item.getStatus().toLowerCase() },
+          ]}
+          renderItemMenu={(item: Namespace) => {
+            return <NamespaceMenu object={item}/>
+          }}
+          addRemoveButtons={{
+            addTooltip: <Trans>Add Namespace</Trans>,
+            onAdd: () => AddNamespaceDialog.open(),
+          }}
+          customizeTableRowProps={(item: Namespace) => ({
+            disabled: item.getStatus() === NamespaceStatus.TERMINATING,
+          })}
+        />
+        <AddNamespaceDialog/>
+      </MainLayout>
+    )
+  }
+}
+
+export function NamespaceMenu(props: KubeObjectMenuProps<Namespace>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(namespacesApi, {
+  Menu: NamespaceMenu,
+});