[TIC-Web] Update The Section For The Job

- Add Log View
- Add Icons For The Status
- Update The CSS

Change-Id: I91430ac2bf09a1ad785ce262d60838c06ff338e0
Signed-off-by: Heekyoung, Oh <heekyoung.oh@samsung.com>

diff --git a/config.json b/config.json
index 5f624f1..dac2fd4 100644 (file)
--- a/config.json
+++ b/config.json
@@ -29,7 +29,8 @@
             "JOB_GET_ALL_LISTITEM": "/api/job/list",
             "JOB_GET_BYID": "/api/job/",
             "JOB_ADD_ONE": "/api/job/add/",
-            "JOB_EDIT_ONE": "/api/job/edit/"
+            "JOB_EDIT_ONE": "/api/job/edit/",
+            "JOB_READ_LOG": "/api/job/log/"
         },
         "PACKAGE": {
             "TEST": "testtest"

diff --git a/controller/filesystem.js b/controller/filesystem.js
new file mode 100644 (file)
index 0000000..78b9b7e
--- /dev/null
+++ b/controller/filesystem.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var fs = require('fs');
+var JL = require('jsnlog').JL;
+var AppConfig = require('../config.json');
+
+var logger = JL('filesystem.js');
+
+var FileSystem = {};
+
+FileSystem.readLogFile = function readLogFile (req, res) {
+    var strJobId, strJobLogPath;
+
+    logger.info('readLogFile');
+
+    strJobId = req.params.id;
+
+    strJobLogPath = AppConfig.TIC_WEB.PATH + strJobId + '/' + AppConfig.TIC_WEB.LOG_FILE_NAME;
+
+    fs.readFile(strJobLogPath, { encoding: 'utf8' }, function (err, data ) {
+        res.json(data);
+    });
+}
+
+module.exports = FileSystem;

diff --git a/controller/mic.js b/controller/mic.js
index 359a974..013d851 100644 (file)
--- a/controller/mic.js
+++ b/controller/mic.js
@@ -1,4 +1,5 @@
 'use strict';
+
 /**
  * using WebSocket
  */

diff --git a/controller/router.js b/controller/router.js
index 4c5eaf4..402cecd 100644 (file)
--- a/controller/router.js
+++ b/controller/router.js
@@ -6,6 +6,7 @@ var core = require('./ticcore');
 var client = require('./mariadb');
 var session = require('./session');
 var config = require('../config.json');
+var filesystem = require('./filesystem');
 
 var JL = require('jsnlog').JL;
 var logger = JL('router.js');
@@ -79,6 +80,16 @@ var init = function (serv) {
         client.editJob(req, res);
     });
 
+    /**
+     * Read the log file
+     * @URI /api/job/log/:id
+     * @TYPE POST
+     */
+    router.post('/job/log/:id', function (req, res) {
+        logger.info('an api called that /api/job/log/' + req.params.id);
+        filesystem.readLogFile(req, res);
+    });
+
     /*******************
      * IMAGES
      *******************/

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 57dbe25..6d4dd6e 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -137,6 +137,25 @@ body {
     padding-top: 70px;
     background: #e1e1e1;
 }
+.job-status-ready {
+    font-size: 2vh;
+    display: table-cell;
+}
+.job-status-done {
+    font-size: 2vh;
+    color: blue;
+    display: table-cell;
+}
+.job-status-cancel, .job-status-failed {
+    font-size: 2vh;
+    color: red;
+    display: table-cell;
+}
+.job-status-inprogress {
+    font-size: 2vh;
+    color: green;
+    display: table-cell;
+}
 #tic-job-list {
     height: calc(100vh - 210px);
     display: inline-block;
@@ -162,10 +181,10 @@ body {
     white-space: nowrap;
     vertical-align: middle;
     border-radius: 10px;
-    background-color: rgba(47, 45, 45, 0.48);
+    background-color: slategray;
 }
 #tic-job-list .btndownload {
-    background-color: #337ab7;
+    background-color: lightseagreen;
 }
 #tic-job-list .btnnotactive {
     pointer-events: none;
@@ -174,7 +193,7 @@ body {
     opacity: 0.6;
 }
 #tic-job-list .btncancel {
-    background-color: #020202;
+    background-color: darkslategray;
 }
 .extended_job_table_row {
     border: 1px solid #eee;
@@ -217,7 +236,7 @@ tr.extended_job_table_row:hover td {
 #tic-job-table td {
     height: 38px;
     vertical-align: middle;
-    padding: 2px;
+    padding: 1px;
 }
 
 #tic-job-list-pagination {
@@ -356,3 +375,49 @@ tr.extended_job_table_row:hover td {
     display: inline-block;
     vertical-align: middle;
 }
+
+/* Log View*/
+.log-view-content {
+    z-index: 1982;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+.log-view-content-header {
+    border-bottom-color: #ccc;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+}
+.log-view-content-close {
+    margin-right: 7px;
+    margin-top: -7px;
+    font-size: 20px;
+}
+.log-view-content-header-title {
+    margin-left: 10px;
+    margin-top: 10px;
+    color: darkslategray;
+}
+.log-view-content-body {
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    background-color: rgba(234, 230, 230, 0.78);
+    margin-top: 10px;
+    height: calc(100% - 66px);
+    border-color: gray;
+    border-style: solid;
+    border-width: thin;
+    padding: 4px;
+    overflow-y: scroll;
+    white-space: pre-line;
+}
+a.log-view-content-download {
+    color: cadetblue;
+    float: right;
+    margin-right: 40px;
+    margin-top: -20px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: bold;
+}
\ No newline at end of file

diff --git a/public/src/index.html b/public/src/index.html
index 511dfde..2084e2b 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -365,6 +365,16 @@
             </div>
         </div><!-- /End Confirm Dialog -->
 
+        <!-- Log View -->
+        <div id="log-view-content" class="log-view-content">
+            <div class="log-view-content-header">
+                <button type="button" class="close log-view-content-close">x</button>
+                <h4 class="log-view-content-header-title">Log</h4>
+                <a type="button" id="log-view-content-download" class="fa fa-download log-view-content-download"> Download</a>
+            </div>
+            <div id="log-view-content-body" class="log-view-content-body"></div>
+        </div>
+        <!-- /End Log View -->
 
         <!-- library loading -->
         <script src="/socket.io/socket.io.js"></script>

diff --git a/public/src/js/main.js b/public/src/js/main.js
index 0946951..6a1eb5b 100644 (file)
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -43,6 +43,10 @@ define([
             $(this).parent().addClass("active");
         });
 
+        // initially, hide the log view
+        // in job and image section
+        $('#log-view-content').hide();
+
     }
 
     $(document).ready(function () {

diff --git a/public/src/js/model/JobModel.js b/public/src/js/model/JobModel.js
index 47e57d7..b9e2694 100644 (file)
--- a/public/src/js/model/JobModel.js
+++ b/public/src/js/model/JobModel.js
@@ -32,6 +32,7 @@ define([
         this.jobId = null;
         this.jobStatus = null;
         this.jobStatusText = null;
+        this.jobStatusClass = null;
         this.jobImageName = null;
         this.jobImageSize = null;
         this.jobPath = null;
@@ -187,6 +188,14 @@ define([
         this.jobStatusText = value || '';
     };
 
+    JobModel.prototype.getJobStatusClass = function (value) {
+        return this.jobStatusClass;
+    };
+
+    JobModel.prototype.setJobStatusClass = function (value) {
+        this.jobStatusClass = value || '';
+    };
+
     JobModel.prototype.getJobStatus = function () {
         return this.jobStatus;
     };
@@ -196,9 +205,17 @@ define([
 
         isDownloadable = false;
         statusInfo = JobStatusModel.getStatusInfo(status);
+        /**
+         * statusInfo = {
+         *      value: 'READY',
+         *      text: 'Ready',
+         *      class: 'fa'
+         * }
+         */
 
         this.jobStatus = statusInfo.value || '';
         this.setJobStatusText(statusInfo.text);
+        this.setJobStatusClass(statusInfo.class);
 
         if (this.getJobStatus() === DOWNLOADABLE_STATUS) {
             isDownloadable = true;

diff --git a/public/src/js/model/JobStatusModel.js b/public/src/js/model/JobStatusModel.js
index 6822321..2f4324a 100644 (file)
--- a/public/src/js/model/JobStatusModel.js
+++ b/public/src/js/model/JobStatusModel.js
@@ -17,27 +17,27 @@ define([
             {
                 value: 'READY',
                 text: 'Ready',
-                class: 'fa fa-toggle-off'
+                class: 'fa fa-circle-o job-status-ready'
             },
             {
                 value: 'DONE', 
                 text: 'Done',
-                class: 'fa fa-toggle-on'
+                class: 'fa fa-circle job-status-done'
             },
             {
                 value: 'CANCELED',
                 text: 'Canceled',
-                class: 'fa fa-toggle-off'
+                class: 'fa fa-ban job-status-cancel'
             },
             {
                 value: 'FAILED',
                 text: 'Failed',
-                class: 'fa fa-toggle-off'
+                class: 'fa fa-ban job-status-failed'
             },
             {
                 value: 'INPROGRESS',
                 text: 'In Progress',
-                class: 'fa fa-refresh fa-spin'
+                class: 'fa fa-refresh fa-spin job-status-inprogress'
             }
         ];
         return this;

diff --git a/public/src/js/page/job.js b/public/src/js/page/job.js
index a1146f2..2be911d 100644 (file)
--- a/public/src/js/page/job.js
+++ b/public/src/js/page/job.js
@@ -52,7 +52,50 @@ define([
         ModelJobList = [];
         ModelJobPaging;
 
-        function _updateView(arrJobs) {
+        function _hideLogView () {
+            logger.info('_hideLogView');
+
+        }
+        function _readLog (jobId) {
+            logger.info('JOB_READ_LOG: ' + jobId);
+
+            Util.POST(AppConfig.EVENT.JOB.JOB_READ_LOG + jobId)
+            .then(function (line) {
+                 $('#log-view-content-body').append(line);
+            });
+        }
+
+        function _showLogView (btn) {
+            var linkid, linkurl, currentPosition, currentWidth, currentHeight;
+
+            logger.info('_showLogView');
+
+            linkid = $(btn).data('jobid');
+            linkurl = $(btn).data('link');
+
+            logger.info('(job_id:' + linkid + ') the url of link is ' + linkurl);
+
+            // get value
+            currentPosition = $('#tic-job-list').offset();
+            currentWidth = $('#tic-job-list').width();
+            currentHeight = $('#tic-job-list').height();
+
+            // set value
+            $('#log-view-content').width(currentWidth);
+            $('#log-view-content').height(currentHeight);
+            $('#log-view-content').offset({
+                top: currentPosition.top,
+                left: currentPosition.left
+            });
+
+            // show
+            $('#log-view-content-body').empty();
+            $('#log-view-content-download').attr('href', linkurl);
+            $('#log-view-content').show();
+            _readLog(linkid);
+        }
+
+        function _updateView (arrJobs) {
             return new Promise(function (resolve, reject) {
                 logger.info('_updateView');
                 var targetTableBody = $('#tic-job-table > tbody');
@@ -65,6 +108,12 @@ define([
                     _.forEach(arrJobs, function (value, index) {
                         targetTableBody.append(new JobTableItem(value, index).getRow());
                     });
+
+                    // bind events
+                    $('#tic-job-list a.btnbiglog').on('click', function (e) {
+                        e.preventDefault();
+                        _showLogView(this);
+                    });
                 }
             });
         }
@@ -358,6 +407,12 @@ define([
             _initSocket(Util.getWebSocket());
             updateList();
         });
+
+        $('.log-view-content .log-view-content-close').on('click', function (e) {
+            e.preventDefault();
+            $('#log-view-content-body').empty();
+            $('#log-view-content').hide();
+        });
     }
 
     init();

diff --git a/public/src/js/widget/JobTableItem.js b/public/src/js/widget/JobTableItem.js
index 138ce2e..da2144d 100644 (file)
--- a/public/src/js/widget/JobTableItem.js
+++ b/public/src/js/widget/JobTableItem.js
@@ -16,25 +16,25 @@ define([
     var strRow = [
         '<tr id="job_table_row_<%= jobNum %>">',
             '<td><%= jobNum %></td>',
-            '<td><%= jobStatus %></td>',
-            '<td><a class="tic-job-list-btn btndownload" href="<%= jobImagePath %>" title="<%= jobImageName %>">Download</a></td>',
+            '<td class="<%= classJobStatus %>" title="<%= jobStatus %>"></td>',
+            '<td><a class="tic-job-list-btn btndownload <%= classJobImageDownload %>" href="<%= jobImagePath %>" title="<%= jobImageName %> Download">Download</a></td>',
             '<td><%= jobImageSize %></td>',
             '<td><%= jobUptime %></td>',
             '<td><a class="tic-job-list-btn btncancel <%= classJobCancel %>" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="KS">KS</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobLogPath %>" title="Log">Log</a></td>',
+            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></td>',
+            '<td><a class="tic-job-list-btn btnbiglog" data-link="<%= jobLogPath %>" data-jobid="<%= jobNum %>" title="Log">Log</a></td>',
         '</tr>'
     ];
 
     var strExtendedRow = [
         '<tr id="job_table_row_<%= jobNum %>">',
             '<td><%= jobNum %></td>',
-            '<td><%= jobStatus %></td>',
+            '<td class="<%= classJobStatus %>" title="<%= jobStatus %>"></td>',
             '<td><a class="tic-job-list-btn btndownload btnnotactive">Download</a></td>',
             '<td><%= jobImageSize %></td>',
             '<td><%= jobUptime %></td>',
             '<td><a class="tic-job-list-btn btncancel <%= classJobCancel %>" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="KS">KS</a></td>',
+            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></td>',
             '<td><a class="tic-job-list-btn" href="<%= jobLogPath %>" title="Log">Log</a></td>',
         '</tr>',
         '<tr id="extended_job_table_row_<%= jobNum %>" class="extended_job_table_row">',
@@ -71,11 +71,13 @@ define([
             var temp = _.template(_.join(strRow, ''));
             return temp({
                 'jobNum': data.getJobId(),
+                'classJobStatus': data.getJobStatusClass(),
                 'jobStatus': data.getJobStatusText(),
                 'jobImageName': data.getJobImageName(),
                 'jobImageSize': data.getJobImageSize(),
                 'jobImagePath': data.getJobAbsImagePath(),
-                'classJobCancel': statusValue === JOB_STATUS_DONE ? 'btnnotactive' : '', 
+                'classJobImageDownload': data.getJobStatus() === JOB_STATUS_DONE ? '' : 'btnnotactive',
+                'classJobCancel': statusValue === JOB_STATUS_DONE ? 'btnnotactive' : '',
                 'classJobKsPath': data.getJobHasKsFile() === '0' ? 'btnnotactive' : '',
                 'jobKsPath': data.getJobAbsKsPath(),
                 'jobLogPath': data.getJobAbsLogPath(),
@@ -87,6 +89,7 @@ define([
             var temp = _.template(_.join(strExtendedRow, ''));
             return temp({
                 'jobNum': data.getJobId(),
+                'classJobStatus': data.getJobStatusClass(),
                 'jobStatus': data.getJobStatusText(),
                 'jobImageName': data.getJobImageName(),
                 'jobImageSize': data.getJobImageSize(),