From 89a0128b6ac477f28515d92d7e08f4d0aa25679a Mon Sep 17 00:00:00 2001 From: "Heekyoung, Oh" Date: Wed, 8 Mar 2017 23:22:46 +0900 Subject: [PATCH] [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 --- config.json | 3 +- controller/filesystem.js | 25 ++++++++++++ controller/mic.js | 1 + controller/router.js | 11 ++++++ public/src/css/style.css | 73 +++++++++++++++++++++++++++++++++-- public/src/index.html | 10 +++++ public/src/js/main.js | 4 ++ public/src/js/model/JobModel.js | 17 ++++++++ public/src/js/model/JobStatusModel.js | 10 ++--- public/src/js/page/job.js | 57 ++++++++++++++++++++++++++- public/src/js/widget/JobTableItem.js | 17 ++++---- 11 files changed, 210 insertions(+), 18 deletions(-) create mode 100644 controller/filesystem.js diff --git a/config.json b/config.json index 5f624f1..dac2fd4 100644 --- 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 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 --- 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 --- 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 --- 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 --- a/public/src/index.html +++ b/public/src/index.html @@ -365,6 +365,16 @@ + +
+
+ +

Log

+ Download +
+
+
+ diff --git a/public/src/js/main.js b/public/src/js/main.js index 0946951..6a1eb5b 100644 --- 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 --- 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 --- 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 --- 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 --- a/public/src/js/widget/JobTableItem.js +++ b/public/src/js/widget/JobTableItem.js @@ -16,25 +16,25 @@ define([ var strRow = [ '', '<%= jobNum %>', - '<%= jobStatus %>', - 'Download', + '', + 'Download', '<%= jobImageSize %>', '<%= jobUptime %>', 'Cancel', - 'KS', - 'Log', + 'KS', + 'Log', '' ]; var strExtendedRow = [ '', '<%= jobNum %>', - '<%= jobStatus %>', + '', 'Download', '<%= jobImageSize %>', '<%= jobUptime %>', 'Cancel', - 'KS', + 'KS', 'Log', '', '', @@ -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(), -- 2.7.4