AM Web: Correct the tips in tony client and add more infos in ui (#669)

* AM Web: Correct the tips in tony client * AM Web: Add more info in page
tony-framework · May 25, 2022 · d937f69 · d937f69
1 parent 05d0d6d
commit d937f69
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/tony-core/src/main/java/com/linkedin/tony/TonyClient.java b/tony-core/src/main/java/com/linkedin/tony/TonyClient.java
@@ -393,7 +393,7 @@ private void addConfToResources(Configuration conf, String confAddress, String c
   }
 
   private void logTrackingAndRMUrls(ApplicationReport report) {
-    LOG.info("URL to track running application (will proxy to TensorBoard once it has started): "
+    LOG.info("URL to track running application (TonY web dashboard): "
              + report.getTrackingUrl());
     LOG.info("ResourceManager web address for application: "
         + Utils.buildRMUrl(yarnConf, report.getApplicationId().toString()));

diff --git a/tony-core/src/main/java/com/linkedin/tony/dashboard/DashboardHttpServer.java b/tony-core/src/main/java/com/linkedin/tony/dashboard/DashboardHttpServer.java
@@ -67,6 +67,8 @@ public class DashboardHttpServer implements AutoCloseable {
 
     private Template template;
 
+    private long startTimeMs = System.currentTimeMillis();
+
     private DashboardHttpServer(
             @Nonnull TonySession tonySession, @Nonnull String amLogUrl,
             @Nonnull String runtimeType, @Nonnull String amHostName,
@@ -175,6 +177,8 @@ private String getDashboardContent() {
             dataMap.put("runtimeType", runtimeType);
             dataMap.put("appId", StringUtils.defaultString(appId, ""));
             dataMap.put("amHostPort", String.format("http://%s:%s", amHostName, serverPort));
+            dataMap.put("startTime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(startTimeMs));
+            dataMap.put("duration", getDurationFormat());
 
             int total = 0;
             int registered = 0;
@@ -217,12 +221,37 @@ private String getDashboardContent() {
             StringWriter writer = new StringWriter();
             template.process(dataMap, writer, ObjectWrapper.BEANS_WRAPPER);
             return writer.toString();
+        } catch (RuntimeException e) {
+            LOG.error("Errors on returning html content due to runtime exception.", e);
         } catch (Exception e) {
             LOG.error("Errors on returning html content.", e);
         }
         return "error";
     }
 
+    private String getDurationFormat() {
+        long diff = System.currentTimeMillis() - startTimeMs;
+        long day = diff / (24 * 60 * 60 * 1000);
+        long hour = (diff / (60 * 60 * 1000) - day * 24);
+        long min = ((diff / (60 * 1000)) - day * 24 * 60 - hour * 60);
+        long sec = (diff / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60);
+
+        String durationFormat = "";
+        if (day != 0) {
+            durationFormat += day + "D ";
+        }
+        if (hour != 0) {
+            durationFormat += hour + "H ";
+        }
+        if (min != 0) {
+            durationFormat += min + "m ";
+        }
+        if (sec != 0) {
+            durationFormat += sec + "s";
+        }
+        return durationFormat;
+    }
+
     /**
      *  Just for test case.
      */

diff --git a/tony-core/src/main/resources/dashboard/template.html b/tony-core/src/main/resources/dashboard/template.html
@@ -28,7 +28,7 @@
 
 <main class="flex-shrink-0" style="margin-top: 80px;">
     <div class="container">
-        <table class="table">
+        <table class="table table-striped">
             <tbody>
             <tr>
                 <th scope="row">Application ID</th>
@@ -44,27 +44,35 @@
             </tr>
             <tr>
                 <th scope="row">Runtime Type</th>
-                <td colspan="2">${runtimeType}</td>
+                <td>${runtimeType}</td>
             </tr>
             <tr>
                 <th scope="row">Registered Tasks</th>
-                <td colspan="2"><a style="color: red">${registeredNumber}</a>/${taskNumber}</td>
+                <td><a style="color: red">${registeredNumber}</a>/${taskNumber}</td>
+            </tr>
+            <tr>
+                <th scope="row">Start Time</th>
+                <td colspan="2">${startTime}</td>
+            </tr>
+            <tr>
+                <th scope="row">Duration</th>
+                <td colspan="2">${duration}</td>
             </tr>
             </tbody>
         </table>
     </div>
 
-    <div class="container" style="margin-top: 40px;">
+    <div class="container" style="margin-top: 25px;">
         <h2>Executors</h2>
-        <table class="table table-bordered">
-            <thead>
-            <tr>
-                <th scope="col">Task Executor</th>
-                <th scope="col">State</th>
-                <th scope="col">Start Time</th>
-                <th scope="col">End Time</th>
-                <th scope="col">Log URL</th>
-            </tr>
+        <table class="table table-bordered table-hover" style="margin-top: 10px;">
+            <thead class="table-secondary">
+                <tr>
+                    <th scope="col">Task Executor</th>
+                    <th scope="col">State</th>
+                    <th scope="col">Start Time</th>
+                    <th scope="col">End Time</th>
+                    <th scope="col">Log URL</th>
+                </tr>
             </thead>
             <tbody>
             ${tableContent}