#7535 yet further spark UI polish (#7565)

* #7535 disabling sparkUI form on waiting for connection, hidding connect button after success * #7535 fix class vanishing on start button * #7535 align start button properly * #7535 fix tooltips error when there is no connect button, fix stop button possitioning
twosigma · Jun 21, 2018 · 34d39e0 · 34d39e0
1 parent 1fd1a8c
commit 34d39e0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
@@ -92,10 +92,23 @@ export class SparkUIView extends widgets.VBoxView {
   }
 
   private setupTooltips(): void {
-    this.el.querySelector('.bx-spark-connect').setAttribute('title', "Start a session with a cluster (or a local instance)");
-    this.el.querySelector('.bx-spark-profile select').setAttribute('title', "Set all properties from a named profile");
-    this.el.querySelector('.bx-spark-executor-cores input').setAttribute('title', "The number of cores to use on each executor");
-    this.el.querySelector('.bx-spark-executor-memory input').setAttribute('title', "Amount of memory to use per executor process, in MiB unless otherwise specified. (e.g. 2g, 8g).");
+    const startButton = this.el.querySelector('.bx-spark-connect');
+    const profileSelect = this.el.querySelector('.bx-spark-profile select');
+    const executorCoresInput = this.el.querySelector('.bx-spark-executor-cores input');
+    const executorMemmoryInput = this.el.querySelector('.bx-spark-executor-memory input');
+
+    if (startButton) {
+      startButton.setAttribute('title', "Start a session with a cluster (or a local instance)");
+    }
+    if (profileSelect) {
+      profileSelect.setAttribute('title', "Set all properties from a named profile");
+    }
+    if (executorCoresInput) {
+      executorCoresInput.setAttribute('title', "The number of cores to use on each executor");
+    }
+    if (executorMemmoryInput) {
+      executorMemmoryInput.setAttribute('title', "Amount of memory to use per executor process, in MiB unless otherwise specified. (e.g. 2g, 8g).");
+    }
   }
 
   private handleFormState() {
@@ -246,6 +259,12 @@ 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 {
+    this.sparkStats.node.style.marginRight = `${290 - (this.sparkStats.node.offsetWidth + this.connectionStatusElement.offsetWidth)}px`;
   }
 
   private connectToApi() {

diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
@@ -149,8 +149,8 @@
 }
 
 .bx-status-panel {
+  padding: 2px 0;
   .bx-button {
-    margin-left: 20px;
     height: 24px;
     padding: 0 6px;
   }
@@ -198,6 +198,10 @@
     text-align: right;
   }
 
+  .bx-spark-connect {
+    margin-left: 306px;
+  }
+
   .bx-spark-connect-error {
     margin-left: 20px;
   }

diff --git a/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUI.java b/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUI.java
@@ -111,16 +111,20 @@ private void initSparkContext(Message parentMessage) {
 
   private void configureSparkContext(Message parentMessage, KernelFunctionality kernel) {
     try {
+      this.sparkUIForm.setAllToDisabled();
       TryResult configure = sparkEngine.configure(kernel, this, parentMessage);
       if (configure.isError()) {
         this.sparkUIForm.sendError(StacktraceHtmlPrinter.printRedBold(ERROR_CREATING_SPARK_SESSION));
+        this.sparkUIForm.setAllToEnabled();
       } else {
         singleSparkSession.active();
         sparkUIForm.saveDefaults();
+        sparkUIForm.getConnectButton().setDomClasses(asList("hidden"));
         sparkUiDefaults.saveProfileName(sparkUIForm.getProfileName());
         applicationStart();
       }
     } catch (Exception e) {
+      this.sparkUIForm.setAllToEnabled();
       this.sparkUIForm.sendError(StacktraceHtmlPrinter.printRedBold(e.getMessage()));
     }
   }
@@ -132,7 +136,6 @@ private SparkSession getSparkSession() {
   private void applicationStart() {
     this.statusPanel = new SparkUIStatus(message -> getSparkSession().sparkContext().stop());
     this.sparkUIForm.setDomClasses(new ArrayList<>(asList("bx-disabled")));
-    this.sparkUIForm.setAllToDisabled();
     add(0, this.statusPanel);
     sendUpdate(SPARK_APP_ID, sparkEngine.getSparkAppId());
     sendUpdate("sparkUiWebUrl", sparkEngine.getSparkUiWebUrl());

diff --git a/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIForm.java b/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIForm.java
@@ -316,11 +316,20 @@ public String getProfileName() {
   public void setAllToDisabled() {
     this.profileManagement.getChildren().stream().map(x -> (ValueWidget) x).forEach(x -> x.setDisabled(true));
     this.advancedOption.setDisabledToAll();
+    this.connectButton.setDisabled(true);
+    this.masterURL.setDisabled(true);
+    this.executorMemory.setDisabled(true);
+    this.executorCores.setDisabled(true);
   }
 
   public void setAllToEnabled() {
     this.profileManagement.getChildren().stream().map(x -> (ValueWidget) x).forEach(x -> x.setDisabled(false));
     this.advancedOption.setEnabledToAll();
+    this.connectButton.setDisabled(false);
+    this.connectButton.setDomClasses(new ArrayList<>(asList("bx-spark-connect")));
+    this.masterURL.setDisabled(false);
+    this.executorMemory.setDisabled(false);
+    this.executorCores.setDisabled(false);
     refreshElementsAvailability();
   }