feat(*): support process output display on web page

MelonCTech · Nov 18, 2023 · 567de71 · 567de71
1 parent 7325ed5
commit 567de71
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 2 deletions.
diff --git a/controllers/proc.m b/controllers/proc.m
@@ -5,6 +5,7 @@
 S = Import('sys');
 Str = Import('str');
 Mq = Import('mq');
+B = Import('base64');
 
 Tasks = [];
 Delta = 0;
@@ -32,6 +33,7 @@
     @acl() {
         return [
             'index': true,
+            'output': true,
         ];
     }
 
@@ -61,6 +63,28 @@
         return J.decode(R['body']);
     }
 
+    @output() {
+        R['headers']['Content-Type'] = 'application/json';
+        args = this.get_args();
+        if (!Validate(this.rules()['args'], args)) {
+            R['code'] = 400;
+            return J.encode(['code': 400, 'msg': 'name is required']);
+        } fi
+        name = args['name'];
+        if (!S.has(Tasks, name) || S.is_nil(Tasks[name])) {
+            R['code'] = 403;
+            return J.encode(['code': 403, 'msg': 'Program not exists, please start it at first']);
+        } fi
+        data = [];
+        n = Tasks[name]['replica'];
+        for (i = 0; i < n; ++i) {
+            alias = name + ':' + i;
+            content = GetLogContent(alias);
+            data[alias] = content && B.base64(content, 'encode') || '';
+        }
+        return J.encode(['code': 200, 'msg': 'OK', 'data': data]);
+    }
+
     @index() {
         method = R['method'];
         R['headers']['Content-Type'] = 'application/json';

diff --git a/utils/log.m b/utils/log.m
@@ -74,6 +74,19 @@
     }
 }
 
+@GetLogContent(alias)
+{
+    tm = Sys.utctime(Sys.time());
+    tm = Str.slice(Str.slice(tm, ' ')[0], '/');
+    path = Conf['log_dir'] + '/' + alias + '-' + tm[2] + '-' + tm[0] + '-' + tm[1] + '.log';
+    f = $F;
+    if (f.open(path, 'r')) {
+        ret = f.read(f.size());
+        f.close();
+    } fi
+    return ret;
+}
+
 Log_level_set(Conf['log_level']);
 Log_path_set('Meproc');
 

diff --git a/web/index.html b/web/index.html
@@ -15,6 +15,13 @@
     <div id="content">
     </div>
     <button id="new" class="btn btn-success">New</button>
+    <div id="outputModal" class="modal">
+      <div class="modal-content">
+        <span class="close" style="padding:5px">&times;</span>
+        <h2 style="padding:8px 20px">Output</h2>
+        <p style="padding:8px 20px" id="outputContent"></p>
+      </div>
+    </div>
     <div id="formModal" class="modal">
       <div class="modal-content">
         <span class="close" style="padding:5px">&times;</span>
@@ -117,7 +124,7 @@ <h2 style="padding:8px 20px">Start a new task</h2>
       margin: 15% auto;
       padding: 20px;
       border: 1px solid #888;
-      width: 40%;
+      width: 50%;
       bottom: 8%;
     }
     .modal-content form {
@@ -143,6 +150,14 @@ <h2 style="padding:8px 20px">Start a new task</h2>
     .details-row {
       display: none;
     }
+    code {
+      background-color: #f4f4f4;
+      padding: 5px;
+      display: block;
+    }
+    .outputClass {
+      padding: 5px;
+    }
   </style>
 
   <script>
@@ -370,6 +385,41 @@ <h2 style="padding:8px 20px">Start a new task</h2>
               });
             })
 
+            btn = $('<button>')
+            td.append(btn)
+            btn.attr('id', 'output-' + name)
+            btn.attr('class', 'btn btn-secondary')
+            btn.text('Output')
+            btn.on('click', function() {
+              var _name = $(this).attr('id').split('-')[1]
+              $.ajax({
+                url: "http://{{IP}}:{{PORT}}/proc/output?name=" + _name,
+                type: "GET",
+                success: function(response) {
+                  $.each(response.data, function (k, v) {
+                    var l = $('<h5>')
+                    l.text(k)
+                    l.css('display', 'block')
+                    l.attr('class', 'outputClass')
+                    $('#outputContent').append(l)
+                    var p = $('<code>')
+                    if (!v) {
+                      p.html('')
+                    } else {
+                      p.html(atob(v).replace(/\n/g, '<br>'))
+                    }
+                    p.attr('class', 'outputClass')
+                    $('#outputContent').append(p)
+                  })
+                  $('#outputModal').css('display', 'block')
+                },
+                error: function(xhr, status, error) {
+                  $('#outputModal').css('display', 'block')
+                  $('#outputContent').text(error)
+                }
+              })
+            })
+
             dtr = $('<tr>')
             dtr.attr('class', 'details-row')
             tb.append(dtr)
@@ -399,12 +449,15 @@ <h2 style="padding:8px 20px">Start a new task</h2>
         $("#formModal").css("display", "block");
       })
       $(".close").click(function(){
-        $("#formModal").css("display", "none");
+        $(this).closest('.modal').css("display", "none")
       });
       $(window).click(function(event) {
         if (event.target == $("#formModal")[0]) {
           $("#formModal").css("display", "none");
         }
+        if (event.target == $("#outputModal")[0]) {
+          $("#outputModal").css("display", "none");
+        }
       });
 
       $('.depselect').select2({