Mobx-6 migration (#2718)

* mobx-6 migration -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * mobx-6 migration -- part 2 (npx mobx-undecorate --keepDecorators) Signed-off-by: Roman <ixrock@gmail.com> * mobx-6 migration -- part 3 (more fixes) Signed-off-by: Roman <ixrock@gmail.com> * unwrap possible observables from IPC-messaging Signed-off-by: Roman <ixrock@gmail.com> * mobx-6 migration -- remove @autobind as class-decorator Signed-off-by: Roman <ixrock@gmail.com> * mobx-6: replacing @autobind() as method-decorator to @boundMethod Signed-off-by: Roman <ixrock@gmail.com> * mobx-6: use toJS()-wrapper since monkey-patching require(mobx).toJS doesn't work Signed-off-by: Roman <ixrock@gmail.com> * removed `@observable static` Signed-off-by: Roman <ixrock@gmail.com> * use {useDefineForClassFields: true} in tsconfig.json Signed-off-by: Roman <ixrock@gmail.com> * remove ExtendedObservableMap Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix: removed makeObservable(this) from "terminal-tab.tsx" Signed-off-by: Roman <ixrock@gmail.com> * storage-helper refactoring Signed-off-by: Roman <ixrock@gmail.com> * normalize usages of #observable-value.toJSON() / attempt to catch the wind Signed-off-by: Roman <ixrock@gmail.com> * refactoring, more possible branch fixes + lint Signed-off-by: Roman <ixrock@gmail.com> * debugging cluster-view error -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * fix: refreshing cluster-view on ready Signed-off-by: Roman <ixrock@gmail.com> * fix: various app-crashes related to KubeObject.spec.* access from "undefined" fix: config-map-details crash Signed-off-by: Roman <ixrock@gmail.com> * fix: namespace-store refactoring / saving selected-namespaces to external json-file Signed-off-by: Roman <ixrock@gmail.com> * fix: don't cache mobx.when(() => this.someObservable) cause might not work as expected due later call of makeObservable(this) in constructor Signed-off-by: Roman <ixrock@gmail.com> * fix: app-crash on editing k8s resource Signed-off-by: Roman <ixrock@gmail.com> * fix: restore "all namespaces" on page reload Signed-off-by: Roman <ixrock@gmail.com> * - fix: persist table-sort params and cluster-view's sidebar state to lens-local-storage - new-feature: auto-open main-window's devtools in development-mode (yes/no/ugly?) Signed-off-by: Roman <ixrock@gmail.com> * fix: crd definition details -> crashing with <AceEditor mode="json"> (added missing mode-file in ace-editor.tsx) Signed-off-by: Roman <ixrock@gmail.com> * fix: crd definitions -> groups selector couldn't deselect last selected option Signed-off-by: Roman <ixrock@gmail.com> * refactoring: extensions-api exports clarification for "@k8slens/extensions" Signed-off-by: Roman <ixrock@gmail.com> * fix: various app-crashes related to kube-events (events page, some details page, overview, etc.) Signed-off-by: Roman <ixrock@gmail.com> * Reverted "use {useDefineForClassFields: true} in tsconfig.json" (various app-crash fixes) This flag seems to be not possible to use with class-inheritance in some cases. Example / demo: `KubeObject` class has initial type definitions for the fields like: "metadata", "kind", etc. and constructor() has Object.assign(this, data); Meanwhile child class, e.g. KubeEvent inherited from KubeObject and has it's own extra type definitions for underlying resource, e.g. "involvedObject", "source", etc. So calling super(data) doesn't work as expected for child class as it's own type definitions overwrites data from parent's constructor with `undefined` at later point. Signed-off-by: Roman <ixrock@gmail.com> * master-merge lint-fixes Signed-off-by: Roman <ixrock@gmail.com> * catalog.tsx / catalog-entities.store.ts refactoring & fixes Signed-off-by: Roman <ixrock@gmail.com> * fix: Catalog -> Browse all tab Signed-off-by: Roman <ixrock@gmail.com> * fix: CommandPalette doesn't appear from global menu by click/hotkey Signed-off-by: Roman <ixrock@gmail.com> * - Merging interfaces & classses to avoid overwriting fields from parent's super(data)-call with Object.assign(this, data). Otherwise use "declare" keyword at class field definition. - Revamping {useDefineForClassFields: true} to avoid issues with non-observable class fields in some cases (from previous commit): ``` @observer export class CommandContainer extends React.Component<CommandContainerProps> { // without some defined initial value "commandComponent" is non-observable for some reasons // when tsconfig.ts has {useDefineForClassFields:false} @observable.ref commandComponent: React.ReactNode = null; constructor(props: CommandContainerProps) { super(props); makeObservable(this); } ``` Signed-off-by: Roman <ixrock@gmail.com> * update KubeObject class type definition Signed-off-by: Roman <ixrock@gmail.com> * clean up / responding to comments Signed-off-by: Roman <ixrock@gmail.com> * fix: app-crash when navigating to catalog from active cluster-view, refactoring `catalog-entity-store` Signed-off-by: Roman <ixrock@gmail.com> * catalog-pusher clean up, replaced .observe_() to external observe() helper from "mobx" Signed-off-by: Roman <ixrock@gmail.com> * fix: catalog's items stale/non-observable (after connection to the cluster status still "disconnected"), lint-fixes Signed-off-by: Roman <ixrock@gmail.com> * fix: Catalog is empty after closing main-window and re-opening app from Tray Signed-off-by: Roman <ixrock@gmail.com> * fix: HotBar's icon context menu items non-observable (no "disconnect cluster", etc.) Signed-off-by: Roman <ixrock@gmail.com> * lint-fix/license check Signed-off-by: Roman <ixrock@gmail.com> * fix: redirect to catalog when disconnecting active cluster Signed-off-by: Roman <ixrock@gmail.com> * fix: refresh visibility of active cluster-view on switching from hotbar/catalog Signed-off-by: Roman <ixrock@gmail.com> * updated package.json for built-in extensions to use "*" version for packages served from main app Signed-off-by: Roman <ixrock@gmail.com> * - added missing makeObservable(this) to metrics-settings.tsx - updated package-lock.json for built-in extensions - lint fixes Signed-off-by: Roman <ixrock@gmail.com> * master-merge clean up fix, updated package-lock.json for built-in extensions after `make clean-extensions && make build-extensions` Signed-off-by: Roman <ixrock@gmail.com> * fix unit-tests Signed-off-by: Roman <ixrock@gmail.com> * master-merge fixes Signed-off-by: Roman <ixrock@gmail.com> * make lint happy Signed-off-by: Roman <ixrock@gmail.com> * reverted some changes, removed auto-opening devtools in dev-mode Signed-off-by: Roman <ixrock@gmail.com> * merge fixes Signed-off-by: Roman <ixrock@gmail.com> * master-merge conflict fixes: - proper handling and navigating into catalog's active category via URL-builder Signed-off-by: Roman <ixrock@gmail.com> * reverting splitted params for catalog's page route to "/catalog/:group?/:kind?" Signed-off-by: Roman <ixrock@gmail.com> * clean-up: remove app's injecting dependencies from `extensions/kube-object-event-status/package.json` Signed-off-by: Roman <ixrock@gmail.com> * master-merge fix: added missing makeObservable(this) for extensions.tsx Signed-off-by: Roman <ixrock@gmail.com> * fix: catalog entity context menu stale/unobservable Signed-off-by: Roman <ixrock@gmail.com> Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-05-25 10:24:31 +03:00
1 parent 0c45dd807e
commit 2c3b510997
@@ -19,13 +19,14 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import { reaction, toJS } from "mobx";
+import { reaction } from "mobx";
 import { broadcastMessage } from "../common/ipc";
-import type { CatalogEntityRegistry} from "./catalog";
+import type { CatalogEntityRegistry } from "./catalog";
 import "../common/catalog-entities/kubernetes-cluster";
+import { toJS } from "../common/utils";

 export function pushCatalogToRenderer(catalog: CatalogEntityRegistry) {
-  return reaction(() => toJS(catalog.items, { recurseEverything: true }), (items) => {
+  return reaction(() => toJS(catalog.items), (items) => {
    broadcastMessage("catalog:items", items);
  }, {
    fireImmediately: true,
@@ -19,7 +19,7 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import { action, observable, IComputedValue, computed, ObservableMap, runInAction } from "mobx";
+import { action, observable, IComputedValue, computed, ObservableMap, runInAction, makeObservable, observe } from "mobx";
 import type { CatalogEntity } from "../../common/catalog";
 import { catalogEntityRegistry } from "../../main/catalog";
 import { watch } from "chokidar";
@@ -45,6 +45,12 @@ export class KubeconfigSyncManager extends Singleton {

  protected static readonly syncName = "lens:kube-sync";

+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
  @action
  startSync(): void {
    if (this.syncing) {
@@ -69,7 +75,7 @@ export class KubeconfigSyncManager extends Singleton {
      this.startNewSync(filePath);
    }

-    this.syncListDisposer = UserStore.getInstance().syncKubeconfigEntries.observe(change => {
+    this.syncListDisposer = observe(UserStore.getInstance().syncKubeconfigEntries, change => {
      switch (change.type) {
        case "add":
          this.startNewSync(change.name);
@@ -19,14 +19,16 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import { action, computed, observable, IComputedValue, IObservableArray } from "mobx";
+import { action, computed, IComputedValue, IObservableArray, makeObservable, observable } from "mobx";
 import { CatalogCategoryRegistry, catalogCategoryRegistry, CatalogEntity } from "../../common/catalog";
 import { iter } from "../../common/utils";

 export class CatalogEntityRegistry {
-  protected sources = observable.map<string, IComputedValue<CatalogEntity[]>>([], { deep: true });
+  protected sources = observable.map<string, IComputedValue<CatalogEntity[]>>();

-  constructor(private categoryRegistry: CatalogCategoryRegistry) {}
+  constructor(private categoryRegistry: CatalogCategoryRegistry) {
+    makeObservable(this);
+  }

  @action addObservableSource(id: string, source: IObservableArray<CatalogEntity>) {
    this.sources.set(id, computed(() => source));
@@ -22,7 +22,7 @@
 import "../common/cluster-ipc";
 import type http from "http";
 import { ipcMain } from "electron";
-import { action, autorun, reaction, toJS } from "mobx";
+import { action, autorun, makeObservable, reaction } from "mobx";
 import { ClusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import type { Cluster } from "./cluster";
 import logger from "./logger";
@@ -32,38 +32,47 @@ import { catalogEntityRegistry } from "./catalog";
 import { KubernetesCluster, KubernetesClusterPrometheusMetrics } from "../common/catalog-entities/kubernetes-cluster";

 export class ClusterManager extends Singleton {
+  private store = ClusterStore.getInstance();
+
  constructor() {
    super();
+    makeObservable(this);
+    this.bindEvents();
+  }

-    reaction(() => toJS(ClusterStore.getInstance().clustersList, { recurseEverything: true }), () => {
-      this.updateCatalog(ClusterStore.getInstance().clustersList);
-    }, { fireImmediately: true });
+  private bindEvents() {
+    // reacting to every cluster's state change and total amount of items
+    reaction(
+      () => this.store.clustersList.map(c => c.getState()),
+      () => this.updateCatalog(this.store.clustersList),
+      { fireImmediately: true, }
+    );

    reaction(() => catalogEntityRegistry.getItemsForApiKind<KubernetesCluster>("entity.k8slens.dev/v1alpha1", "KubernetesCluster"), (entities) => {
      this.syncClustersFromCatalog(entities);
    });

-
    // auto-stop removed clusters
    autorun(() => {
-      const removedClusters = Array.from(ClusterStore.getInstance().removedClusters.values());
+      const removedClusters = Array.from(this.store.removedClusters.values());

      if (removedClusters.length > 0) {
        const meta = removedClusters.map(cluster => cluster.getMeta());

        logger.info(`[CLUSTER-MANAGER]: removing clusters`, meta);
        removedClusters.forEach(cluster => cluster.disconnect());
-        ClusterStore.getInstance().removedClusters.clear();
+        this.store.removedClusters.clear();
      }
    }, {
      delay: 250
    });

-    ipcMain.on("network:offline", () => { this.onNetworkOffline(); });
-    ipcMain.on("network:online", () => { this.onNetworkOnline(); });
+    ipcMain.on("network:offline", this.onNetworkOffline);
+    ipcMain.on("network:online", this.onNetworkOnline);
  }

-  @action protected updateCatalog(clusters: Cluster[]) {
+  @action
+  protected updateCatalog(clusters: Cluster[]) {
    for (const cluster of clusters) {
      const index = catalogEntityRegistry.items.findIndex((entity) => entity.metadata.uid === cluster.id);

@@ -94,10 +103,10 @@ export class ClusterManager extends Singleton {

  @action syncClustersFromCatalog(entities: KubernetesCluster[]) {
    for (const entity of entities) {
-      const cluster = ClusterStore.getInstance().getById(entity.metadata.uid);
+      const cluster = this.store.getById(entity.metadata.uid);

      if (!cluster) {
-        ClusterStore.getInstance().addCluster({
+        this.store.addCluster({
          id: entity.metadata.uid,
          preferences: {
            clusterName: entity.metadata.name
@@ -117,28 +126,28 @@ export class ClusterManager extends Singleton {
    }
  }

-  protected onNetworkOffline() {
+  protected onNetworkOffline = () => {
    logger.info("[CLUSTER-MANAGER]: network is offline");
-    ClusterStore.getInstance().clustersList.forEach((cluster) => {
+    this.store.clustersList.forEach((cluster) => {
      if (!cluster.disconnected) {
        cluster.online = false;
        cluster.accessible = false;
        cluster.refreshConnectionStatus().catch((e) => e);
      }
    });
-  }
+  };

-  protected onNetworkOnline() {
+  protected onNetworkOnline = () => {
    logger.info("[CLUSTER-MANAGER]: network is online");
-    ClusterStore.getInstance().clustersList.forEach((cluster) => {
+    this.store.clustersList.forEach((cluster) => {
      if (!cluster.disconnected) {
        cluster.refreshConnectionStatus().catch((e) => e);
      }
    });
-  }
+  };

  stop() {
-    ClusterStore.getInstance().clusters.forEach((cluster: Cluster) => {
+    this.store.clusters.forEach((cluster: Cluster) => {
      cluster.disconnect();
    });
  }
@@ -150,18 +159,18 @@ export class ClusterManager extends Singleton {
    if (req.headers.host.startsWith("127.0.0.1")) {
      const clusterId = req.url.split("/")[1];

-      cluster = ClusterStore.getInstance().getById(clusterId);
+      cluster = this.store.getById(clusterId);

      if (cluster) {
        // we need to swap path prefix so that request is proxied to kube api
        req.url = req.url.replace(`/${clusterId}`, apiKubePrefix);
      }
    } else if (req.headers["x-cluster-id"]) {
-      cluster = ClusterStore.getInstance().getById(req.headers["x-cluster-id"].toString());
+      cluster = this.store.getById(req.headers["x-cluster-id"].toString());
    } else {
      const clusterId = getClusterIdFromHost(req.headers.host);

-      cluster = ClusterStore.getInstance().getById(clusterId);
+      cluster = this.store.getById(clusterId);
    }

    return cluster;
@@ -169,9 +178,7 @@ export class ClusterManager extends Singleton {
 }

 export function catalogEntityFromCluster(cluster: Cluster) {
-  return new KubernetesCluster(toJS({
-    apiVersion: "entity.k8slens.dev/v1alpha1",
-    kind: "KubernetesCluster",
+  return new KubernetesCluster({
    metadata: {
      uid: cluster.id,
      name: cluster.name,
@@ -190,5 +197,5 @@ export function catalogEntityFromCluster(cluster: Cluster) {
      message: "",
      active: !cluster.disconnected
    }
-  }));
+  });
 }
@@ -21,7 +21,7 @@

 import { ipcMain } from "electron";
 import type { ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences, ClusterPrometheusPreferences, UpdateClusterModel } from "../common/cluster-store";
-import { action, comparer, computed, observable, reaction, toJS, when } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction, when } from "mobx";
 import { broadcastMessage, ClusterListNamespaceForbiddenChannel } from "../common/ipc";
 import { ContextHandler } from "./context-handler";
 import { AuthorizationV1Api, CoreV1Api, HttpError, KubeConfig, V1ResourceAttributes } from "@kubernetes/client-node";
@@ -33,6 +33,7 @@ import logger from "./logger";
 import { VersionDetector } from "./cluster-detectors/version-detector";
 import { detectorRegistry } from "./cluster-detectors/detector-registry";
 import plimit from "p-limit";
+import { toJS } from "../common/utils";

 export enum ClusterStatus {
  AccessGranted = 2,
@@ -91,7 +92,9 @@ export class Cluster implements ClusterModel, ClusterState {
  protected activated = false;
  private resourceAccessStatuses: Map<KubeApiResource, boolean> = new Map();

-  whenReady = when(() => this.ready);
+  get whenReady() {
+    return when(() => this.ready);
+  }

  /**
   * Kubeconfig context name
@@ -227,9 +230,7 @@ export class Cluster implements ClusterModel, ClusterState {
  @computed get prometheusPreferences(): ClusterPrometheusPreferences {
    const { prometheus, prometheusProvider } = this.preferences;

-    return toJS({ prometheus, prometheusProvider }, {
-      recurseEverything: true,
-    });
+    return toJS({ prometheus, prometheusProvider });
  }

  /**
@@ -240,6 +241,7 @@ export class Cluster implements ClusterModel, ClusterState {
  }

  constructor(model: ClusterModel) {
+    makeObservable(this);
    this.id = model.id;
    this.updateModel(model);

@@ -570,9 +572,7 @@ export class Cluster implements ClusterModel, ClusterState {
      accessibleNamespaces: this.accessibleNamespaces,
    };

-    return toJS(model, {
-      recurseEverything: true
-    });
+    return toJS(model);
  }

  /**
@@ -592,9 +592,7 @@ export class Cluster implements ClusterModel, ClusterState {
      isGlobalWatchEnabled: this.isGlobalWatchEnabled,
    };

-    return toJS(state, {
-      recurseEverything: true
-    });
+    return toJS(state);
  }

  /**
@@ -23,23 +23,25 @@ import { randomBytes } from "crypto";
 import { SHA256 } from "crypto-js";
 import { app, remote } from "electron";
 import fse from "fs-extra";
-import { action, observable, toJS } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 import path from "path";
 import { BaseStore } from "../common/base-store";
 import type { LensExtensionId } from "../extensions/lens-extension";
+import { toJS } from "../common/utils";

 interface FSProvisionModel {
  extensions: Record<string, string>; // extension names to paths
 }

 export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {
-  @observable registeredExtensions = observable.map<LensExtensionId, string>();
+  registeredExtensions = observable.map<LensExtensionId, string>();

  constructor() {
    super({
      configName: "lens-filesystem-provisioner-store",
      accessPropertiesByDotNotation: false, // To make dots safe in cluster context names
    });
+    makeObservable(this);
  }

  /**
@@ -71,9 +73,7 @@ export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {

  toJSON(): FSProvisionModel {
    return toJS({
-      extensions: this.registeredExtensions.toJSON(),
-    }, {
-      recurseEverything: true
+      extensions: Object.fromEntries(this.registeredExtensions),
    });
  }
 }
@@ -24,7 +24,7 @@
 import "../common/system-ca";
 import "../common/prometheus-providers";
 import * as Mobx from "mobx";
-import * as LensExtensions from "../extensions/core-api";
+import * as LensExtensionsCoreApi from "../extensions/core-api";
 import { app, autoUpdater, ipcMain, dialog, powerMonitor } from "electron";
 import { appName, isMac, productName } from "../common/vars";
 import path from "path";
@@ -55,6 +55,7 @@ import { HotbarStore } from "../common/hotbar-store";
 import { HelmRepoManager } from "./helm/helm-repo-manager";
 import { KubeconfigSyncManager } from "./catalog-sources";
 import { handleWsUpgrade } from "./proxy/ws-upgrade";
+import configurePackages from "../common/configure-packages";

 const workingDir = path.join(app.getPath("appData"), appName);
 const cleanup = disposer();
@@ -77,6 +78,7 @@ if (process.env.LENS_DISABLE_GPU) {
  app.disableHardwareAcceleration();
 }

+configurePackages();
 mangleProxyEnv();

 if (app.commandLine.getSwitchValue("proxy-server") !== "") {
@@ -191,15 +193,11 @@ app.on("ready", async () => {
    cleanup.push(pushCatalogToRenderer(catalogEntityRegistry));
    KubeconfigSyncManager.getInstance().startSync();
    startUpdateChecking();
-    LensProtocolRouterMain
-      .getInstance()
-      .rendererLoaded = true;
+    LensProtocolRouterMain.getInstance().rendererLoaded = true;
  });

  ExtensionLoader.getInstance().whenLoaded.then(() => {
-    LensProtocolRouterMain
-      .getInstance()
-      .extensionsLoaded = true;
+    LensProtocolRouterMain.getInstance().extensionsLoaded = true;
  });

  logger.info("🧩 Initializing extensions");
@@ -272,12 +270,16 @@ app.on("open-url", (event, rawUrl) => {
    .catch(error => logger.error(`${LensProtocolRouterMain.LoggingPrefix}: an error occured`, { error, rawUrl }));
 });

-// Extensions-api runtime exports
-export const LensExtensionsApi = {
-  ...LensExtensions,
+/**
+ * Exports for virtual package "@k8slens/extensions" for main-process.
+ * All exporting names available in global runtime scope:
+ * e.g. global.Mobx, global.LensExtensions
+ */
+const LensExtensions = {
+  ...LensExtensionsCoreApi,
 };

 export {
  Mobx,
-  LensExtensionsApi as LensExtensions,
+  LensExtensions,
 };
@@ -24,7 +24,7 @@ import * as proto from "../../common/protocol-handler";
 import Url from "url-parse";
 import type { LensExtension } from "../../extensions/lens-extension";
 import { broadcastMessage } from "../../common/ipc";
-import { observable, when } from "mobx";
+import { observable, when, makeObservable } from "mobx";

 export interface FallbackHandler {
  (name: string): Promise<boolean>;
@@ -36,6 +36,12 @@ export class LensProtocolRouterMain extends proto.LensProtocolRouter {
  @observable rendererLoaded = false;
  @observable extensionsLoaded = false;

+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
  /**
   * Find the most specific registered handler, if it exists, and invoke it.
   *
@@ -20,7 +20,7 @@
 */

 import type { ClusterId } from "../common/cluster-store";
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { app, BrowserWindow, dialog, shell, webContents } from "electron";
 import windowStateKeeper from "electron-window-state";
 import { appEventBus } from "../common/event-bus";
@@ -44,6 +44,7 @@ export class WindowManager extends Singleton {

  constructor() {
    super();
+    makeObservable(this);
    this.bindEvents();
    this.initMenu();
    this.initTray();