Works on BrightSign now.

aremaproxy.php

@@ -30,6 +30,9 @@ switch ($_GET['fetch']) {
         $params['limit'] = 50;
         $params['order_by'] = 'job_id_desc';
         $params['history'] = 'false';
+        if (isset($_GET['q']) && strlen($_GET['q']) > 0 && $_GET['q'] != 'null') {
+            $params['text'] = $_GET['q'];
+        }
         break;
 
     case 'jobdetails':

assets/custom.css

@@ -2,8 +2,8 @@
     text-align: center;
 }
 
-tr.state10 {
+tr.state5 {
-    color: #ccc;
+    color: #00c;
 }
 
 span.state2 {

assets/main.js

@@ -79,7 +79,8 @@ class AremaRest
 
     getJoblist()
     {
-        var url = 'aremaproxy.php?fetch=joblist';
+        var current_url = new URL(window.location.href);
+        var url = 'aremaproxy.php?fetch=joblist&q=' + encodeURIComponent(current_url.searchParams.get('q'));
         return this.fetchPromise(url);
     }
 
@@ -98,29 +99,33 @@ class AremaRest
 
 class JobRow extends React.Component
 {
-    job_states = {
+
-        2: "Queued",
-        3: "Started",
-        4: "Dispatched",
-        5: "Running",
-        6: "Cancelling",
-        8: "Waiting for Resource",
-        9: "Waiting for Trigger",
-        10: "Finished",
-        11: "Finished with Problems",
-        12: "Finished with Errors",
-        13: "Finished but Dependency Error",
-        14: "Cancelled",
-        20: "Finished with Warnings",
-        30: "Skipped"
-    };
-    
     constructor(props)
     {
         super(props);
+        this.job_states = {
+            2: "Queued",
+            3: "Started",
+            4: "Dispatched",
+            5: "Running",
+            6: "Cancelling",
+            8: "Waiting for Resource",
+            9: "Waiting for Trigger",
+            10: "Finished",
+            11: "Finished with Problems",
+            12: "Finished with Errors",
+            13: "Finished but Dependency Error",
+            14: "Cancelled",
+            20: "Finished with Warnings",
+            30: "Skipped"
+        };
+
         this.state = {
             jobId: props.jobId,
             name: '... fetching details ...',
+            created: '',
+            created_date: '',
+            created_time: '--:--:--',
             state_numeric: -1,
             state: '---',
             percent: 0
@@ -132,14 +137,23 @@ class JobRow extends React.Component
         var req = new AremaRest();
         req.getJobDetails(this.state.jobId)
         .then((data) => {
-            console.log('updateDetails got data: %o', data);
+            // console.log('updateDetails got data: %o', data);
             var cur = this.state;
             cur.name = data.job.param.title;
+
+            // Creation time
+            var ctime = new Date(data.job.creation_time);
+            cur.created = data.job.creation_time;
+            cur.created_date = ctime.toLocaleDateString();
+            cur.created_time = ctime.toLocaleTimeString();
+
+            // Status / Progress
             cur.state_numeric = data.job.state;
             cur.state = this.job_states[data.job.state];
             if (data.job.state == 10) {
                 cur.percent = 100;
             }
+
             this.setState(cur);
             if (data.job.state < 10) {
                 // job still running, query progress in 1 second
@@ -157,7 +171,7 @@ class JobRow extends React.Component
         var req = new AremaRest();
         req.getJobProgress(this.state.jobId)
         .then((data) => {
-            console.log('updateProgress got data: %o', data);
+            // console.log('updateProgress got data: %o', data);
             var cur = this.state;
 
             cur.state_numeric = data.state;
@@ -180,7 +194,7 @@ class JobRow extends React.Component
                 }
             }
             cur.percent = Math.floor( overall_percent / num_steps );
-            console.log('calculated: %o', cur.percent);
+            //console.log('calculated: %o', cur.percent);
 
             this.setState(cur);
             if (data.state < 10) {
@@ -202,10 +216,16 @@ class JobRow extends React.Component
     render()
     {
         //console.log('Obj: %o', this);
+        var now = new Date();
+        var date_str = '';
+        if (now.toLocaleDateString() != this.state.created_date) {
+            date_str = this.state.created_date + "\n";
+        }
         return React.createElement('tr', { className: 'state'+this.state.state_numeric },
             React.createElement('td', null, this.state.jobId),
             React.createElement('td', null, this.state.name),
-            React.createElement('td', null,
+            React.createElement('td', { style: { textAlign: 'center', verticalAlign: 'middle' } }, date_str + this.state.created_time),
+            React.createElement('td', { style: { verticalAlign: 'middle' } },
                 React.createElement('span', { className: 'uk-label state'+this.state.state_numeric }, this.state.state)
             ),
             React.createElement('td', { style: { verticalAlign: 'middle' } },
@@ -230,7 +250,7 @@ class JobList extends React.Component
         var req = new AremaRest();
         req.getJoblist()
         .then((data) => {
-            console.log('updateJobs got data: %o', data);
+            // console.log('updateJobs got data: %o', data);
             this.setState({
                 jobIds: data.jobs.job
             });
@@ -250,7 +270,7 @@ class JobList extends React.Component
         }
         window.appendJobList = (data) => {
             var list = this.state;
-            console.log('Current state: %o', list);
+            // console.log('Current state: %o', list);
             for (var i=0; i<data.length; i++) {
                 list.jobIds.push(data[i]);
             }
@@ -271,6 +291,7 @@ class JobList extends React.Component
                     React.createElement('tr', null,
                         React.createElement('th', null, 'ID'),
                         React.createElement('th', null, 'Name'),
+                        React.createElement('th', null, 'Created'),
                         React.createElement('th', null, 'Status'),
                         React.createElement('th', null, 'Progress')
                     )
@@ -288,4 +309,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
         document.getElementById('joblist')
     );
 
+    var current_url = new URL(window.location.href);
+    if (current_url.searchParams.get('q')) {
+        document.forms[0].elements.q.value = current_url.searchParams.get('q');
+    }
+
 });

index.html

@@ -2,10 +2,10 @@
 <html>
   <head>
     <title>AREMA JobMonitor</title>
-    <!-- <script src="reactjs/react.production.min.js" type="text/javascript"></script>
+    <script src="reactjs/react.production.min.js" type="text/javascript"></script>
-    <script src="reactjs/react-dom.production.min.js" type="text/javascript"></script> -->
+    <script src="reactjs/react-dom.production.min.js" type="text/javascript"></script>
-    <script src="reactjs/react.development.js" type="text/javascript"></script>
+    <!-- <script src="reactjs/react.development.js" type="text/javascript"></script>
-    <script src="reactjs/react-dom.development.js" type="text/javascript"></script>
+    <script src="reactjs/react-dom.development.js" type="text/javascript"></script> -->
     <script src="uikit/uikit.min.js" type="text/javascript"></script>
     <script src="uikit/uikit-icons.min.js" type="text/javascript"></script>
     <script src="assets/main.js" type="text/javascript"></script>
@@ -20,6 +20,16 @@
         <ul class="uk-navbar-nav">
         </ul>
       </div>
+      <div class="uk-navbar-right">
+        <div>
+          <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
+          <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0;">
+            <form class="uk-search uk-search-navbar uk-width-1-1" method="GET">
+              <input class="uk-search-input" type="search" name="q" placeholder="Filter" autofocus />
+            </form>
+          </div>
+        </div>
+      </div>
     </nav>
     <div class="uk-section">
       <div class="uk-container">