[SPARK-46904][UI] Fix display issue of History UI summary

### What changes were proposed in this pull request? This PR segments the content definition of the History Page into `summary/table/links` to make it much more elegant. The previous giant variable seems to be a perfect place for bugs to lurk. The problem here is a kinda upstream issue that rendered one single-tagged `<script .../>` wrongly to an unclosed paired tag `<script>,` which missed a close tag. ### Why are the changes needed? bugfix ### Does this PR introduce _any_ user-facing change? no ### How was this patch tested? locally tested ![image](https://github.com/apache/spark/assets/8326978/b52c0e03-3890-4659-b457-0848aa45a6be) ### Was this patch authored or co-authored using generative AI tooling? no Closes apache#44934 from yaooqinn/SPARK-46904. Lead-authored-by: Kent Yao <yao@apache.org> Co-authored-by: Dongjoon Hyun <dongjoon@apache.org> Signed-off-by: Dongjoon Hyun <dhyun@apple.com>
dtenedor · Jan 29, 2024 · c468c3d · c468c3d
1 parent e211dbd
commit c468c3d
Showing 1 changed file with 64 additions and 57 deletions.
diff --git a/core/src/main/scala/org/apache/spark/deploy/history/HistoryPage.scala b/core/src/main/scala/org/apache/spark/deploy/history/HistoryPage.scala
@@ -35,69 +35,76 @@ private[history] class HistoryPage(parent: HistoryServer) extends WebUIPage("")
     val eventLogsUnderProcessCount = parent.getEventLogsUnderProcess()
     val lastUpdatedTime = parent.getLastUpdatedTime()
     val providerConfig = parent.getProviderConfig()
-    val content =
-      <script type="module"
-              src={UIUtils.prependBaseUri(request, "/static/historypage-common.js")} /> ++
-      <script type="module" src={UIUtils.prependBaseUri(request, "/static/utils.js")} />
-      <div>
-          <div class="container-fluid">
-            <ul class="list-unstyled">
-              {providerConfig.map { case (k, v) => <li><strong>{k}:</strong> {v}</li> }}
-            </ul>
-            {
-            if (eventLogsUnderProcessCount > 0) {
-              <p>There are {eventLogsUnderProcessCount} event log(s) currently being
-                processed which may result in additional applications getting listed on this page.
-                Refresh the page to view updates. </p>
-            }
-            }
 
-            {
-            if (lastUpdatedTime > 0) {
-              <p>Last updated: <span id="last-updated">{lastUpdatedTime}</span></p>
-            }
-            }
+    val summary =
+      <div class="container-fluid">
+        <ul class="list-unstyled">
+          {providerConfig.map { case (k, v) => <li><strong>{k}:</strong> {v}</li> }}
+        </ul>
+        {
+          if (eventLogsUnderProcessCount > 0) {
+          <p>There are {eventLogsUnderProcessCount} event log(s) currently being
+            processed which may result in additional applications getting listed on this page.
+            Refresh the page to view updates. </p>
+          } else Seq.empty
 
-            {
-            <p>Client local time zone: <span id="time-zone"></span></p>
-            }
+        }
+        {
+          if (lastUpdatedTime > 0) {
+            <p>Last updated: <span id="last-updated">{lastUpdatedTime}</span></p>
+          } else Seq.empty
+        }
+        {
+          <p>Client local time zone: <span id="time-zone"></span></p>
+        }
+      </div>
 
-            {
-            if (displayApplications) {
-              val js =
-                s"""
-                   |${formatImportJavaScript(request, "/static/historypage.js", "setAppLimit")}
-                   |
-                   |setAppLimit(${parent.maxApplications});
-                   |""".stripMargin
-              <script src={UIUtils.prependBaseUri(
-                request, "/static/dataTables.rowsGroup.js")}></script> ++
-                <div id="history-summary"></div> ++
-                <script type="module"
-                        src={UIUtils.prependBaseUri(request, "/static/historypage.js")}></script> ++
-                <script type="module">{Unparsed(js)}</script>
-            } else if (requestedIncomplete) {
-              <h4>No incomplete applications found!</h4>
-            } else if (eventLogsUnderProcessCount > 0) {
-              <h4>No completed applications found!</h4>
+    val appList =
+      <div class="container-fluid">
+        {
+          val js =
+            s"""
+               |${formatImportJavaScript(request, "/static/historypage.js", "setAppLimit")}
+               |
+               |setAppLimit(${parent.maxApplications});
+               |""".stripMargin
+
+          if (displayApplications) {
+            <script src={UIUtils.prependBaseUri(
+              request, "/static/dataTables.rowsGroup.js")}></script> ++
+            <script type="module" src={UIUtils.prependBaseUri(
+              request, "/static/historypage.js")} ></script> ++
+            <script type="module">{Unparsed(js)}</script> ++ <div id="history-summary"></div>
+          } else if (requestedIncomplete) {
+            <h4>No incomplete applications found!</h4>
+          } else if (eventLogsUnderProcessCount > 0) {
+            <h4>No completed applications found!</h4>
+          } else {
+            <h4>No completed applications found!</h4> ++ parent.emptyListingHtml()
+          }
+        }
+      </div>
+
+    val pageLink =
+      <div class="container-fluid">
+        <a href={makePageLink(request, !requestedIncomplete)}>
+          {
+            if (requestedIncomplete) {
+              "Back to completed applications"
             } else {
-              <h4>No completed applications found!</h4> ++ parent.emptyListingHtml()
+              "Show incomplete applications"
             }
-            }
-
-            <a href={makePageLink(request, !requestedIncomplete)}>
-              {
-              if (requestedIncomplete) {
-                "Back to completed applications"
-              } else {
-                "Show incomplete applications"
-              }
-              }
-            </a>
-            <p><a href={UIUtils.prependBaseUri(request, "/logPage/?self&logType=out")}>
-              Show server log</a></p>
-          </div>
+          }
+        </a>
+        <p><a href={UIUtils.prependBaseUri(request, "/logPage/?self&logType=out")}>
+          Show server log</a></p>
       </div>
+    val content =
+      <script type="module" src={UIUtils.prependBaseUri(
+        request, "/static/historypage-common.js")}></script> ++
+      <script type="module" src={UIUtils.prependBaseUri(
+        request, "/static/utils.js")}></script> ++
+      summary ++ appList ++ pageLink
     UIUtils.basicSparkPage(request, content, "History Server", true)
   }