mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
dock: upgrade-chart tab refactoring & fixes -- part 1
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman
parent
05552fefab
commit
2b9fd97109
@ -19,22 +19,24 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import { action, IReactionDisposer, IReactionOptions, makeObservable, observable, reaction } from "mobx";
|
||||
import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./dock.store";
|
||||
import { DockTabStore } from "./dock-tab.store";
|
||||
import { getReleaseValues, HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { releaseStore } from "../+apps-releases/release.store";
|
||||
import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store";
|
||||
import { helmChartStore } from "../+apps-helm-charts/helm-chart.store";
|
||||
import { helmChartStore, IChartVersion } from "../+apps-helm-charts/helm-chart.store";
|
||||
|
||||
export interface IChartUpgradeData {
|
||||
releaseName: string;
|
||||
releaseNamespace: string;
|
||||
}
|
||||
|
||||
// FIXME: detach `releaseStore` and load directly from api-calls
|
||||
|
||||
export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
|
||||
public values = observable.map<TabId, string>();
|
||||
public versions = observable.array<IChartVersion>();
|
||||
private stopWatcher: IReactionDisposer;
|
||||
versions = observable.map<TabId, IChartVersion[]>();
|
||||
values = observable.map<TabId, string>();
|
||||
|
||||
constructor() {
|
||||
super({ storageKey: "chart_releases" });
|
||||
@ -45,83 +47,93 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
|
||||
super.init();
|
||||
|
||||
this.dispose.push(
|
||||
dockStore.onTabChange(({ tabId }) => this.loadData(tabId), {
|
||||
dockStore.onTabChange(async ({ tabId }) => {
|
||||
this.loadVersions(tabId);
|
||||
this.stopWatcher?.(); // unsubscribe previous active upgrade-chart tab
|
||||
this.stopWatcher = this.watchRelease(tabId);
|
||||
}, {
|
||||
tabKind: TabKind.UPGRADE_CHART,
|
||||
fireImmediately: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
async loadData(tabId: TabId) {
|
||||
await this.whenReady;
|
||||
private watchRelease(tabId: TabId, opts: IReactionOptions = {}): IReactionDisposer {
|
||||
const { releaseName, releaseNamespace } = this.getData(tabId);
|
||||
|
||||
return Promise.all([
|
||||
!releaseStore.isLoaded && releaseStore.loadFromContextNamespaces(),
|
||||
this.loadValues(tabId),
|
||||
this.loadVersions(tabId),
|
||||
]);
|
||||
return reaction(
|
||||
() => releaseStore.getByName(releaseName, releaseNamespace)?.getRevision(),
|
||||
() => this.loadValues(tabId),
|
||||
{
|
||||
fireImmediately: true,
|
||||
...opts,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
getRelease(tabId: TabId): HelmRelease | null {
|
||||
const releaseName = this.getData(tabId)?.releaseName;
|
||||
// TODO
|
||||
upgrade(tabId: TabId, version: IChartVersion) {
|
||||
const release = this.getRelease(tabId);
|
||||
const chart = release.getChart();
|
||||
const values = this.values.get(tabId);
|
||||
|
||||
if (!releaseName) return null;
|
||||
console.warn("UPGRADE", { release, chart, values, version });
|
||||
}
|
||||
|
||||
return releaseStore.getByName(releaseName);
|
||||
getRelease(tabId: TabId) {
|
||||
const { releaseName, releaseNamespace } = this.getData(tabId) ?? {};
|
||||
|
||||
return releaseStore.getByName(releaseName, releaseNamespace);
|
||||
}
|
||||
|
||||
isReady(tabId: TabId) {
|
||||
return [
|
||||
this.dataReady,
|
||||
this.values.get(tabId),
|
||||
this.versions.get(tabId),
|
||||
].every(Boolean);
|
||||
}
|
||||
|
||||
@action
|
||||
private async loadVersions(tabId: TabId): Promise<IChartVersion[]> {
|
||||
try {
|
||||
const { releaseName } = this.getData(tabId);
|
||||
async loadValues(tabId: TabId) {
|
||||
const { releaseName, releaseNamespace } = this.getData(tabId);
|
||||
const values = await getReleaseValues(releaseName, releaseNamespace, true);
|
||||
|
||||
console.info(`[UPGRADE-CHART]: loading versions for release "${releaseName}"`);
|
||||
const versions = await helmChartStore.getVersions(releaseName);
|
||||
|
||||
this.versions.replace(versions);
|
||||
|
||||
return versions;
|
||||
} catch (error) {
|
||||
console.error(`[UPGRADE-CHART]: loading versions has failed: ${error}`);
|
||||
}
|
||||
|
||||
return [];
|
||||
this.values.set(tabId, values);
|
||||
}
|
||||
|
||||
@action
|
||||
private async loadValues(tabId: TabId): Promise<string> {
|
||||
if (this.values.has(tabId)) {
|
||||
return this.values.get(tabId); // use cached values
|
||||
}
|
||||
async loadVersions(tabId: TabId) {
|
||||
const { releaseName, releaseNamespace } = this.getData(tabId);
|
||||
const release = releaseStore.getByName(releaseName, releaseNamespace);
|
||||
|
||||
try {
|
||||
const { releaseName, releaseNamespace } = this.getData(tabId);
|
||||
if (!release) return;
|
||||
|
||||
console.info(`[UPGRADE-CHART]: loading values for release "${releaseName}"`);
|
||||
const versions = await helmChartStore.getVersions(release.getChart());
|
||||
|
||||
const values = await getReleaseValues(releaseName, releaseNamespace, true);
|
||||
|
||||
this.values.set(tabId, values);
|
||||
|
||||
return values;
|
||||
} catch (error) {
|
||||
console.error(`[UPGRADE-CHART]: loading values has failed: ${error}`);
|
||||
}
|
||||
|
||||
return "";
|
||||
this.versions.set(tabId, versions);
|
||||
}
|
||||
|
||||
getTabByRelease(releaseName: string): DockTab | null {
|
||||
const entry = Object.entries(this.data).find(([, data]) => data.releaseName === releaseName);
|
||||
getTabId(releaseName: string, namespace: string): TabId {
|
||||
return Object.entries(this.data)
|
||||
.find(([/*tabId*/, data]) => data.releaseName === releaseName && data.releaseNamespace === namespace)?.[0];
|
||||
}
|
||||
|
||||
return entry ? dockStore.getTabById(entry[0]) : null;
|
||||
getTabByRelease(releaseName: string, namespace: string): DockTab {
|
||||
const tabId = this.getTabId(releaseName, namespace);
|
||||
|
||||
return dockStore.getTabById(tabId);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
super.destroy();
|
||||
this.stopWatcher?.();
|
||||
}
|
||||
}
|
||||
|
||||
export const upgradeChartStore = new UpgradeChartStore();
|
||||
|
||||
export function createUpgradeChartTab(release: HelmRelease, tabParams: DockTabCreateSpecific = {}) {
|
||||
let tab = upgradeChartStore.getTabByRelease(release.getName());
|
||||
let tab = upgradeChartStore.getTabByRelease(release.getName(), release.getNs());
|
||||
|
||||
if (tab) {
|
||||
dockStore.open();
|
||||
|
||||
@ -22,92 +22,62 @@
|
||||
import React from "react";
|
||||
import { computed, makeObservable, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import type { TabId } from "./dock.store";
|
||||
import { TabKind } from "./dock.store";
|
||||
import { InfoPanel, InfoPanelProps } from "./info-panel";
|
||||
import { upgradeChartStore } from "./upgrade-chart.store";
|
||||
import { releaseStore } from "../+apps-releases/release.store";
|
||||
import { Badge } from "../badge";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store";
|
||||
import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { TabKind } from "./dock.store";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { upgradeChartStore } from "./upgrade-chart.store";
|
||||
import { dockViewsManager } from "./dock.views-manager";
|
||||
|
||||
interface Props extends InfoPanelProps {
|
||||
}
|
||||
|
||||
@observer
|
||||
export class UpgradeChart extends React.Component<Props> {
|
||||
export class UpgradeChartInfoPanel extends React.Component<Props> {
|
||||
@observable selectedVersion: IChartVersion;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
get tabId() {
|
||||
get tabId(): TabId {
|
||||
return this.props.tabId;
|
||||
}
|
||||
|
||||
get release(): HelmRelease | null {
|
||||
get release(): HelmRelease {
|
||||
return upgradeChartStore.getRelease(this.tabId);
|
||||
}
|
||||
|
||||
@observable selectedVersion: IChartVersion | undefined;
|
||||
@computed get chartVersions(): SelectOption<IChartVersion>[] {
|
||||
const chartName = this.release.getChart();
|
||||
const versions = upgradeChartStore.versions.get(this.tabId) ?? [];
|
||||
|
||||
@computed get releaseVersion(): IChartVersion {
|
||||
return this.getChartVersionByRelease(this.release);
|
||||
}
|
||||
|
||||
@computed get chartVersionOptions(): SelectOption<IChartVersion>[] {
|
||||
return upgradeChartStore.versions.map(version => ({
|
||||
value: version,
|
||||
disabled: this.selectedVersion == this.releaseVersion,
|
||||
return versions.map(value => ({
|
||||
label: `${value.repo}/${chartName}-${value.version}`,
|
||||
value,
|
||||
}));
|
||||
}
|
||||
|
||||
@computed get chartValues(): string {
|
||||
return upgradeChartStore.values.get(this.tabId);
|
||||
}
|
||||
|
||||
getChartVersionByRelease(release: HelmRelease): IChartVersion | undefined {
|
||||
return upgradeChartStore.versions.find(({ version, repo }) => (
|
||||
release?.getChart() == repo &&
|
||||
release?.getVersion() === version
|
||||
));
|
||||
}
|
||||
|
||||
upgrade = async () => {
|
||||
const { releaseVersion, selectedVersion, release, chartValues } = this;
|
||||
const newVersionNotSelected = !selectedVersion || selectedVersion == releaseVersion;
|
||||
|
||||
if (!release || newVersionNotSelected) {
|
||||
throw new Error(`You have not selected new version for "${releaseVersion}"`); // skip: nothing to upgrade
|
||||
}
|
||||
|
||||
const { version, repo } = selectedVersion;
|
||||
const releaseName = release.getName();
|
||||
const releaseNs = release.getNs();
|
||||
|
||||
await releaseStore.update(releaseName, releaseNs, {
|
||||
chart: release.getChart(),
|
||||
values: chartValues,
|
||||
repo, version,
|
||||
});
|
||||
await upgradeChartStore.upgrade(this.tabId, this.selectedVersion);
|
||||
|
||||
return (
|
||||
<p>
|
||||
Release <b>{releaseName}</b> successfully upgraded to version <b>{version}</b>
|
||||
Release <b>{this.release.getName()}</b> successfully upgraded to version <b>{this.selectedVersion.version}</b>
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
formatVersionLabel = ({ value }: SelectOption<IChartVersion>) => {
|
||||
const chartName = this.release.getChart();
|
||||
const { repo, version } = value;
|
||||
|
||||
return `${repo}/${chartName}-${version}`;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { release, chartVersionOptions } = this;
|
||||
if (!upgradeChartStore.isReady(this.tabId)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { release, selectedVersion, chartVersions } = this;
|
||||
|
||||
return (
|
||||
<InfoPanel
|
||||
@ -117,17 +87,16 @@ export class UpgradeChart extends React.Component<Props> {
|
||||
submittingMessage="Updating.."
|
||||
controls={
|
||||
<div className="upgrade flex gaps align-center">
|
||||
<span>Release</span> <Badge label={release?.getName()}/>
|
||||
<span>Namespace</span> <Badge label={release?.getNs()}/>
|
||||
<span>Version</span> <Badge label={release?.getVersion()}/>
|
||||
<span>Release</span> <Badge label={release.getName()}/>
|
||||
<span>Namespace</span> <Badge label={release.getNs()}/>
|
||||
<span>Version</span> <Badge label={release.getVersion()}/>
|
||||
<span>Upgrade version</span>
|
||||
<Select
|
||||
className="chart-version"
|
||||
menuPlacement="top"
|
||||
themeName="outlined"
|
||||
value={this.selectedVersion ?? this.releaseVersion}
|
||||
options={chartVersionOptions}
|
||||
formatOptionLabel={this.formatVersionLabel}
|
||||
value={selectedVersion}
|
||||
options={chartVersions}
|
||||
onChange={({ value }: SelectOption<IChartVersion>) => this.selectedVersion = value}
|
||||
/>
|
||||
</div>
|
||||
@ -138,7 +107,7 @@ export class UpgradeChart extends React.Component<Props> {
|
||||
}
|
||||
|
||||
dockViewsManager.register(TabKind.UPGRADE_CHART, {
|
||||
InfoPanel: UpgradeChart,
|
||||
InfoPanel: UpgradeChartInfoPanel,
|
||||
editor: {
|
||||
getValue(tabId): string {
|
||||
return upgradeChartStore.values.get(tabId);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user