querysub 0.395.0 → 0.397.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.395.0",
+  "version": "0.397.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/-a-archives/archivesDisk.ts

@@ -118,7 +118,7 @@ class ArchivesDisk {
                 if (dir.endsWith(":")) break;
                 let files = await fs.promises.readdir(this.LOCAL_ARCHIVE_FOLDER + dir);
                 if (files.length > 0) break;
-                await fs.promises.rmdir(this.LOCAL_ARCHIVE_FOLDER + dir);
+                await fs.promises.rm(this.LOCAL_ARCHIVE_FOLDER + dir, { recursive: true });
             }
         } catch { }
     }
@@ -176,7 +176,7 @@ class ArchivesDisk {
         } catch { }
         if (files.length === 0) {
             try {
-                await fs.promises.rmdir(dir);
+                await fs.promises.rm(dir, { recursive: true });
             } catch { }
         }
     }

package/src/-c-identity/IdentityController.ts

@@ -17,6 +17,7 @@ import { delay } from "socket-function/src/batching";
 import { formatTime } from "socket-function/src/formatting/format";
 import { waitForFirstTimeSync } from "socket-function/time/trueTimeShim";
 import { red } from "socket-function/src/formatting/logColors";
+import { isNode } from "typesafecss";
 
 let callerInfo = new Map<CallerContext, {
     reconnectNodeId: string | undefined;
@@ -108,6 +109,7 @@ export interface ChangeIdentityPayload {
     certIssuer: string;
     serverId: string;
     mountedPort: number | undefined;
+    debugEntryPoint: string | undefined;
 }
 class IdentityControllerBase {
     // IMPORTANT! We HAVE to call changeIdentity NOT JUST because we can't use peer certificates in the browser, BUT, also
@@ -158,7 +160,22 @@ class IdentityControllerBase {
             pubKeyShort: getShortNumber(pubKey),
         });
 
-        console.log(`Authenticated identity for ${caller.nodeId} to ${reconnectNodeId || caller.nodeId} in ${formatTime(Date.now() - time)}, at ${Date.now()}`);
+        let duration = Date.now() - time;
+        console.log(`Authenticated identity for ${caller.nodeId} in ${formatTime(duration)}, at ${Date.now()}`, {
+            clientId: caller.nodeId,
+            reconnectNodeId,
+            duration,
+            mountedPort: payload.mountedPort,
+            debugEntryPoint: payload.debugEntryPoint,
+        });
+
+        SocketFunction.onNextDisconnect(caller.nodeId, () => {
+            // NOTE: I don't really see any purpose of deleting from caller info. I don't think we're going to run out of memory because of too many callers authenticating. 
+            // However, logging here is useful as it allows us to complete the life cycle so we know how long a client was connected for.
+            console.log(`Disconnected client`, {
+                clientId: caller.nodeId,
+            });
+        });
     }
 }
 
@@ -188,6 +205,7 @@ const changeIdentityOnce = cacheWeak(async function changeIdentityOnce(connectio
         cert: threadKeyCert.cert.toString(),
         certIssuer: issuer.cert.toString(),
         mountedPort: getNodeIdLocation(SocketFunction.mountedNodeId)?.port,
+        debugEntryPoint: isNode() ? process.argv[1] : "browser",
     };
     let signature = sign(threadKeyCert, payload);
     await timeoutToError(

package/src/0-path-value-core/pathValueCore.ts

@@ -1249,14 +1249,14 @@ class PathWatcher {
         if (newPathsWatched.size > 0 || newParentsWatched.size > 0) {
             if (isOwnNodeId(config.callback)) {
                 for (let path of newPathsWatched) {
-                    auditLog("new local WATCH", { path });
+                    auditLog("new local WATCH VALUE", { path });
                 }
                 for (let path of newParentsWatched) {
                     auditLog("new local WATCH PARENT", { path });
                 }
             } else {
                 for (let path of newPathsWatched) {
-                    auditLog("new non-local WATCH", { path, watcher: config.callback });
+                    auditLog("new non-local WATCH VALUE", { path, watcher: config.callback });
                 }
                 for (let path of newParentsWatched) {
                     auditLog("new non-local WATCH PARENT", { path, watcher: config.callback });
@@ -1381,9 +1381,9 @@ class PathWatcher {
             watchers.watchers.delete(callback);
 
             if (isOwnNodeId(callback)) {
-                auditLog("local UNWATCH", { path });
+                auditLog("local UNWATCH VALUE", { path });
             } else {
-                auditLog("non-local UNWATCH", { path, watcher: callback });
+                auditLog("non-local UNWATCH VALUE", { path, watcher: callback });
             }
 
             if (watchers.watchers.size === 0) {
@@ -1781,9 +1781,9 @@ class WriteValidStorage {
     }
     public setWriteValidState(write: WriteState, lockless?: boolean): boolean {
         if (write.isValid) {
-            auditLog(write.reason || "ACCEPTING VALUE", { path: write.path, time: write.time.time });
+            auditLog("ACCEPTING VALUE", { path: write.path, time: write.time.time, reason: write.reason });
         } else {
-            auditLog(write.reason || "REJECTING VALUE", { path: write.path, time: write.time.time });
+            auditLog("REJECTING VALUE", { path: write.path, time: write.time.time, reason: write.reason });
         }
         this.ensureGarbageCollectOldState();
 
@@ -2359,8 +2359,8 @@ export const lockWatchDeduper = new LockWatchDeduper();
 //  can trigger the import of memoryValueAudit for all clients as consistently
 //  as the core.
 setImmediate(() => {
-    logErrors(import("../5-diagnostics/memoryValueAudit").then(x => x.startMemoryAuditLoop()));
-    logErrors(import("../5-diagnostics/diskValueAudit").then(x => x.startDiskAuditLoop()));
+    //logErrors(import("../5-diagnostics/memoryValueAudit").then(x => x.startMemoryAuditLoop()));
+    //logErrors(import("../5-diagnostics/diskValueAudit").then(x => x.startDiskAuditLoop()));
     logErrors(import("../5-diagnostics/synchronousLagTracking").then(x => x.trackSynchronousLag()));
 });
 

package/src/3-path-functions/pathFunctionLoader.ts

@@ -170,7 +170,7 @@ let moduleResolver = async (spec: {
 
             // Remove any previous attempt to sync it
             if (fs.existsSync(repoPath)) {
-                await fs.promises.rmdir(repoPath, { recursive: true });
+                await fs.promises.rm(repoPath, { recursive: true });
             }
             // Clone it
             await executeCommand("git", ["clone", gitURL, repoPath]);
@@ -182,7 +182,7 @@ let moduleResolver = async (spec: {
             // Delete querysub, and replace it with a symlink. Otherwise the synchronization code
             //  will run again, and a lot of setup code will run again, etc, and nothing will work correctly.
             let querysubPath = repoPath + "node_modules/querysub";
-            await fs.promises.rmdir(querysubPath, { recursive: true });
+            await fs.promises.rm(querysubPath, { recursive: true });
 
             let actualQuerysubPath = path.resolve("./node_modules/querysub");
             await fs.promises.symlink(actualQuerysubPath, querysubPath, "junction");

package/src/deployManager/machineApplyMainCode.ts

@@ -600,7 +600,7 @@ const ensureGitSynced = measureWrap(async function ensureGitSynced(config: {
         await setGitRef(config);
     } catch (e: any) {
         console.warn(`Failed to set git ref, trying to delete and clone again (${config.gitFolder}): ${e.stack}`);
-        await fs.promises.rmdir(config.gitFolder, { recursive: true });
+        await fs.promises.rm(config.gitFolder, { recursive: true });
         await runPromise(`git clone ${config.repoUrl} ${config.gitFolder}`);
         await setGitRef(config);
     }

package/src/diagnostics/logs/IndexedLogs/LogViewer3.tsx

@@ -30,13 +30,12 @@ import { readProductionLogsURL, searchTextURL } from "./LogViewerParams";
 import { RenderSearchStats } from "./RenderSearchStats";
 import { LifeCyclesController, LifeCycle, LifeCycleEntry } from "../lifeCycleAnalysis/lifeCycles";
 import { getLifecycleMatchesForDatum } from "../lifeCycleAnalysis/lifeCycleMatching";
-import { lifecycleIdURL } from "../lifeCycleAnalysis/LifeCyclePage";
+import { lifecycleIdURL, additionalSearchURL } from "../lifeCycleAnalysis/LifeCyclePage";
 import { ATag } from "../../../library-components/ATag";
 import { SocketFunction } from "socket-function/SocketFunction";
 import { managementPageURL } from "../../managementPages";
 import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
 import { formatSearchString } from "./LogViewerParams";
-import { additionalSearchURL } from "../lifeCycleAnalysis/lifeCycleSearch";
 
 let excludePendingResults = new URLParam("excludePendingResults", false);
 let limitURL = new URLParam("limit", 100);
@@ -564,7 +563,7 @@ export class LogViewer3 extends qreact.Component {
                                         startTimeParam.getOverride(datum.time - timeInHour),
                                         endTimeParam.getOverride(datum.time + timeInHour),
                                     ]}>
-                                        {match.lifecycle.title}
+                                        View {JSON.stringify(match.lifecycle.title)}
                                     </ATag>
                                 </div>
                             ))}
@@ -576,7 +575,7 @@ export class LogViewer3 extends qreact.Component {
                                 endTimeParam.getOverride(maxTime + timeInHour),
                             ]}>
                                 <Button hue={280} className={css.boldStyle}>
-                                    View All {lifecycleTitle}
+                                    View All
                                 </Button>
                             </ATag>
                         </div>;

package/src/diagnostics/logs/IndexedLogs/bufferSearchFindMatcher.ts

@@ -9,6 +9,7 @@ const SEARCH_OR_CHAR = "|";
 const SEARCH_AND_BYTE = 38;
 const SEARCH_AND_CHAR = "&";
 
+// IMPORTANT! While technically THIS structure can support negation, the index structure above us cannot, as it only stores information at the block level (multiple buffers per block). So... if we supported negation, it couldn't, so it would give us a lot of false positives (cases where negation removes the results). So... never use negation, just turn everything into a positive signal.
 export type MatchStructure = {
     type: "or";
     parts: MatchStructure[];

package/src/diagnostics/logs/errorNotifications2/ErrorNotificationPage.tsx

@@ -12,7 +12,7 @@ import { ErrorWarning } from "./ErrorWarning";
 import { getErrorNotificationsManager } from "./errorWatcher";
 import { createMatchesPattern } from "../IndexedLogs/bufferSearchFindMatcher";
 import { cacheLimited } from "socket-function/src/caching";
-import { managementPageURL } from "../../managementPages";
+import { managementPageURL, showingManagementURL } from "../../managementPages";
 import { searchTextURL, readProductionLogsURL } from "../IndexedLogs/LogViewerParams";
 import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
 import { timeInHour } from "socket-function/src/misc";
@@ -56,6 +56,7 @@ export class LogDatumRenderer extends qreact.Component<{
         let logViewerValues: URLOverride[] | undefined;
         {
             logViewerValues = [
+                showingManagementURL.getOverride(true),
                 managementPageURL.getOverride("LogViewer3"),
                 readProductionLogsURL.getOverride(isPublic()),
                 startTimeParam.getOverride(datum.time - timeInHour),
@@ -382,6 +383,7 @@ class SuppressionItem extends qreact.Component<{
             <div className={css.hbox(12)}>
                 <ATag
                     values={[
+                        showingManagementURL.getOverride(true),
                         managementPageURL.getOverride("LogViewer3"),
                         searchTextURL.getOverride(suppression.pattern),
                         readProductionLogsURL.getOverride(true),

package/src/diagnostics/logs/lifeCycleAnalysis/LifeCycleEntryEditor.tsx

@@ -0,0 +1,358 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { deepCloneJSON } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { t } from "../../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { Button } from "../../../library-components/Button";
+import { InputLabel } from "../../../library-components/InputLabel";
+import { LogDatum } from "../diskLogger";
+import { LifeCycleEntryReadMode } from "./LifeCycleEntryReadMode";
+import { LifeCycle, LifeCycleEntry, LifeCyclesController } from "./lifeCycles";
+
+export class LifeCycleEntryEditor extends qreact.Component<{
+    lifeCycle: LifeCycle;
+    entry: LifeCycleEntry;
+    entryIndex: number;
+    defaultEditMode?: boolean;
+    datum?: LogDatum;
+}> {
+    state = t.state({
+        editMode: t.atomic<boolean>(false),
+    });
+
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+
+    componentDidMount() {
+        this.state.editMode = this.props.defaultEditMode || false;
+    }
+
+    render() {
+        let { lifeCycle, entry, entryIndex } = this.props;
+        let isConfigured = entry.groupByKeys && entry.groupByKeys.length > 0 && entry.groupByKeys.every(k => k.ourKey.trim() !== "");
+        let bgClass = isConfigured && css.hsl(150, 30, 95) || css.hsl(30, 50, 90);
+
+        return <div className={
+            css.pad2(4).bord2(150, 30, 70)
+                .vbox(4)
+                .cursor("auto")
+            + bgClass
+            + " LifeCycleEntryEditor"
+        }>
+            <div className={css.hbox(12)}>
+                <span className={css.boldStyle}>{entry.description || entry.matchPattern}</span>
+                {entry.description && <span className={css.colorhsl(0, 0, 50)}>({entry.matchPattern})</span>}
+                <span className={css.colorhsl(220, 70, 50)}>[{entry.sourceType}]</span>
+                {entry.isStart && <span className={css.colorhsl(120, 80, 30).boldStyle}>START</span>}
+                {entry.isEnd && <span className={css.colorhsl(0, 80, 30).boldStyle}>END</span>}
+                {!isConfigured && !this.state.editMode && <span className={css.colorhsl(30, 80, 40).boldStyle}>(not fully configured)</span>}
+                <Button
+                    hue={150}
+                    onClick={() => {
+                        this.state.editMode = !this.state.editMode;
+                    }}
+                >
+                    {this.state.editMode && "Read Mode" || "Edit Mode"}
+                </Button>
+                <Button
+                    hue={0}
+                    onClick={() => {
+                        if (!confirm("Delete this entry?")) return;
+
+                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                        updatedLifeCycle.entries.splice(entryIndex, 1);
+                        Querysub.onCommitFinished(async () => {
+                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                        });
+                    }}
+                >
+                    Delete
+                </Button>
+            </div>
+
+            {this.state.editMode && (
+                <div className={css.vbox(12)}>
+                    <div className={css.hbox(10)}>
+                        <InputLabel
+                            label="Match Pattern"
+                            value={entry.matchPattern}
+                            onChangeValue={(value) => {
+                                let matchPattern = value.trim();
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].matchPattern = matchPattern;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                            className={css.width(500)}
+                        />
+                        <InputLabel
+                            label="Description"
+                            value={entry.description || ""}
+                            onChangeValue={(value) => {
+                                let description = value.trim() || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].description = description;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                            className={css.width(500)}
+                        />
+                    </div>
+
+                    <div className={css.hbox(12)}>
+                        <div className={css.vbox(4)}>
+                            <span>Source Type</span>
+                            <select
+                                value={entry.sourceType}
+                                onChange={(e) => {
+                                    let sourceType = e.currentTarget.value as "log" | "error" | "info" | "warning";
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].sourceType = sourceType;
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }}
+                                className={css.pad2(4, 2)}
+                            >
+                                <option value="log">log</option>
+                                <option value="info">info</option>
+                                <option value="warning">warning</option>
+                                <option value="error">error</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div className={css.hbox(12)}>
+                        <InputLabel
+                            label="Is Start"
+                            checkbox
+                            checked={entry.isStart}
+                            onChange={(e) => {
+                                let isStart = e.currentTarget.checked || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].isStart = isStart;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                        />
+                        <InputLabel
+                            label="Is End"
+                            checkbox
+                            checked={entry.isEnd}
+                            onChange={(e) => {
+                                let isEnd = e.currentTarget.checked || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].isEnd = isEnd;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                        />
+                    </div>
+
+                    <div className={css.vbox(8)}>
+                        <div className={!isConfigured && css.colorhsl(30, 80, 40).boldStyle || ""}>
+                            Group By Keys{!isConfigured && " (at least one required)" || ""}
+                        </div>
+                        {Array.isArray(entry.groupByKeys) && entry.groupByKeys.map((keyConfig, keyIdx) => {
+                            let keyExistsInAllOtherEntries = lifeCycle.entries.every((e, idx) => {
+                                if (idx === entryIndex) return true;
+                                return e.groupByKeys && e.groupByKeys.some(k => k.ourKey === keyConfig.ourKey);
+                            });
+
+                            return <div key={keyIdx} className={css.hbox(8).pad2(4).bord2(200, 30, 80).hsl(200, 30, 97)}>
+                                <Button
+                                    hue={160}
+                                    disabled={keyExistsInAllOtherEntries}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e, idx) => {
+                                            if (idx === entryIndex) return;
+                                            if (!e.groupByKeys.some(k => k.ourKey === keyConfig.ourKey)) {
+                                                e.groupByKeys.push({ ourKey: keyConfig.ourKey });
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Copy to All
+                                </Button>
+                                <InputLabel
+                                    label="Key"
+                                    value={keyConfig.ourKey}
+                                    onChangeValue={(value) => {
+                                        let ourKey = value.trim();
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys[keyIdx].ourKey = ourKey;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <InputLabel
+                                    label="Different key in start entry (not usually needed)"
+                                    value={keyConfig.startKey || ""}
+                                    onChangeValue={(value) => {
+                                        let startKey = value.trim() || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys[keyIdx].startKey = startKey;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <InputLabel
+                                    label="Aliases (comma-separated)"
+                                    value={keyConfig.aliases && keyConfig.aliases.join(", ") || ""}
+                                    onChangeValue={(value) => {
+                                        let aliases = value.trim() && value.split(",").map(a => a.trim()).filter(a => a) || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e) => {
+                                            let matchingKey = e.groupByKeys.find(k => k.ourKey === keyConfig.ourKey);
+                                            if (matchingKey) {
+                                                matchingKey.aliases = aliases;
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <Button
+                                    hue={0}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys.splice(keyIdx, 1);
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Delete
+                                </Button>
+                            </div>;
+                        })}
+                        <InputLabel
+                            label="Add new key"
+                            onChangeValue={(value) => {
+                                let ourKey = value.trim();
+                                if (ourKey) {
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].groupByKeys.push({ ourKey });
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }
+                            }}
+                            className={css.width(250)}
+                        />
+                    </div>
+
+                    <div className={css.vbox(4)}>
+                        {Object.entries(entry.variables).map(([key, varData]) => {
+                            let keyExistsInAllOtherEntries = lifeCycle.entries.every((e, idx) => {
+                                if (idx === entryIndex) return true;
+                                return key in e.variables;
+                            });
+
+                            return <div key={key} className={css.hbox(8).pad2(4).bord2(0, 0, 80).hsl(0, 0, 97)}>
+                                <Button
+                                    hue={160}
+                                    disabled={keyExistsInAllOtherEntries}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e, idx) => {
+                                            if (idx === entryIndex) return;
+                                            if (!(key in e.variables)) {
+                                                e.variables[key] = {};
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Copy to All
+                                </Button>
+                                <span className={css.minWidth(150).boldStyle}>{key}</span>
+                                <InputLabel
+                                    placeholder="Variable title"
+                                    value={varData.title || ""}
+                                    onChangeValue={(value) => {
+                                        let title = value.trim() || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].variables[key].title = title;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(300)}
+                                />
+                                <InputLabel
+                                    placeholder="Aliases (comma-separated)"
+                                    value={varData.aliases && varData.aliases.join(", ") || ""}
+                                    onChangeValue={(value) => {
+                                        let aliases = value.trim() && value.split(",").map(a => a.trim()).filter(a => a) || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e) => {
+                                            if (key in e.variables) {
+                                                e.variables[key].aliases = aliases;
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(300)}
+                                />
+                                <Button
+                                    hue={0}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        delete updatedLifeCycle.entries[entryIndex].variables[key];
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Delete
+                                </Button>
+                            </div>;
+                        })}
+
+                        <InputLabel
+                            label="Add new variable key"
+                            onChangeValue={(value) => {
+                                let key = value.trim();
+                                if (key) {
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].variables[key] = {};
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }
+                            }}
+                            className={css.width(300)}
+                        />
+                    </div>
+                </div>
+            )}
+
+            {!this.state.editMode && <LifeCycleEntryReadMode
+                lifeCycle={lifeCycle}
+                entry={entry}
+                entryIndex={entryIndex}
+                datum={this.props.datum}
+            />}
+        </div>;
+    }
+}
+