[TIC-Web] Update The UI For Image List

- Update the UI
- Add the Job Status Model

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

diff --git a/public/src/css/style.css b/public/src/css/style.css
index f1eafcd..57dbe25 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -152,7 +152,6 @@ body {
     margin-bottom: 0px;
 }
 #tic-job-list .tic-job-list-btn {
-    float: right;
     min-width: 10px;
     padding: 3px 7px;
     font-size: 12px;
@@ -205,10 +204,20 @@ tr.extended_job_table_row:hover td {
     height: calc(100vh - 320px);
     text-overflow: ellipsis;
     text-align: center;
+    table-layout: auto;
 }
-#tic-job-filter {
-    width: 100%;
-    float: left;
+#tic-job-table th {
+    text-align: center;
+    height: 38px;
+    vertical-align: middle;
+}
+#tic-job-table tr {
+    height: 38px;
+}
+#tic-job-table td {
+    height: 38px;
+    vertical-align: middle;
+    padding: 2px;
 }
 
 #tic-job-list-pagination {
@@ -228,16 +237,11 @@ tr.extended_job_table_row:hover td {
     overflow: auto;
 }
 #tic-image-list {
-    height: calc(100vh - 320px);
     display: inline-block;
     overflow: auto;
     text-overflow: ellipsis;
     width: 100%;
 }
-#tic-image-filter {
-        width: 100%;
-    float: left
-}
 
 /* Image List Item */
 .image-list-name {
@@ -247,8 +251,14 @@ tr.extended_job_table_row:hover td {
     display:inline-block;
     min-width: 350px;
     overflow: hidden;
-    width: 97%;
     color: #31708f;
+    float: left;
+    margin-bottom: 8px;
+}
+.image-list-name-btndownload {
+    float: left;
+    min-width: 10px;
+    padding-right: 4px;
 }
 .image-list-detail {
     padding-left: 10px;
@@ -257,10 +267,8 @@ tr.extended_job_table_row:hover td {
     white-space:nowrap;
     display:inline-block;
     overflow: hidden;
-    width: 85%;
 }
 .image-list-btndownload {
-    float: right;
     min-width: 10px;
     padding: 3px 7px;
     font-size: 12px;
@@ -275,22 +283,24 @@ tr.extended_job_table_row:hover td {
 }
 .image-item {
     overflow: hidden;
-    height: 10vh;
+    height: 7vh;
 }
 .image-item-title {
     width: 100%;
+    float: left;
 }
 .image-item-info {
-    width: 60%;
-
+    width: 100%;
+    float: left;
 }
-.image-item-btnbox {
-    width: 40%;
+#tic-image-list-content {
+    height: calc(100vh - 320px);
+    display: inline-block;
+    width: 100%;
+}
+#tic-image-list-pagination {
     float: right;
-    height: 100%;
-    position: absolute;
-    top: 20px;
-    right: 20px;
+    text-align: center;
 }
 
 /* Settings Page */

diff --git a/public/src/index.html b/public/src/index.html
index f02ebe4..511dfde 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -215,16 +215,6 @@
                             <div class="panel-body">
                                 <div id="tic-job-list">
                                     <div id="tic-job-list-content">
-                                        <div id="tic-job-filter">
-                                            <form class="navbar-form" role="search">
-                                                <div class="input-group">
-                                                    <input type="text" class="form-control" placeholder="Search Status, JobId" name="q">
-                                                    <div class="input-group-btn">
-                                                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
-                                                    </div>
-                                                </div>
-                                            </form>
-                                        </div>
                                         <div>
                                             <table class="table table-hover table-bordered" id="tic-job-table">
                                                 <thead>
@@ -268,19 +258,7 @@
                             <div class="panel-heading">Image List</div>
                             <div class="panel-body">
                                 <div id="tic-image-list-content">
-                                    <div id="tic-image-filter">
-                                        <form class="navbar-form" role="search">
-                                            <div class="input-group">
-                                                <input type="text" class="form-control" placeholder="Search JobId" name="q">
-                                                <div class="input-group-btn">
-                                                    <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
-                                                </div>
-                                            </div>
-                                        </form>
-                                    </div>
-                                    <div>
-                                        <ul class="list-group" id="tic-image-list"></ul>
-                                    </div>
+                                    <ul class="list-group" id="tic-image-list"></ul>
                                 </div>
                                 <div id="tic-image-list-pagination">
                                     <ul class="pagination pagination-sm">

diff --git a/public/src/js/model/JobModel.js b/public/src/js/model/JobModel.js
index 239b2c1..47e57d7 100644 (file)
--- a/public/src/js/model/JobModel.js
+++ b/public/src/js/model/JobModel.js
@@ -2,12 +2,14 @@ define([
     'jquery',
     'lodash',
     'js/util',
-    'js/logger'
+    'js/logger',
+    './JobStatusModel'
 ], function (
     $,
     _,
     Util,
-    Logger
+    Logger,
+    JobStatusModel
 ) {
     'use strict';
 
@@ -21,30 +23,6 @@ define([
     // define the default status
     var DEFAULT_STATUS = 'READY';
 
-    // describe the all the status of job
-    var JOB_STATUS_LIST = [
-        {
-            value: 'READY',
-            text: 'Ready'
-        },
-        {
-            value: 'DONE', 
-            text: 'Done'
-        },
-        {
-            value: 'CANCELED',
-            text: 'Canceled'
-        },
-        {
-            value: 'FAILED',
-            text: 'Failed'
-        },
-        {
-            value: 'INPROGRESS',
-            text: 'In Progress'
-        }
-    ];
-
     // set the config information for the app
     Util.getAppConfig().then(function (data) {
         AppConfig = data;
@@ -217,7 +195,7 @@ define([
         var statusInfo, isDownloadable;
 
         isDownloadable = false;
-        statusInfo = _.find(JOB_STATUS_LIST, {value: status}) || _.find(JOB_STATUS_LIST, {value: DEFAULT_STATUS});
+        statusInfo = JobStatusModel.getStatusInfo(status);
 
         this.jobStatus = statusInfo.value || '';
         this.setJobStatusText(statusInfo.text);

diff --git a/public/src/js/model/JobStatusModel.js b/public/src/js/model/JobStatusModel.js
new file mode 100644 (file)
index 0000000..6822321
--- /dev/null
+++ b/public/src/js/model/JobStatusModel.js
@@ -0,0 +1,57 @@
+define([
+    'lodash',
+    'js/logger'
+], function (
+    _,
+    Logger
+) {
+    'use strict';
+
+    var logger = Logger('model/JobStatusModel.js');
+
+    // define the default status
+    var DEFAULT_STATUS = 'READY';
+
+    var JobStatusModel = function JobStatusModel (paramObj) {
+        this.all = [
+            {
+                value: 'READY',
+                text: 'Ready',
+                class: 'fa fa-toggle-off'
+            },
+            {
+                value: 'DONE', 
+                text: 'Done',
+                class: 'fa fa-toggle-on'
+            },
+            {
+                value: 'CANCELED',
+                text: 'Canceled',
+                class: 'fa fa-toggle-off'
+            },
+            {
+                value: 'FAILED',
+                text: 'Failed',
+                class: 'fa fa-toggle-off'
+            },
+            {
+                value: 'INPROGRESS',
+                text: 'In Progress',
+                class: 'fa fa-refresh fa-spin'
+            }
+        ];
+        return this;
+    };
+
+    /**
+     * getStatusInfo
+     */
+    JobStatusModel.prototype.getStatusInfo = function getStatusInfo (value) {
+        var status = value || DEFAULT_STATUS;
+        var statusInfo = _.find(this.all, {value: status});
+        return statusInfo;
+    };
+
+    var jobStatusModel = new JobStatusModel();
+    return jobStatusModel;
+});

diff --git a/public/src/js/widget/ImageItem.js b/public/src/js/widget/ImageItem.js
index 828bebf..c834cab 100644 (file)
--- a/public/src/js/widget/ImageItem.js
+++ b/public/src/js/widget/ImageItem.js
@@ -19,18 +19,16 @@ define([
     var strItem = [
         '<li class="list-group-item image-item">',
             '<div class="image-item-title">',
-                '<p class="image-list-name" title="<%= imageFileName %>"><%= imageFileName %></p>',
+                '<div class="image-list-name" title="<%= jobId %>_<%= imageFileName %>">( <%= jobId %> ) <%= imageFileName %></div>',
+                '<div class="image-list-name-btndownload"><a class="image-list-btndownload" href="<%= imagePath %>" date-name="<%= imageFileName %>">Download</a></div>',
+                '<div class="image-list-name-btndownload"><a class="image-list-btndownload <%= classJobKsPath %>" href="<%= ksPath %>" date-name="<%= ksFileName %>">KS</a></div>',
+                '<div class="image-list-name-btndownload"><a class="image-list-btndownload" href="<%= logPath %>" date-name="<%= logFileName %>">Log</a></div>',
             '</div>',
             '<div class="image-item-info">',
                 '<p class="image-list-detail">Job ID: <%= jobId %></p>',
                 '<p class="image-list-detail">Size: <%= fileSize %></p>',
                 '<p class="image-list-detail">Updated: <%= fileTime %></p>',
             '</div>',
-            '<div class="image-item-btnbox">',
-                '<div><a class="image-list-btndownload" href="<%= imagePath %>" date-name="<%= imageFileName %>">Download</a></div>',
-                '<div><a class="image-list-btndownload" href="<%= ksPath %>" date-name="<%= ksFileName %>">KS</a></div>',
-                '<div><a class="image-list-btndownload" href="<%= logPath %>" date-name="<%= logFileName %>">Log</a></div>',
-            '</div>',
         '</li>'
     ];
 
@@ -67,6 +65,7 @@ define([
             ksFileName: AppConfig.TIC_WEB.KS_FILE_NAME,
             logFileName: AppConfig.TIC_WEB.LOG_FILE_NAME,
             imagePath: item.getJobAbsImagePath(),
+            classJobKsPath: item.getImageHasKsFile() === '0' ? 'btnnotactive' : '',
             ksPath: item.getJobAbsKsPath(),
             logPath: item.getJobAbsLogPath()
         });

diff --git a/public/src/js/widget/JobTableItem.js b/public/src/js/widget/JobTableItem.js
index ed335d3..138ce2e 100644 (file)
--- a/public/src/js/widget/JobTableItem.js
+++ b/public/src/js/widget/JobTableItem.js
@@ -20,8 +20,8 @@ define([
             '<td><a class="tic-job-list-btn btndownload" href="<%= jobImagePath %>" title="<%= jobImageName %>">Download</a></td>',
             '<td><%= jobImageSize %></td>',
             '<td><%= jobUptime %></td>',
-            '<td><a class="tic-job-list-btn btncancel" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobKsPath %>" title="KS">KS</a></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>',
         '</tr>'
     ];
@@ -33,8 +33,8 @@ define([
             '<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" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobKsPath %>" title="KS">KS</a></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>',
         '</tr>',
         '<tr id="extended_job_table_row_<%= jobNum %>" class="extended_job_table_row">',
@@ -46,6 +46,7 @@ define([
     ];
 
     var JOB_STATUS_INPROGRESS = 'INPROGRESS';
+    var JOB_STATUS_DONE = 'DONE';
 
     var JobTableItem = function (modelObj) {
         this.model = modelObj;
@@ -74,6 +75,8 @@ define([
                 'jobImageName': data.getJobImageName(),
                 'jobImageSize': data.getJobImageSize(),
                 'jobImagePath': data.getJobAbsImagePath(),
+                'classJobCancel': statusValue === JOB_STATUS_DONE ? 'btnnotactive' : '', 
+                'classJobKsPath': data.getJobHasKsFile() === '0' ? 'btnnotactive' : '',
                 'jobKsPath': data.getJobAbsKsPath(),
                 'jobLogPath': data.getJobAbsLogPath(),
                 'jobUptime': data.getJobUptime()
@@ -88,6 +91,8 @@ define([
                 'jobImageName': data.getJobImageName(),
                 'jobImageSize': data.getJobImageSize(),
                 'jobImagePath': data.getJobAbsImagePath(),
+                'classJobCancel': statusValue === JOB_STATUS_DONE ? 'btnnotactive' : '',
+                'classJobKsPath': data.getJobHasKsFile() === '0' ? 'btnnotactive' : '',
                 'jobKsPath': data.getJobAbsKsPath(),
                 'jobLogPath': data.getJobAbsLogPath(),
                 'jobUptime': data.getJobUptime()