Lens restructure (#540)

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

src/renderer/components/+config-secrets/add-secret-dialog.scss

@@ -0,0 +1,19 @@
+.AddSecretDialog {
+  --flex-gap: #{$margin * 1.5};
+
+  .Icon {
+    --color-active: black;
+  }
+
+  .remove-icon {
+    flex: 0 0;
+    width: 18px; // icon size
+  }
+
+  .fields-title {
+    display: grid;
+    grid-template-columns: min-content auto;
+    align-items: center;
+    gap: $margin / 2;
+  }
+}

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -0,0 +1,221 @@
+import "./add-secret-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 { Input } from "../input";
+import { systemName } from "../input/input.validators";
+import { Secret, secretsApi, SecretType } from "../../api/endpoints";
+import { SubTitle } from "../layout/sub-title";
+import { NamespaceSelect } from "../+namespaces/namespace-select";
+import { Select, SelectOption } from "../select";
+import { Icon } from "../icon";
+import { IKubeObjectMetadata } from "../../api/kube-object";
+import { base64 } from "../../utils";
+import { Notifications } from "../notifications";
+import { showDetails } from "../../navigation";
+import upperFirst from "lodash/upperFirst";
+
+interface Props extends Partial<DialogProps> {
+}
+
+interface ISecretTemplateField {
+  key: string;
+  value?: string;
+  required?: boolean;
+}
+
+interface ISecretTemplate {
+  [field: string]: ISecretTemplateField[];
+  annotations?: ISecretTemplateField[];
+  labels?: ISecretTemplateField[];
+  data?: ISecretTemplateField[];
+}
+
+type ISecretField = keyof ISecretTemplate;
+
+@observer
+export class AddSecretDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+
+  static open() {
+    AddSecretDialog.isOpen = true;
+  }
+
+  static close() {
+    AddSecretDialog.isOpen = false;
+  }
+
+  private secretTemplate: { [p: string]: ISecretTemplate } = {
+    [SecretType.Opaque]: {},
+    [SecretType.ServiceAccountToken]: {
+      annotations: [
+        { key: "kubernetes.io/service-account.name", required: true },
+        { key: "kubernetes.io/service-account.uid", required: true }
+      ],
+    },
+  }
+
+  get types() {
+    return Object.keys(this.secretTemplate) as SecretType[];
+  }
+
+  @observable secret = this.secretTemplate;
+  @observable name = "";
+  @observable namespace = "default";
+  @observable type = SecretType.Opaque;
+
+  reset = () => {
+    this.name = "";
+    this.secret = this.secretTemplate;
+  }
+
+  close = () => {
+    AddSecretDialog.close();
+  }
+
+  private getDataFromFields = (fields: ISecretTemplateField[] = [], processValue?: (val: string) => string) => {
+    return fields.reduce<any>((data, field) => {
+      const { key, value } = field;
+      if (key) {
+        data[key] = processValue ? processValue(value) : value;
+      }
+      return data;
+    }, {})
+  }
+
+  createSecret = async () => {
+    const { name, namespace, type } = this;
+    const { data = [], labels = [], annotations = [] } = this.secret[type];
+    const secret: Partial<Secret> = {
+      type: type,
+      data: this.getDataFromFields(data, val => val ? base64.encode(val) : ""),
+      metadata: {
+        name: name,
+        namespace: namespace,
+        annotations: this.getDataFromFields(annotations),
+        labels: this.getDataFromFields(labels),
+      } as IKubeObjectMetadata
+    }
+    try {
+      const newSecret = await secretsApi.create({ namespace, name }, secret);
+      showDetails(newSecret.selfLink);
+      this.reset();
+      this.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  }
+
+  addField = (field: ISecretField) => {
+    const fields = this.secret[this.type][field] || [];
+    fields.push({ key: "", value: "" });
+    this.secret[this.type][field] = fields;
+  }
+
+  removeField = (field: ISecretField, index: number) => {
+    const fields = this.secret[this.type][field] || [];
+    fields.splice(index, 1);
+  }
+
+  renderFields(field: ISecretField) {
+    const fields = this.secret[this.type][field] || [];
+    return (
+      <>
+        <SubTitle compact className="fields-title" title={upperFirst(field.toString())}>
+          <Icon
+            small
+            tooltip={_i18n._(t`Add field`)}
+            material="add_circle_outline"
+            onClick={() => this.addField(field)}
+          />
+        </SubTitle>
+        <div className="secret-fields">
+          {fields.map((item, index) => {
+            const { key = "", value = "", required } = item;
+            return (
+              <div key={index} className="secret-field flex gaps auto align-center">
+                <Input
+                  className="key"
+                  placeholder={_i18n._(t`Name`)}
+                  title={key}
+                  tabIndex={required ? -1 : 0}
+                  readOnly={required}
+                  value={key} onChange={v => item.key = v}
+                />
+                <Input
+                  multiLine maxRows={5}
+                  required={required}
+                  className="value"
+                  placeholder={_i18n._(t`Value`)}
+                  value={value} onChange={v => item.value = v}
+                />
+                <Icon
+                  small
+                  disabled={required}
+                  tooltip={required ? <Trans>Required field</Trans> : <Trans>Remove field</Trans>}
+                  className="remove-icon"
+                  material="remove_circle_outline"
+                  onClick={() => this.removeField(field, index)}
+                />
+              </div>
+            )
+          })}
+        </div>
+      </>
+    )
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const { namespace, name, type } = this;
+    const header = <h5><Trans>Create Secret</Trans></h5>;
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddSecretDialog"
+        isOpen={AddSecretDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep contentClass="flow column" nextLabel={<Trans>Create</Trans>} next={this.createSecret}>
+            <div className="secret-name">
+              <SubTitle title={<Trans>Secret name</Trans>}/>
+              <Input
+                autoFocus required
+                placeholder={_i18n._(t`Name`)}
+                validators={systemName}
+                value={name} onChange={v => this.name = v}
+              />
+            </div>
+            <div className="flex auto gaps">
+              <div className="secret-namespace">
+                <SubTitle title={<Trans>Namespace</Trans>}/>
+                <NamespaceSelect
+                  themeName="light"
+                  value={namespace}
+                  onChange={({ value }) => this.namespace = value}
+                />
+              </div>
+              <div className="secret-type">
+                <SubTitle title={<Trans>Secret type</Trans>}/>
+                <Select
+                  themeName="light"
+                  options={this.types}
+                  value={type} onChange={({ value }: SelectOption) => this.type = value}
+                />
+              </div>
+            </div>
+            {this.renderFields("annotations")}
+            {this.renderFields("labels")}
+            {this.renderFields("data")}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

src/renderer/components/+config-secrets/index.ts

@@ -0,0 +1,4 @@
+export * from "./secrets.route"
+export * from "./secrets"
+export * from "./secret-details"
+

src/renderer/components/+config-secrets/secret-details.scss

@@ -0,0 +1,15 @@
+.SecretDetails {
+  .data {
+    margin-bottom: $margin * 2;
+
+    .name {
+      color: $textColorSecondary;
+      font-weight: $font-weight-bold;
+      padding-bottom: $padding / 2;
+    }
+  }
+
+  .save-btn {
+    margin-top: $margin;
+  }
+}

src/renderer/components/+config-secrets/secret-details.tsx

@@ -0,0 +1,118 @@
+import "./secret-details.scss";
+
+import React from "react";
+import isEmpty from "lodash/isEmpty";
+import { autorun, observable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Input } from "../input";
+import { Button } from "../button";
+import { Notifications } from "../notifications";
+import { base64 } from "../../utils";
+import { Icon } from "../icon";
+import { secretsStore } from "./secrets.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Secret, secretsApi } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Secret> {
+}
+
+@observer
+export class SecretDetails extends React.Component<Props> {
+  @observable isSaving = false;
+  @observable data: { [name: string]: string } = {};
+  @observable revealSecret: { [name: string]: boolean } = {};
+
+  async componentDidMount() {
+    disposeOnUnmount(this, [
+      autorun(() => {
+        const { object: secret } = this.props;
+        if (secret) {
+          this.data = secret.data;
+          this.revealSecret = {};
+        }
+      })
+    ])
+  }
+
+  saveSecret = async () => {
+    const { object: secret } = this.props;
+    this.isSaving = true;
+    try {
+      await secretsStore.update(secret, { ...secret, data: this.data });
+      Notifications.ok(<Trans>Secret successfully updated.</Trans>);
+    } catch (err) {
+      Notifications.error(err);
+    }
+    this.isSaving = false;
+  }
+
+  editData = (name: string, value: string, encoded: boolean) => {
+    this.data[name] = encoded ? value : base64.encode(value);
+  }
+
+  render() {
+    const { object: secret } = this.props;
+    if (!secret) return null;
+    return (
+      <div className="SecretDetails">
+        <KubeObjectMeta object={secret}/>
+        <DrawerItem name={<Trans>Type</Trans>}>
+          {secret.type}
+        </DrawerItem>
+        {!isEmpty(this.data) && (
+          <>
+            <DrawerTitle title={_i18n._(t`Data`)}/>
+            {
+              Object.entries(this.data).map(([name, value]) => {
+                const revealSecret = this.revealSecret[name];
+                let decodedVal = "";
+                try {
+                  decodedVal = base64.decode(value);
+                } catch {
+                  decodedVal = "";
+                }
+                value = revealSecret ? decodedVal : value;
+                return (
+                  <div key={name} className="data">
+                    <div className="name">{name}</div>
+                    <div className="flex gaps align-center">
+                      <Input
+                        multiLine
+                        theme="round-black"
+                        className="box grow"
+                        value={value || ""}
+                        onChange={value => this.editData(name, value, !revealSecret)}
+                      />
+                      {decodedVal && (
+                        <Icon
+                          material={`visibility${revealSecret ? "" : "_off"}`}
+                          tooltip={revealSecret ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
+                          onClick={() => this.revealSecret[name] = !revealSecret}
+                        />)
+                      }
+                    </div>
+                  </div>
+                )
+              })
+            }
+            <Button
+              primary
+              label={_i18n._(t`Save`)} waiting={this.isSaving}
+              className="save-btn"
+              onClick={this.saveSecret}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(secretsApi, {
+  Details: SecretDetails,
+})

src/renderer/components/+config-secrets/secrets.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const secretsRoute: RouteProps = {
+  path: "/secrets"
+}
+
+export interface ISecretsRouteParams {
+}
+
+export const secretsURL = buildURL(secretsRoute.path);

src/renderer/components/+config-secrets/secrets.scss

@@ -0,0 +1,11 @@
+.Secrets {
+  .TableCell {
+    &.name {
+      flex: 1.5;
+    }
+
+    &.labels {
+      @include table-cell-labels-offsets;
+    }
+  }
+}

src/renderer/components/+config-secrets/secrets.store.ts

@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { Secret, secretsApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class SecretsStore extends KubeObjectStore<Secret> {
+  api = secretsApi
+}
+
+export const secretsStore = new SecretsStore();
+apiManager.registerStore(secretsApi, secretsStore);

src/renderer/components/+config-secrets/secrets.tsx

@@ -0,0 +1,86 @@
+import "./secrets.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { Secret, secretsApi } from "../../api/endpoints";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { AddSecretDialog } from "./add-secret-dialog";
+import { ISecretsRouteParams } from "./secrets.route";
+import { KubeObjectListLayout } from "../kube-object";
+import { Badge } from "../badge";
+import { secretsStore } from "./secrets.store";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  labels = "labels",
+  keys = "keys",
+  type = "type",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<ISecretsRouteParams> {
+}
+
+@observer
+export class Secrets extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          className="Secrets" store={secretsStore}
+          sortingCallbacks={{
+            [sortBy.name]: (item: Secret) => item.getName(),
+            [sortBy.namespace]: (item: Secret) => item.getNs(),
+            [sortBy.labels]: (item: Secret) => item.getLabels(),
+            [sortBy.keys]: (item: Secret) => item.getKeys(),
+            [sortBy.type]: (item: Secret) => item.type,
+            [sortBy.age]: (item: Secret) => item.metadata.creationTimestamp,
+          }}
+          searchFilters={[
+            (item: Secret) => item.getSearchFields(),
+            (item: Secret) => item.getKeys(),
+          ]}
+          renderHeaderTitle={<Trans>Secrets</Trans>}
+          renderTableHeader={[
+            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+            { title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
+            { title: <Trans>Keys</Trans>, className: "keys", sortBy: sortBy.keys },
+            { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
+            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          ]}
+          renderTableContents={(secret: Secret) => [
+            secret.getName(),
+            secret.getNs(),
+            secret.getLabels().map(label => <Badge key={label} label={label}/>),
+            secret.getKeys().join(", "),
+            secret.type,
+            secret.getAge(),
+          ]}
+          renderItemMenu={(item: Secret) => {
+            return <SecretMenu object={item}/>
+          }}
+          addRemoveButtons={{
+            onAdd: () => AddSecretDialog.open(),
+            addTooltip: <Trans>Create new Secret</Trans>
+          }}
+        />
+        <AddSecretDialog/>
+      </>
+    );
+  }
+}
+
+export function SecretMenu(props: KubeObjectMenuProps<Secret>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(secretsApi, {
+  Menu: SecretMenu,
+})