Use JSON patch for editing components

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -237,6 +237,7 @@
     "readable-stream": "^3.6.0",
     "request": "^2.88.2",
     "request-promise-native": "^1.0.9",
+    "rfc6902": "^4.0.2",
     "semver": "^7.3.2",
     "serializr": "^2.0.5",
     "shell-env": "^3.0.1",

src/common/k8s-api/endpoints/resource-applier.api.ts

@@ -22,19 +22,27 @@
 import jsYaml from "js-yaml";
 import type { KubeJsonApiData } from "../kube-json-api";
 import { apiBase } from "../index";
+import type { Patch } from "rfc6902";
 
-export const resourceApplierApi = {
-  annotations: [
-    "kubectl.kubernetes.io/last-applied-configuration"
-  ],
+export const annotations = [
+  "kubectl.kubernetes.io/last-applied-configuration"
+];
 
-  async update(resource: object | string): Promise<KubeJsonApiData | null> {
-    if (typeof resource === "string") {
-      resource = jsYaml.safeLoad(resource);
-    }
-
-    const [data = null] = await apiBase.post<KubeJsonApiData[]>("/stack", { data: resource });
-
-    return data;
+export async function update(resource: object | string): Promise<KubeJsonApiData> {
+  if (typeof resource === "string") {
+    resource = jsYaml.safeLoad(resource);
   }
-};
+
+  return apiBase.post<KubeJsonApiData>("/stack", { data: resource });
+}
+
+export async function patch(name: string, kind: string, ns: string, patch: Patch): Promise<KubeJsonApiData> {
+  return apiBase.patch<KubeJsonApiData>("/stack", {
+    data: {
+      name,
+      kind,
+      ns,
+      patch,
+    },
+  });
+}

src/common/k8s-api/kube-object.store.ts

@@ -32,6 +32,7 @@ import { parseKubeApi } from "./kube-api-parse";
 import type { KubeJsonApiData } from "./kube-json-api";
 import type { RequestInit } from "node-fetch";
 import AbortController from "abort-controller";
+import type { Patch } from "rfc6902";
 
 export interface KubeObjectStoreLoadingParams<K extends KubeObject> {
   namespaces: string[];
@@ -279,17 +280,21 @@ export abstract class KubeObjectStore<T extends KubeObject> extends ItemStore<T>
     return newItem;
   }
 
-  async update(item: T, data: Partial<T>): Promise<T> {
-    const rawItem = await item.update(data);
+  private postUpdate(rawItem: KubeJsonApiData): T {
     const newItem = new this.api.objectConstructor(rawItem);
+    const index = this.items.findIndex(item => item.getId() === newItem.getId());
 
     ensureObjectSelfLink(this.api, newItem);
 
-    const index = this.items.findIndex(item => item.getId() === newItem.getId());
+    return this.items[index] = newItem;
+  }
 
-    this.items.splice(index, 1, newItem);
+  async patch(item: T, patch: Patch): Promise<T> {
+    return this.postUpdate(await item.patch(patch));
+  }
 
-    return newItem;
+  async update(item: T, data: Partial<T>): Promise<T> {
+    return this.postUpdate(await item.update(data));
   }
 
   async remove(item: T) {

src/common/k8s-api/kube-object.ts

@@ -27,9 +27,9 @@ import { autoBind, formatDuration } from "../utils";
 import type { ItemObject } from "../item.store";
 import { apiKube } from "./index";
 import type { JsonApiParams } from "./json-api";
-import { resourceApplierApi } from "./endpoints/resource-applier.api";
+import * as resourceApplierApi from "./endpoints/resource-applier.api";
 import { hasOptionalProperty, hasTypedProperty, isObject, isString, bindPredicate, isTypedArray, isRecord } from "../../common/utils/type-narrowing";
-import _ from "lodash";
+import type { Patch } from "rfc6902";
 
 export type KubeObjectConstructor<K extends KubeObject> = (new (data: KubeJsonApiData | any) => K) & {
   kind?: string;
@@ -191,16 +191,22 @@ export class KubeObject<Metadata extends KubeObjectMetadata = KubeObjectMetadata
     return Object.entries(labels).map(([name, value]) => `${name}=${value}`);
   }
 
-  protected static readonly nonEditableFields = [
-    "apiVersion",
-    "kind",
-    "metadata.name",
-    "metadata.selfLink",
-    "metadata.resourceVersion",
-    "metadata.uid",
-    "managedFields",
-    "status",
+  /**
+   * These must be RFC6902 complient paths
+   */
+  private static readonly nonEditiablePathPrefixes = [
+    "/metadata/managedFields",
+    "/status",
   ];
+  private static readonly nonEditablePaths = new Set([
+    "/apiVersion",
+    "/kind",
+    "/metadata/name",
+    "/metadata/selfLink",
+    "/metadata/resourceVersion",
+    "/metadata/uid",
+    ...KubeObject.nonEditiablePathPrefixes,
+  ]);
 
   constructor(data: KubeJsonApiData) {
     Object.assign(this, data);
@@ -286,14 +292,30 @@ export class KubeObject<Metadata extends KubeObjectMetadata = KubeObjectMetadata
     return JSON.parse(JSON.stringify(this));
   }
 
-  // use unified resource-applier api for updating all k8s objects
-  async update(data: Partial<this>): Promise<KubeJsonApiData | null> {
-    for (const field of KubeObject.nonEditableFields) {
-      if (!_.isEqual(_.get(this, field), _.get(data, field))) {
-        throw new Error(`Failed to update Kube Object: ${field} has been modified`);
+  async patch(patch: Patch): Promise<KubeJsonApiData | null> {
+    for (const op of patch) {
+      if (KubeObject.nonEditablePaths.has(op.path)) {
+        throw new Error(`Failed to update ${this.kind}: JSON pointer ${op.path} has been modified`);
+      }
+
+      for (const pathPrefix of KubeObject.nonEditiablePathPrefixes) {
+        if (op.path.startsWith(`${pathPrefix}/`)) {
+          throw new Error(`Failed to update ${this.kind}: Child JSON pointer of ${op.path} has been modified`);
+        }
       }
     }
 
+    return resourceApplierApi.patch(this.getName(), this.kind, this.getNs(), patch);
+  }
+
+  /**
+   * Perform a full update (or more specifically a replace)
+   *
+   * Note: this is brittle if `data` is not a object spread with the current
+   * fields as the `resourceVersion` maybe out of date. This is a common race condition.
+   */
+  async update(data: Partial<this>): Promise<KubeJsonApiData | null> {
+    // use unified resource-applier api for updating all k8s objects
     return resourceApplierApi.update({
       ...this.toPlainObject(),
       ...data,

src/main/resource-applier.ts

@@ -22,55 +22,97 @@
 import type { Cluster } from "./cluster";
 import type { KubernetesObject } from "@kubernetes/client-node";
 import { exec } from "child_process";
-import fs from "fs";
+import fs from "fs-extra";
 import * as yaml from "js-yaml";
 import path from "path";
 import * as tempy from "tempy";
 import logger from "./logger";
 import { appEventBus } from "../common/event-bus";
 import { cloneJsonObject } from "../common/utils";
+import type { Patch } from "rfc6902";
+import { promiseExecFile } from "./promise-exec";
 
 export class ResourceApplier {
-  constructor(protected cluster: Cluster) {
+  constructor(protected cluster: Cluster) {}
+
+  /**
+   * Patch a kube resource's manifest, throwing any error that occurs.
+   * @param name The name of the kube resource
+   * @param kind The kind of the kube resource
+   * @param patch The list of JSON operations
+   * @param ns The optional namespace of the kube resource
+   */
+  async patch(name: string, kind: string, patch: Patch, ns?: string): Promise<string> {
+    appEventBus.emit({ name: "resource", action: "patch" });
+
+    const kubectl = await this.cluster.ensureKubectl();
+    const kubectlPath = await kubectl.getPath();
+    const proxyKubeconfigPath = await this.cluster.getProxyKubeconfigPath();
+    const args = [
+      "--kubeconfig", proxyKubeconfigPath,
+      "patch",
+      kind,
+      name,
+    ];
+
+    if (ns) {
+      args.push("--namespace", ns);
+    }
+
+    args.push(
+      "--type", "json",
+      "--patch", JSON.stringify(patch),
+      "-o", "yaml"
+    );
+
+    try {
+      const { stdout } = await promiseExecFile(kubectlPath, args);
+
+      return stdout;
+    } catch (error) {
+      throw error.stderr ?? error;
+    }
   }
 
   async apply(resource: KubernetesObject | any): Promise<string> {
     resource = this.sanitizeObject(resource);
     appEventBus.emit({ name: "resource", action: "apply" });
 
-    return await this.kubectlApply(yaml.safeDump(resource));
+    return this.kubectlApply(yaml.safeDump(resource));
   }
 
   protected async kubectlApply(content: string): Promise<string> {
     const kubectl = await this.cluster.ensureKubectl();
     const kubectlPath = await kubectl.getPath();
     const proxyKubeconfigPath = await this.cluster.getProxyKubeconfigPath();
+    const fileName = tempy.file({ name: "resource.yaml" });
+    const args = [
+      "apply",
+      "--kubeconfig", proxyKubeconfigPath,
+      "-o", "json",
+      "-f", fileName,
+    ];
 
-    return new Promise<string>((resolve, reject) => {
-      const fileName = tempy.file({ name: "resource.yaml" });
+    await fs.writeFile(fileName, content);
 
-      fs.writeFileSync(fileName, content);
-      const cmd = `"${kubectlPath}" apply --kubeconfig "${proxyKubeconfigPath}" -o json -f "${fileName}"`;
+    logger.debug(`shooting manifests with with ${kubectlPath}`, { args });
 
-      logger.debug(`shooting manifests with: ${cmd}`);
-      const execEnv: NodeJS.ProcessEnv = Object.assign({}, process.env);
-      const httpsProxy = this.cluster.preferences?.httpsProxy;
+    const execEnv = { ...process.env };
+    const httpsProxy = this.cluster.preferences?.httpsProxy;
 
-      if (httpsProxy) {
-        execEnv["HTTPS_PROXY"] = httpsProxy;
-      }
-      exec(cmd, { env: execEnv },
-        (error, stdout, stderr) => {
-          if (stderr != "") {
-            fs.unlinkSync(fileName);
-            reject(stderr);
+    if (httpsProxy) {
+      execEnv["HTTPS_PROXY"] = httpsProxy;
+    }
 
-            return;
-          }
-          fs.unlinkSync(fileName);
-          resolve(JSON.parse(stdout));
-        });
-    });
+    try {
+      const { stdout } = await promiseExecFile(kubectlPath, args);
+
+      return stdout;
+    } catch (error) {
+      throw error?.stderr ?? error;
+    } finally {
+      await fs.unlink(fileName);
+    }
   }
 
   public async kubectlApplyAll(resources: string[], extraArgs = ["-o", "json"]): Promise<string> {

src/main/router.ts

@@ -198,5 +198,6 @@ export class Router {
 
     // Resource Applier API
     this.router.add({ method: "post", path: `${apiPrefix}/stack` }, ResourceApplierApiRoute.applyResource);
+    this.router.add({ method: "patch", path: `${apiPrefix}/stack` }, ResourceApplierApiRoute.patchResource);
   }
 }

src/main/routes/resource-applier-route.ts

@@ -30,7 +30,19 @@ export class ResourceApplierApiRoute {
     try {
       const resource = await new ResourceApplier(cluster).apply(payload);
 
-      respondJson(response, [resource], 200);
+      respondJson(response, resource, 200);
+    } catch (error) {
+      respondText(response, error, 422);
+    }
+  }
+
+  static async patchResource(request: LensApiRequest) {
+    const { response, cluster, payload } = request;
+
+    try {
+      const resource = await new ResourceApplier(cluster).patch(payload.name, payload.kind, payload.ns, payload.patch);
+
+      respondJson(response, resource, 200);
     } catch (error) {
       respondText(response, error, 422);
     }

src/renderer/components/+workloads-deployments/deployment-scale-dialog.test.tsx

@@ -112,6 +112,7 @@ const dummyDeployment: Deployment = {
   toPlainObject: jest.fn(),
   update: jest.fn(),
   delete: jest.fn(),
+  patch: jest.fn(),
 };
 
 describe("<DeploymentScaleDialog />", () => {

src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.test.tsx

@@ -107,6 +107,7 @@ const dummyReplicaSet: ReplicaSet = {
   toPlainObject: jest.fn(),
   update: jest.fn(),
   delete: jest.fn(),
+  patch: jest.fn(),
 };
 
 describe("<ReplicaSetScaleDialog />", () => {

src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.test.tsx

@@ -117,6 +117,7 @@ const dummyStatefulSet: StatefulSet = {
   toPlainObject: jest.fn(),
   update: jest.fn(),
   delete: jest.fn(),
+  patch: jest.fn(),
 };
 
 describe("<StatefulSetScaleDialog />", () => {

src/renderer/components/dock/create-resource.tsx

@@ -33,7 +33,7 @@ import { createResourceStore } from "./create-resource.store";
 import type { DockTab } from "./dock.store";
 import { EditorPanel } from "./editor-panel";
 import { InfoPanel } from "./info-panel";
-import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api";
+import * as resourceApplierApi from "../../../common/k8s-api/endpoints/resource-applier.api";
 import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { Notifications } from "../notifications";
 import { monacoModelsManager } from "./monaco-model-manager";

src/renderer/components/dock/edit-resource.store.ts

@@ -31,6 +31,7 @@ import {monacoModelsManager} from "./monaco-model-manager";
 export interface EditingResource {
   resource: string; // resource path, e.g. /api/v1/namespaces/default
   draft?: string; // edited draft in yaml
+  firstDraft?: string;
 }
 
 export class EditResourceStore extends DockTabStore<EditingResource> {

src/renderer/components/dock/edit-resource.tsx

@@ -24,7 +24,7 @@ import "./edit-resource.scss";
 import React from "react";
 import { action, computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import jsYaml from "js-yaml";
+import yaml from "js-yaml";
 import type { DockTab } from "./dock.store";
 import { cssNames } from "../../utils";
 import { editResourceStore } from "./edit-resource.store";
@@ -33,6 +33,7 @@ import { Badge } from "../badge";
 import { EditorPanel } from "./editor-panel";
 import { Spinner } from "../spinner";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import { createPatch } from "rfc6902";
 
 interface Props {
   className?: string;
@@ -71,16 +72,17 @@ export class EditResource extends React.Component<Props> {
       return draft;
     }
 
-    return jsYaml.safeDump(this.resource.toPlainObject()); // dump resource first time
+    return yaml.safeDump(this.resource.toPlainObject()); // dump resource first time
   }
 
   @action
   saveDraft(draft: string | object) {
     if (typeof draft === "object") {
-      draft = draft ? jsYaml.safeDump(draft) : undefined;
+      draft = draft ? yaml.safeDump(draft) : undefined;
     }
 
     editResourceStore.setData(this.tabId, {
+      firstDraft: draft, // this must be before the next line
       ...editResourceStore.getData(this.tabId),
       draft,
     });
@@ -96,15 +98,14 @@ export class EditResource extends React.Component<Props> {
       return null;
     }
     const store = editResourceStore.getStore(this.tabId);
-    const updatedResource: KubeObject = await store.update(this.resource, jsYaml.safeLoad(this.draft));
-
-    this.saveDraft(updatedResource.toPlainObject()); // update with new resourceVersion to avoid further errors on save
-    const resourceType = updatedResource.kind;
-    const resourceName = updatedResource.getName();
+    const currentEdit = yaml.safeLoad(this.draft);
+    const firstVersion = yaml.safeLoad(editResourceStore.getData(this.tabId).firstDraft ?? this.draft);
+    const patches = createPatch(firstVersion, currentEdit);
+    const updatedResource = await store.patch(this.resource, patches);
 
     return (
       <p>
-        {resourceType} <b>{resourceName}</b> updated.
+        {updatedResource.kind} <b>{updatedResource.getName()}</b> updated.
       </p>
     );
   };