Lens app source code (#119)

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

dashboard/client/components/+404/index.ts

@@ -0,0 +1 @@
+export * from "./not-found"

dashboard/client/components/+404/not-found.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Trans } from "@lingui/macro";
+import { MainLayout } from "../layout/main-layout";
+
+export class NotFound extends React.Component {
+  render() {
+    return (
+      <MainLayout className="NotFound" contentClass="flex" footer={null}>
+        <p className="box center">
+          <Trans>Page not found</Trans>
+        </p>
+      </MainLayout>
+    )
+  }
+}

dashboard/client/components/+apps-helm-charts/helm-chart-details.scss

@@ -0,0 +1,53 @@
+.HelmChartDetails {
+  .intro-logo {
+    margin-right: $margin * 2;
+    background: $helmLogoBackground;
+    border-radius: $radius;
+    max-width: 150px;
+    max-height: 100px;
+    padding: $padding;
+    box-sizing: content-box;
+  }
+
+  .intro-contents {
+    .description {
+      font-weight: bold;
+      color: $textColorAccent;
+      padding-bottom: $padding;
+
+      .Button {
+        padding-left: $padding * 3;
+        padding-right: $padding * 3;
+        margin-left: $margin * 2;
+        align-self: flex-start;
+      }
+    }
+
+    .version {
+      .Select {
+        width: 80px;
+        min-width: 80px;
+        white-space: nowrap;
+      }
+
+      .Icon {
+        margin-right: $margin;
+      }
+    }
+
+    .maintainers {
+      a {
+        display: inline-block;
+        margin-right: $margin;
+      }
+    }
+
+    .DrawerItem {
+      align-items: center;
+    }
+  }
+
+  .chart-description {
+    margin-top: $margin * 2;
+  }
+}

dashboard/client/components/+apps-helm-charts/helm-chart-details.tsx

@@ -0,0 +1,138 @@
+import "./helm-chart-details.scss";
+
+import React, { Component } from "react";
+import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
+import { t, Trans } from "@lingui/macro";
+import { autorun, observable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Drawer, DrawerItem } from "../drawer";
+import { autobind, stopPropagation } from "../../utils";
+import { MarkdownViewer } from "../markdown-viewer";
+import { Spinner } from "../spinner";
+import { CancelablePromise } from "../../utils/cancelableFetch";
+import { Button } from "../button";
+import { Select, SelectOption } from "../select";
+import { createInstallChartTab } from "../dock/install-chart.store";
+import { Badge } from "../badge";
+import { _i18n } from "../../i18n";
+
+interface Props {
+  chart: HelmChart;
+  hideDetails(): void;
+}
+
+@observer
+export class HelmChartDetails extends Component<Props> {
+  @observable chartVersions: HelmChart[];
+  @observable selectedChart: HelmChart;
+  @observable description: string = null;
+
+  private chartPromise: CancelablePromise<{ readme: string; versions: HelmChart[] }>;
+
+  @disposeOnUnmount
+  chartSelector = autorun(async () => {
+    if (!this.props.chart) return;
+    this.chartVersions = null;
+    this.selectedChart = null;
+    this.description = null;
+    this.loadChartData();
+    this.chartPromise.then(data => {
+      this.description = data.readme;
+      this.chartVersions = data.versions;
+      this.selectedChart = data.versions[0];
+    });
+  });
+
+  loadChartData(version?: string) {
+    const { chart: { name, repo } } = this.props;
+    if (this.chartPromise) this.chartPromise.cancel();
+    this.chartPromise = helmChartsApi.get(repo, name, version);
+  }
+
+  @autobind()
+  onVersionChange(opt: SelectOption) {
+    const version = opt.value;
+    this.selectedChart = this.chartVersions.find(chart => chart.version === version);
+    this.description = null;
+    this.loadChartData(version);
+    this.chartPromise.then(data => {
+      this.description = data.readme
+    });
+  }
+
+  @autobind()
+  install() {
+    createInstallChartTab(this.selectedChart);
+    this.props.hideDetails()
+  }
+
+  renderIntroduction() {
+    const { selectedChart, chartVersions, onVersionChange } = this;
+    const placeholder = require("./helm-placeholder.svg");
+    return (
+      <div className="introduction flex align-flex-start">
+        <img
+          className="intro-logo"
+          src={selectedChart.getIcon() || placeholder}
+          onError={(event) => event.currentTarget.src = placeholder}
+        />
+        <div className="intro-contents box grow">
+          <div className="description flex align-center justify-space-between">
+            {selectedChart.getDescription()}
+            <Button primary label={_i18n._(t`Install`)} onClick={this.install}/>
+          </div>
+          <DrawerItem name={_i18n._(t`Version`)} className="version" onClick={stopPropagation}>
+            <Select
+              themeName="outlined"
+              menuPortalTarget={null}
+              options={chartVersions.map(chart => chart.version)}
+              value={selectedChart.getVersion()}
+              onChange={onVersionChange}
+            />
+          </DrawerItem>
+          <DrawerItem name={_i18n._(t`Home`)}>
+            <a href={selectedChart.getHome()} target="_blank">{selectedChart.getHome()}</a>
+          </DrawerItem>
+          <DrawerItem name={_i18n._(t`Maintainers`)} className="maintainers">
+            {selectedChart.getMaintainers().map(({ name, email, url }) =>
+              <a key={name} href={url ? url : `mailto:${email}`} target="_blank">{name}</a>
+            )}
+          </DrawerItem>
+          {selectedChart.getKeywords().length > 0 && (
+            <DrawerItem name={_i18n._(t`Keywords`)} labelsOnly>
+              {selectedChart.getKeywords().map(key => <Badge key={key} label={key}/>)}
+            </DrawerItem>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  renderContent() {
+    if (this.selectedChart === null || this.description === null) return <Spinner center/>;
+    return (
+      <div className="box grow">
+        {this.renderIntroduction()}
+        <div className="chart-description">
+          <MarkdownViewer markdown={this.description}/>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { chart, hideDetails } = this.props;
+    const title = chart ? <Trans>Chart: {chart.getFullName()}</Trans> : "";
+    return (
+      <Drawer
+        className="HelmChartDetails"
+        usePortal={true}
+        open={!!chart}
+        title={title}
+        onClose={hideDetails}
+      >
+        {this.renderContent()}
+      </Drawer>
+    );
+  }
+}

dashboard/client/components/+apps-helm-charts/helm-chart.store.ts

@@ -0,0 +1,67 @@
+import { observable } from "mobx";
+import { autobind } from "../../utils";
+import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
+import { ItemStore } from "../../item.store";
+import flatten from "lodash/flatten"
+
+export interface IChartVersion {
+  repo: string;
+  version: string;
+}
+
+@autobind()
+export class HelmChartStore extends ItemStore<HelmChart> {
+  @observable versions = observable.map<string, IChartVersion[]>();
+
+  loadAll() {
+    return this.loadItems(() => helmChartsApi.list());
+  }
+
+  getByName(name: string, repo: string) {
+    return this.items.find(chart => chart.getName() === name && chart.getRepository() === repo);
+  }
+
+  protected sortVersions = (versions: IChartVersion[]) => {
+    return versions.sort((first, second) => {
+      const firstVersion = first.version.replace(/[^\d.]/g, "").split(".").map(Number);
+      const secondVersion = second.version.replace(/[^\d.]/g, "").split(".").map(Number);
+      return firstVersion.every((version, index) => {
+        return version > secondVersion[index];
+      }) ? -1 : 0;
+    });
+  };
+
+  async getVersions(chartName: string, force?: boolean): Promise<IChartVersion[]> {
+    let versions = this.versions.get(chartName);
+    if (versions && !force) {
+      return versions;
+    }
+    const loadVersions = (repo: string) => {
+      return helmChartsApi.get(repo, chartName).then(({ versions }) => {
+        return versions.map(chart => ({
+          repo: repo,
+          version: chart.getVersion()
+        }))
+      })
+    };
+    if (!this.isLoaded) {
+      await this.loadAll();
+    }
+    const repos = this.items
+      .filter(chart => chart.getName() === chartName)
+      .map(chart => chart.getRepository());
+    versions = await Promise.all(repos.map(loadVersions))
+      .then(flatten)
+      .then(this.sortVersions);
+
+    this.versions.set(chartName, versions);
+    return versions;
+  }
+
+  reset() {
+    super.reset();
+    this.versions.clear();
+  }
+}
+
+export const helmChartStore = new HelmChartStore();

dashboard/client/components/+apps-helm-charts/helm-charts.route.ts

@@ -0,0 +1,14 @@
+import { RouteProps } from "react-router"
+import { appsRoute } from "../+apps/apps.route";
+import { buildURL } from "../../navigation";
+
+export const helmChartsRoute: RouteProps = {
+  path: appsRoute.path + "/charts/:repo?/:chartName?"
+}
+
+export interface IHelmChartsRouteParams {
+  chartName?: string;
+  repo?: string;
+}
+
+export const helmChartsURL = buildURL<IHelmChartsRouteParams>(helmChartsRoute.path)

dashboard/client/components/+apps-helm-charts/helm-charts.scss

@@ -0,0 +1,62 @@
+.HelmCharts {
+  .SearchInput {
+    width: 70%;
+    margin: auto;
+
+    > label {
+      padding: $padding $padding * 2;
+    }
+  }
+
+  .TableCell {
+    text-overflow: ellipsis;
+
+    &.name {
+      flex-grow: 1.3;
+    }
+
+    &.icon {
+      display: flex;
+      flex-grow: 0.3;
+      padding: 0;
+
+      figure {
+        $iconSize: $unit * 3.5;
+        width: $iconSize;
+        height: $iconSize;
+        border-radius: 50%;
+        background: $helmImgBackground url(./helm-placeholder.svg) center center no-repeat;
+        background-size: 72%; // bg size looks same as image on top of it
+        margin: auto;
+
+        img {
+          object-fit: contain;
+          width: inherit;
+          height: inherit;
+          visibility: hidden;
+          border-radius: inherit;
+          background-color: $helmImgBackground;
+          padding: $padding / 2;
+
+          &.visible {
+            visibility: visible;
+          }
+        }
+      }
+    }
+
+    &.description {
+      flex-grow: 2.5;
+    }
+
+    &.repository {
+      &.stable {
+        color: $helmStableRepo;
+      }
+
+      &.incubator {
+        color: $helmIncubatorRepo;
+      }
+    }
+  }
+}

dashboard/client/components/+apps-helm-charts/helm-charts.tsx

@@ -0,0 +1,109 @@
+import "./helm-charts.scss";
+
+import React, { Component } from "react";
+import { RouteComponentProps } from "react-router";
+import { observer } from "mobx-react";
+import { helmChartsURL, IHelmChartsRouteParams } from "./helm-charts.route";
+import { helmChartStore } from "./helm-chart.store";
+import { HelmChart } from "../../api/endpoints/helm-charts.api";
+import { HelmChartDetails } from "./helm-chart-details";
+import { navigation } from "../../navigation";
+import { ItemListLayout } from "../item-object-list/item-list-layout";
+import { t, Trans } from "@lingui/macro";
+import { _i18n } from "../../i18n";
+import { SearchInput } from "../input";
+
+enum sortBy {
+  name = "name",
+  repo = "repo",
+}
+
+interface Props extends RouteComponentProps<IHelmChartsRouteParams> {
+}
+
+@observer
+export class HelmCharts extends Component<Props> {
+  componentDidMount() {
+    helmChartStore.loadAll();
+  }
+
+  get selectedChart() {
+    const { match: { params: { chartName, repo } } } = this.props
+    return helmChartStore.getByName(chartName, repo);
+  }
+
+  showDetails = (chart: HelmChart) => {
+    if (!chart) {
+      navigation.merge(helmChartsURL())
+    }
+    else {
+      navigation.merge(helmChartsURL({
+        params: {
+          chartName: chart.getName(),
+          repo: chart.getRepository(),
+        }
+      }))
+    }
+  }
+
+  hideDetails = () => {
+    this.showDetails(null);
+  }
+
+  render() {
+    return (
+      <>
+        <ItemListLayout
+          className="HelmCharts"
+          store={helmChartStore}
+          isClusterScoped={true}
+          isSelectable={false}
+          sortingCallbacks={{
+            [sortBy.name]: (chart: HelmChart) => chart.getName(),
+            [sortBy.repo]: (chart: HelmChart) => chart.getRepository(),
+          }}
+          searchFilters={[
+            (chart: HelmChart) => chart.getName(),
+            (chart: HelmChart) => chart.getVersion(),
+            (chart: HelmChart) => chart.getAppVersion(),
+            (chart: HelmChart) => chart.getKeywords(),
+          ]}
+          filterItems={[
+            (items: HelmChart[]) => items.filter(item => !item.deprecated)
+          ]}
+          customizeHeader={() => (
+            <SearchInput placeholder={_i18n._(t`Search Helm Charts`)}/>
+          )}
+          renderTableHeader={[
+            { className: "icon" },
+            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: <Trans>Description</Trans>, className: "description" },
+            { title: <Trans>Version</Trans>, className: "version" },
+            { title: <Trans>App Version</Trans>, className: "app-version" },
+            { title: <Trans>Repository</Trans>, className: "repository", sortBy: sortBy.repo },
+
+          ]}
+          renderTableContents={(chart: HelmChart) => [
+            <figure>
+              <img
+                src={chart.getIcon() || require("./helm-placeholder.svg")}
+                onLoad={evt => evt.currentTarget.classList.add("visible")}
+              />
+            </figure>,
+            chart.getName(),
+            chart.getDescription(),
+            chart.getVersion(),
+            chart.getAppVersion(),
+            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() }
+          ]}
+          detailsItem={this.selectedChart}
+          onDetails={this.showDetails}
+        />
+        <HelmChartDetails
+          chart={this.selectedChart}
+          hideDetails={this.hideDetails}
+        />
+      </>
+    );
+  }
+}

dashboard/client/components/+apps-helm-charts/helm-placeholder.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 722.8 702" viewBox="0 0 722.8 702" xmlns="http://www.w3.org/2000/svg"><g fill="#929ba6"><path d="m318 299.5c2.1 1.6 4.8 2.5 7.6 2.5 6.9 0 12.6-5.5 12.9-12.3l.3-.2 4.3-76.7c-5.2.6-10.4 1.5-15.6 2.7-28.5 6.5-53.2 20.5-72.6 39.5l62.9 44.6z"/><path d="m309.5 411.9c-1.4-5.9-6.6-9.9-12.4-10-.8 0-1.7.1-2.5.2l-.1-.2-75.5 12.8c11.7 32.2 33.4 58.5 60.8 76.1l29.2-70.7-.2-.3c1.1-2.4 1.4-5.2.7-7.9z"/><path d="m284.4 357.5c2.5-.7 4.9-2.2 6.7-4.4 4.3-5.4 3.6-13.2-1.6-17.8l.1-.3-57.4-51.4c-17 27.8-25.1 61.1-21.4 95.3l73.6-21.2z"/><path d="m340.2 380 21.2 10.2 21.1-10.1 5.3-22.9-14.6-18.2h-23.6l-14.6 18.2z"/><path d="m384.2 289.4c.1 2.6 1 5.2 2.8 7.5 4.3 5.4 12.1 6.4 17.7 2.4l.2.1 62.5-44.3c-23.6-23.1-54.4-38.2-87.6-42.2z"/><path d="m490.3 283.7-57.1 51.1v.2c-2 1.7-3.5 4.1-4.1 6.8-1.5 6.8 2.5 13.5 9.2 15.3l.1.3 74 21.3c1.6-16 .6-32.5-3.2-49-3.9-16.8-10.4-32.2-18.9-46z"/><path d="m372.8 439.6c-1.2-2.3-3.2-4.3-5.8-5.5-2-.9-4-1.4-6-1.3-4.5.2-8.7 2.6-10.9 6.8h-.1l-37.1 67.1c25.7 8.8 54.1 10.7 82.5 4.2 5.1-1.2 10-2.5 14.9-4.2l-37.3-67.1z"/><path d="m711.7 425-60.4-262.2c-3.2-13.7-12.5-25.3-25.3-31.4l-244.4-116.8c-7.1-3.4-14.8-4.9-22.7-4.5-6.2.3-12.3 1.9-17.9 4.5l-244.3 116.7c-12.8 6.1-22.1 17.7-25.3 31.4l-60.2 262.3c-2.8 12.2-.5 25 6.3 35.5.8 1.3 1.7 2.5 2.7 3.7l169.1 210.3c8.9 11 22.3 17.4 36.5 17.4l271.2-.1c14.2 0 27.7-6.4 36.5-17.4l169.1-210.3c8.9-10.9 12.2-25.4 9.1-39.1zm-93-3.2c-1.8 7.8-10.2 12.6-18.9 10.7-.1 0-.2 0-.2 0-.1 0-.2-.1-.3-.1-1.2-.3-2.7-.5-3.8-.8-5-1.3-8.6-3.3-13.1-5.1-9.7-3.5-17.7-6.4-25.5-7.5-4-.3-6 1.6-8.2 3-1.1-.2-4.4-.8-6.2-1.1-14 44-43.9 82.2-84.3 106.1.7 1.7 1.9 5.3 2.4 5.9-.9 2.5-2.3 4.8-1.1 8.6 2.8 7.4 7.4 14.6 13 23.2 2.7 4 5.4 7.1 7.8 11.7.6 1.1 1.3 2.8 1.9 3.9 3.8 8 1 17.3-6.2 20.8-7.3 3.5-16.3-.2-20.2-8.3-.6-1.1-1.3-2.7-1.8-3.8-2.1-4.7-2.8-8.8-4.2-13.4-3.3-9.7-6-17.8-10-24.6-2.2-3.3-5-3.7-7.5-4.5-.5-.8-2.2-4-3.1-5.6-8.1 3.1-16.4 5.6-25.1 7.6-37.9 8.6-75.9 5.1-109.9-7.9l-3.3 6c-2.5.7-4.8 1.3-6.3 3.1-5.3 6.4-7.5 16.6-11.3 26.3-1.5 4.6-2.1 8.7-4.2 13.4-.5 1.1-1.3 2.6-1.8 3.7-3.9 8.1-12.9 11.7-20.2 8.2-7.2-3.5-10-12.7-6.2-20.8.6-1.2 1.3-2.8 1.9-3.9 2.4-4.6 5.2-7.7 7.8-11.7 5.5-8.7 10.4-16.4 13.2-23.8.7-2.4-.3-5.8-1.3-8.3l2.7-6.4c-38.9-23.1-69.7-59.8-84.3-105.3l-6.4 1.1c-1.7-1-5.1-3.2-8.4-3-7.8 1.1-15.8 4-25.5 7.5-4.5 1.7-8.1 3.7-13.1 5-1.1.3-2.6.6-3.8.8-.1 0-.2.1-.3.1s-.2 0-.2 0c-8.7 1.9-17.1-2.9-18.9-10.7s3.8-15.7 12.4-17.8c.1 0 .2 0 .2-.1h.1c1.2-.3 2.8-.7 3.9-.9 5.1-1 9.2-.7 14-1.1 10.2-1.1 18.7-1.9 26.2-4.3 2.4-1 4.7-4.3 6.3-6.3l6.1-1.8c-6.9-47.5 4.8-94.2 29.8-131.9l-4.7-4.2c-.3-1.8-.7-6-2.9-8.4-5.8-5.4-13-9.9-21.8-15.3-4.2-2.4-8-4-12.1-7.1-.9-.7-2.1-1.7-3-2.4-.1-.1-.1-.1-.2-.2-7-5.6-8.6-15.2-3.6-21.6 2.8-3.6 7.2-5.3 11.7-5.2 3.5.1 7.1 1.4 10.2 3.8 1 .8 2.4 1.8 3.2 2.6 3.9 3.4 6.3 6.7 9.6 10.2 7.2 7.3 13.2 13.4 19.7 17.8 3.4 2 6.1 1.2 8.7.8.8.6 3.7 2.6 5.3 3.8 24.9-26.4 57.6-46 95.6-54.6 8.8-2 17.7-3.3 26.4-4.1l.3-6.2c1.9-1.9 4.1-4.6 4.8-7.6.6-7.9-.4-16.3-1.6-26.5-.7-4.8-1.8-8.7-2-13.9 0-1.1 0-2.5 0-3.8 0-.1 0-.3 0-.4 0-9 6.5-16.2 14.6-16.2s14.6 7.3 14.6 16.2c0 1.3.1 3 0 4.2-.2 5.2-1.3 9.1-2 13.9-1.2 10.2-2.3 18.7-1.7 26.5.6 3.9 2.9 5.5 4.8 7.3 0 1.1.2 4.6.3 6.5 46.5 4.1 89.7 25.4 121.4 58.7l5.6-4c1.9.1 6 .7 8.9-1 6.5-4.4 12.5-10.5 19.7-17.8 3.3-3.5 5.7-6.8 9.7-10.2.9-.8 2.3-1.8 3.2-2.6 7-5.6 16.8-5 21.8 1.3s3.4 16-3.6 21.6c-1 .8-2.3 1.9-3.2 2.6-4.2 3.1-8 4.7-12.2 7.1-8.7 5.4-16 9.9-21.8 15.3-2.7 2.9-2.5 5.7-2.8 8.3-.8.7-3.7 3.3-5.2 4.7 12.6 18.8 22.1 40.1 27.4 63.3 5.3 23.1 6.1 46.1 3.1 68.3l5.9 1.7c1.1 1.5 3.2 5.2 6.3 6.3 7.5 2.4 16 3.2 26.2 4.3 4.8.4 8.9.2 14 1.1 1.2.2 3 .7 4.2 1 8.9 2.4 14.4 10.4 12.6 18.2z"/><path d="m428 401.7c-1-.2-2-.3-3-.2-1.7.1-3.3.5-4.9 1.3-6.2 3-9 10.4-6.2 16.7l-.1.1 29.6 71.4c28.5-18.2 49.8-45.3 61-76.6l-76.2-12.9z"/></g></svg>

dashboard/client/components/+apps-helm-charts/index.ts

@@ -0,0 +1,2 @@
+export * from "./helm-charts";
+export * from "./helm-charts.route";

dashboard/client/components/+apps-releases/index.ts

@@ -0,0 +1,2 @@
+export * from "./releases";
+export * from "./release.route";

dashboard/client/components/+apps-releases/release-details.scss

@@ -0,0 +1,86 @@
+@import "./release.mixins.scss";
+
+.ReleaseDetails {
+  &.light {
+    .AceEditor {
+      border: 1px solid gainsboro;
+      border-radius: $radius;
+    }
+  }
+
+  .DrawerItem {
+    align-items: center;
+  }
+
+  .status {
+    .Badge {
+      @include release-status-bgs;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .chart {
+    .upgrade {
+      min-width: 150px;
+    }
+  }
+
+  .resources {
+    .SubTitle {
+      text-transform: none;
+      padding-left: 0;
+    }
+
+    .Table {
+      margin-bottom: $margin * 4;
+      border: 1px solid var(--drawerSubtitleBackground);
+      border-radius: $radius;
+      overflow: auto;
+      @include custom-scrollbar();
+
+      .TableHead {
+        border-bottom: none;
+
+        .TableCell {
+          background-color: var(--drawerSubtitleBackground);
+          word-break: unset;
+        }
+      }
+
+      .TableCell {
+        text-overflow: unset;
+        word-break: break-word;
+        min-width: 100px;
+
+        &.name {
+          flex-basis: auto;
+          flex-grow: 0;
+          width: 230px;
+        }
+
+        &.volume {
+          flex-basis: 30%;
+        }
+      }
+    }
+  }
+
+  .notes {
+    white-space: pre-line;
+    font-family: "RobotoMono", monospace;
+    font-size: small;
+  }
+
+  .values {
+    .AceEditor {
+      min-height: 300px;
+    }
+
+    .AceEditor + .Button {
+      align-self: flex-start;
+    }
+  }
+}

dashboard/client/components/+apps-releases/release-details.tsx

@@ -0,0 +1,254 @@
+import "./release-details.scss";
+
+import React, { Component } from "react";
+import groupBy from "lodash/groupBy";
+import isEqual from "lodash/isEqual";
+import { observable, reaction } from "mobx";
+import { Link } from "react-router-dom";
+import { t, Trans } from "@lingui/macro";
+import kebabCase from "lodash/kebabCase";
+import { HelmRelease, helmReleasesApi, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
+import { HelmReleaseMenu } from "./release-menu";
+import { Drawer, DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import { cssNames, stopPropagation } from "../../utils";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Spinner } from "../spinner";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { AceEditor } from "../ace-editor";
+import { Button } from "../button";
+import { releaseStore } from "./release.store";
+import { Notifications } from "../notifications";
+import { Icon } from "../icon";
+import { createUpgradeChartTab } from "../dock/upgrade-chart.store";
+import { getDetailsUrl } from "../../navigation";
+import { _i18n } from "../../i18n";
+import { themeStore } from "../../theme.store";
+import { apiManager } from "../../api/api-manager";
+import { SubTitle } from "../layout/sub-title";
+import { secretsStore } from "../+config-secrets/secrets.store";
+import { Secret } from "../../api/endpoints";
+
+interface Props {
+  release: HelmRelease;
+  hideDetails(): void;
+}
+
+@observer
+export class ReleaseDetails extends Component<Props> {
+  @observable details: IReleaseDetails;
+  @observable values = "";
+  @observable saving = false;
+  @observable releaseSecret: Secret;
+
+  @disposeOnUnmount
+  releaseSelector = reaction(() => this.props.release, release => {
+    if (!release) return;
+    this.loadDetails();
+    this.loadValues();
+    this.releaseSecret = null;
+  }
+  );
+
+  @disposeOnUnmount
+  secretWatcher = reaction(() => secretsStore.items.toJS(), () => {
+    if (!this.props.release) return;
+    const { getReleaseSecret } = releaseStore;
+    const { release } = this.props;
+    const secret = getReleaseSecret(release);
+    if (this.releaseSecret) {
+      if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
+      this.loadDetails();
+    }
+    this.releaseSecret = secret;
+  });
+
+  async loadDetails() {
+    const { release } = this.props;
+    this.details = null;
+    this.details = await helmReleasesApi.get(release.getName(), release.getNs());
+  }
+
+  async loadValues() {
+    const { release } = this.props;
+    this.values = "";
+    this.values = await helmReleasesApi.getValues(release.getName(), release.getNs());
+  }
+
+  updateValues = async () => {
+    const { release } = this.props;
+    const name = release.getName();
+    const namespace = release.getNs()
+    const data = {
+      chart: release.getChart(),
+      repo: await release.getRepo(),
+      version: release.getVersion(),
+      values: this.values
+    };
+    this.saving = true;
+    try {
+      await releaseStore.update(name, namespace, data);
+      Notifications.ok(
+        <p>Release <b>{name}</b> successfully updated!</p>
+      );
+    } catch (err) {
+      Notifications.error(err);
+    }
+    this.saving = false;
+  }
+
+  upgradeVersion = () => {
+    const { release, hideDetails } = this.props;
+    createUpgradeChartTab(release);
+    hideDetails();
+  }
+
+  renderValues() {
+    const { values, saving } = this;
+    return (
+      <div className="values">
+        <DrawerTitle title={_i18n._(t`Values`)}/>
+        <div className="flex column gaps">
+          <AceEditor
+            mode="yaml"
+            value={values}
+            onChange={values => this.values = values}
+          />
+          <Button
+            primary
+            label={_i18n._(t`Save`)}
+            waiting={saving}
+            onClick={this.updateValues}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderNotes() {
+    if (!this.details.info?.notes) return null;
+    const { notes } = this.details.info;
+    return (
+      <div className="notes">
+        {notes}
+      </div>
+    );
+  }
+
+  renderResources() {
+    const { resources } = this.details;
+    if (!resources) return null;
+    const groups = groupBy(resources, item => item.kind);
+    const tables = Object.entries(groups).map(([kind, items]) => {
+      return (
+        <React.Fragment key={kind}>
+          <SubTitle title={kind}/>
+          <Table scrollable={false}>
+            <TableHead sticky={false}>
+              <TableCell className="name">Name</TableCell>
+              {items[0].getNs() && <TableCell className="namespace">Namespace</TableCell>}
+              <TableCell className="age">Age</TableCell>
+            </TableHead>
+            {items.map(item => {
+              const name = item.getName();
+              const namespace = item.getNs();
+              const api = apiManager.getApi(item.metadata.selfLink);
+              const detailsUrl = api ? getDetailsUrl(api.getUrl({
+                name,
+                namespace,
+              })) : "";
+              return (
+                <TableRow key={item.getId()}>
+                  <TableCell className="name">
+                    {detailsUrl ? <Link to={detailsUrl}>{name}</Link> : name}
+                  </TableCell>
+                  {namespace && <TableCell className="namespace">{namespace}</TableCell>}
+                  <TableCell className="age">{item.getAge()}</TableCell>
+                </TableRow>
+              );
+            })}
+          </Table>
+        </React.Fragment>
+      );
+    });
+    return (
+      <div className="resources">
+        {tables}
+      </div>
+    );
+  }
+
+  renderContent() {
+    const { release } = this.props;
+    const { details } = this;
+    if (!release) return null;
+    if (!details) {
+      return <Spinner center/>;
+    }
+    return (
+      <div>
+        <DrawerItem name={<Trans>Chart</Trans>} className="chart">
+          <div className="flex gaps align-center">
+            <span>{release.getChart()}</span>
+            {release.hasNewVersion() && (
+              <Button
+                primary
+                label={_i18n._(t`Upgrade`)}
+                className="box right upgrade"
+                onClick={this.upgradeVersion}
+              />
+            )}
+          </div>
+        </DrawerItem>
+        <DrawerItem name={<Trans>Updated</Trans>}>
+          {release.getUpdated()} <Trans>ago</Trans> ({release.updated})
+        </DrawerItem>
+        <DrawerItem name={<Trans>Namespace</Trans>}>
+          {release.getNs()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Version</Trans>} onClick={stopPropagation}>
+          <div className="version flex gaps align-center">
+            <span>
+              {release.getVersion()}
+            </span>
+            {!release.getLastVersion() && (
+              <Icon svg="spinner" small/>
+            )}
+            {release.hasNewVersion() && (
+              <span><Trans>New version available:</Trans> <b>{release.getLastVersion()}</b></span>
+            )}
+          </div>
+        </DrawerItem>
+        <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
+          <Badge
+            label={release.getStatus()}
+            className={cssNames("status", kebabCase(release.getStatus()))}
+          />
+        </DrawerItem>
+        {this.renderValues()}
+        <DrawerTitle title={_i18n._(t`Notes`)}/>
+        {this.renderNotes()}
+        <DrawerTitle title={_i18n._(t`Resources`)}/>
+        {this.renderResources()}
+      </div>
+    )
+  }
+
+  render() {
+    const { release, hideDetails } = this.props
+    const title = release ? <Trans>Release: {release.getName()}</Trans> : ""
+    const toolbar = <HelmReleaseMenu release={release} toolbar hideDetails={hideDetails}/>
+    return (
+      <Drawer
+        className={cssNames("ReleaseDetails", themeStore.activeTheme.type)}
+        usePortal={true}
+        open={!!release}
+        title={title}
+        onClose={hideDetails}
+        toolbar={toolbar}
+      >
+        {this.renderContent()}
+      </Drawer>
+    )
+  }
+}

dashboard/client/components/+apps-releases/release-menu.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { t, Trans } from "@lingui/macro";
+import { HelmRelease } from "../../api/endpoints/helm-releases.api";
+import { autobind, cssNames } from "../../utils";
+import { releaseStore } from "./release.store";
+import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
+import { MenuItem } from "../menu";
+import { Icon } from "../icon";
+import { ReleaseRollbackDialog } from "./release-rollback-dialog";
+import { createUpgradeChartTab } from "../dock/upgrade-chart.store";
+import { _i18n } from "../../i18n";
+
+interface Props extends MenuActionsProps {
+  release: HelmRelease;
+  hideDetails?(): void;
+}
+
+export class HelmReleaseMenu extends React.Component<Props> {
+  @autobind()
+  remove() {
+    return releaseStore.remove(this.props.release);
+  }
+
+  @autobind()
+  upgrade() {
+    const { release, hideDetails } = this.props;
+    createUpgradeChartTab(release);
+    hideDetails && hideDetails();
+  }
+
+  @autobind()
+  rollback() {
+    ReleaseRollbackDialog.open(this.props.release);
+  }
+
+  renderContent() {
+    const { release, toolbar } = this.props;
+    if (!release) return;
+    const hasRollback = release && release.getRevision() > 1;
+    const hasNewVersion = release.hasNewVersion();
+    return (
+      <>
+        {hasRollback && (
+          <MenuItem onClick={this.rollback}>
+            <Icon material="history" interactive={toolbar} title={_i18n._(t`Rollback`)}/>
+            <span className="title"><Trans>Rollback</Trans></span>
+          </MenuItem>
+        )}
+        {hasNewVersion && (
+          <MenuItem onClick={this.upgrade}>
+            <Icon material="build" interactive={toolbar} title={_i18n._(t`Upgrade`)}/>
+            <span className="title"><Trans>Upgrade</Trans></span>
+          </MenuItem>
+        )}
+      </>
+    )
+  }
+
+  render() {
+    const { className, release, ...menuProps } = this.props;
+    return (
+      <MenuActions
+        {...menuProps}
+        className={cssNames("HelmReleaseMenu", className)}
+        removeAction={this.remove}
+        children={this.renderContent()}
+      />
+    );
+  }
+}

dashboard/client/components/+apps-releases/release-rollback-dialog.scss

@@ -0,0 +1,9 @@
+.ReleaseRollbackDialog {
+  .WizardStep {
+    text-align: center;
+
+    .step-content {
+      padding: var(--wizard-spacing);
+    }
+  }
+}

dashboard/client/components/+apps-releases/release-rollback-dialog.tsx

@@ -0,0 +1,109 @@
+import "./release-rollback-dialog.scss";
+
+import * as React from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { Dialog, DialogProps } from "../dialog";
+import { Wizard, WizardStep } from "../wizard";
+import { HelmRelease, helmReleasesApi, IReleaseRevision } from "../../api/endpoints/helm-releases.api";
+import { releaseStore } from "./release.store";
+import { Select, SelectOption } from "../select";
+import { Notifications } from "../notifications";
+import orderBy from "lodash/orderBy"
+
+interface Props extends DialogProps {
+}
+
+@observer
+export class ReleaseRollbackDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+  @observable.ref static release: HelmRelease = null;
+
+  @observable isLoading = false;
+  @observable revision: IReleaseRevision;
+  @observable revisions = observable.array<IReleaseRevision>();
+
+  static open(release: HelmRelease) {
+    ReleaseRollbackDialog.isOpen = true;
+    ReleaseRollbackDialog.release = release;
+  }
+
+  static close() {
+    ReleaseRollbackDialog.isOpen = false;
+  }
+
+  get release(): HelmRelease {
+    return ReleaseRollbackDialog.release;
+  }
+
+  onOpen = async () => {
+    this.isLoading = true;
+    const currentRevision = this.release.getRevision();
+    let releases = await helmReleasesApi.getHistory(this.release.getName(), this.release.getNs());
+    releases = releases.filter(item => item.revision !== currentRevision); // remove current
+    releases = orderBy(releases, "revision", "desc"); // sort
+    this.revisions.replace(releases);
+    this.revision = this.revisions[0];
+    this.isLoading = false;
+  }
+
+  rollback = async () => {
+    const revisionNumber = this.revision.revision;
+    try {
+      await releaseStore.rollback(this.release.getName(), this.release.getNs(), revisionNumber);
+      this.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  };
+
+  close = () => {
+    ReleaseRollbackDialog.close();
+  }
+
+  renderContent() {
+    const { revision, revisions } = this;
+    if (!revision) {
+      return <p><Trans>No revisions to rollback.</Trans></p>
+    }
+    return (
+      <div className="flex gaps align-center">
+        <b><Trans>Revision</Trans></b>
+        <Select
+          themeName="light"
+          value={revision}
+          options={revisions}
+          formatOptionLabel={({ value }: SelectOption<IReleaseRevision>) => `${value.revision} - ${value.chart}`}
+          onChange={({ value }: SelectOption<IReleaseRevision>) => this.revision = value}
+        />
+      </div>
+    )
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const releaseName = this.release ? this.release.getName() : "";
+    const header = <h5><Trans>Rollback <b>{releaseName}</b></Trans></h5>
+    return (
+      <Dialog
+        {...dialogProps}
+        className="ReleaseRollbackDialog"
+        isOpen={ReleaseRollbackDialog.isOpen}
+        onOpen={this.onOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            scrollable={false}
+            nextLabel={<Trans>Rollback</Trans>}
+            next={this.rollback}
+            loading={this.isLoading}
+          >
+            {this.renderContent()}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

dashboard/client/components/+apps-releases/release.mixins.scss

@@ -0,0 +1,25 @@
+$release-status-color-list: (
+  deployed: $colorSuccess,
+  failed: $colorError,
+  deleting: $colorWarning,
+  pendingInstall: $colorInfo,
+  pendingUpgrade: $colorInfo,
+  pendingRollback: $colorInfo,
+);
+
+@mixin release-status-bgs {
+  @each $status, $color in $release-status-color-list {
+    &.#{$status} {
+      color: white;
+      background: $color;
+    }
+  }
+}
+
+@mixin release-status-colors {
+  @each $status, $color in $release-status-color-list {
+    &.#{$status} {
+      color: $color;
+    }
+  }
+}

dashboard/client/components/+apps-releases/release.route.ts

@@ -0,0 +1,14 @@
+import { RouteProps } from "react-router"
+import { appsRoute } from "../+apps/apps.route";
+import { buildURL } from "../../navigation";
+
+export const releaseRoute: RouteProps = {
+  path: appsRoute.path + "/releases/:namespace?/:name?"
+}
+
+export interface IReleaseRouteParams {
+  name?: string;
+  namespace?: string;
+}
+
+export const releaseURL = buildURL<IReleaseRouteParams>(releaseRoute.path);

dashboard/client/components/+apps-releases/release.store.ts

@@ -0,0 +1,112 @@
+import isEqual from "lodash/isEqual";
+import { action, observable, when, IReactionDisposer, reaction } from "mobx";
+import { autobind } from "../../utils";
+import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayload } from "../../api/endpoints/helm-releases.api";
+import { ItemStore } from "../../item.store";
+import { configStore } from "../../config.store";
+import { secretsStore } from "../+config-secrets/secrets.store";
+import { Secret } from "../../api/endpoints";
+
+@autobind()
+export class ReleaseStore extends ItemStore<HelmRelease> {
+  @observable releaseSecrets: Secret[] = [];
+  @observable secretWatcher: IReactionDisposer;
+
+  constructor() {
+    super();
+    when(() => secretsStore.isLoaded, () => {
+      this.releaseSecrets = this.getReleaseSecrets();
+    });
+  }
+
+  watch() {
+    this.secretWatcher = reaction(() => secretsStore.items.toJS(), () => {
+      if (this.isLoading) return;
+      const secrets = this.getReleaseSecrets();
+      const amountChanged = secrets.length !== this.releaseSecrets.length;
+      const labelsChanged = this.releaseSecrets.some(item => {
+        const secret = secrets.find(secret => secret.getId() == item.getId());
+        if (!secret) return;
+        return !isEqual(item.getLabels(), secret.getLabels());
+      });
+      if (amountChanged || labelsChanged) {
+        this.loadAll();
+      }
+      this.releaseSecrets = [...secrets];
+    })
+  }
+
+  unwatch() {
+    this.secretWatcher();
+  }
+
+  getReleaseSecrets() {
+    return secretsStore.getByLabel({ owner: "helm" });
+  }
+
+  getReleaseSecret(release: HelmRelease) {
+    const labels = {
+      owner: "helm",
+      name: release.getName()
+    }
+    return secretsStore.getByLabel(labels)
+      .filter(secret => secret.getNs() == release.getNs())[0];
+  }
+
+  @action
+  async loadAll() {
+    this.isLoading = true;
+    let items;
+    try {
+      const { isClusterAdmin, allowedNamespaces } = configStore;
+      items = await this.loadItems(!isClusterAdmin ? allowedNamespaces : null);
+    } finally {
+      if (items) {
+        items = this.sortItems(items);
+        this.items.replace(items);
+      }
+      this.isLoaded = true;
+      this.isLoading = false;
+    }
+  }
+
+  async loadItems(namespaces?: string[]) {
+    if (!namespaces) {
+      return helmReleasesApi.list();
+    }
+    else {
+      return Promise
+        .all(namespaces.map(namespace => helmReleasesApi.list(namespace)))
+        .then(items => items.flat());
+    }
+  }
+
+  async create(payload: IReleaseCreatePayload) {
+    const response = await helmReleasesApi.create(payload);
+    if (this.isLoaded) this.loadAll();
+    return response;
+  }
+
+  async update(name: string, namespace: string, payload: IReleaseUpdatePayload) {
+    const response = await helmReleasesApi.update(name, namespace, payload);
+    if (this.isLoaded) this.loadAll();
+    return response;
+  }
+
+  async rollback(name: string, namespace: string, revision: number) {
+    const response = await helmReleasesApi.rollback(name, namespace, revision);
+    if (this.isLoaded) this.loadAll();
+    return response;
+  }
+
+  async remove(release: HelmRelease) {
+    return super.removeItem(release, () => helmReleasesApi.delete(release.getName(), release.getNs()));
+  }
+
+  async removeSelectedItems() {
+    if (!this.selectedItems.length) return;
+    return Promise.all(this.selectedItems.map(this.remove));
+  }
+}
+
+export const releaseStore = new ReleaseStore();

dashboard/client/components/+apps-releases/releases.scss

@@ -0,0 +1,19 @@
+@import "./release.mixins.scss";
+
+.HelmReleases {
+  .TableCell {
+    &.status {
+      @include release-status-colors;
+    }
+
+    &.version {
+      > .Icon {
+        margin-left: $margin;
+
+        &.new-version {
+          color: $colorInfo;
+        }
+      }
+    }
+  }
+}

dashboard/client/components/+apps-releases/releases.tsx

@@ -0,0 +1,183 @@
+import "./releases.scss";
+
+import React, { Component } from "react";
+import kebabCase from "lodash/kebabCase";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { autobind, interval } from "../../utils";
+import { releaseStore } from "./release.store";
+import { helmChartStore } from "../+apps-helm-charts/helm-chart.store";
+import { IReleaseRouteParams, releaseURL } from "./release.route";
+import { HelmRelease } from "../../api/endpoints/helm-releases.api";
+import { ReleaseDetails } from "./release-details";
+import { ReleaseRollbackDialog } from "./release-rollback-dialog";
+import { navigation } from "../../navigation";
+import { ItemListLayout } from "../item-object-list/item-list-layout";
+import { HelmReleaseMenu } from "./release-menu";
+import { Icon } from "../icon";
+import { secretsStore } from "../+config-secrets/secrets.store";
+import { when } from "mobx";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  revision = "revision",
+  chart = "chart",
+  status = "status",
+  updated = "update"
+}
+
+interface Props extends RouteComponentProps<IReleaseRouteParams> {
+}
+
+@observer
+export class HelmReleases extends Component<Props> {
+  private versionsWatcher = interval(3600, this.checkVersions);
+
+  componentDidMount() {
+    // Watch for secrets associated with releases and react to their changes
+    releaseStore.watch();
+    this.versionsWatcher.start();
+    when(() => releaseStore.isLoaded, this.checkVersions);
+  }
+
+  componentWillUnmount() {
+    releaseStore.unwatch();
+    this.versionsWatcher.stop();
+  }
+
+  // Check all available versions every 1 hour for installed releases.
+  // This required to show "upgrade" icon in the list and upgrade button in the details view.
+  @autobind()
+  checkVersions() {
+    const charts = releaseStore.items.map(release => release.getChart());
+    return charts.reduce((promise, chartName) => {
+      const loadVersions = () => helmChartStore.getVersions(chartName, true);
+      return promise.then(loadVersions, loadVersions);
+    }, Promise.resolve({}))
+  };
+
+  get selectedRelease() {
+    const { match: { params: { name, namespace } } } = this.props;
+    return releaseStore.items.find(release => {
+      return release.getName() == name && release.getNs() == namespace;
+    });
+  }
+
+  showDetails = (item: HelmRelease) => {
+    if (!item) {
+      navigation.merge(releaseURL())
+    }
+    else {
+      navigation.merge(releaseURL({
+        params: {
+          name: item.getName(),
+          namespace: item.getNs()
+        }
+      }))
+    }
+  }
+
+  hideDetails = () => {
+    this.showDetails(null);
+  }
+
+  renderRemoveDialogMessage(selectedItems: HelmRelease[]) {
+    const releaseNames = selectedItems.map(item => item.getName()).join(", ");
+    return (
+      <div>
+        <Trans>Remove <b>{releaseNames}</b>?</Trans>
+        <p className="warning">
+          <Trans>Note: StatefulSet Volumes won't be deleted automatically</Trans>
+        </p>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <>
+        <ItemListLayout
+          className="HelmReleases"
+          store={releaseStore}
+          dependentStores={[secretsStore]}
+          sortingCallbacks={{
+            [sortBy.name]: (release: HelmRelease) => release.getName(),
+            [sortBy.namespace]: (release: HelmRelease) => release.getNs(),
+            [sortBy.revision]: (release: HelmRelease) => release.getRevision(),
+            [sortBy.chart]: (release: HelmRelease) => release.getChart(),
+            [sortBy.status]: (release: HelmRelease) => release.getStatus(),
+            [sortBy.updated]: (release: HelmRelease) => release.getUpdated(false, false),
+          }}
+          searchFilters={[
+            (release: HelmRelease) => release.getName(),
+            (release: HelmRelease) => release.getNs(),
+            (release: HelmRelease) => release.getChart(),
+            (release: HelmRelease) => release.getStatus(),
+            (release: HelmRelease) => release.getVersion(),
+          ]}
+          renderHeaderTitle={<Trans>Releases</Trans>}
+          renderTableHeader={[
+            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+            { title: <Trans>Chart</Trans>, className: "chart", sortBy: sortBy.chart },
+            { title: <Trans>Revision</Trans>, className: "revision", sortBy: sortBy.revision },
+            { title: <Trans>Version</Trans>, className: "version" },
+            { title: <Trans>App Version</Trans>, className: "app-version" },
+            { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+            { title: <Trans>Updated</Trans>, className: "updated", sortBy: sortBy.updated },
+          ]}
+          renderTableContents={(release: HelmRelease) => {
+            const version = release.getVersion();
+            const lastVersion = release.getLastVersion();
+            return [
+              release.getName(),
+              release.getNs(),
+              release.getChart(),
+              release.getRevision(),
+              <>
+                {version}
+                {!lastVersion && (
+                  <Icon
+                    small svg="spinner"
+                    className="checking-update"
+                    tooltip={<Trans>Checking update</Trans>}
+                  />
+                )}
+                {release.hasNewVersion() && (
+                  <Icon
+                    material="new_releases"
+                    className="new-version"
+                    tooltip={<Trans>New version: {lastVersion}</Trans>}
+                  />
+                )}
+              </>,
+              release.appVersion,
+              { title: release.getStatus(), className: kebabCase(release.getStatus()) },
+              release.getUpdated(),
+            ]
+          }}
+          renderItemMenu={(release: HelmRelease) => {
+            return (
+              <HelmReleaseMenu
+                release={release}
+                removeConfirmationMessage={this.renderRemoveDialogMessage([release])}
+              />
+            )
+          }}
+          customizeRemoveDialog={(selectedItems: HelmRelease[]) => ({
+            message: this.renderRemoveDialogMessage(selectedItems)
+          })}
+          detailsItem={this.selectedRelease}
+          onDetails={this.showDetails}
+        />
+        <ReleaseDetails
+          release={this.selectedRelease}
+          hideDetails={this.hideDetails}
+        />
+        <ReleaseRollbackDialog/>
+      </>
+    );
+  }
+}

dashboard/client/components/+apps/apps.route.ts

@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const appsRoute: RouteProps = {
+  path: "/apps",
+};
+
+export const appsURL = buildURL(appsRoute.path);

dashboard/client/components/+apps/apps.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Redirect, Route, Switch } from "react-router";
+import { Trans } from "@lingui/macro";
+import { MainLayout, TabRoute } from "../layout/main-layout";
+import { HelmCharts, helmChartsRoute, helmChartsURL } from "../+apps-helm-charts";
+import { HelmReleases, releaseRoute, releaseURL } from "../+apps-releases";
+import { namespaceStore } from "../+namespaces/namespace.store";
+
+@observer
+export class Apps extends React.Component {
+  static get tabRoutes(): TabRoute[] {
+    const query = namespaceStore.getContextParams();
+    return [
+      {
+        title: <Trans>Charts</Trans>,
+        component: HelmCharts,
+        url: helmChartsURL(),
+        path: helmChartsRoute.path,
+      },
+      {
+        title: <Trans>Releases</Trans>,
+        component: HelmReleases,
+        url: releaseURL({ query }),
+        path: releaseRoute.path,
+      },
+    ]
+  }
+
+  render() {
+    const tabRoutes = Apps.tabRoutes;
+    return (
+      <MainLayout className="Apps" tabs={tabRoutes}>
+        <Switch>
+          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
+          <Redirect to={tabRoutes[0].url}/>
+        </Switch>
+      </MainLayout>
+    )
+  }
+}

dashboard/client/components/+apps/index.ts

@@ -0,0 +1,2 @@
+export * from "./apps";
+export * from "./apps.route";

dashboard/client/components/+cluster/cluster-issues.scss

@@ -0,0 +1,58 @@
+.ClusterIssues {
+  min-height: 350px;
+  position: relative;
+
+  @include media("<1024px") {
+    grid-column-start: 1!important;
+    grid-column-end: 1!important;
+  }
+
+  &.wide {
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
+
+  .SubHeader {
+    .Icon {
+      font-size: 130%;
+      color: $colorError;
+    }
+  }
+
+  .Table {
+    .TableHead {
+      background-color: transparent;
+      border-bottom: 1px solid $borderFaintColor;
+
+      .TableCell {
+        padding-top: 0;
+        padding-bottom: floor($padding / 1.33);
+      }
+    }
+
+    .TableCell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &.message {
+        flex-grow: 3;
+      }
+
+      &.object {
+        flex-grow: 2;
+      }
+    }
+  }
+
+  .no-issues {
+    .Icon {
+      color: white;
+    }
+
+    .ok-title {
+      font-size: large;
+      color: $textColorAccent;
+      font-weight: bold;
+    }
+  }
+}

dashboard/client/components/+cluster/cluster-issues.tsx

@@ -0,0 +1,149 @@
+import "./cluster-issues.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { Trans } from "@lingui/macro";
+import { Icon } from "../icon";
+import { SubHeader } from "../layout/sub-header";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { nodesStore } from "../+nodes/nodes.store";
+import { eventStore } from "../+events/event.store";
+import { autobind, cssNames, prevDefault } from "../../utils";
+import { getSelectedDetails, showDetails } from "../../navigation";
+import { ItemObject } from "../../item.store";
+import { Spinner } from "../spinner";
+import { themeStore } from "../../theme.store";
+import { lookupApiLink } from "../../api/kube-api";
+
+interface Props {
+  className?: string;
+}
+
+interface IWarning extends ItemObject {
+  kind: string;
+  message: string;
+  selfLink: string;
+}
+
+enum sortBy {
+  type = "type",
+  object = "object"
+}
+
+@observer
+export class ClusterIssues extends React.Component<Props> {
+  private sortCallbacks = {
+    [sortBy.type]: (warning: IWarning) => warning.kind,
+    [sortBy.object]: (warning: IWarning) => warning.getName(),
+  };
+
+  @computed get warnings() {
+    const warnings: IWarning[] = [];
+
+    // Node bad conditions
+    nodesStore.items.forEach(node => {
+      const { kind, selfLink, getId, getName } = node
+      node.getWarningConditions().forEach(({ message }) => {
+        warnings.push({
+          kind,
+          getId,
+          getName,
+          selfLink,
+          message,
+        })
+      })
+    });
+
+    // Warning events for Workloads
+    const events = eventStore.getWarnings();
+    events.forEach(error => {
+      const { message, involvedObject } = error;
+      const { uid, name, kind } = involvedObject;
+      warnings.push({
+        getId: () => uid,
+        getName: () => name,
+        message,
+        kind,
+        selfLink: lookupApiLink(involvedObject, error),
+      });
+    })
+
+    return warnings;
+  }
+
+  @autobind()
+  getTableRow(uid: string) {
+    const { warnings } = this;
+    const warning = warnings.find(warn => warn.getId() == uid);
+    const { getId, getName, message, kind, selfLink } = warning;
+    return (
+      <TableRow
+        key={getId()}
+        sortItem={warning}
+        selected={selfLink === getSelectedDetails()}
+        onClick={prevDefault(() => showDetails(selfLink))}
+      >
+        <TableCell className="message">
+          {message}
+        </TableCell>
+        <TableCell className="object">
+          {getName()}
+        </TableCell>
+        <TableCell className="kind">
+          {kind}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  renderContent() {
+    const { warnings } = this;
+    if (!eventStore.isLoaded) {
+      return (
+        <Spinner center/>
+      );
+    }
+    if (!warnings.length) {
+      return (
+        <div className="no-issues flex column box grow gaps align-center justify-center">
+          <div><Icon material="check" big sticker/></div>
+          <div className="ok-title"><Trans>No issues found</Trans></div>
+          <span><Trans>Everything is fine in the Cluster</Trans></span>
+        </div>
+      );
+    }
+    return (
+      <>
+        <SubHeader>
+          <Icon material="error_outline"/>{" "}
+          <Trans>Warnings: {warnings.length}</Trans>
+        </SubHeader>
+        <Table
+          items={warnings}
+          virtual
+          selectable
+          sortable={this.sortCallbacks}
+          sortByDefault={{ sortBy: sortBy.object, orderBy: "asc" }}
+          sortSyncWithUrl={false}
+          getTableRow={this.getTableRow}
+          className={cssNames("box grow", themeStore.activeTheme.type)}
+        >
+          <TableHead nowrap>
+            <TableCell className="message"><Trans>Message</Trans></TableCell>
+            <TableCell className="object" sortBy={sortBy.object}><Trans>Object</Trans></TableCell>
+            <TableCell className="kind" sortBy={sortBy.type}><Trans>Type</Trans></TableCell>
+          </TableHead>
+        </Table>
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <div className={cssNames("ClusterIssues flex column", this.props.className)}>
+        {this.renderContent()}
+      </div>
+    );
+  }
+}

dashboard/client/components/+cluster/cluster-metric-switchers.scss

@@ -0,0 +1,7 @@
+.ClusterMetricSwitchers {
+  margin-bottom: $margin * 2;
+
+  .metric-switch {
+    text-align: right;
+  }
+}

dashboard/client/components/+cluster/cluster-metric-switchers.tsx

@@ -0,0 +1,43 @@
+import "./cluster-metric-switchers.scss";
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { observer } from "mobx-react";
+import { nodesStore } from "../+nodes/nodes.store";
+import { cssNames } from "../../utils";
+import { Radio, RadioGroup } from "../radio";
+import { clusterStore, MetricNodeRole, MetricType } from "./cluster.store";
+
+export const ClusterMetricSwitchers = observer(() => {
+  const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterStore;
+  const { masterNodes, workerNodes } = nodesStore;
+  const metricsValues = getMetricsValues(metrics);
+  const disableRoles = !masterNodes.length || !workerNodes.length;
+  const disableMetrics = !metricsValues.length;
+  return (
+    <div className="ClusterMetricSwitchers flex gaps">
+      <div className="box grow">
+        <RadioGroup
+          asButtons
+          className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
+          value={metricNodeRole}
+          onChange={(metric: MetricNodeRole) => clusterStore.metricNodeRole = metric}
+        >
+          <Radio label={<Trans>Master</Trans>} value={MetricNodeRole.MASTER}/>
+          <Radio label={<Trans>Worker</Trans>} value={MetricNodeRole.WORKER}/>
+        </RadioGroup>
+      </div>
+      <div className="box grow metric-switch">
+        <RadioGroup
+          asButtons
+          className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
+          value={metricType}
+          onChange={(value: MetricType) => clusterStore.metricType = value}
+        >
+          <Radio label={<Trans>CPU</Trans>} value={MetricType.CPU}/>
+          <Radio label={<Trans>Memory</Trans>} value={MetricType.MEMORY}/>
+        </RadioGroup>
+      </div>
+    </div>
+  );
+});

dashboard/client/components/+cluster/cluster-metrics.scss

@@ -0,0 +1,16 @@
+.ClusterMetrics {
+  position: relative;
+  min-height: 280px;
+
+  .Chart {
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .empty {
+    margin-top: -45px;
+    text-align: center;
+  }
+}

dashboard/client/components/+cluster/cluster-metrics.tsx

@@ -0,0 +1,95 @@
+import "./cluster-metrics.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { ChartOptions, ChartPoint } from "chart.js";
+import { clusterStore, MetricType } from "./cluster.store";
+import { BarChart } from "../chart";
+import { bytesToUnits } from "../../utils";
+import { Spinner } from "../spinner";
+import { ZebraStripes } from "../chart/zebra-stripes.plugin";
+import { ClusterNoMetrics } from "./cluster-no-metrics";
+import { ClusterMetricSwitchers } from "./cluster-metric-switchers";
+import { getMetricLastPoints } from "../../api/endpoints/metrics.api";
+
+export const ClusterMetrics = observer(() => {
+  const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics, liveMetrics } = clusterStore;
+  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterStore.metrics);
+  const metricValues = getMetricsValues(metrics);
+  const liveMetricValues = getMetricsValues(liveMetrics);
+  const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
+  const data = metricValues.map(value => ({
+    x: value[0],
+    y: parseFloat(value[1]).toFixed(3)
+  }));
+
+  const datasets = [{
+    id: metricType + metricNodeRole,
+    label: metricType.toUpperCase() + " usage",
+    borderColor: colors[metricType],
+    data: data
+  }];
+  const cpuOptions: ChartOptions = {
+    scales: {
+      yAxes: [{
+        ticks: {
+          suggestedMax: cpuCapacity,
+          callback: (value) => value
+        }
+      }]
+    },
+    tooltips: {
+      callbacks: {
+        label: ({ index }, data) => {
+          const value = data.datasets[0].data[index] as ChartPoint;
+          return value.y.toString();
+        }
+      }
+    }
+  };
+  const memoryOptions: ChartOptions = {
+    scales: {
+      yAxes: [{
+        ticks: {
+          suggestedMax: memoryCapacity,
+          callback: (value: string) => !value ? 0 : bytesToUnits(parseInt(value))
+        }
+      }]
+    },
+    tooltips: {
+      callbacks: {
+        label: ({ index }, data) => {
+          const value = data.datasets[0].data[index] as ChartPoint;
+          return bytesToUnits(parseInt(value.y as string), 3);
+        }
+      }
+    }
+  };
+  const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions;
+
+  const renderMetrics = () => {
+    if ((!metricValues.length || !liveMetricValues.length) && !metricsLoaded) {
+      return <Spinner center/>;
+    }
+    if (!memoryCapacity || !cpuCapacity) {
+      return <ClusterNoMetrics className="empty"/>
+    }
+    return (
+      <BarChart
+        name={`${metricNodeRole}-${metricType}`}
+        options={options}
+        data={{ datasets }}
+        timeLabelStep={5}
+        showLegend={false}
+        plugins={[ZebraStripes]}
+      />
+    );
+  };
+
+  return (
+    <div className="ClusterMetrics flex column">
+      <ClusterMetricSwitchers/>
+      {renderMetrics()}
+    </div>
+  );
+});

dashboard/client/components/+cluster/cluster-no-metrics.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Icon } from "../icon";
+import { Trans } from "@lingui/macro";
+import { cssNames } from "../../utils";
+
+interface Props {
+  className: string;
+}
+
+export function ClusterNoMetrics({ className }: Props) {
+  return (
+    <div className={cssNames("ClusterNoMetrics flex column box grow justify-center align-center", className)}>
+      <Icon material="info"/>
+      <p><Trans>Metrics are not available due to missing or invalid Prometheus configuration.</Trans></p>
+      <p><Trans>Right click cluster icon to open cluster settings.</Trans></p>
+    </div>
+  );
+}

dashboard/client/components/+cluster/cluster-pie-charts.scss

@@ -0,0 +1,29 @@
+.ClusterPieCharts {
+  background: transparent!important;
+  padding: 0!important;
+
+  .empty {
+    background: $contentColor;
+    min-height: 280px;
+    text-align: center;
+    padding: $padding * 2;
+  }
+
+  .NodeCharts {
+    margin-bottom: 0;
+  }
+
+  .chart {
+    --flex-gap: #{$padding * 2};
+    background: $contentColor;
+    padding: $padding * 2 $padding;
+
+    .chart-title {
+      margin-bottom: 0;
+    }
+
+    .legend {
+      --flex-gap: #{$padding};
+    }
+  }
+}

dashboard/client/components/+cluster/cluster-pie-charts.tsx

@@ -0,0 +1,204 @@
+import "./cluster-pie-charts.scss";
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { clusterStore, MetricNodeRole } from "./cluster.store";
+import { Spinner } from "../spinner";
+import { Icon } from "../icon";
+import { nodesStore } from "../+nodes/nodes.store";
+import { ChartData, PieChart } from "../chart";
+import { ClusterNoMetrics } from "./cluster-no-metrics";
+import { bytesToUnits } from "../../utils";
+import { themeStore } from "../../theme.store";
+import { getMetricLastPoints } from "../../api/endpoints/metrics.api";
+
+export const ClusterPieCharts = observer(() => {
+  const { i18n } = useLingui();
+
+  const renderLimitWarning = () => {
+    return (
+      <div className="node-warning flex gaps align-center">
+        <Icon material="info"/>
+        <p><Trans>Specified limits are higher than node capacity!</Trans></p>
+      </div>
+    );
+  }
+
+  const renderCharts = () => {
+    const data = getMetricLastPoints(clusterStore.metrics);
+    const { memoryUsage, memoryRequests, memoryCapacity, memoryLimits } = data;
+    const { cpuUsage, cpuRequests, cpuCapacity, cpuLimits } = data;
+    const { podUsage, podCapacity } = data;
+    const cpuLimitsOverload = cpuLimits > cpuCapacity;
+    const memoryLimitsOverload = memoryLimits > memoryCapacity;
+    const defaultColor = themeStore.activeTheme.colors.pieChartDefaultColor;
+
+    if (!memoryCapacity || !cpuCapacity || !podCapacity) return null;
+    const cpuData: ChartData = {
+      datasets: [
+        {
+          data: [
+            cpuUsage,
+            cpuUsage ? cpuCapacity - cpuUsage : 1,
+          ],
+          backgroundColor: [
+            "#c93dce",
+            defaultColor,
+          ],
+          id: "cpuUsage"
+        },
+        {
+          data: [
+            cpuRequests,
+            cpuRequests ? cpuCapacity - cpuRequests : 1,
+          ],
+          backgroundColor: [
+            "#4caf50",
+            defaultColor,
+          ],
+          id: "cpuRequests"
+        },
+        {
+          data: [
+            cpuLimits,
+            cpuLimitsOverload ? 0 : cpuCapacity - cpuLimits,
+          ],
+          backgroundColor: [
+            "#3d90ce",
+            defaultColor,
+          ],
+          id: "cpuLimits"
+        },
+      ],
+      labels: [
+        i18n._(t`Usage`) + `: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
+        i18n._(t`Requests`) + `: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
+        i18n._(t`Limits`) + `: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
+        i18n._(t`Capacity`) + `: ${cpuCapacity || "N/A"}`
+      ]
+    };
+    const memoryData: ChartData = {
+      datasets: [
+        {
+          data: [
+            memoryUsage,
+            memoryUsage ? memoryCapacity - memoryUsage : 1,
+          ],
+          backgroundColor: [
+            "#c93dce",
+            defaultColor,
+          ],
+          id: "memoryUsage"
+        },
+        {
+          data: [
+            memoryRequests,
+            memoryRequests ? memoryCapacity - memoryRequests : 1,
+          ],
+          backgroundColor: [
+            "#4caf50",
+            defaultColor,
+          ],
+          id: "memoryRequests"
+        },
+        {
+          data: [
+            memoryLimits,
+            memoryLimitsOverload ? 0 : memoryCapacity - memoryLimits,
+          ],
+          backgroundColor: [
+            "#3d90ce",
+            defaultColor,
+          ],
+          id: "memoryLimits"
+        },
+      ],
+      labels: [
+        i18n._(t`Usage`) + `: ${bytesToUnits(memoryUsage)}`,
+        i18n._(t`Requests`) + `: ${bytesToUnits(memoryRequests)}`,
+        i18n._(t`Limits`) + `: ${bytesToUnits(memoryLimits)}`,
+        i18n._(t`Capacity`) + `: ${bytesToUnits(memoryCapacity)}`,
+      ]
+    };
+    const podsData: ChartData = {
+      datasets: [
+        {
+          data: [
+            podUsage,
+            podUsage ? podCapacity - podUsage : 1,
+          ],
+          backgroundColor: [
+            "#4caf50",
+            defaultColor,
+          ],
+          id: "podUsage"
+        },
+      ],
+      labels: [
+        i18n._(t`Usage`) + `: ${podUsage || 0}`,
+        i18n._(t`Capacity`) + `: ${podCapacity}`,
+      ]
+    };
+    return (
+      <div className="NodeCharts flex justify-center box grow gaps">
+        <div className="chart flex column align-center box grow">
+          <PieChart
+            data={cpuData}
+            title={i18n._(t`CPU`)}
+            legendColors={["#c93dce", "#4caf50", "#3d90ce", defaultColor]}
+          />
+          {cpuLimitsOverload && renderLimitWarning()}
+        </div>
+        <div className="chart flex column align-center box grow">
+          <PieChart
+            data={memoryData}
+            title={i18n._(t`Memory`)}
+            legendColors={["#c93dce", "#4caf50", "#3d90ce", defaultColor]}
+          />
+          {memoryLimitsOverload && renderLimitWarning()}
+        </div>
+        <div className="chart flex column align-center box grow">
+          <PieChart
+            data={podsData}
+            title={i18n._(t`Pods`)}
+            legendColors={["#4caf50", defaultColor]}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const renderContent = () => {
+    const { masterNodes, workerNodes } = nodesStore;
+    const { metricNodeRole, metricsLoaded } = clusterStore;
+    const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes;
+    if (!nodes.length) {
+      return (
+        <div className="empty flex column box grow align-center justify-center">
+          <Icon material="info"/>
+          <Trans>No Nodes Available.</Trans>
+        </div>
+      );
+    }
+    if (!metricsLoaded) {
+      return (
+        <div className="flex justify-center align-center box grow empty">
+          <Spinner/>
+        </div>
+      );
+    }
+    const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterStore.metrics);
+    if (!memoryCapacity || !cpuCapacity || !podCapacity) {
+      return <ClusterNoMetrics className="empty"/>;
+    }
+    return renderCharts();
+  }
+
+  return (
+    <div className="ClusterPieCharts flex">
+      {renderContent()}
+    </div>
+  );
+})

dashboard/client/components/+cluster/cluster.routes.ts

@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const clusterRoute: RouteProps = {
+  path: "/cluster"
+}
+
+export const clusterURL = buildURL(clusterRoute.path)

dashboard/client/components/+cluster/cluster.scss

@@ -0,0 +1,24 @@
+.Cluster {
+  $gridGap: $margin * 2;
+
+  position: relative;
+  height: 100%;
+  min-height: 650px;
+  display: grid;
+  grid-gap: $gridGap;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  grid-template-rows: 1fr 1fr;
+
+  @include media(">1600px") {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  > *:not(.Spinner) {
+    padding: $gridGap;
+    background: $contentColor;
+
+    > .SubHeader {
+      padding-top: 0;
+    }
+  }
+}

dashboard/client/components/+cluster/cluster.store.ts

@@ -0,0 +1,110 @@
+import { observable, reaction, when } from "mobx";
+import { KubeObjectStore } from "../../kube-object.store";
+import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
+import { autobind, createStorage } from "../../utils";
+import { IMetricsReqParams, normalizeMetrics } from "../../api/endpoints/metrics.api";
+import { nodesStore } from "../+nodes/nodes.store";
+import { apiManager } from "../../api/api-manager";
+
+export enum MetricType {
+  MEMORY = "memory",
+  CPU = "cpu"
+}
+
+export enum MetricNodeRole {
+  MASTER = "master",
+  WORKER = "worker"
+}
+
+@autobind()
+export class ClusterStore extends KubeObjectStore<Cluster> {
+  api = clusterApi
+
+  @observable metrics: Partial<IClusterMetrics> = {};
+  @observable liveMetrics: Partial<IClusterMetrics> = {};
+  @observable metricsLoaded = false;
+  @observable metricType: MetricType;
+  @observable metricNodeRole: MetricNodeRole;
+
+  constructor() {
+    super();
+    this.resetMetrics();
+
+    // sync user setting with local storage
+    const storage = createStorage("cluster_metric_switchers", {});
+    Object.assign(this, storage.get());
+    reaction(() => {
+      const { metricType, metricNodeRole } = this;
+      return { metricType, metricNodeRole }
+    },
+    settings => storage.set(settings)
+    );
+
+    // auto-update metrics
+    reaction(() => this.metricNodeRole, () => {
+      if (!this.metricsLoaded) return;
+      this.metrics = {};
+      this.liveMetrics = {};
+      this.metricsLoaded = false;
+      this.getAllMetrics();
+    });
+
+    // check which node type to select
+    reaction(() => nodesStore.items.length, () => {
+      const { masterNodes, workerNodes } = nodesStore;
+      if (!masterNodes.length) this.metricNodeRole = MetricNodeRole.WORKER;
+      if (!workerNodes.length) this.metricNodeRole = MetricNodeRole.MASTER;
+    });
+  }
+
+  async loadMetrics(params?: IMetricsReqParams) {
+    await when(() => nodesStore.isLoaded);
+    const { masterNodes, workerNodes } = nodesStore;
+    const nodes = this.metricNodeRole === MetricNodeRole.MASTER && masterNodes.length ? masterNodes : workerNodes;
+    return clusterApi.getMetrics(nodes.map(node => node.getName()), params);
+  }
+
+  async getAllMetrics() {
+    await this.getMetrics();
+    await this.getLiveMetrics();
+    this.metricsLoaded = true;
+  }
+
+  async getMetrics() {
+    this.metrics = await this.loadMetrics();
+  }
+
+  async getLiveMetrics() {
+    const step = 3;
+    const range = 15;
+    const end = Date.now() / 1000;
+    const start = end - range;
+    this.liveMetrics = await this.loadMetrics({ start, end, step, range });
+  }
+
+  getMetricsValues(source: Partial<IClusterMetrics>) {
+    const metrics =
+      this.metricType === MetricType.CPU ? source.cpuUsage :
+        this.metricType === MetricType.MEMORY ? source.memoryUsage
+          : null;
+    if (!metrics) {
+      return [];
+    }
+    return normalizeMetrics(metrics).data.result[0].values;
+  }
+
+  resetMetrics() {
+    this.metrics = {};
+    this.metricsLoaded = false;
+    this.metricType = MetricType.CPU;
+    this.metricNodeRole = MetricNodeRole.WORKER;
+  }
+
+  reset() {
+    super.reset();
+    this.resetMetrics();
+  }
+}
+
+export const clusterStore = new ClusterStore();
+apiManager.registerStore(clusterApi, clusterStore);

dashboard/client/components/+cluster/cluster.tsx

@@ -0,0 +1,69 @@
+import "./cluster.scss"
+
+import React from "react";
+import { computed, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { MainLayout } from "../layout/main-layout";
+import { ClusterIssues } from "./cluster-issues";
+import { Spinner } from "../spinner";
+import { cssNames, interval, isElectron } from "../../utils";
+import { ClusterPieCharts } from "./cluster-pie-charts";
+import { ClusterMetrics } from "./cluster-metrics";
+import { nodesStore } from "../+nodes/nodes.store";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { clusterStore } from "./cluster.store";
+import { eventStore } from "../+events/event.store";
+
+@observer
+export class Cluster extends React.Component {
+  private watchers = [
+    interval(60, () => clusterStore.getMetrics()),
+    interval(20, () => eventStore.loadAll())
+  ];
+
+  private dependentStores = [nodesStore, podsStore];
+
+  async componentDidMount() {
+    const { dependentStores } = this;
+    this.watchers.forEach(watcher => watcher.start(true));
+
+    await Promise.all([
+      ...dependentStores.map(store => store.loadAll()),
+      clusterStore.getAllMetrics()
+    ]);
+
+    disposeOnUnmount(this, [
+      ...dependentStores.map(store => store.subscribe()),
+      () => this.watchers.forEach(watcher => watcher.stop()),
+      reaction(
+        () => clusterStore.metricNodeRole,
+        () => this.watchers.forEach(watcher => watcher.restart())
+      )
+    ])
+  }
+
+  @computed get isLoaded() {
+    return (
+      nodesStore.isLoaded &&
+      podsStore.isLoaded
+    )
+  }
+
+  render() {
+    const { isLoaded } = this;
+    return (
+      <MainLayout>
+        <div className="Cluster">
+          {!isLoaded && <Spinner center/>}
+          {isLoaded && (
+            <>
+              <ClusterMetrics/>
+              <ClusterPieCharts/>
+              <ClusterIssues className={cssNames({ wide: isElectron })}/>
+            </>
+          )}
+        </div>
+      </MainLayout>
+    )
+  }
+}

dashboard/client/components/+cluster/index.ts

@@ -0,0 +1,2 @@
+export * from "./cluster.routes"
+

dashboard/client/components/+config-autoscalers/autoscaler.mixins.scss

@@ -0,0 +1,14 @@
+$hpa-status-colors: (
+  abletoscale: $colorOk,
+  scalingactive: $colorInfo,
+  scalinglimited: $colorSoftError,
+);
+
+@mixin hpa-status-bgc {
+  @each $status, $color in $hpa-status-colors {
+    &.#{$status} {
+      background: $color;
+      color: white;
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa-details.scss

@@ -0,0 +1,17 @@
+@import "autoscaler.mixins";
+
+.HpaDetails {
+  .Badge {
+    @include hpa-status-bgc;
+  }
+
+  .metrics .Table {
+    .TableCell {
+      word-break: break-word;
+
+      &.name {
+        flex-grow: 2;
+      }
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa-details.tsx

@@ -0,0 +1,133 @@
+import "./hpa-details.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { cssNames } from "../../utils";
+import { HorizontalPodAutoscaler, hpaApi, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { Trans } from "@lingui/macro";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { getDetailsUrl } from "../../navigation";
+import { lookupApiLink } from "../../api/kube-api";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<HorizontalPodAutoscaler> {
+}
+
+@observer
+export class HpaDetails extends React.Component<Props> {
+  renderMetrics() {
+    const { object: hpa } = this.props;
+
+    const renderName = (metric: IHpaMetric) => {
+      switch (metric.type) {
+      case HpaMetricType.Resource:
+        const addition = metric.resource.targetAverageUtilization ? <Trans>(as a percentage of request)</Trans> : "";
+        return <Trans>Resource {metric.resource.name} on Pods {addition}</Trans>;
+
+      case HpaMetricType.Pods:
+        return <Trans>{metric.pods.metricName} on Pods</Trans>;
+
+      case HpaMetricType.Object:
+        const { target } = metric.object;
+        const { kind, name } = target;
+        const objectUrl = getDetailsUrl(lookupApiLink(target, hpa));
+        return (
+          <Trans>
+            {metric.object.metricName} on{" "}
+            <Link to={objectUrl}>{kind}/{name}</Link>
+          </Trans>
+        );
+      case HpaMetricType.External:
+        return (
+          <Trans>
+            {metric.external.metricName} on{" "}
+            {JSON.stringify(metric.external.selector)}
+          </Trans>
+        );
+      }
+    }
+
+    return (
+      <Table>
+        <TableHead>
+          <TableCell className="name"><Trans>Name</Trans></TableCell>
+          <TableCell className="metrics"><Trans>Current / Target</Trans></TableCell>
+        </TableHead>
+        {
+          hpa.getMetrics().map((metric, index) => {
+            const name = renderName(metric);
+            const values = hpa.getMetricValues(metric);
+            return (
+              <TableRow key={index}>
+                <TableCell className="name">{name}</TableCell>
+                <TableCell className="metrics">{values}</TableCell>
+              </TableRow>
+            )
+          })
+        }
+      </Table>
+    );
+  }
+
+  render() {
+    const { object: hpa } = this.props;
+    if (!hpa) return;
+    const { scaleTargetRef } = hpa.spec;
+    return (
+      <div className="HpaDetails">
+        <KubeObjectMeta object={hpa}/>
+
+        <DrawerItem name={<Trans>Reference</Trans>}>
+          {scaleTargetRef && (
+            <Link to={getDetailsUrl(lookupApiLink(scaleTargetRef, hpa))}>
+              {scaleTargetRef.kind}/{scaleTargetRef.name}
+            </Link>
+          )}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Min Pods</Trans>}>
+          {hpa.getMinPods()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Max Pods</Trans>}>
+          {hpa.getMaxPods()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Replicas</Trans>}>
+          {hpa.getReplicas()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+          {hpa.getConditions().map(({ type, tooltip, isReady }) => {
+            if (!isReady) return null;
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            )
+          })}
+        </DrawerItem>
+
+        <DrawerTitle title="Metrics"/>
+        <div className="metrics">
+          {this.renderMetrics()}
+        </div>
+
+        <KubeEventDetails object={hpa}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(hpaApi, {
+  Details: HpaDetails,
+});

dashboard/client/components/+config-autoscalers/hpa.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const hpaRoute: RouteProps = {
+  path: "/hpa"
+}
+
+export interface IHpaRouteParams {
+}
+
+export const hpaURL = buildURL<IHpaRouteParams>(hpaRoute.path)

dashboard/client/components/+config-autoscalers/hpa.scss

@@ -0,0 +1,26 @@
+@import "./autoscaler.mixins";
+
+.HorizontalPodAutoscalers {
+  .TableCell {
+    &.name {
+      flex: 1.5;
+    }
+
+    &.metrics {
+      flex: 1.5;
+    }
+
+    &.status {
+      flex: 1.5;
+      @include table-cell-labels-offsets;
+
+      .Badge {
+        @include hpa-status-bgc;
+      }
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

dashboard/client/components/+config-autoscalers/hpa.store.ts

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

dashboard/client/components/+config-autoscalers/hpa.tsx

@@ -0,0 +1,99 @@
+import "./hpa.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { IHpaRouteParams } from "./hpa.route";
+import { HorizontalPodAutoscaler, hpaApi } from "../../api/endpoints/hpa.api";
+import { hpaStore } from "./hpa.store";
+import { Badge } from "../badge";
+import { cssNames } from "../../utils";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  minPods = "min-pods",
+  maxPods = "max-pods",
+  replicas = "replicas",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IHpaRouteParams> {
+}
+
+@observer
+export class HorizontalPodAutoscalers extends React.Component<Props> {
+  getTargets(hpa: HorizontalPodAutoscaler) {
+    const metrics = hpa.getMetrics();
+    const metricsRemainCount = metrics.length - 1;
+    const metricsRemain = metrics.length > 1 ? <Trans>{metricsRemainCount} more...</Trans> : null;
+    const metricValues = hpa.getMetricValues(metrics[0]);
+    return <p>{metricValues} {metricsRemain && "+"}{metricsRemain}</p>;
+  }
+
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="HorizontalPodAutoscalers" store={hpaStore}
+        sortingCallbacks={{
+          [sortBy.name]: (item: HorizontalPodAutoscaler) => item.getName(),
+          [sortBy.namespace]: (item: HorizontalPodAutoscaler) => item.getNs(),
+          [sortBy.minPods]: (item: HorizontalPodAutoscaler) => item.getMinPods(),
+          [sortBy.maxPods]: (item: HorizontalPodAutoscaler) => item.getMaxPods(),
+          [sortBy.replicas]: (item: HorizontalPodAutoscaler) => item.getReplicas()
+        }}
+        searchFilters={[
+          (item: HorizontalPodAutoscaler) => item.getSearchFields()
+        ]}
+        renderHeaderTitle={<Trans>Horizontal Pod Autoscalers</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Metrics</Trans>, className: "metrics" },
+          { title: <Trans>Min Pods</Trans>, className: "min-pods", sortBy: sortBy.minPods },
+          { title: <Trans>Max Pods</Trans>, className: "max-pods", sortBy: sortBy.maxPods },
+          { title: <Trans>Replicas</Trans>, className: "replicas", sortBy: sortBy.replicas },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status" },
+        ]}
+        renderTableContents={(hpa: HorizontalPodAutoscaler) => [
+          hpa.getName(),
+          hpa.getNs(),
+          this.getTargets(hpa),
+          hpa.getMinPods(),
+          hpa.getMaxPods(),
+          hpa.getReplicas(),
+          hpa.getAge(),
+          hpa.getConditions().map(({ type, tooltip, isReady }) => {
+            if (!isReady) return null;
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames(type.toLowerCase())}
+              />
+            )
+          })
+        ]}
+        renderItemMenu={(item: HorizontalPodAutoscaler) => {
+          return <HpaMenu object={item}/>
+        }}
+      />
+    );
+  }
+}
+
+export function HpaMenu(props: KubeObjectMenuProps<HorizontalPodAutoscaler>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(hpaApi, {
+  Menu: HpaMenu,
+})

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

@@ -0,0 +1,3 @@
+export * from "./hpa"
+export * from "./hpa-details"
+export * from "./hpa.route"

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"

dashboard/client/components/+config-resource-quotas/add-quota-dialog.scss

@@ -0,0 +1,38 @@
+.AddQuotaDialog {
+  .quota-select {
+    flex-basis: 55%;
+  }
+
+  .quota-entries {
+    margin: -$margin / 2;
+
+    &:empty {
+      display: none;
+    }
+
+    .quota {
+      --flex-gap: #{$padding};
+      border: 1px solid $halfGray;
+      border-radius: $radius;
+      margin: $margin / 2;
+      padding: $padding / 2 $padding;
+      transition: all 150ms ease;
+
+      &:hover {
+        box-shadow: inset 0 0 0 1px $borderColor;
+      }
+
+      .name {
+        font-weight: $font-weight-bold;
+      }
+
+      .value {
+        color: $contentColor;
+      }
+
+      .Icon:hover {
+        color: black;
+      }
+    }
+  }
+}

dashboard/client/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -0,0 +1,204 @@
+import "./add-quota-dialog.scss";
+
+import React from "react";
+import { computed, 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 { IResourceQuotaValues, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { Select } from "../select";
+import { Icon } from "../icon";
+import { Button } from "../button";
+import { Notifications } from "../notifications";
+import { NamespaceSelect } from "../+namespaces/namespace-select";
+import { SubTitle } from "../layout/sub-title";
+
+interface Props extends DialogProps {
+}
+
+@observer
+export class AddQuotaDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+
+  static defaultQuotas: IResourceQuotaValues = {
+    "limits.cpu": "",
+    "limits.memory": "",
+    "requests.cpu": "",
+    "requests.memory": "",
+    "requests.storage": "",
+    "persistentvolumeclaims": "",
+    "count/pods": "",
+    "count/persistentvolumeclaims": "",
+    "count/services": "",
+    "count/secrets": "",
+    "count/configmaps": "",
+    "count/replicationcontrollers": "",
+    "count/deployments.apps": "",
+    "count/replicasets.apps": "",
+    "count/statefulsets.apps": "",
+    "count/jobs.batch": "",
+    "count/cronjobs.batch": "",
+    "count/deployments.extensions": "",
+  };
+
+  public defaultNamespace = "default"
+
+  @observable quotaName = "";
+  @observable quotaSelectValue = "";
+  @observable quotaInputValue = "";
+  @observable namespace = this.defaultNamespace;
+  @observable quotas = AddQuotaDialog.defaultQuotas;
+
+  static open() {
+    AddQuotaDialog.isOpen = true;
+  }
+
+  static close() {
+    AddQuotaDialog.isOpen = false;
+  }
+
+  @computed get quotaEntries() {
+    return Object.entries(this.quotas)
+      .filter(([type, value]) => !!value.trim());
+  }
+
+  @computed get quotaOptions() {
+    return Object.keys(this.quotas).map(quota => {
+      const isCompute = quota.endsWith(".cpu") || quota.endsWith(".memory");
+      const isStorage = quota.endsWith(".storage") || quota === "persistentvolumeclaims";
+      const isCount = quota.startsWith("count/");
+      const icon = isCompute ? "memory" : isStorage ? "storage" : isCount ? "looks_one" : "";
+      return {
+        label: icon ? <span className="nobr"><Icon material={icon}/> {quota}</span> : quota,
+        value: quota,
+      };
+    });
+  }
+
+  setQuota = () => {
+    if (!this.quotaSelectValue) return;
+    this.quotas[this.quotaSelectValue] = this.quotaInputValue;
+    this.quotaInputValue = "";
+  }
+
+  close = () => {
+    AddQuotaDialog.close();
+  }
+
+  reset = () => {
+    this.quotaName = "";
+    this.quotaSelectValue = "";
+    this.quotaInputValue = "";
+    this.namespace = this.defaultNamespace;
+    this.quotas = AddQuotaDialog.defaultQuotas;
+  }
+
+  addQuota = async () => {
+    try {
+      const { quotaName, namespace } = this;
+      const quotas = this.quotaEntries.reduce<IResourceQuotaValues>((quotas, [name, value]) => {
+        quotas[name] = value;
+        return quotas;
+      }, {});
+      await resourceQuotaApi.create({ namespace, name: quotaName }, {
+        spec: {
+          hard: quotas
+        }
+      });
+      this.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  }
+
+  onInputQuota = (evt: React.KeyboardEvent) => {
+    switch (evt.key) {
+    case "Enter":
+      this.setQuota();
+      evt.preventDefault(); // don't submit form
+      break;
+    }
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const header = <h5><Trans>Create ResourceQuota</Trans></h5>;
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddQuotaDialog"
+        isOpen={AddQuotaDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            contentClass="flex gaps column"
+            disabledNext={!this.namespace}
+            nextLabel={<Trans>Create</Trans>}
+            next={this.addQuota}
+          >
+            <div className="flex gaps">
+              <Input
+                required autoFocus
+                placeholder={_i18n._(t`ResourceQuota name`)}
+                validators={systemName}
+                value={this.quotaName} onChange={v => this.quotaName = v.toLowerCase()}
+                className="box grow"
+              />
+            </div>
+
+            <SubTitle title={<Trans>Namespace</Trans>}/>
+            <NamespaceSelect
+              value={this.namespace}
+              placeholder={_i18n._(t`Namespace`)}
+              themeName="light"
+              className="box grow"
+              onChange={({ value }) => this.namespace = value}
+            />
+
+            <SubTitle title={<Trans>Values</Trans>}/>
+            <div className="flex gaps align-center">
+              <Select
+                className="quota-select"
+                themeName="light"
+                placeholder={_i18n._(t`Select a quota..`)}
+                options={this.quotaOptions}
+                value={this.quotaSelectValue}
+                onChange={({ value }) => this.quotaSelectValue = value}
+              />
+              <Input
+                maxLength={10}
+                placeholder={_i18n._(t`Value`)}
+                value={this.quotaInputValue}
+                onChange={v => this.quotaInputValue = v}
+                onKeyDown={this.onInputQuota}
+                className="box grow"
+              />
+              <Button round primary onClick={this.setQuota}>
+                <Icon
+                  material={this.quotas[this.quotaSelectValue] ? "edit" : "add"}
+                  tooltip={_i18n._(t`Set quota`)}
+                />
+              </Button>
+            </div>
+            <div className="quota-entries">
+              {this.quotaEntries.map(([quota, value]) => {
+                return (
+                  <div key={quota} className="quota flex gaps inline align-center">
+                    <div className="name">{quota}</div>
+                    <div className="value">{value}</div>
+                    <Icon material="clear" onClick={() => this.quotas[quota] = ""}/>
+                  </div>
+                )
+              })}
+            </div>
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    )
+  }
+}

dashboard/client/components/+config-resource-quotas/index.ts

@@ -0,0 +1,3 @@
+export * from "./resource-quotas.route"
+export * from "./resource-quotas"
+export * from "./resource-quota-details"

dashboard/client/components/+config-resource-quotas/resource-quota-details.scss

@@ -0,0 +1,16 @@
+.ResourceQuotaDetails {
+  .quota-list {
+    .param {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding-bottom: $padding * 2;
+
+      .LineProgress {
+        margin-top: 3px;
+        width: 100%;
+        color: $colorInfo;
+      }
+    }
+  }
+}

dashboard/client/components/+config-resource-quotas/resource-quota-details.tsx

@@ -0,0 +1,94 @@
+import "./resource-quota-details.scss";
+import React from "react";
+import kebabCase from "lodash/kebabCase";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { cpuUnitsToNumber, cssNames, unitsToBytes } from "../../utils";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { LineProgress } from "../line-progress";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<ResourceQuota> {
+}
+
+@observer
+export class ResourceQuotaDetails extends React.Component<Props> {
+  renderQuotas = (quota: ResourceQuota) => {
+    const { hard, used } = quota.status
+    if (!hard || !used) return null
+    const transformUnit = (name: string, value: string) => {
+      if (name.includes("memory") || name.includes("storage")) {
+        return unitsToBytes(value)
+      }
+      if (name.includes("cpu")) {
+        return cpuUnitsToNumber(value)
+      }
+      return parseInt(value)
+    }
+    return Object.entries(hard).map(([name, value]) => {
+      if (!used[name]) return null
+      const current = transformUnit(name, used[name])
+      const max = transformUnit(name, value)
+      return (
+        <div key={name} className={cssNames("param", kebabCase(name))}>
+          <span className="title">{name}</span>
+          <span className="value">{used[name]} / {value}</span>
+          <LineProgress
+            max={max}
+            value={current}
+            tooltip={
+              <p><Trans>Set</Trans>: {value}. <Trans>Used</Trans>: {Math.ceil(current / max * 100) + "%"}</p>
+            }
+          />
+        </div>
+      )
+    })
+  }
+
+  render() {
+    const { object: quota } = this.props;
+    if (!quota) return null;
+    return (
+      <div className="ResourceQuotaDetails">
+        <KubeObjectMeta object={quota}/>
+
+        <DrawerItem name={<Trans>Quotas</Trans>} className="quota-list">
+          {this.renderQuotas(quota)}
+        </DrawerItem>
+
+        {quota.getScopeSelector().length > 0 && (
+          <>
+            <DrawerTitle title={<Trans>Scope Selector</Trans>}/>
+            <Table className="paths">
+              <TableHead>
+                <TableCell><Trans>Operator</Trans></TableCell>
+                <TableCell><Trans>Scope name</Trans></TableCell>
+                <TableCell><Trans>Values</Trans></TableCell>
+              </TableHead>
+              {
+                quota.getScopeSelector().map((selector, index) => {
+                  const { operator, scopeName, values } = selector;
+                  return (
+                    <TableRow key={index}>
+                      <TableCell>{operator}</TableCell>
+                      <TableCell>{scopeName}</TableCell>
+                      <TableCell>{values.join(", ")}</TableCell>
+                    </TableRow>
+                  );
+                })
+              }
+            </Table>
+          </>
+        )}
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(resourceQuotaApi, {
+  Details: ResourceQuotaDetails
+})

dashboard/client/components/+config-resource-quotas/resource-quotas.route.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const resourceQuotaRoute: RouteProps = {
+  path: "/resourcequotas"
+}
+
+export interface IResourceQuotaRouteParams {
+}
+
+export const resourceQuotaURL = buildURL<IResourceQuotaRouteParams>(resourceQuotaRoute.path);

dashboard/client/components/+config-resource-quotas/resource-quotas.scss

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

dashboard/client/components/+config-resource-quotas/resource-quotas.store.ts

@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class ResourceQuotasStore extends KubeObjectStore<ResourceQuota> {
+  api = resourceQuotaApi
+}
+
+export const resourceQuotaStore = new ResourceQuotasStore();
+apiManager.registerStore(resourceQuotaApi, resourceQuotaStore);

dashboard/client/components/+config-resource-quotas/resource-quotas.tsx

@@ -0,0 +1,73 @@
+import "./resource-quotas.scss";
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { AddQuotaDialog } from "./add-quota-dialog";
+import { resourceQuotaStore } from "./resource-quotas.store";
+import { IResourceQuotaRouteParams } from "./resource-quotas.route";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age"
+}
+
+interface Props extends RouteComponentProps<IResourceQuotaRouteParams> {
+}
+
+@observer
+export class ResourceQuotas extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          className="ResourceQuotas" store={resourceQuotaStore}
+          sortingCallbacks={{
+            [sortBy.name]: (item: ResourceQuota) => item.getName(),
+            [sortBy.namespace]: (item: ResourceQuota) => item.getNs(),
+            [sortBy.age]: (item: ResourceQuota) => item.getAge(false),
+          }}
+          searchFilters={[
+            (item: ResourceQuota) => item.getSearchFields(),
+            (item: ResourceQuota) => item.getName(),
+          ]}
+          renderHeaderTitle={<Trans>Resource Quotas</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={(resourceQuota: ResourceQuota) => [
+            resourceQuota.getName(),
+            resourceQuota.getNs(),
+            resourceQuota.getAge(),
+          ]}
+          renderItemMenu={(item: ResourceQuota) => {
+            return <ResourceQuotaMenu object={item}/>
+          }}
+          addRemoveButtons={{
+            onAdd: () => AddQuotaDialog.open(),
+            addTooltip: <Trans>Create new ResourceQuota</Trans>
+          }}
+        />
+        <AddQuotaDialog/>
+      </>
+    );
+  }
+}
+
+export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  );
+}
+
+apiManager.registerViews(resourceQuotaApi, {
+  Menu: ResourceQuotaMenu,
+})

dashboard/client/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;
+  }
+}

dashboard/client/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>
+    )
+  }
+}

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

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

dashboard/client/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;
+  }
+}

dashboard/client/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,
+})

dashboard/client/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);

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

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

dashboard/client/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);

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

@@ -0,0 +1,86 @@
+import "./secrets.scss"
+
+import * as 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.getAge(false),
+          }}
+          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,
+})

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

@@ -0,0 +1,12 @@
+import { RouteProps } from "react-router";
+import { configMapsURL } from "../+config-maps";
+import { Config } from "./config";
+import { IURLParams } from "../../navigation";
+
+export const configRoute: RouteProps = {
+  get path() {
+    return Config.tabRoutes.map(({ path }) => path).flat()
+  }
+}
+
+export const configURL = (params?: IURLParams) => configMapsURL(params);

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

@@ -0,0 +1,80 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Redirect, Route, Switch } from "react-router";
+import { Trans } from "@lingui/macro";
+import { MainLayout, TabRoute } from "../layout/main-layout";
+import { ConfigMaps, configMapsRoute, configMapsURL } from "../+config-maps";
+import { Secrets, secretsRoute, secretsURL } from "../+config-secrets";
+import { namespaceStore } from "../+namespaces/namespace.store";
+import { resourceQuotaRoute, ResourceQuotas, resourceQuotaURL } from "../+config-resource-quotas";
+import { configURL } from "./config.route";
+import { HorizontalPodAutoscalers, hpaRoute, hpaURL } from "../+config-autoscalers";
+import { Certificates, ClusterIssuers, Issuers } from "../+custom-resources/certmanager.k8s.io";
+import { buildURL } from "../../navigation";
+
+export const certificatesURL = buildURL("/certificates");
+export const issuersURL = buildURL("/issuers");
+export const clusterIssuersURL = buildURL("/clusterissuers");
+
+@observer
+export class Config extends React.Component {
+  static get tabRoutes(): TabRoute[] {
+    const query = namespaceStore.getContextParams()
+    return [
+      {
+        title: <Trans>ConfigMaps</Trans>,
+        component: ConfigMaps,
+        url: configMapsURL({ query }),
+        path: configMapsRoute.path,
+      },
+      {
+        title: <Trans>Secrets</Trans>,
+        component: Secrets,
+        url: secretsURL({ query }),
+        path: secretsRoute.path,
+      },
+      {
+        title: <Trans>Resource Quotas</Trans>,
+        component: ResourceQuotas,
+        url: resourceQuotaURL({ query }),
+        path: resourceQuotaRoute.path,
+      },
+      {
+        title: <Trans>Certificates</Trans>,
+        component: Certificates,
+        url: certificatesURL({ query }),
+        path: certificatesURL(),
+      },
+      {
+        title: <Trans>Issuers</Trans>,
+        component: Issuers,
+        url: issuersURL({ query }),
+        path: issuersURL(),
+      },
+      {
+        title: <Trans>Cluster Issuers</Trans>,
+        component: ClusterIssuers,
+        url: clusterIssuersURL(),
+        path: clusterIssuersURL(),
+      },
+      {
+        title: <Trans>HPA</Trans>,
+        component: HorizontalPodAutoscalers,
+        url: hpaURL({ query }),
+        path: hpaRoute.path,
+      },
+    ]
+  }
+
+  render() {
+    const tabRoutes = Config.tabRoutes;
+    return (
+      <MainLayout className="Config" tabs={tabRoutes}>
+        <Switch>
+          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
+          <Redirect to={configURL({ query: namespaceStore.getContextParams() })}/>
+        </Switch>
+      </MainLayout>
+    )
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from "./config.route"
+export * from "./config"

dashboard/client/components/+custom-resources/certmanager.k8s.io/cert-manager.mixins.scss

@@ -0,0 +1,12 @@
+$cert-status-colors: (
+  ready: $colorOk,
+);
+
+@mixin cert-status-bgc {
+  @each $status, $color in $cert-status-colors {
+    &.#{$status} {
+      background: $color;
+      color: white;
+    }
+  }
+}

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificate-details.scss

@@ -0,0 +1,7 @@
+@import "cert-manager.mixins";
+
+.CertificateDetails {
+  .Badge {
+    @include cert-status-bgc;
+  }
+}

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx

@@ -0,0 +1,142 @@
+import "./certificate-details.scss"
+
+import React from "react";
+import moment from "moment"
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../../drawer";
+import { Badge } from "../../badge";
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import { KubeObjectDetailsProps } from "../../kube-object";
+import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
+import { cssNames } from "../../../utils";
+import { apiManager } from "../../../api/api-manager";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Certificate> {
+}
+
+@observer
+export class CertificateDetails extends React.Component<Props> {
+  render() {
+    const { object: cert, className } = this.props;
+    if (!cert) return;
+    const { spec, status } = cert;
+    const { acme, isCA, commonName, secretName, dnsNames, duration, ipAddresses, keyAlgorithm, keySize, organization, renewBefore } = spec;
+    const { lastFailureTime, notAfter } = status;
+    return (
+      <div className={cssNames("CertificateDetails", className)}>
+        <KubeObjectMeta object={cert}/>
+
+        <DrawerItem name={<Trans>Issuer</Trans>}>
+          <Link to={cert.getIssuerDetailsUrl()}>
+            {cert.getIssuerName()}
+          </Link>
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Secret Name</Trans>}>
+          <Link to={cert.getSecretDetailsUrl()}>
+            {secretName}
+          </Link>
+        </DrawerItem>
+
+        <DrawerItem name="CA">
+          {isCA ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        </DrawerItem>
+
+        {commonName && (
+          <DrawerItem name={<Trans>Common Name</Trans>}>
+            {commonName}
+          </DrawerItem>
+        )}
+        {dnsNames && (
+          <DrawerItem name={<Trans>DNS names</Trans>} labelsOnly>
+            {dnsNames.map(name => <Badge key={name} label={name}/>)}
+          </DrawerItem>
+        )}
+        {ipAddresses && (
+          <DrawerItem name={<Trans>IP addresses</Trans>}>
+            {ipAddresses.join(", ")}
+          </DrawerItem>
+        )}
+        {organization && (
+          <DrawerItem name={<Trans>Organization</Trans>}>
+            {organization.join(", ")}
+          </DrawerItem>
+        )}
+        {duration && (
+          <DrawerItem name={<Trans>Duration</Trans>}>
+            {duration}
+          </DrawerItem>
+        )}
+        {renewBefore && (
+          <DrawerItem name={<Trans>Renew Before</Trans>}>
+            {renewBefore}
+          </DrawerItem>
+        )}
+        {keySize && (
+          <DrawerItem name={<Trans>Key Size</Trans>}>
+            {keySize}
+          </DrawerItem>
+        )}
+        {keyAlgorithm && (
+          <DrawerItem name={<Trans>Key Algorithm</Trans>}>
+            {keyAlgorithm}
+          </DrawerItem>
+        )}
+
+        <DrawerItem name={<Trans>Not After</Trans>}>
+          {moment(notAfter).format("LLL")}
+        </DrawerItem>
+
+        {lastFailureTime && (
+          <DrawerItem name={<Trans>Last Failure Time</Trans>}>
+            {lastFailureTime}
+          </DrawerItem>
+        )}
+        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+          {cert.getConditions().map(({ type, tooltip, isReady }) => {
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            )
+          })}
+        </DrawerItem>
+
+        {acme && (
+          <>
+            <DrawerTitle title="ACME"/>
+            {acme.config.map(({ domains, http01, dns01 }, index) => {
+              return (
+                <div key={index} className="acme-config">
+                  <DrawerItem name={<Trans>Domains</Trans>} labelsOnly>
+                    {domains.map(domain => <Badge key={domain} label={domain}/>)}
+                  </DrawerItem>
+                  <DrawerItem name={<Trans>Http01</Trans>}>
+                    {Object.entries(http01).map(([key, val]) => `${key}: ${val}`)[0]}
+                  </DrawerItem>
+                  {dns01 && (
+                    <DrawerItem name={<Trans>DNS Provider</Trans>} labelsOnly>
+                      {dns01.provider}
+                    </DrawerItem>
+                  )}
+                </div>
+              )
+            })}
+          </>
+        )}
+
+        <KubeEventDetails object={cert}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews(certificatesApi, {
+  Details: CertificateDetails
+})

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.scss

@@ -0,0 +1,26 @@
+@import "cert-manager.mixins";
+
+.Certificates {
+  .TableCell {
+    &.name {
+      flex: 1.2;
+    }
+
+    &.type {
+      flex: .5;
+    }
+
+    &.status {
+      flex: .5;
+      @include table-cell-labels-offsets;
+
+      .Badge {
+        @include cert-status-bgc;
+      }
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.tsx

@@ -0,0 +1,105 @@
+import "./certificates.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
+import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
+import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
+import { cssNames, stopPropagation } from "../../../utils";
+import { Link } from "react-router-dom";
+import { Badge } from "../../badge";
+import { apiManager } from "../../../api/api-manager";
+import { Spinner } from "../../spinner";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+  commonName = "common-name",
+  secretName = "secret",
+  issuer = "issuer",
+  type = "type",
+}
+
+@observer
+export class Certificates extends React.Component<KubeObjectListLayoutProps> {
+  render() {
+    const { store = apiManager.getStore(certificatesApi), ...layoutProps } = this.props;
+    if (!store) {
+      return <Spinner center/>
+    }
+    return (
+      <KubeObjectListLayout
+        {...layoutProps}
+        store={store}
+        className="Certificates"
+        sortingCallbacks={{
+          [sortBy.name]: (item: Certificate) => item.getName(),
+          [sortBy.namespace]: (item: Certificate) => item.getNs(),
+          [sortBy.secretName]: (item: Certificate) => item.getSecretName(),
+          [sortBy.commonName]: (item: Certificate) => item.getCommonName(),
+          [sortBy.issuer]: (item: Certificate) => item.getIssuerName(),
+          [sortBy.type]: (item: Certificate) => item.getType(),
+        }}
+        searchFilters={[
+          (item: Certificate) => item.getSearchFields(),
+          (item: Certificate) => item.getSecretName(),
+          (item: Certificate) => item.getCommonName(),
+          (item: Certificate) => item.getIssuerName(),
+          (item: Certificate) => item.getType(),
+        ]}
+        renderHeaderTitle={<Trans>Certificates</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Common Name</Trans>, className: "common-name", sortBy: sortBy.type },
+          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
+          { title: <Trans>Issuer</Trans>, className: "issuer", sortBy: sortBy.issuer },
+          { title: <Trans>Secret</Trans>, className: "secret", sortBy: sortBy.secretName },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status" },
+        ]}
+        renderTableContents={(cert: Certificate) => {
+          return [
+            cert.getName(),
+            cert.getNs(),
+            cert.getCommonName(),
+            cert.getType(),
+            <Link to={cert.getIssuerDetailsUrl()} onClick={stopPropagation}>
+              {cert.getIssuerName()}
+            </Link>,
+            <Link to={cert.getSecretDetailsUrl()} onClick={stopPropagation}>
+              {cert.getSecretName()}
+            </Link>,
+            cert.getAge(),
+            cert.getConditions().map(({ type, tooltip, isReady }) => {
+              return (
+                <Badge
+                  key={type}
+                  label={type}
+                  tooltip={tooltip}
+                  className={cssNames({ [type.toLowerCase()]: isReady })}
+                />
+              )
+            })
+          ]
+        }}
+        renderItemMenu={(item: Certificate) => {
+          return <CertificateMenu object={item}/>
+        }}
+      />
+    );
+  }
+}
+
+export function CertificateMenu(props: KubeObjectMenuProps<Certificate>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(certificatesApi, {
+  List: Certificates,
+  Menu: CertificateMenu,
+})

dashboard/client/components/+custom-resources/certmanager.k8s.io/index.ts

@@ -0,0 +1,4 @@
+export * from "./certificates"
+export * from "./certificate-details"
+export * from "./issuers"
+export * from "./issuer-details"

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuer-details.scss

@@ -0,0 +1,7 @@
+@import "cert-manager.mixins";
+
+.IssuerDetails {
+  .Badge {
+    @include cert-status-bgc;
+  }
+}

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx

@@ -0,0 +1,175 @@
+import "./issuer-details.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { Link } from "react-router-dom";
+import { DrawerItem, DrawerTitle } from "../../drawer";
+import { Badge } from "../../badge";
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import { KubeObjectDetailsProps } from "../../kube-object";
+import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
+import { autobind, cssNames } from "../../../utils";
+import { getDetailsUrl } from "../../../navigation";
+import { secretsApi } from "../../../api/endpoints";
+import { apiManager } from "../../../api/api-manager";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Issuer> {
+}
+
+@observer
+export class IssuerDetails extends React.Component<Props> {
+  @autobind()
+  renderSecretLink(secretName: string) {
+    const namespace = this.props.object.getNs();
+    if (!namespace) {
+      return secretName;
+    }
+    const secretDetailsUrl = getDetailsUrl(secretsApi.getUrl({
+      namespace: namespace,
+      name: secretName,
+    }));
+    return (
+      <Link to={secretDetailsUrl}>
+        {secretName}
+      </Link>
+    )
+  }
+
+  render() {
+    const { object: issuer, className } = this.props;
+    if (!issuer) return;
+    const { renderSecretLink } = this;
+    const { spec: { acme, ca, vault, venafi }, status } = issuer;
+    return (
+      <div className={cssNames("IssuerDetails", className)}>
+        <KubeObjectMeta object={issuer}/>
+
+        <DrawerItem name={<Trans>Type</Trans>}>
+          {issuer.getType()}
+        </DrawerItem>
+
+        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+          {issuer.getConditions().map(({ type, tooltip, isReady }) => {
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            )
+          })}
+        </DrawerItem>
+
+        {acme && (() => {
+          const { email, server, skipTLSVerify, privateKeySecretRef, solvers } = acme;
+          return (
+            <>
+              <DrawerTitle title="ACME"/>
+              <DrawerItem name={<Trans>E-mail</Trans>}>
+                {email}
+              </DrawerItem>
+              <DrawerItem name={<Trans>Server</Trans>}>
+                {server}
+              </DrawerItem>
+              {status.acme && (
+                <DrawerItem name={<Trans>Status URI</Trans>}>
+                  {status.acme.uri}
+                </DrawerItem>
+              )}
+              <DrawerItem name={<Trans>Private Key Secret</Trans>}>
+                {renderSecretLink(privateKeySecretRef.name)}
+              </DrawerItem>
+              <DrawerItem name={<Trans>Skip TLS Verify</Trans>}>
+                {skipTLSVerify ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+              </DrawerItem>
+            </>
+          )
+        })()}
+
+        {ca && (() => {
+          const { secretName } = ca;
+          return (
+            <>
+              <DrawerTitle title="CA"/>
+              <DrawerItem name={<Trans>Secret Name</Trans>}>
+                {renderSecretLink(secretName)}
+              </DrawerItem>
+            </>
+          )
+        })()}
+
+        {vault && (() => {
+          const { auth, caBundle, path, server } = vault;
+          const { path: authPath, roleId, secretRef } = auth.appRole;
+          return (
+            <>
+              <DrawerTitle title="Vault"/>
+              <DrawerItem name={<Trans>Server</Trans>}>
+                {server}
+              </DrawerItem>
+              <DrawerItem name={<Trans>Path</Trans>}>
+                {path}
+              </DrawerItem>
+              <DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
+                <Badge label={caBundle}/>
+              </DrawerItem>
+
+              <DrawerTitle title={<Trans>Auth App Role</Trans>}/>
+              <DrawerItem name={<Trans>Path</Trans>}>
+                {authPath}
+              </DrawerItem>
+              <DrawerItem name={<Trans>Role ID</Trans>}>
+                {roleId}
+              </DrawerItem>
+              {secretRef && (
+                <DrawerItem name={<Trans>Secret</Trans>}>
+                  {renderSecretLink(secretRef.name)}
+                </DrawerItem>
+              )}
+            </>
+          )
+        })()}
+
+        {venafi && (() => {
+          const { zone, cloud, tpp } = venafi;
+          return (
+            <>
+              <DrawerTitle title="CA"/>
+              <DrawerItem name={<Trans>Zone</Trans>}>
+                {zone}
+              </DrawerItem>
+              {cloud && (
+                <DrawerItem name={<Trans>Cloud API Token Secret</Trans>}>
+                  {renderSecretLink(cloud.apiTokenSecretRef.name)}
+                </DrawerItem>
+              )}
+              {tpp && (
+                <>
+                  <DrawerTitle title="TPP"/>
+                  <DrawerItem name={<Trans>URL</Trans>}>
+                    {tpp.url}
+                  </DrawerItem>
+                  <DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
+                    <Badge label={tpp.caBundle}/>
+                  </DrawerItem>
+                  <DrawerItem name={<Trans>Credentials Ref</Trans>}>
+                    {renderSecretLink(tpp.credentialsRef.name)}
+                  </DrawerItem>
+                </>
+              )}
+            </>
+          )
+        })()}
+
+        <KubeEventDetails object={issuer}/>
+      </div>
+    );
+  }
+}
+
+apiManager.registerViews([issuersApi, clusterIssuersApi], {
+  Details: IssuerDetails
+})

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.scss

@@ -0,0 +1,27 @@
+@import "cert-manager.mixins";
+
+.Issuers {
+  .TableCell {
+    &.name {
+      flex: 1.2;
+    }
+
+    &.labels {
+      flex: 2;
+      @include table-cell-labels-offsets;
+    }
+
+    &.status {
+      flex: .5;
+      @include table-cell-labels-offsets;
+
+      .Badge {
+        @include cert-status-bgc;
+      }
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.tsx

@@ -0,0 +1,103 @@
+import "./issuers.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
+import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
+import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
+import { cssNames } from "../../../utils";
+import { Badge } from "../../badge";
+import { Spinner } from "../../spinner";
+import { apiManager } from "../../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  type = "type",
+  labels = "labels",
+  age = "age",
+}
+
+@observer
+export class ClusterIssuers extends React.Component<KubeObjectListLayoutProps> {
+  render() {
+    const store = apiManager.getStore(clusterIssuersApi);
+    return (
+      <Issuers
+        {...this.props}
+        isClusterScoped={true}
+        store={store}
+        renderHeaderTitle={<Trans>Cluster Issuers</Trans>}
+      />
+    )
+  }
+}
+
+@observer
+export class Issuers extends React.Component<KubeObjectListLayoutProps> {
+  render() {
+    const { store = apiManager.getStore(issuersApi), ...layoutProps } = this.props;
+    if (!store) {
+      return <Spinner center/>
+    }
+    return (
+      <KubeObjectListLayout
+        store={store}
+        renderHeaderTitle={<Trans>Issuers</Trans>}
+        {...layoutProps}
+        className="Issuers"
+        sortingCallbacks={{
+          [sortBy.name]: (item: Issuer) => item.getName(),
+          [sortBy.namespace]: (item: Issuer) => item.getNs(),
+          [sortBy.type]: (item: Issuer) => item.getType(),
+          [sortBy.labels]: (item: Issuer) => item.getLabels(),
+          [sortBy.age]: (item: Issuer) => item.getAge(false),
+        }}
+        searchFilters={[
+          (item: Issuer) => item.getSearchFields(),
+          (item: Issuer) => item.getType(),
+        ]}
+        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>Type</Trans>, className: "type", sortBy: sortBy.type },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Status</Trans>, className: "status" },
+        ]}
+        renderTableContents={(issuer: Issuer) => [
+          issuer.getName(),
+          issuer.getNs(),
+          issuer.getLabels().map(label => <Badge key={label} label={label} title={label}/>),
+          issuer.getType(),
+          issuer.getAge(),
+          issuer.getConditions().map(({ type, tooltip, isReady }) => {
+            return (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            )
+          })
+        ]}
+        renderItemMenu={(item: Issuer) => {
+          return <IssuerMenu object={item}/>
+        }}
+      />
+    );
+  }
+}
+
+export function IssuerMenu(props: KubeObjectMenuProps<Issuer>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews([issuersApi, clusterIssuersApi], {
+  List: Issuers,
+  Menu: IssuerMenu,
+})

dashboard/client/components/+custom-resources/crd-details.scss

@@ -0,0 +1,45 @@
+@import "crd.mixins";
+
+.CRDDetails {
+  .conditions {
+    .Badge {
+      @include crd-condition-bgc;
+    }
+  }
+  
+  .Table {
+    margin-left: -$margin * 2;
+    margin-right: -$margin * 2;
+
+    .TableRow {
+      cursor: default;
+    }
+
+    &.printer-columns {
+      .type {
+        flex: 0.5;
+      }
+
+      .description {
+        flex: 1.5;
+
+        .Badge {
+          background: transparent;
+        }
+      }
+
+      .json-path {
+        flex: 3;
+
+        .Badge {
+          white-space: pre-line;
+          text-overflow: initial;
+        }
+      }
+    }
+  }
+
+  .validation {
+    height: 400px;
+  }
+}

dashboard/client/components/+custom-resources/crd-details.tsx

@@ -0,0 +1,138 @@
+import "./crd-details.scss";
+
+import * as React from "react";
+import { Trans } from "@lingui/macro";
+import { Link } from "react-router-dom";
+import { observer } from "mobx-react";
+import { apiManager } from "../../api/api-manager";
+import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { cssNames } from "../../utils";
+import { AceEditor } from "../ace-editor";
+import { Badge } from "../badge";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { Input } from "../input";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
+}
+
+@observer
+export class CRDDetails extends React.Component<Props> {
+  render() {
+    const { object: crd } = this.props;
+    if (!crd) return null;
+    const { plural, singular, kind, listKind } = crd.getNames();
+    const printerColumns = crd.getPrinterColumns();
+    const validation = crd.getValidation();
+    return (
+      <div className="CRDDetails">
+        <KubeObjectMeta object={crd}/>
+
+        <DrawerItem name={<Trans>Group</Trans>}>
+          {crd.getGroup()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Version</Trans>}>
+          {crd.getVersion()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Stored versions</Trans>}>
+          {crd.getStoredVersions()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Scope</Trans>}>
+          {crd.getScope()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Resource</Trans>}>
+          <Link to={crd.getResourceUrl()}>
+            {crd.getResourceTitle()}
+          </Link>
+        </DrawerItem>
+        <DrawerItem name={<Trans>Conversion</Trans>} className="flex gaps align-flex-start">
+          <Input
+            multiLine
+            theme="round-black"
+            className="box grow"
+            value={crd.getConversion()}
+            readOnly
+          />
+        </DrawerItem>
+        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+          {
+            crd.getConditions().map(condition => {
+              const { type, message, lastTransitionTime, status } = condition
+              return (
+                <Badge
+                  key={type}
+                  label={type}
+                  className={cssNames({ disabled: status === "False" }, type)}
+                  tooltip={(
+                    <>
+                      <p>{message}</p>
+                      <p><Trans>Last transition time: {lastTransitionTime}</Trans></p>
+                    </>
+                  )}
+                />
+              );
+            })
+          }
+        </DrawerItem>
+        <DrawerTitle title={<Trans>Names</Trans>}/>
+        <Table selectable className="names box grow">
+          <TableHead>
+            <TableCell><Trans>plural</Trans></TableCell>
+            <TableCell><Trans>singular</Trans></TableCell>
+            <TableCell><Trans>kind</Trans></TableCell>
+            <TableCell><Trans>listKind</Trans></TableCell>
+          </TableHead>
+          <TableRow>
+            <TableCell>{plural}</TableCell>
+            <TableCell>{singular}</TableCell>
+            <TableCell>{kind}</TableCell>
+            <TableCell>{listKind}</TableCell>
+          </TableRow>
+        </Table>
+        {printerColumns.length > 0 &&
+        <>
+          <DrawerTitle title={<Trans>Additional Printer Columns</Trans>}/>
+          <Table selectable className="printer-columns box grow">
+            <TableHead>
+              <TableCell className="name"><Trans>Name</Trans></TableCell>
+              <TableCell className="type"><Trans>Type</Trans></TableCell>
+              <TableCell className="json-path"><Trans>JSON Path</Trans></TableCell>
+            </TableHead>
+            {
+              printerColumns.map((column, index) => {
+                const { name, type, JSONPath } = column;
+                return (
+                  <TableRow key={index}>
+                    <TableCell className="name">{name}</TableCell>
+                    <TableCell className="type">{type}</TableCell>
+                    <TableCell className="json-path">
+                      <Badge label={JSONPath}/>
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            }
+          </Table>
+        </>
+        }
+        {validation &&
+        <>
+          <DrawerTitle title={<Trans>Validation</Trans>}/>
+          <AceEditor
+            mode="json"
+            className="validation"
+            value={validation}
+            readOnly
+          />
+        </>
+        }
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(crdApi, {
+  Details: CRDDetails
+})

dashboard/client/components/+custom-resources/crd-list.scss

@@ -0,0 +1,24 @@
+@import "crd.mixins";
+
+.CrdList {
+  .TableCell {
+    &.kind {
+      flex: 1.5;
+    }
+
+    &.group {
+      flex: 2;
+    }
+  }
+
+  .group-select {
+    .Select {
+      &__placeholder {
+        width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}

dashboard/client/components/+custom-resources/crd-list.tsx

@@ -0,0 +1,122 @@
+import "./crd-list.scss"
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { stopPropagation } from "../../utils";
+import { KubeObjectListLayout } from "../kube-object";
+import { crdStore } from "./crd.store";
+import { apiManager } from "../../api/api-manager";
+import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { Select, SelectOption } from "../select";
+import { navigation, setQueryParams } from "../../navigation";
+import { Icon } from "../icon";
+
+enum sortBy {
+  kind = "kind",
+  group = "group",
+  version = "version",
+  scope = "scope",
+  age = "age",
+}
+
+@observer
+export class CrdList extends React.Component {
+  @computed get groups() {
+    return navigation.searchParams.getAsArray("groups")
+  }
+
+  onGroupChange(group: string) {
+    const groups = [...this.groups];
+    const index = groups.findIndex(item => item == group);
+    if (index !== -1) groups.splice(index, 1);
+    else groups.push(group);
+    setQueryParams({ groups })
+  }
+
+  render() {
+    const selectedGroups = this.groups;
+    const sortingCallbacks = {
+      [sortBy.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
+      [sortBy.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
+      [sortBy.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
+      [sortBy.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
+    };
+    return (
+      <KubeObjectListLayout
+        className="CrdList"
+        isClusterScoped={true}
+        store={crdStore}
+        sortingCallbacks={sortingCallbacks}
+        searchFilters={Object.values(sortingCallbacks)}
+        filterItems={[
+          (items: CustomResourceDefinition[]) => {
+            return selectedGroups.length ? items.filter(item => selectedGroups.includes(item.getGroup())) : items
+          }
+        ]}
+        renderHeaderTitle={<Trans>Custom Resources</Trans>}
+        customizeHeader={() => {
+          let placeholder = <Trans>All groups</Trans>;
+          if (selectedGroups.length == 1) placeholder = <><Trans>Group</Trans>: {selectedGroups[0]}</>
+          if (selectedGroups.length >= 2) placeholder = <><Trans>Groups</Trans>: {selectedGroups.join(", ")}</>
+          return {
+            // fixme: move to global filters
+            filters: (
+              <Select
+                className="group-select"
+                placeholder={placeholder}
+                options={Object.keys(crdStore.groups)}
+                onChange={({ value: group }: SelectOption) => this.onGroupChange(group)}
+                controlShouldRenderValue={false}
+                formatOptionLabel={({ value: group }: SelectOption) => {
+                  const isSelected = selectedGroups.includes(group);
+                  return (
+                    <div className="flex gaps align-center">
+                      <Icon small material="folder"/>
+                      <span>{group}</span>
+                      {isSelected && <Icon small material="check" className="box right"/>}
+                    </div>
+                  )
+                }}
+              />
+            )
+          }
+        }}
+        renderTableHeader={[
+          { title: <Trans>Resource</Trans>, className: "kind", sortBy: sortBy.kind },
+          { title: <Trans>Group</Trans>, className: "group", sortBy: sortBy.group },
+          { title: <Trans>Version</Trans>, className: "version", sortBy: sortBy.group },
+          { title: <Trans>Scope</Trans>, className: "scope", sortBy: sortBy.scope },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(crd: CustomResourceDefinition) => {
+          return [
+            <Link to={crd.getResourceUrl()} onClick={stopPropagation}>
+              {crd.getResourceTitle()}
+            </Link>,
+            crd.getGroup(),
+            crd.getVersion(),
+            crd.getScope(),
+            crd.getAge(),
+          ]
+        }}
+        renderItemMenu={(item: CustomResourceDefinition) => {
+          return <CRDMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function CRDMenu(props: KubeObjectMenuProps<CustomResourceDefinition>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(crdApi, {
+  Menu: CRDMenu,
+});

dashboard/client/components/+custom-resources/crd-resource-details.scss

@@ -0,0 +1,12 @@
+.CrdResourceDetails {
+  .status {
+    .value {
+      .Badge {
+        &.ready {
+          color: white;
+          background-color: $colorOk;
+        }
+      }
+    }
+  }
+}

dashboard/client/components/+custom-resources/crd-resource-details.tsx

@@ -0,0 +1,69 @@
+import "./crd-resource-details.scss";
+
+import * as React from "react";
+import jsonPath from "jsonpath";
+import { Trans } from "@lingui/macro";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { cssNames } from "../../utils";
+import { Badge } from "../badge";
+import { DrawerItem } from "../drawer";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { apiManager } from "../../api/api-manager";
+import { crdStore } from "./crd.store";
+import { KubeObject } from "../../api/kube-object";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+// fixme: provide type-safe check for status
+interface Props extends KubeObjectDetailsProps<KubeObject & { status: any }> {
+}
+
+@observer
+export class CrdResourceDetails extends React.Component<Props> {
+  @computed get crd() {
+    return crdStore.getByObject(this.props.object);
+  }
+
+  @computed get CustomDetailsViews() {
+    return apiManager.getViews(this.props.object.selfLink).Details;
+  }
+
+  render() {
+    const { object } = this.props;
+    const { crd, CustomDetailsViews } = this;
+    if (!object || !crd) return null;
+    const className = cssNames("CrdResourceDetails", crd.getResourceKind());
+    const extraColumns = crd.getPrinterColumns();
+    const showStatus = !extraColumns.find(column => column.name == "Status") && object.status?.conditions;
+    if (CustomDetailsViews) {
+      return <CustomDetailsViews className={className} object={object}/>
+    }
+    return (
+      <div className={className}>
+        <KubeObjectMeta object={object}/>
+        {extraColumns.map(column => {
+          const { name } = column;
+          return (
+            <DrawerItem key={name} name={name}>
+              {jsonPath.query(object, column.JSONPath.slice(1))}
+            </DrawerItem>
+          )
+        })}
+        {showStatus && (
+          <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
+            {object.status.conditions.map((condition: { type: string; message: string; status: string }) => {
+              const { type, message, status } = condition;
+              return (
+                <Badge
+                  key={type} label={type}
+                  className={cssNames({ disabled: status === "False" }, type.toLowerCase())}
+                  tooltip={message}
+                />
+              );
+            })}
+          </DrawerItem>
+        )}
+      </div>
+    )
+  }
+}

dashboard/client/components/+custom-resources/crd-resource.store.ts

@@ -0,0 +1,14 @@
+import { autobind } from "../../utils";
+import { KubeApi } from "../../api/kube-api";
+import { KubeObjectStore } from "../../kube-object.store";
+import { KubeObject } from "../../api/kube-object";
+
+@autobind()
+export class CRDResourceStore<T extends KubeObject = any> extends KubeObjectStore<T> {
+  api: KubeApi;
+
+  constructor(api: KubeApi<T>) {
+    super();
+    this.api = api;
+  }
+}

dashboard/client/components/+custom-resources/crd-resources.scss

@@ -0,0 +1,3 @@
+.CrdResources {
+  
+}

dashboard/client/components/+custom-resources/crd-resources.tsx

@@ -0,0 +1,112 @@
+import "./crd-resources.scss";
+
+import React from "react";
+import jsonPath from "jsonpath";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { RouteComponentProps } from "react-router";
+import { KubeObjectListLayout } from "../kube-object";
+import { KubeObject } from "../../api/kube-object";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { ICRDRouteParams } from "./crd.route";
+import { autorun, computed } from "mobx";
+import { crdStore } from "./crd.store";
+import { SortingCallback } from "../table";
+import { apiManager } from "../../api/api-manager";
+
+interface Props extends RouteComponentProps<ICRDRouteParams> {
+}
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+@observer
+export class CrdResources extends React.Component<Props> {
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      autorun(() => {
+        const { store } = this;
+        if (store && !store.isLoading && !store.isLoaded) {
+          store.loadAll();
+        }
+      })
+    ])
+  }
+
+  @computed get crd() {
+    const { group, name } = this.props.match.params;
+    return crdStore.getByGroup(group, name);
+  }
+
+  @computed get store() {
+    if (!this.crd) return null
+    return apiManager.getStore(this.crd.getResourceApiBase());
+  }
+
+  render() {
+    const { crd, store } = this;
+    if (!crd) return null;
+    const isNamespaced = crd.isNamespaced();
+    const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
+    const sortingCallbacks: { [sortBy: string]: SortingCallback } = {
+      [sortBy.name]: (item: KubeObject) => item.getName(),
+      [sortBy.namespace]: (item: KubeObject) => item.getNs(),
+      [sortBy.age]: (item: KubeObject) => item.getAge(false),
+    }
+    extraColumns.forEach(column => {
+      sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.query(item, column.JSONPath.slice(1))
+    })
+    // todo: merge extra columns and other params to predefined view
+    const { List } = apiManager.getViews(crd.getResourceApiBase());
+    const ListView = List || KubeObjectListLayout;
+    return (
+      <ListView
+        className="CrdResources"
+        isClusterScoped={!isNamespaced}
+        store={store}
+        sortingCallbacks={sortingCallbacks}
+        searchFilters={[
+          (item: KubeObject) => item.getSearchFields(),
+        ]}
+        renderHeaderTitle={crd.getResourceTitle()}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          isNamespaced && { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          ...extraColumns.map(column => {
+            const { name } = column;
+            return {
+              title: name,
+              className: name.toLowerCase(),
+              sortBy: name
+            }
+          }),
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(crdInstance: KubeObject) => [
+          crdInstance.getName(),
+          isNamespaced && crdInstance.getNs(),
+          ...extraColumns.map(column =>
+            jsonPath.query(crdInstance, column.JSONPath.slice(1))
+          ),
+          crdInstance.getAge(),
+        ]}
+        renderItemMenu={(item: KubeObject) => {
+          return <CrdResourceMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function CrdResourceMenu(props: KubeObjectMenuProps<KubeObject>) {
+  const { Menu } = apiManager.getViews(props.object.selfLink);
+  if (Menu) {
+    return <Menu {...props}/>
+  }
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}

dashboard/client/components/+custom-resources/crd.mixins.scss

@@ -0,0 +1,17 @@
+// CRD conditions from here https://github.com/kubernetes/apiextensions-apiserver/blob/master/pkg/apis/apiextensions/types.go
+$crd-condition-colors: (
+  Established: $colorSuccess,
+  NamesAccepted: $colorOk,
+  NonStructuralSchema: $colorError,
+  Terminating: $colorTerminated,
+  KubernetesAPIApprovalPolicyConformant: $colorWarning
+);
+
+@mixin crd-condition-bgc {
+  @each $status, $color in $crd-condition-colors {
+    &.#{$status} {
+      background: $color;
+      color: white;
+    }
+  }
+}

dashboard/client/components/+custom-resources/crd.route.ts

@@ -0,0 +1,26 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const crdRoute: RouteProps = {
+  path: "/crd"
+}
+
+export const crdDefinitionsRoute: RouteProps = {
+  path: crdRoute.path + "/definitions"
+}
+
+export const crdResourcesRoute: RouteProps = {
+  path: crdRoute.path + "/:group/:name"
+}
+
+export interface ICRDListQuery {
+  groups?: string;
+}
+
+export interface ICRDRouteParams {
+  group: string;
+  name: string;
+}
+
+export const crdURL = buildURL<{}, ICRDListQuery>(crdDefinitionsRoute.path);
+export const crdResourcesURL = buildURL<ICRDRouteParams>(crdResourcesRoute.path);

dashboard/client/components/+custom-resources/crd.store.ts

@@ -0,0 +1,77 @@
+import { computed, reaction } from "mobx";
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { apiManager } from "../../api/api-manager";
+import { KubeApi } from "../../api/kube-api";
+import { CRDResourceStore } from "./crd-resource.store";
+import { KubeObject } from "../../api/kube-object";
+
+@autobind()
+export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
+  api = crdApi
+
+  constructor() {
+    super();
+
+    // auto-load crd-s for building sub-menus
+    this.loadAll();
+
+    // auto-init stores for crd-s
+    reaction(() => this.items.toJS(), items => {
+      items.forEach(this.initStore);
+    })
+  }
+
+  protected sortItems(items: CustomResourceDefinition[]) {
+    return super.sortItems(items, [
+      crd => crd.getGroup(),
+      crd => crd.getName(),
+    ])
+  }
+
+  protected initStore(crd: CustomResourceDefinition) {
+    const apiBase = crd.getResourceApiBase();
+    let api = apiManager.getApi(apiBase);
+    if (!api) {
+      api = new KubeApi({
+        apiBase: apiBase,
+        kind: crd.getResourceKind(),
+        isNamespaced: crd.isNamespaced(),
+      });
+    }
+    let store = apiManager.getStore(api);
+    if (!store) {
+      store = new CRDResourceStore(api);
+      apiManager.registerStore(api, store);
+    }
+  }
+
+  @computed get groups() {
+    const groups: Record<string, CustomResourceDefinition[]> = {};
+    return this.items.reduce((groups, crd) => {
+      const group = crd.getGroup();
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(crd);
+      return groups;
+    }, groups)
+  }
+
+  getByGroup(group: string, pluralName: string) {
+    const crdInGroup = this.groups[group];
+    if (!crdInGroup) return null;
+    return crdInGroup.find(crd => crd.getPluralName() === pluralName);
+  }
+
+  getByObject(obj: KubeObject) {
+    if (!obj) return null
+    const { kind, apiVersion } = obj;
+    return this.items.find(crd => {
+      return kind === crd.getResourceKind() && apiVersion === `${crd.getGroup()}/${crd.getVersion()}`
+    })
+  }
+}
+
+export const crdStore = new CRDStore();
+
+apiManager.registerStore(crdApi, crdStore);

dashboard/client/components/+custom-resources/custom-resources.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Redirect, Route, Switch } from "react-router";
+import { Trans } from "@lingui/macro";
+import { MainLayout, TabRoute } from "../layout/main-layout";
+import { crdResourcesRoute, crdRoute, crdURL, crdDefinitionsRoute } from "./crd.route";
+import { CrdList } from "./crd-list";
+import { CrdResources } from "./crd-resources";
+
+// todo: next steps - customization via plugins
+// todo: list views (rows content), full details view and if possible chart/prometheus hooks
+
+@observer
+export class CustomResources extends React.Component {
+  static get tabRoutes(): TabRoute[] {
+    return [
+      {
+        title: <Trans>Definitions</Trans>,
+        component: CustomResources,
+        url: crdURL(),
+        path: crdRoute.path,
+      }
+    ]
+  }
+
+  render() {
+    return (
+      <MainLayout>
+        <Switch>
+          <Route component={CrdList} {...crdDefinitionsRoute} exact/>
+          <Route component={CrdResources} {...crdResourcesRoute}/>
+          <Redirect to={crdURL()}/>
+        </Switch>
+      </MainLayout>
+    );
+  }
+}

dashboard/client/components/+custom-resources/index.ts

@@ -0,0 +1,8 @@
+export * from "./crd.route";
+export * from "./crd-list";
+export * from "./crd-details";
+export * from "./crd-resources";
+export * from "./crd-resource-details";
+
+// customized crd-s
+export * from "./certmanager.k8s.io"

dashboard/client/components/+events/event-details.scss

@@ -0,0 +1,7 @@
+.EventDetails {
+  .type {
+    .warning {
+      color: $colorError;
+    }
+  }
+}

dashboard/client/components/+events/event-details.tsx

@@ -0,0 +1,79 @@
+import "./event-details.scss";
+
+import React from "react";
+import kebabCase from "lodash/kebabCase";
+import { Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Link } from "react-router-dom";
+import { observer } from "mobx-react";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { eventApi, KubeEvent } from "../../api/endpoints/events.api";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { getDetailsUrl } from "../../navigation";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { lookupApiLink } from "../../api/kube-api";
+
+interface Props extends KubeObjectDetailsProps<KubeEvent> {
+}
+
+@observer
+export class EventDetails extends React.Component<Props> {
+  render() {
+    const { object: event } = this.props;
+    if (!event) return;
+    const { message, reason, count, type, involvedObject } = event;
+    const { kind, name, namespace, fieldPath } = involvedObject;
+    return (
+      <div className="EventDetails">
+        <KubeObjectMeta object={event}/>
+
+        <DrawerItem name={<Trans>Message</Trans>}>
+          {message}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Reason</Trans>}>
+          {reason}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Source</Trans>}>
+          {event.getSource()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>First seen</Trans>}>
+          {event.getFirstSeenTime()} <Trans>ago</Trans> {event.firstTimestamp}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Last seen</Trans>}>
+          {event.getLastSeenTime()} <Trans>ago</Trans> {event.lastTimestamp}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Count</Trans>}>
+          {count}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Type</Trans>} className="type">
+          <span className={kebabCase(type)}>{type}</span>
+        </DrawerItem>
+
+        <DrawerTitle title={<Trans>Involved object</Trans>}/>
+        <Table>
+          <TableHead>
+            <TableCell><Trans>Name</Trans></TableCell>
+            <TableCell><Trans>Namespace</Trans></TableCell>
+            <TableCell><Trans>Kind</Trans></TableCell>
+            <TableCell><Trans>Field Path</Trans></TableCell>
+          </TableHead>
+          <TableRow>
+            <TableCell>
+              <Link to={getDetailsUrl(lookupApiLink(involvedObject, event))}>
+                {name}
+              </Link>
+            </TableCell>
+            <TableCell>{namespace}</TableCell>
+            <TableCell>{kind}</TableCell>
+            <TableCell>{fieldPath}</TableCell>
+          </TableRow>
+        </Table>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(eventApi, {
+  Details: EventDetails,
+});