Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/+user-management-service-accounts/create-service-account-dialog.scss

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

dashboard/client/components/+user-management-service-accounts/create-service-account-dialog.tsx

@@ -0,0 +1,83 @@
+import "./create-service-account-dialog.scss";
+
+import * as 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 { SubTitle } from "../layout/sub-title";
+import { serviceAccountsStore } from "./service-accounts.store";
+import { Input } from "../input";
+import { systemName } from "../input/input.validators";
+import { NamespaceSelect } from "../+namespaces/namespace-select";
+import { Notifications } from "../notifications";
+import { showDetails } from "../../navigation";
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class CreateServiceAccountDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+
+  @observable name = ""
+  @observable namespace = "default"
+
+  static open() {
+    CreateServiceAccountDialog.isOpen = true;
+  }
+
+  static close() {
+    CreateServiceAccountDialog.isOpen = false;
+  }
+
+  close = () => {
+    CreateServiceAccountDialog.close();
+  }
+
+  createAccount = async () => {
+    const { name, namespace } = this;
+    try {
+      const serviceAccount = await serviceAccountsStore.create({ namespace, name });
+      this.name = "";
+      showDetails(serviceAccount.selfLink);
+      this.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const { name, namespace } = this;
+    const header = <h5><Trans>Create Service Account</Trans></h5>
+    return (
+      <Dialog
+        {...dialogProps}
+        className="CreateServiceAccountDialog"
+        isOpen={CreateServiceAccountDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep nextLabel={<Trans>Create</Trans>} next={this.createAccount}>
+            <SubTitle title={<Trans>Account Name</Trans>}/>
+            <Input
+              autoFocus required
+              placeholder={_i18n._(t`Enter a name`)}
+              validators={systemName}
+              value={name} onChange={v => this.name = v.toLowerCase()}
+            />
+            <SubTitle title={<Trans>Namespace</Trans>}/>
+            <NamespaceSelect
+              themeName="light"
+              value={namespace}
+              onChange={({ value }) => this.namespace = value}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

dashboard/client/components/+user-management-service-accounts/index.ts

@@ -0,0 +1,3 @@
+export * from "./service-accounts"
+export * from "./service-accounts-details"
+export * from "./create-service-account-dialog"

dashboard/client/components/+user-management-service-accounts/service-accounts-details.scss

@@ -0,0 +1,7 @@
+.ServiceAccountsDetails {
+  .links {
+    a {
+      margin-right: $margin;
+    }
+  }
+}

dashboard/client/components/+user-management-service-accounts/service-accounts-details.tsx

@@ -0,0 +1,103 @@
+import "./service-accounts-details.scss";
+
+import * as React from "react";
+import { autorun, observable } from "mobx";
+import { Trans } from "@lingui/macro";
+import { Spinner } from "../spinner";
+import { ServiceAccountsSecret } from "./service-accounts-secret";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { secretsStore } from "../+config-secrets/secrets.store";
+import { Link } from "react-router-dom";
+import { Secret, ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { getDetailsUrl } from "../../navigation";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<ServiceAccount> {
+}
+
+@observer
+export class ServiceAccountsDetails extends React.Component<Props> {
+  @observable secrets: Secret[];
+
+  @disposeOnUnmount
+  loadSecrets = autorun(async () => {
+    this.secrets = null;
+    const { object: serviceAccount } = this.props;
+    if (!serviceAccount) {
+      return;
+    }
+    const namespace = serviceAccount.getNs();
+    const secrets = serviceAccount.getSecrets().map(({ name }) => {
+      const secret = secretsStore.getByName(name, namespace);
+      if (!secret) return secretsStore.load({ name, namespace });
+      return secret;
+    });
+    this.secrets = await Promise.all(secrets);
+  })
+
+  renderSecrets() {
+    const { secrets } = this;
+    if (!secrets) {
+      return <Spinner center/>
+    }
+    return secrets.map(secret =>
+      <ServiceAccountsSecret key={secret.getId()} secret={secret}/>
+    )
+  }
+
+  renderSecretLinks(secrets: Secret[]) {
+    return secrets.map(secret => {
+      return (
+        <Link key={secret.getId()} to={getDetailsUrl(secret.selfLink)}>
+          {secret.getName()}
+        </Link>
+      )
+    }
+    )
+  }
+
+  render() {
+    const { object: serviceAccount } = this.props;
+    if (!serviceAccount) {
+      return null;
+    }
+    const tokens = secretsStore.items.filter(secret =>
+      secret.getNs() == serviceAccount.getNs() &&
+      secret.getAnnotations().some(annot => annot == `kubernetes.io/service-account.name: ${serviceAccount.getName()}`)
+    )
+    const imagePullSecrets = serviceAccount.getImagePullSecrets().map(({ name }) =>
+      secretsStore.getByName(name, serviceAccount.getNs())
+    )
+    return (
+      <div className="ServiceAccountsDetails">
+        <KubeObjectMeta object={serviceAccount}/>
+
+        {tokens.length > 0 &&
+        <DrawerItem name={<Trans>Tokens</Trans>} className="links">
+          {this.renderSecretLinks(tokens)}
+        </DrawerItem>
+        }
+        {imagePullSecrets.length > 0 &&
+        <DrawerItem name={<Trans>ImagePullSecrets</Trans>} className="links">
+          {this.renderSecretLinks(imagePullSecrets)}
+        </DrawerItem>
+        }
+
+        <DrawerTitle title={<Trans>Mountable secrets</Trans>}/>
+        <div className="secrets">
+          {this.renderSecrets()}
+        </div>
+
+        <KubeEventDetails object={serviceAccount}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(serviceAccountsApi, {
+  Details: ServiceAccountsDetails
+})

dashboard/client/components/+user-management-service-accounts/service-accounts-secret.scss

@@ -0,0 +1,40 @@
+.ServiceAccountsSecret {
+  margin-bottom: $margin * 3;
+
+  &:nth-child(even) {
+    margin-left: -$margin * 3;
+    margin-right: -$margin * 3;
+    padding: $padding $padding * 3;
+  }
+
+  .secret-row {
+    display: flex;
+    border-bottom: 1px solid $borderFaintColor;
+    padding: $padding 0;
+
+    &:first-child {
+      padding-top: 0
+    }
+  }
+
+  .name {
+    flex-basis: 23%;
+    color: $drawerItemNameColor;
+  }
+
+  .value {
+    flex-basis: 76%;
+    color: $drawerItemValueColor;
+    word-break: break-all;
+
+    &:empty:after {
+      content: '—'
+    }
+  }
+
+  .asterisks {
+    font-size: large;
+    margin-right: $margin / 2;
+    line-height: 90%;
+  }
+}

dashboard/client/components/+user-management-service-accounts/service-accounts-secret.tsx

@@ -0,0 +1,70 @@
+import "./service-accounts-secret.scss"
+
+import * as React from "react";
+import * as moment from "moment";
+import { Trans } from "@lingui/macro";
+import { Icon } from "../icon";
+import { Secret } from "../../api/endpoints/secret.api";
+import { prevDefault } from "../../utils";
+
+interface Props {
+  secret: Secret;
+}
+
+interface State {
+  showToken: boolean;
+}
+
+export class ServiceAccountsSecret extends React.Component<Props, State> {
+  public state: State = {
+    showToken: false,
+  }
+
+  renderSecretValue() {
+    const { secret } = this.props
+    const { showToken } = this.state
+    return (
+      <>
+        {!showToken && (
+          <>
+            <span className="asterisks">{Array(16).fill("•").join("")}</span>
+            <Icon
+              small material="lock_open"
+              tooltip={<Trans>Show value</Trans>}
+              onClick={prevDefault(() => this.setState({ showToken: true }))}
+            />
+          </>
+        )}
+        {showToken && (
+          <span className="raw-value">{secret.getToken()}</span>
+        )}
+      </>
+    )
+  }
+
+  render() {
+    const { metadata: { name, creationTimestamp }, type } = this.props.secret;
+    return (
+      <div className="ServiceAccountsSecret box grow-fixed">
+        <div className="secret-row">
+          <span className="name"><Trans>Name</Trans>: </span>
+          <span className="value">{name}</span>
+        </div>
+        <div className="secret-row">
+          <span className="name"><Trans>Value</Trans>: </span>
+          <span className="value flex align-center">{this.renderSecretValue()}</span>
+        </div>
+        <div className="secret-row">
+          <span className="name"><Trans>Created at</Trans>: </span>
+          <span className="value" title={creationTimestamp}>
+            {moment(creationTimestamp).format("LLL")}
+          </span>
+        </div>
+        <div className="secret-row">
+          <span className="name"><Trans>Type</Trans>: </span>
+          <span className="value">{type}</span>
+        </div>
+      </div>
+    )
+  }
+}

dashboard/client/components/+user-management-service-accounts/service-accounts.scss

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

dashboard/client/components/+user-management-service-accounts/service-accounts.store.ts

@@ -0,0 +1,17 @@
+import { autobind } from "../../utils";
+import { ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
+import { KubeObjectStore } from "../../kube-object.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class ServiceAccountsStore extends KubeObjectStore<ServiceAccount> {
+  api = serviceAccountsApi
+
+  protected async createItem(params: { name: string; namespace?: string }) {
+    await super.createItem(params);
+    return this.api.get(params); // hackfix: load freshly created account, cause it doesn't have "secrets" field yet
+  }
+}
+
+export const serviceAccountsStore = new ServiceAccountsStore();
+apiManager.registerStore(serviceAccountsApi, serviceAccountsStore);

dashboard/client/components/+user-management-service-accounts/service-accounts.tsx

@@ -0,0 +1,81 @@
+import "./service-accounts.scss";
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { ServiceAccount, serviceAccountsApi } from "../../api/endpoints/service-accounts.api";
+import { RouteComponentProps } from "react-router";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { MenuItem } from "../menu";
+import { openServiceAccountKubeConfig } from "../kubeconfig-dialog";
+import { Icon } from "../icon";
+import { KubeObjectListLayout } from "../kube-object";
+import { IServiceAccountsRouteParams } from "../+user-management";
+import { serviceAccountsStore } from "./service-accounts.store";
+import { CreateServiceAccountDialog } from "./create-service-account-dialog";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IServiceAccountsRouteParams> {
+}
+
+@observer
+export class ServiceAccounts extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          className="ServiceAccounts" store={serviceAccountsStore}
+          sortingCallbacks={{
+            [sortBy.name]: (account: ServiceAccount) => account.getName(),
+            [sortBy.namespace]: (account: ServiceAccount) => account.getNs(),
+            [sortBy.age]: (account: ServiceAccount) => account.getAge(false),
+          }}
+          searchFilters={[
+            (account: ServiceAccount) => account.getSearchFields(),
+          ]}
+          renderHeaderTitle={<Trans>Service Accounts</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={(account: ServiceAccount) => [
+            account.getName(),
+            account.getNs(),
+            account.getAge(),
+          ]}
+          renderItemMenu={(item: ServiceAccount) => {
+            return <ServiceAccountMenu object={item}/>
+          }}
+          addRemoveButtons={{
+            onAdd: () => CreateServiceAccountDialog.open(),
+            addTooltip: <Trans>Create new Service Account</Trans>,
+          }}
+        />
+        <CreateServiceAccountDialog/>
+      </>
+    )
+  }
+}
+
+export function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
+  const { object, toolbar } = props;
+  return (
+    <KubeObjectMenu {...props}>
+      <MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
+        <Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar}/>
+        <span className="title"><Trans>Kubeconfig</Trans></span>
+      </MenuItem>
+    </KubeObjectMenu>
+  )
+}
+
+apiManager.registerViews(serviceAccountsApi, {
+  Menu: ServiceAccountMenu,
+})