Merge branch 'main' into release

lightningrodlabs · Oct 8, 2024 · 7a84d13 · 7a84d13
2 parents cc43fe1 + 358d52b
commit 7a84d13
Show file tree

Hide file tree

Showing 15 changed files with 838 additions and 162 deletions.
diff --git a/cli/package.json b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theweave/cli",
-  "version": "0.13.0-beta.7",
+  "version": "0.13.0-gamma.1",
   "description": "CLI to run Tools for the Weave in development mode",
   "license": "CAL-1.0",
   "repository": {
@@ -20,7 +20,7 @@
     "@holochain/client": "0.18.0-dev.13",
     "@holochain-open-dev/utils": "0.400.0-dev.4",
     "@theweave/api": "0.1.0",
-    "@lightningrodlabs/we-rust-utils": "0.400.0-dev.11",
+    "@lightningrodlabs/we-rust-utils": "0.400.0-dev.12",
     "@matthme/electron-updater": "6.3.0-alpha.1",
     "@msgpack/msgpack": "^2.8.0",
     "adm-zip": "0.5.14",

diff --git a/libs/api/package.json b/libs/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theweave/api",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "license": "MIT",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "org.lightningrodlabs.moss-0.13",
-  "version": "0.13.0-gamma.0",
+  "version": "0.13.0-gamma.1",
   "private": true,
   "description": "Moss (0.13)",
   "main": "./out/main/index.js",

diff --git a/src/renderer/src/elements/debugging-panel/app-debugging-details.ts b/src/renderer/src/elements/debugging-panel/app-debugging-details.ts
@@ -0,0 +1,78 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import { CellId, InstalledAppId } from '@holochain/client';
+
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+
+import '../../groups/elements/group-context.js';
+import '../../applets/elements/applet-logo.js';
+import '../dialogs/create-group-dialog.js';
+import '../reusable/groups-for-applet.js';
+import './cell-details.js';
+
+import { weStyles } from '../../shared-styles.js';
+import { consume } from '@lit/context';
+import { mossStoreContext } from '../../context.js';
+import { MossStore } from '../../moss-store.js';
+import { getCellId, getCellName } from '../../utils.js';
+
+@localized()
+@customElement('app-debugging-details')
+export class AppDebuggingDetails extends LitElement {
+  @consume({ context: mossStoreContext })
+  _mossStore!: MossStore;
+
+  @property()
+  appId!: InstalledAppId;
+
+  @state()
+  cellsAndIds: Record<string, CellId> = {};
+
+  async firstUpdated() {
+    const appClient = await this._mossStore.getAppClient(this.appId);
+    const appInfo = await appClient.appInfo();
+    // if (!appInfo) throw new Error(`AppInfo of app '${appClient}' undefined.`);
+    const cellInfos = Object.values(appInfo!.cell_info).flat();
+    const cellsAndIds: Record<string, CellId> = {};
+
+    cellInfos.forEach((cellInfo) => {
+      const cellName = getCellName(cellInfo);
+      const cellId = getCellId(cellInfo);
+      if (cellName && cellId) {
+        cellsAndIds[cellName] = cellId;
+      }
+    });
+    this.cellsAndIds = cellsAndIds;
+  }
+
+  render() {
+    return html` <div class="column">
+      ${Object.entries(this.cellsAndIds)
+        .sort(([name_a, _a], [name_b, _b]) => name_a.localeCompare(name_b))
+        .map(
+          ([cellName, cellId]) => html`
+          <sl-card style="width: 570px; position: relative; margin: 5px 0;">
+            <div
+              style="font-weight: bold; position: absolute; top: 6px; right: 10px;"
+              title="${msg('cell name')}"
+            >
+              ${cellName}
+            </div>
+            <cell-details class="flex flex-1" .appId=${this.appId} .cellId=${cellId}></cell-details>
+          </sl-card>
+        </div>
+      `,
+        )}
+    </div>`;
+  }
+
+  static styles = [
+    weStyles,
+    css`
+      :host {
+        display: flex;
+      }
+    `,
+  ];
+}
diff --git a/src/renderer/src/elements/debugging-panel/cell-details.ts b/src/renderer/src/elements/debugging-panel/cell-details.ts
@@ -0,0 +1,213 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { localized } from '@lit/localize';
+import { CellId, DumpFullStateRequest, InstalledAppId, NetworkInfo } from '@holochain/client';
+
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+
+import { weStyles } from '../../shared-styles.js';
+import { DumpData } from '../../types.js';
+import { consume } from '@lit/context';
+import { mossStoreContext } from '../../context.js';
+import { MossStore } from '../../moss-store.js';
+
+import './dht-op-detail.js';
+import { notify } from '@holochain-open-dev/elements';
+
+@localized()
+@customElement('cell-details')
+export class CellDetails extends LitElement {
+  @consume({ context: mossStoreContext })
+  _mossStore!: MossStore;
+
+  @property()
+  appId!: InstalledAppId;
+
+  @property()
+  cellId!: CellId;
+
+  @state()
+  netInfo: NetworkInfo | undefined;
+
+  @state()
+  dumpData: DumpData | undefined;
+
+  @state()
+  showFullDetail = false;
+
+  @state()
+  showValidationLimbo = false;
+
+  @state()
+  showIntegrationLimbo = false;
+
+  async networkInfo() {
+    const appClient = await this._mossStore.getAppClient(this.appId);
+    const networkInfo = await appClient.networkInfo({
+      dnas: [this.cellId[0]],
+      last_time_queried: (Date.now() - 60000) * 1000, // get bytes from last 60 seconds
+    });
+
+    this.netInfo = networkInfo[0];
+    console.log('networkInfo: ', networkInfo);
+  }
+
+  async dumpState() {
+    let currentDump = this.dumpData;
+    const req: DumpFullStateRequest = {
+      cell_id: this.cellId,
+      dht_ops_cursor: currentDump ? currentDump.dump.integration_dump.dht_ops_cursor : 0,
+    };
+    const resp = await this._mossStore.adminWebsocket.dumpFullState(req);
+    let newOpsCount = 0;
+    if (!currentDump) {
+      newOpsCount = resp.integration_dump.dht_ops_cursor;
+      currentDump = {
+        dump: resp,
+        newOpsCount,
+      };
+    } else {
+      newOpsCount =
+        resp.integration_dump.dht_ops_cursor - currentDump.dump.integration_dump.dht_ops_cursor;
+      if (newOpsCount > 0) {
+        const currentIntegrated = currentDump.dump.integration_dump.integrated;
+        currentIntegrated.concat([...currentDump.dump.integration_dump.integrated]);
+      }
+      currentDump.dump.peer_dump = resp.peer_dump;
+      currentDump.dump.source_chain_dump = resp.source_chain_dump;
+      currentDump.newOpsCount = newOpsCount;
+    }
+    this.dumpData = currentDump;
+    console.log('dump data: ', this.dumpData);
+  }
+
+  renderDumpData() {
+    return html`
+      <div class="column">
+        <div>
+          Validation Limbo: ${this.dumpData?.dump.integration_dump.validation_limbo.length}
+          <button
+            @click=${() => {
+              this.showValidationLimbo = !this.showValidationLimbo;
+            }}
+          >
+            ${this.showValidationLimbo ? 'Hide' : 'Show'} DhtOps
+          </button>
+        </div>
+        ${this.showValidationLimbo && this.dumpData
+          ? html` <div class="column">
+              ${this.dumpData.dump.integration_dump.validation_limbo.map(
+                (dhtOp) =>
+                  html`<dht-op-detail
+                    @click=${() => {
+                      console.log(dhtOp);
+                      notify('DhtOp logged to console.');
+                    }}
+                    style="border: 1px solid black; border-radius: 5px; padding: 3px; cursor: pointer;"
+                    .dhtOp=${dhtOp}
+                  ></dht-op-detail>`,
+              )}
+            </div>`
+          : html``}
+        <div>
+          Integration Limbo: ${this.dumpData?.dump.integration_dump.integration_limbo.length}
+          <button
+            @click=${() => {
+              this.showIntegrationLimbo = !this.showIntegrationLimbo;
+            }}
+          >
+            ${this.showIntegrationLimbo ? 'Hide' : 'Show'} DhtOps
+          </button>
+        </div>
+        ${this.showIntegrationLimbo && this.dumpData
+          ? html` <div class="column">
+              ${this.dumpData.dump.integration_dump.integration_limbo.map(
+                (dhtOp) =>
+                  html`<dht-op-detail
+                    @click=${() => {
+                      console.log(dhtOp);
+                      notify('DhtOp logged to console.');
+                    }}
+                    style="border: 1px solid black; border-radius: 5px; padding: 3px; cursor: pointer;"
+                    .dhtOp=${dhtOp}
+                  ></dht-op-detail>`,
+              )}
+            </div>`
+          : html``}
+        <div>Integrated: ${this.dumpData?.dump.integration_dump.integrated.length}</div>
+        <button
+          style="margin-top: 5px;"
+          @click=${() => {
+            this.showFullDetail = !this.showFullDetail;
+          }}
+        >
+          ${this.showFullDetail ? 'Hide Full Dump' : 'Show Full Dump'}
+        </button>
+        ${this.showFullDetail ? html`<state-dump .dump=${this.dumpData}></state-dump>` : html``}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="debug-data">
+        <div style="padding: 5px;">
+          <div class="column" style="margin-bottom: 10px;">
+            <div class="row" style="align-items: center; flex: 1;">
+              <span class="debug-title">Network Info</span>
+              <span style="display: flex; flex: 1;"></span>
+              <sl-button
+                size="small"
+                style="margin-left:5px;"
+                @click=${async () => {
+                  this.networkInfo();
+                }}
+                >Query</sl-button
+              >
+            </div>
+            ${this.netInfo ? html`<net-info .networkInfo=${this.netInfo}></net-info>` : html``}
+          </div>
+          <div class="column">
+            <div style="display: flex; align-items: center; flex: 1;">
+              <span class="debug-title">State Dump</span>
+              <span style="display: flex; flex: 1;"></span>
+              <sl-button
+                size="small"
+                style="margin-left:5px;"
+                @click=${async () => {
+                  await this.dumpState();
+                }}
+                >Query</sl-button
+              >
+            </div>
+            ${this.dumpData ? this.renderDumpData() : html``}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles = [
+    weStyles,
+    css`
+      :host {
+        display: flex;
+      }
+
+      .debug-data {
+        margin-top: 10px;
+        width: 100%;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        background-color: #fff;
+        border-radius: 5px;
+      }
+
+      .debug-title {
+        font-weight: bold;
+        font-size: 105%;
+      }
+    `,
+  ];
+}