Fix rerendering of KubeObject views every 30s (#4801)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/+helm-releases/create-release/create-release.injectable.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import {
+  createRelease,
+  IReleaseCreatePayload,
+} from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import releasesInjectable from "../releases.injectable";
+
+const createReleaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+
+    return async (payload: IReleaseCreatePayload) => {
+      const release = await createRelease(payload);
+
+      releases.invalidate();
+
+      return release;
+    };
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default createReleaseInjectable;

src/renderer/components/+helm-releases/delete-release/delete-release.injectable.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import {
+  deleteRelease,
+  HelmRelease,
+} from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import releasesInjectable from "../releases.injectable";
+
+const deleteReleaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+
+    return async (release: HelmRelease) => {
+      await deleteRelease(release.getName(), release.getNs());
+
+      releases.invalidate();
+    };
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default deleteReleaseInjectable;

src/renderer/components/+helm-releases/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./releases";

src/renderer/components/+helm-releases/release-details/release-details.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { getRelease } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import releaseInjectable from "./release.injectable";
+
+const releaseDetailsInjectable = getInjectable({
+  instantiate: (di) =>
+    asyncComputed(async () => {
+      const release = di.inject(releaseInjectable).get();
+
+      return await getRelease(release.name, release.namespace);
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseDetailsInjectable;

src/renderer/components/+helm-releases/release-details/release-details.scss

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+@import "../release.mixins";
+
+.ReleaseDetails {
+  .DrawerItem {
+    align-items: center;
+  }
+
+  .loading-error {
+    color: red;
+    text-align: center;
+  }
+
+  .status {
+    @include release-status-bgs;
+  }
+
+  .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;
+
+      .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 + .Button {
+    align-self: flex-start;
+  }
+}

src/renderer/components/+helm-releases/release-details/release-details.tsx

@@ -0,0 +1,280 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./release-details.scss";
+
+import React, { Component } from "react";
+import groupBy from "lodash/groupBy";
+import { computed, IComputedValue, makeObservable, observable } from "mobx";
+import { Link } from "react-router-dom";
+import kebabCase from "lodash/kebabCase";
+import type { HelmRelease, IReleaseDetails, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-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 { Observer, observer } from "mobx-react";
+import { Spinner } from "../../spinner";
+import { Table, TableCell, TableHead, TableRow } from "../../table";
+import { Button } from "../../button";
+import { Notifications } from "../../notifications";
+import { ThemeStore } from "../../../theme.store";
+import { apiManager } from "../../../../common/k8s-api/api-manager";
+import { SubTitle } from "../../layout/sub-title";
+import { getDetailsUrl } from "../../kube-detail-params";
+import { Checkbox } from "../../checkbox";
+import { MonacoEditor } from "../../monaco-editor";
+import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
+import createUpgradeChartTabInjectable from "../../dock/upgrade-chart/create-upgrade-chart-tab.injectable";
+import updateReleaseInjectable from "../update-release/update-release.injectable";
+import releaseInjectable from "./release.injectable";
+import releaseDetailsInjectable from "./release-details.injectable";
+import releaseValuesInjectable from "./release-values.injectable";
+import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-shown.injectable";
+
+interface Props {
+  hideDetails(): void;
+}
+
+interface Dependencies {
+  release: IComputedValue<HelmRelease>
+  releaseDetails: IAsyncComputed<IReleaseDetails>
+  releaseValues: IAsyncComputed<string>
+  updateRelease: (name: string, namespace: string, payload: IReleaseUpdatePayload) => Promise<IReleaseUpdateDetails>
+  createUpgradeChartTab: (release: HelmRelease) => void
+  userSuppliedValuesAreShown: { toggle: () => void, value: boolean }
+}
+
+@observer
+class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
+  @observable saving = false;
+
+  private nonSavedValues: string;
+
+  constructor(props: Props & Dependencies) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get release() {
+    return this.props.release.get();
+  }
+
+  @computed get details() {
+    return this.props.releaseDetails.value.get();
+  }
+
+  updateValues = async () => {
+    const name = this.release.getName();
+    const namespace = this.release.getNs();
+    const data = {
+      chart: this.release.getChart(),
+      repo: await this.release.getRepo(),
+      version: this.release.getVersion(),
+      values: this.nonSavedValues,
+    };
+
+    this.saving = true;
+
+    try {
+      await this.props.updateRelease(name, namespace, data);
+      Notifications.ok(
+        <p>Release <b>{name}</b> successfully updated!</p>,
+      );
+
+      this.props.releaseValues.invalidate();
+    } catch (err) {
+      Notifications.error(err);
+    }
+    this.saving = false;
+  };
+
+  upgradeVersion = () => {
+    const { hideDetails } = this.props;
+
+    this.props.createUpgradeChartTab(this.release);
+    hideDetails();
+  };
+
+  renderValues() {
+    return (
+      <Observer>
+        {() => {
+          const { saving } = this;
+
+          const releaseValuesArePending =
+            this.props.releaseValues.pending.get();
+
+          this.nonSavedValues = this.props.releaseValues.value.get();
+
+          return (
+            <div className="values">
+              <DrawerTitle title="Values" />
+              <div className="flex column gaps">
+                <Checkbox
+                  label="User-supplied values only"
+                  value={this.props.userSuppliedValuesAreShown.value}
+                  onChange={this.props.userSuppliedValuesAreShown.toggle}
+                  disabled={releaseValuesArePending}
+                />
+                <MonacoEditor
+                  style={{ minHeight: 300 }}
+                  value={this.nonSavedValues}
+                  onChange={(text) => (this.nonSavedValues = text)}
+                />
+                <Button
+                  primary
+                  label="Save"
+                  waiting={saving}
+                  disabled={releaseValuesArePending}
+                  onClick={this.updateValues}
+                />
+              </div>
+            </div>
+          );
+        }}
+      </Observer>
+    );
+  }
+
+  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(api => api.kind === kind && api.apiVersionWithGroup == item.apiVersion);
+              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() {
+    if (!this.release) return null;
+
+    if (!this.details) {
+      return <Spinner center/>;
+    }
+
+    return (
+      <div>
+        <DrawerItem name="Chart" className="chart">
+          <div className="flex gaps align-center">
+            <span>{this.release.getChart()}</span>
+            <Button
+              primary
+              label="Upgrade"
+              className="box right upgrade"
+              onClick={this.upgradeVersion}
+            />
+          </div>
+        </DrawerItem>
+        <DrawerItem name="Updated">
+          {this.release.getUpdated()} ago ({this.release.updated})
+        </DrawerItem>
+        <DrawerItem name="Namespace">
+          {this.release.getNs()}
+        </DrawerItem>
+        <DrawerItem name="Version" onClick={stopPropagation}>
+          <div className="version flex gaps align-center">
+            <span>
+              {this.release.getVersion()}
+            </span>
+          </div>
+        </DrawerItem>
+        <DrawerItem name="Status" className="status" labelsOnly>
+          <Badge
+            label={this.release.getStatus()}
+            className={kebabCase(this.release.getStatus())}
+          />
+        </DrawerItem>
+        {this.renderValues()}
+        <DrawerTitle title="Notes"/>
+        {this.renderNotes()}
+        <DrawerTitle title="Resources"/>
+        {this.renderResources()}
+      </div>
+    );
+  }
+
+  render() {
+    const { hideDetails } = this.props;
+    const title = this.release ? `Release: ${this.release.getName()}` : "";
+    const toolbar = <HelmReleaseMenu release={this.release} toolbar hideDetails={hideDetails}/>;
+
+    return (
+      <Drawer
+        className={cssNames("ReleaseDetails", ThemeStore.getInstance().activeTheme.type)}
+        usePortal={true}
+        open={!!this.release}
+        title={title}
+        onClose={hideDetails}
+        toolbar={toolbar}
+      >
+        {this.renderContent()}
+      </Drawer>
+    );
+  }
+}
+
+export const ReleaseDetails = withInjectables<Dependencies, Props>(
+  NonInjectedReleaseDetails,
+
+  {
+    getProps: (di, props) => ({
+      release: di.inject(releaseInjectable),
+      releaseDetails: di.inject(releaseDetailsInjectable),
+      releaseValues: di.inject(releaseValuesInjectable),
+
+      userSuppliedValuesAreShown: di.inject(userSuppliedValuesAreShownInjectable),
+
+      updateRelease: di.inject(updateReleaseInjectable),
+      createUpgradeChartTab: di.inject(createUpgradeChartTabInjectable),
+      ...props,
+    }),
+  },
+);

src/renderer/components/+helm-releases/release-details/release-route-parameters.injectable.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { matchPath } from "react-router";
+import observableHistoryInjectable from "../../../navigation/observable-history.injectable";
+import { releaseRoute, ReleaseRouteParams } from "../../../../common/routes";
+
+const releaseRouteParametersInjectable = getInjectable({
+  instantiate: (di) => {
+    const observableHistory = di.inject(observableHistoryInjectable);
+
+    return computed(() => {
+      const releasePathParameters = matchPath<ReleaseRouteParams>(observableHistory.location.pathname, {
+        path: releaseRoute.path,
+      });
+
+      if (!releasePathParameters) {
+        return {};
+      }
+
+      return releasePathParameters.params;
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseRouteParametersInjectable;

src/renderer/components/+helm-releases/release-details/release-values.injectable.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { getReleaseValues } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import releaseInjectable from "./release.injectable";
+import { Notifications } from "../../notifications";
+import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-shown.injectable";
+
+const releaseValuesInjectable = getInjectable({
+  instantiate: (di) =>
+    asyncComputed(async () => {
+      const release = di.inject(releaseInjectable).get();
+
+      // TODO: Figure out way to get rid of defensive code
+      if (!release) {
+        return "";
+      }
+
+      const userSuppliedValuesAreShown = di.inject(userSuppliedValuesAreShownInjectable).value;
+
+      try {
+        return await getReleaseValues(release.getName(), release.getNs(), !userSuppliedValuesAreShown) ?? "";
+      } catch (error) {
+        Notifications.error(`Failed to load values for ${release.getName()}: ${error}`);
+
+        return "";
+      }
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseValuesInjectable;

src/renderer/components/+helm-releases/release-details/release.injectable.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { matches } from "lodash/fp";
+import releasesInjectable from "../releases.injectable";
+import releaseRouteParametersInjectable from "./release-route-parameters.injectable";
+import { computed } from "mobx";
+
+const releaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+    const releaseRouteParameters = di.inject(releaseRouteParametersInjectable);
+
+    return computed(() => {
+      const { name, namespace } = releaseRouteParameters.get();
+
+      if (!name || !namespace) {
+        return null;
+      }
+
+      return releases.value.get().find(matches({ name, namespace }));
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseInjectable;

src/renderer/components/+helm-releases/release-details/user-supplied-values-are-shown.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const userSuppliedValuesAreShownInjectable = getInjectable({
+  instantiate: () => {
+    const state = observable.box(false);
+
+    return {
+      get value() {
+        return state.get();
+      },
+
+      toggle: () => {
+        state.set(!state.get());
+      },
+    };
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default userSuppliedValuesAreShownInjectable;
+

src/renderer/components/+helm-releases/release-menu.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { cssNames } from "../../utils";
+import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
+import { MenuItem } from "../menu";
+import { Icon } from "../icon";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import createUpgradeChartTabInjectable from "../dock/upgrade-chart/create-upgrade-chart-tab.injectable";
+import releaseRollbackDialogModelInjectable from "./release-rollback-dialog-model/release-rollback-dialog-model.injectable";
+import deleteReleaseInjectable from "./delete-release/delete-release.injectable";
+
+interface Props extends MenuActionsProps {
+  release: HelmRelease;
+  hideDetails?(): void;
+}
+
+interface Dependencies {
+  deleteRelease: (release: HelmRelease) => Promise<any>
+  createUpgradeChartTab: (release: HelmRelease) => void
+  openRollbackDialog: (release: HelmRelease) => void
+}
+
+class NonInjectedHelmReleaseMenu extends React.Component<Props & Dependencies> {
+  remove = () => {
+    return this.props.deleteRelease(this.props.release);
+  };
+
+  upgrade = () => {
+    const { release, hideDetails } = this.props;
+
+    this.props.createUpgradeChartTab(release);
+    hideDetails?.();
+  };
+
+  rollback = () => {
+    this.props.openRollbackDialog(this.props.release);
+  };
+
+  renderContent() {
+    const { release, toolbar } = this.props;
+
+    if (!release) return null;
+    const hasRollback = release && release.getRevision() > 1;
+
+    return (
+      <>
+        {hasRollback && (
+          <MenuItem onClick={this.rollback}>
+            <Icon material="history" interactive={toolbar} tooltip="Rollback"/>
+            <span className="title">Rollback</span>
+          </MenuItem>
+        )}
+        <MenuItem onClick={this.upgrade}>
+          <Icon material="refresh" interactive={toolbar} tooltip="Upgrade"/>
+          <span className="title">Upgrade</span>
+        </MenuItem>
+      </>
+    );
+  }
+
+  render() {
+    const { className, release, ...menuProps } = this.props;
+
+    return (
+      <MenuActions
+        {...menuProps}
+        className={cssNames("HelmReleaseMenu", className)}
+        removeAction={this.remove}
+        removeConfirmationMessage={() => <p>Remove Helm Release <b>{release.name}</b>?</p>}
+      >
+        {this.renderContent()}
+      </MenuActions>
+    );
+  }
+}
+
+export const HelmReleaseMenu = withInjectables<Dependencies, Props>(
+  NonInjectedHelmReleaseMenu,
+
+  {
+    getProps: (di, props) => ({
+      deleteRelease: di.inject(deleteReleaseInjectable),
+      createUpgradeChartTab: di.inject(createUpgradeChartTabInjectable),
+      openRollbackDialog: di.inject(releaseRollbackDialogModelInjectable).open,
+
+      ...props,
+    }),
+  },
+);

src/renderer/components/+helm-releases/release-rollback-dialog-model/release-rollback-dialog-model.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { ReleaseRollbackDialogModel } from "./release-rollback-dialog-model";
+
+const releaseRollbackDialogModelInjectable = getInjectable({
+  instantiate: () => new ReleaseRollbackDialogModel(),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseRollbackDialogModelInjectable;

src/renderer/components/+helm-releases/release-rollback-dialog-model/release-rollback-dialog-model.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { computed, observable, makeObservable, action } from "mobx";
+import type { HelmRelease } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+
+export class ReleaseRollbackDialogModel {
+  release: HelmRelease | null = null;
+
+  constructor() {
+    makeObservable(this, {
+      isOpen: computed,
+      release: observable,
+      open: action,
+      close: action,
+    });
+  }
+
+  get isOpen() {
+    return !!this.release;
+  }
+
+  open = (release: HelmRelease) => {
+    this.release = release;
+  };
+
+  close = () => {
+    this.release = null;
+  };
+}

src/renderer/components/+helm-releases/release-rollback-dialog.scss

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ReleaseRollbackDialog {
+  .WizardStep {
+    text-align: center;
+
+    .step-content {
+      padding: var(--wizard-spacing);
+    }
+  }
+}

src/renderer/components/+helm-releases/release-rollback-dialog.tsx

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./release-rollback-dialog.scss";
+
+import React from "react";
+import { observable, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { Dialog, DialogProps } from "../dialog";
+import { Wizard, WizardStep } from "../wizard";
+import { getReleaseHistory, HelmRelease, IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { Select, SelectOption } from "../select";
+import { Notifications } from "../notifications";
+import orderBy from "lodash/orderBy";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import releaseRollbackDialogModelInjectable
+  from "./release-rollback-dialog-model/release-rollback-dialog-model.injectable";
+import type { ReleaseRollbackDialogModel } from "./release-rollback-dialog-model/release-rollback-dialog-model";
+import rollbackReleaseInjectable from "./rollback-release/rollback-release.injectable";
+
+interface Props extends DialogProps {
+}
+
+interface Dependencies {
+  rollbackRelease: (releaseName: string, namespace: string, revisionNumber: number) => Promise<void>
+  model: ReleaseRollbackDialogModel
+}
+
+@observer
+class NonInjectedReleaseRollbackDialog extends React.Component<Props & Dependencies> {
+  @observable isLoading = false;
+  @observable revision: IReleaseRevision;
+  @observable revisions = observable.array<IReleaseRevision>();
+
+  constructor(props: Props & Dependencies) {
+    super(props);
+    makeObservable(this);
+  }
+
+  get release(): HelmRelease {
+    return this.props.model.release;
+  }
+
+  onOpen = async () => {
+    this.isLoading = true;
+    let releases = await getReleaseHistory(this.release.getName(), this.release.getNs());
+
+    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 this.props.rollbackRelease(this.release.getName(), this.release.getNs(), revisionNumber);
+      this.props.model.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  };
+
+  renderContent() {
+    const { revision, revisions } = this;
+
+    if (!revision) {
+      return <p>No revisions to rollback.</p>;
+    }
+
+    return (
+      <div className="flex gaps align-center">
+        <b>Revision</b>
+        <Select
+          themeName="light"
+          value={revision}
+          options={revisions}
+          formatOptionLabel={({ value }: SelectOption<IReleaseRevision>) => `${value.revision} - ${value.chart}
+          - ${value.app_version}, updated: ${new Date(value.updated).toLocaleString()}`}
+          onChange={({ value }: SelectOption<IReleaseRevision>) => this.revision = value}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const releaseName = this.release ? this.release.getName() : "";
+    const header = <h5>Rollback <b>{releaseName}</b></h5>;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="ReleaseRollbackDialog"
+        isOpen={this.props.model.isOpen}
+        onOpen={this.onOpen}
+        close={this.props.model.close}
+      >
+        <Wizard header={header} done={this.props.model.close}>
+          <WizardStep
+            scrollable={false}
+            nextLabel="Rollback"
+            next={this.rollback}
+            loading={this.isLoading}
+          >
+            {this.renderContent()}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
+
+export const ReleaseRollbackDialog = withInjectables<Dependencies, Props>(
+  NonInjectedReleaseRollbackDialog,
+
+  {
+    getProps: (di, props) => ({
+      rollbackRelease: di.inject(rollbackReleaseInjectable),
+      model: di.inject(releaseRollbackDialogModelInjectable),
+      ...props,
+    }),
+  },
+);

src/renderer/components/+helm-releases/release.mixins.scss

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+$release-status-color-list: (
+  deployed: var(--colorSuccess),
+  failed: var(--colorError),
+  deleting: var(--colorWarning),
+  pendingInstall: var(--colorInfo),
+  pendingUpgrade: var(--colorInfo),
+  pendingRollback: var(--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;
+    }
+  }
+}

src/renderer/components/+helm-releases/releases.injectable.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import { listReleases } from "../../../common/k8s-api/endpoints/helm-releases.api";
+
+const releasesInjectable = getInjectable({
+  instantiate: (di) => {
+    const namespaceStore = di.inject(namespaceStoreInjectable);
+
+    // TODO: Inject clusterContext directly instead of accessing dependency of a dependency
+    const clusterContext = namespaceStore.context;
+
+    return asyncComputed(async () => {
+      const contextNamespaces = namespaceStore.contextNamespaces || [];
+
+      const isLoadingAll =
+        clusterContext.allNamespaces?.length > 1 &&
+        clusterContext.cluster.accessibleNamespaces.length === 0 &&
+        clusterContext.allNamespaces.every((namespace) =>
+          contextNamespaces.includes(namespace),
+        );
+
+      const releaseArrays = await (isLoadingAll ? listReleases() : Promise.all(
+        contextNamespaces.map((namespace) =>
+          listReleases(namespace),
+        ),
+      ));
+
+      return releaseArrays.flat();
+    }, []);
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releasesInjectable;

src/renderer/components/+helm-releases/releases.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+@import "release.mixins";
+
+.HelmReleases {
+  .TableCell {
+    &.status {
+      @include release-status-colors;
+    }
+
+    &.version {
+      > .Icon {
+        margin-left: $margin;
+
+        &.new-version {
+          color: var(--colorInfo);
+        }
+      }
+    }
+  }
+}

src/renderer/components/+helm-releases/releases.tsx

@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "../item-object-list/item-list-layout.scss";
+import "./releases.scss";
+
+import React, { Component } from "react";
+import type { RouteComponentProps } from "react-router";
+import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { navigation } from "../../navigation";
+import type { ReleaseRouteParams } from "../../../common/routes";
+import { releaseURL } from "../../../common/routes";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
+import { ItemListLayout } from "../item-object-list";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
+import { kebabCase } from "lodash/fp";
+import { HelmReleaseMenu } from "./release-menu";
+import type { ItemStore } from "../../../common/item.store";
+import { ReleaseRollbackDialog } from "./release-rollback-dialog";
+import { ReleaseDetails } from "./release-details/release-details";
+import removableReleasesInjectable from "./removable-releases.injectable";
+import type { RemovableHelmRelease } from "./removable-releases";
+import type { IComputedValue } from "mobx";
+import releasesInjectable from "./releases.injectable";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  revision = "revision",
+  chart = "chart",
+  version = "version",
+  appVersion = "app-version",
+  status = "status",
+  updated = "update",
+}
+
+interface Props extends RouteComponentProps<ReleaseRouteParams> {
+}
+
+interface Dependencies {
+  releases: IComputedValue<RemovableHelmRelease[]>
+  releasesArePending: IComputedValue<boolean>
+  selectNamespace: (namespace: string) => void
+}
+
+class NonInjectedHelmReleases extends Component<Dependencies & Props> {
+  componentDidMount() {
+    const { match: { params: { namespace }}} = this.props;
+
+    if (namespace) {
+      this.props.selectNamespace(namespace);
+    }
+  }
+
+  onDetails = (item: HelmRelease) => {
+    this.showDetails(item);
+  };
+
+  showDetails = (item: HelmRelease) => {
+    navigation.push(releaseURL({
+      params: {
+        name: item.getName(),
+        namespace: item.getNs(),
+      },
+    }));
+  };
+
+  hideDetails = () => {
+    navigation.push(releaseURL());
+  };
+
+  renderRemoveDialogMessage(selectedItems: HelmRelease[]) {
+    const releaseNames = selectedItems.map(item => item.getName()).join(", ");
+
+    return (
+      <div>
+        <>Remove <b>{releaseNames}</b>?</>
+        <p className="warning">
+          Note: StatefulSet Volumes won&apos;t be deleted automatically
+        </p>
+      </div>
+    );
+  }
+
+  render() {
+    const releases = this.props.releases;
+    const releasesArePending = this.props.releasesArePending;
+
+    // TODO: Implement ItemListLayout without stateful stores
+    const legacyReleaseStore = {
+      get items() {
+        return releases.get();
+      },
+
+      loadAll: () => Promise.resolve(),
+
+      get isLoaded() {
+        return !releasesArePending.get();
+      },
+
+      failedLoading: false,
+
+      getTotalCount: () => releases.get().length,
+
+      toggleSelection: (item) => {
+        item.toggle();
+      },
+
+      isSelectedAll: (visibleItems: RemovableHelmRelease[]) => (
+        visibleItems.length > 0
+        && visibleItems.every((release) => release.isSelected)
+      ),
+
+      toggleSelectionAll: (visibleItems: RemovableHelmRelease[]) => {
+        let selected = false;
+
+        if (!legacyReleaseStore.isSelectedAll(visibleItems)) {
+          selected = true;
+        }
+
+        visibleItems.forEach((release) => {
+          if (release.isSelected !== selected) {
+            release.toggle();
+          }
+        });
+      },
+
+      isSelected: (item) => item.isSelected,
+
+      get selectedItems() {
+        return releases.get().filter((release) => release.isSelected);
+      },
+
+      removeSelectedItems() {
+        return Promise.all(
+          releases.get().filter((release) => release.isSelected).map((release) => release.delete()),
+        );
+      },
+    } as ItemStore<RemovableHelmRelease>;
+
+    return (
+      <>
+        <ItemListLayout
+          store={legacyReleaseStore}
+          preloadStores={false}
+          isConfigurable
+          tableId="helm_releases"
+          className="HelmReleases"
+          sortingCallbacks={{
+            [columnId.name]: release => release.getName(),
+            [columnId.namespace]: release => release.getNs(),
+            [columnId.revision]: release => release.getRevision(),
+            [columnId.chart]: release => release.getChart(),
+            [columnId.status]: release => release.getStatus(),
+            [columnId.updated]: release => release.getUpdated(false, false),
+          }}
+          searchFilters={[
+            release => release.getName(),
+            release => release.getNs(),
+            release => release.getChart(),
+            release => release.getStatus(),
+            release => release.getVersion(),
+          ]}
+          customizeHeader={({ filters, searchProps, ...headerPlaceholders }) => ({
+            filters: (
+              <>
+                {filters}
+                <NamespaceSelectFilter />
+              </>
+            ),
+            searchProps: {
+              ...searchProps,
+              placeholder: "Search Releases...",
+            },
+            ...headerPlaceholders,
+          })}
+          renderHeaderTitle="Releases"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Chart", className: "chart", sortBy: columnId.chart, id: columnId.chart },
+            { title: "Revision", className: "revision", sortBy: columnId.revision, id: columnId.revision },
+            { title: "Version", className: "version", id: columnId.version },
+            { title: "App Version", className: "app-version", id: columnId.appVersion },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
+            { title: "Updated", className: "updated", sortBy: columnId.updated, id: columnId.updated },
+          ]}
+          renderTableContents={release => [
+            release.getName(),
+            release.getNs(),
+            release.getChart(),
+            release.getRevision(),
+            release.getVersion(),
+            release.appVersion,
+            { title: release.getStatus(), className: kebabCase(release.getStatus()) },
+            release.getUpdated(),
+          ]}
+          renderItemMenu={release => (
+            <HelmReleaseMenu
+              release={release}
+              removeConfirmationMessage={this.renderRemoveDialogMessage([release])}
+            />
+          )}
+          customizeRemoveDialog={selectedItems => ({
+            message: this.renderRemoveDialogMessage(selectedItems),
+          })}
+          onDetails={this.onDetails}
+        />
+
+        <ReleaseDetails
+          hideDetails={this.hideDetails}
+        />
+
+        <ReleaseRollbackDialog/>
+      </>
+    );
+  }
+}
+
+export const HelmReleases = withInjectables<Dependencies, Props>(
+  NonInjectedHelmReleases,
+
+  {
+    getProps: (di, props) => ({
+      releases: di.inject(removableReleasesInjectable),
+      releasesArePending: di.inject(releasesInjectable).pending,
+      selectNamespace: di.inject(namespaceStoreInjectable).selectNamespaces,
+      ...props,
+    }),
+  },
+);

src/renderer/components/+helm-releases/removable-releases.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+import releasesInjectable from "./releases.injectable";
+import deleteReleaseInjectable from "./delete-release/delete-release.injectable";
+import { removableReleases } from "./removable-releases";
+
+const removableReleasesInjectable = getInjectable({
+  instantiate: (di) =>
+    removableReleases({
+      releases: di.inject(releasesInjectable),
+      deleteRelease: di.inject(deleteReleaseInjectable),
+      releaseSelectionStatus: observable.map<string, boolean>(),
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default removableReleasesInjectable;

src/renderer/components/+helm-releases/removable-releases.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { IAsyncComputed } from "@ogre-tools/injectable-react";
+import { computed, ObservableMap } from "mobx";
+import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
+
+interface Dependencies {
+  releases: IAsyncComputed<HelmRelease[]>;
+  releaseSelectionStatus: ObservableMap<string, boolean>;
+  deleteRelease: (release: HelmRelease) => Promise<any>;
+}
+
+export interface RemovableHelmRelease extends HelmRelease {
+  toggle: () => void;
+  isSelected: boolean;
+  delete: () => Promise<void>;
+}
+
+export const removableReleases = ({
+  releases,
+  releaseSelectionStatus,
+  deleteRelease,
+}: Dependencies) => {
+  const isSelected = (release: HelmRelease) =>
+    releaseSelectionStatus.get(release.getId()) || false;
+
+  return computed(() =>
+    releases.value.get().map(
+      (release): RemovableHelmRelease => ({
+        ...release,
+
+        toggle: () => {
+          releaseSelectionStatus.set(release.getId(), !isSelected(release));
+        },
+
+        get isSelected() {
+          return isSelected(release);
+        },
+
+        delete: async () => {
+          await deleteRelease(release);
+        },
+      }),
+    ),
+  );
+};

src/renderer/components/+helm-releases/rollback-release/rollback-release.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { rollbackRelease } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import releasesInjectable from "../releases.injectable";
+
+const rollbackReleaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+
+    return async (name: string, namespace: string, revision: number) => {
+      await rollbackRelease(name, namespace, revision);
+
+      releases.invalidate();
+    };
+  },
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default rollbackReleaseInjectable;

src/renderer/components/+helm-releases/update-release/update-release.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import {
+  IReleaseUpdatePayload,
+  updateRelease,
+} from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import releasesInjectable from "../releases.injectable";
+
+const updateReleaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+
+    return async (
+      name: string,
+      namespace: string,
+      payload: IReleaseUpdatePayload,
+    ) => {
+      const result = await updateRelease(name, namespace, payload);
+
+      releases.invalidate();
+
+      return result;
+    };
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default updateReleaseInjectable;