Lens app source code (#119)

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

dashboard/client/components/+config-maps/config-map-details.scss

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

dashboard/client/components/+config-maps/config-map-details.tsx

@@ -0,0 +1,99 @@
+import "./config-map-details.scss";
+
+import * as React from "react";
+import { autorun, observable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { DrawerTitle } from "../drawer";
+import { Notifications } from "../notifications";
+import { Input } from "../input";
+import { Button } from "../button";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { configMapsStore } from "./config-maps.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { ConfigMap, configMapApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<ConfigMap> {
+}
+
+@observer
+export class ConfigMapDetails extends React.Component<Props> {
+  @observable isSaving = false;
+  @observable data = observable.map();
+
+  async componentDidMount() {
+    disposeOnUnmount(this, [
+      autorun(() => {
+        const { object: configMap } = this.props;
+        if (configMap) {
+          this.data.replace(configMap.data); // refresh
+        }
+      })
+    ])
+  }
+
+  save = async () => {
+    const { object: configMap } = this.props;
+    try {
+      this.isSaving = true;
+      await configMapsStore.update(configMap, { ...configMap, data: this.data.toJSON() });
+      Notifications.ok(
+        <p>
+          <Trans>ConfigMap <b>{configMap.getName()}</b> successfully updated.</Trans>
+        </p>
+      );
+    } finally {
+      this.isSaving = false;
+    }
+  }
+
+  render() {
+    const { object: configMap } = this.props;
+    if (!configMap) return null;
+    const data = Object.entries(this.data.toJSON());
+    return (
+      <div className="ConfigMapDetails">
+        <KubeObjectMeta object={configMap}/>
+        {
+          data.length > 0 && (
+            <>
+              <DrawerTitle title={<Trans>Data</Trans>}/>
+              {
+                data.map(([name, value]) => {
+                  return (
+                    <div key={name} className="data">
+                      <div className="name">{name}</div>
+                      <div className="flex gaps align-flex-start">
+                        <Input
+                          multiLine
+                          theme="round-black"
+                          className="box grow"
+                          value={value}
+                          onChange={v => this.data.set(name, v)}
+                        />
+                      </div>
+                    </div>
+                  )
+                })
+              }
+              <Button
+                primary
+                label={<Trans>Save</Trans>} waiting={this.isSaving}
+                className="save-btn"
+                onClick={this.save}
+              />
+            </>
+          )
+        }
+
+        <KubeEventDetails object={configMap}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(configMapApi, {
+  Details: ConfigMapDetails
+})

dashboard/client/components/+config-maps/config-maps.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const configMapsRoute: RouteProps = {
+  path: "/configmaps"
+}
+
+export interface IConfigMapsRouteParams {
+}
+
+export const configMapsURL = buildURL<IConfigMapsRouteParams>(configMapsRoute.path);

dashboard/client/components/+config-maps/config-maps.scss

@@ -0,0 +1,15 @@
+.ConfigMaps {
+  .TableCell {
+    &.name {
+      flex: 2;
+    }
+
+    &.keys {
+      flex: 2.5;
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

dashboard/client/components/+config-maps/config-maps.store.ts

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

dashboard/client/components/+config-maps/config-maps.tsx

@@ -0,0 +1,69 @@
+import "./config-maps.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { configMapsStore } from "./config-maps.store";
+import { ConfigMap, configMapApi } from "../../api/endpoints/configmap.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { IConfigMapsRouteParams } from "./config-maps.route";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  keys = "keys",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IConfigMapsRouteParams> {
+}
+
+@observer
+export class ConfigMaps extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="ConfigMaps" store={configMapsStore}
+        sortingCallbacks={{
+          [sortBy.name]: (item: ConfigMap) => item.getName(),
+          [sortBy.namespace]: (item: ConfigMap) => item.getNs(),
+          [sortBy.keys]: (item: ConfigMap) => item.getKeys(),
+          [sortBy.age]: (item: ConfigMap) => item.getAge(false),
+        }}
+        searchFilters={[
+          (item: ConfigMap) => item.getSearchFields(),
+          (item: ConfigMap) => item.getKeys()
+        ]}
+        renderHeaderTitle={<Trans>Config Maps</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Keys</Trans>, className: "keys", sortBy: sortBy.keys },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(configMap: ConfigMap) => [
+          configMap.getName(),
+          configMap.getNs(),
+          configMap.getKeys().join(", "),
+          configMap.getAge(),
+        ]}
+        renderItemMenu={(item: ConfigMap) => {
+          return <ConfigMapMenu object={item}/>
+        }}
+      />
+    );
+  }
+}
+
+export function ConfigMapMenu(props: KubeObjectMenuProps<ConfigMap>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(configMapApi, {
+  Menu: ConfigMapMenu,
+})

dashboard/client/components/+config-maps/index.ts

@@ -0,0 +1,3 @@
+export * from "./config-maps.route"
+export * from "./config-maps"
+export * from "./config-map-details"