(spark) branch master updated: [SPARK-46914][UI] Shorten app name in the summary table on the History Page

[dongjoon]

This is an automated email from the ASF dual-hosted git repository.

dongjoon pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git


The following commit(s) were added to refs/heads/master by this push:
     new 41a1426e9ee3 [SPARK-46914][UI] Shorten app name in the summary table 
on the History Page
41a1426e9ee3 is described below

commit 41a1426e9ee318a9421fad11776eb6894bb1f04b
Author: Kent Yao <y...@apache.org>
AuthorDate: Mon Jan 29 22:07:19 2024 -0800

    [SPARK-46914][UI] Shorten app name in the summary table on the History Page
    
    ### What changes were proposed in this pull request?
    
    This Pull Request shortens long app names to prevent overflow in the app 
table.
    
    ### Why are the changes needed?
    
    better UX
    
    ### Does this PR introduce _any_ user-facing change?
    
    no
    
    ### How was this patch tested?
    
    new js tests and built and tested locally:
    
![image](https://github.com/apache/spark/assets/8326978/f78bd580-74b1-4fe5-9d8b-f2d49ce85ed9)
    
![image](https://github.com/apache/spark/assets/8326978/10bca509-00e5-4d8f-bf11-324c1080190b)
    
    ### Was this patch authored or co-authored using generative AI tooling?
    
    no
    
    Closes #44944 from yaooqinn/SPARK-46914.
    
    Authored-by: Kent Yao <y...@apache.org>
    Signed-off-by: Dongjoon Hyun <dh...@apple.com>
---
 .../resources/org/apache/spark/ui/static/historypage.js   | 12 ++++++++----
 .../main/resources/org/apache/spark/ui/static/utils.js    | 15 ++++++++++++++-
 ui-test/tests/utils.test.js                               |  7 +++++++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/historypage.js 
b/core/src/main/resources/org/apache/spark/ui/static/historypage.js
index 85cd5a554750..8961140a4019 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/historypage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/historypage.js
@@ -17,7 +17,7 @@
 
 /* global $, Mustache, jQuery, uiRoot */
 
-import {formatDuration, formatTimeMillis} from "./utils.js";
+import {formatDuration, formatTimeMillis, stringAbbreviate} from "./utils.js";
 
 export {setAppLimit};
 
@@ -186,9 +186,13 @@ $(document).ready(function() {
             name: 'appId',
             type: "appid-numeric",
             data: 'id',
-            render:  (id, type, row) => `<span title="${id}"><a 
href="${row.attemptUrl}">${id}</a></span>`
+            render: (id, type, row) => `<span title="${id}"><a 
href="${row.attemptUrl}">${id}</a></span>`
+          },
+          {
+            name: 'appName',
+            data: 'name',
+            render: (name) => stringAbbreviate(name, 60)
           },
-          {name: 'appName', data: 'name' },
           {
             name: attemptIdColumnName,
             data: 'attemptId',
@@ -200,7 +204,7 @@ $(document).ready(function() {
             name: durationColumnName,
             type: "title-numeric",
             data: 'duration',
-            render:  (id, type, row) => `<span 
title="${row.durationMillisec}">${row.duration}</span>`
+            render: (id, type, row) => `<span 
title="${row.durationMillisec}">${row.duration}</span>`
           },
           {name: 'user', data: 'sparkUser' },
           {name: 'lastUpdated', data: 'lastUpdated' },
diff --git a/core/src/main/resources/org/apache/spark/ui/static/utils.js 
b/core/src/main/resources/org/apache/spark/ui/static/utils.js
index 960640791fe5..2d4123bc75ab 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/utils.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/utils.js
@@ -20,7 +20,7 @@ export {
   errorMessageCell, errorSummary,
   formatBytes, formatDate, formatDuration, formatLogsCells, formatTimeMillis,
   getBaseURI, getStandAloneAppId, getTimeZone,
-  setDataTableDefaults
+  setDataTableDefaults, stringAbbreviate
 };
 
 /* global $, uiRoot */
@@ -272,3 +272,16 @@ function errorMessageCell(errorMessage) {
   const details = detailsUINode(isMultiline, errorMessage);
   return summary + details;
 }
+
+function stringAbbreviate(content, limit) {
+  if (content && content.length > limit) {
+    const summary = content.substring(0, limit) + '...';
+    // TODO: Reused stacktrace-details* style for convenience, but it's not 
really a stacktrace
+    // Consider creating a new style for this case if stacktrace-details is 
not appropriate in
+    // the future.
+    const details = detailsUINode(true, content);
+    return summary + details;
+  } else {
+    return content;
+  }
+}
diff --git a/ui-test/tests/utils.test.js b/ui-test/tests/utils.test.js
index ad3e87b76641..a6815577bd82 100644
--- a/ui-test/tests/utils.test.js
+++ b/ui-test/tests/utils.test.js
@@ -67,3 +67,10 @@ test('errorSummary', function () {
   const e2 = "java.lang.RuntimeException: random text";
   
expect(utils.errorSummary(e2).toString()).toBe('java.lang.RuntimeException,true');
 });
+
+test('stringAbbreviate', function () {
+  expect(utils.stringAbbreviate(null, 10)).toBe(null);
+  expect(utils.stringAbbreviate('1234567890', 10)).toBe('1234567890');
+  expect(utils.stringAbbreviate('12345678901', 10)).toContain('1234567890...');
+  expect(utils.stringAbbreviate('12345678901', 
10)).toContain('<pre>12345678901</pre>')
+});


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@spark.apache.org
For additional commands, e-mail: commits-h...@spark.apache.org