#7615 spark status minimum width

twosigma · Jul 2, 2018 · 6e20271 · 6e20271
1 parent 880bd00
commit 6e20271
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/js/lab/src/theme/static/base.css b/js/lab/src/theme/static/base.css
@@ -94,9 +94,13 @@
 }
 
 .hidden {
-  display: none !important;;
+  display: none !important;
 }
 
 .bx-stats .bx-label, .bx-spark-stageProgressLabels .bx-label {
   line-height: 1.3;
 }
+
+.bx-stats .label {
+  box-sizing: border-box;
+}
diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
@@ -261,8 +261,6 @@ export class SparkUIView extends widgets.VBoxView {
     this.connectionLabelDead = this.sparkStats.node.querySelector('.dead');
 
     this.connectionStatusElement.insertAdjacentElement('afterend', this.sparkStats.node);
-
-    this.updateSparkStatsStyles();
   }
 
   private updateSparkStatsStyles(): void {
@@ -351,6 +349,29 @@ export class SparkUIView extends widgets.VBoxView {
     this.connectionLabelMemory.innerText = `${bkUtils.formatBytes(storageMemory)}`;
     this.connectionLabelDead.innerText = `${deadExecutors}`;
     this.toolbarSparkConnectionStatus.propagateToolbarWidget();
+
+    this.updateLabelWidths();
+  }
+
+  private updateLabelWidths() {
+    const container = document.createElement('span');
+
+    container.style.visibility = 'hidden';
+    container.style.position = 'absolute';
+    container.innerText = '999';
+    container.classList.add('label');
+
+    this.sparkStats.node.appendChild(container);
+    const maxWidth1 = `${container.offsetWidth}px`;
+    container.innerText = '999 GB';
+    const maxWidth2 = `${container.offsetWidth}px`;
+    this.sparkStats.node.removeChild(container);
+
+    this.connectionLabelActive.style.width = maxWidth1;
+    this.connectionLabelDead.style.width = maxWidth1;
+    this.connectionLabelMemory.style.width = maxWidth2;
+
+    this.updateSparkStatsStyles();
   }
 
   private addSparkMetricsWidget() {