sketch: Propagate host vs. runtime OS/WorkingDir/Hostname
If you have a bunch of sketch sessions, you need to know where they were
launched. The container hostnames (some random thing) and working dirs (always /app)
aren't very helpful, so we want to keep around both. I've updated the UI
to show them as well.
This commit chooses "Host" and "Runtime" as the names of the "Outside"
and "Inside" sketch. I'm open to suggestions for better names.
Co-Authored-By: sketch, but it did a so-so job
diff --git a/loop/webui/src/web-components/sketch-container-status.ts b/loop/webui/src/web-components/sketch-container-status.ts
index e4c5802..c6aa811 100644
--- a/loop/webui/src/web-components/sketch-container-status.ts
+++ b/loop/webui/src/web-components/sketch-container-status.ts
@@ -54,6 +54,11 @@
font-weight: 600;
}
+ [title] {
+ cursor: help;
+ text-decoration: underline dotted;
+ }
+
.cost {
color: #2e7d32;
}
@@ -69,6 +74,62 @@
super();
}
+ formatHostname() {
+ const hostHostname = this.state?.host_hostname;
+ const runtimeHostname = this.state?.runtime_hostname;
+
+ if (!hostHostname || !runtimeHostname) {
+ return this.state?.hostname;
+ }
+
+ if (hostHostname === runtimeHostname) {
+ return hostHostname;
+ }
+
+ return `${hostHostname}:${runtimeHostname}`;
+ }
+
+ formatWorkingDir() {
+ const hostWorkingDir = this.state?.host_working_dir;
+ const runtimeWorkingDir = this.state?.runtime_working_dir;
+
+ if (!hostWorkingDir || !runtimeWorkingDir) {
+ return this.state?.working_dir;
+ }
+
+ if (hostWorkingDir === runtimeWorkingDir) {
+ return hostWorkingDir;
+ }
+
+ return `${hostWorkingDir}:${runtimeWorkingDir}`;
+ }
+
+ getHostnameTooltip() {
+ const hostHostname = this.state?.host_hostname;
+ const runtimeHostname = this.state?.runtime_hostname;
+
+ if (!hostHostname || !runtimeHostname || hostHostname === runtimeHostname) {
+ return "";
+ }
+
+ return `Host: ${hostHostname}, Runtime: ${runtimeHostname}`;
+ }
+
+ getWorkingDirTooltip() {
+ const hostWorkingDir = this.state?.host_working_dir;
+ const runtimeWorkingDir = this.state?.runtime_working_dir;
+
+ if (
+ !hostWorkingDir ||
+ !runtimeWorkingDir ||
+ hostWorkingDir === runtimeWorkingDir
+ ) {
+ return "";
+ }
+
+ return `Host: ${hostWorkingDir}, Runtime: ${runtimeWorkingDir}`;
+ }
+
// See https://lit.dev/docs/components/lifecycle/
connectedCallback() {
super.connectedCallback();
@@ -91,13 +152,33 @@
<a href="download">Download</a>
</div>
<div class="info-item">
- <span id="hostname" class="info-value">${this.state?.hostname}</span>
+ <span
+ id="hostname"
+ class="info-value"
+ title="${this.getHostnameTooltip()}"
+ >
+ ${this.formatHostname()}
+ </span>
</div>
<div class="info-item">
- <span id="workingDir" class="info-value"
- >${this.state?.working_dir}</span
+ <span
+ id="workingDir"
+ class="info-value"
+ title="${this.getWorkingDirTooltip()}"
>
+ ${this.formatWorkingDir()}
+ </span>
</div>
+ ${this.state?.git_origin
+ ? html`
+ <div class="info-item">
+ <span class="info-label">Origin:</span>
+ <span id="gitOrigin" class="info-value"
+ >${this.state?.git_origin}</span
+ >
+ </div>
+ `
+ : ""}
<div class="info-item">
<span class="info-label">Commit:</span>
<span id="initialCommit" class="info-value"