[TIC-Web] Modify the Images View

- Bug fix the. update job information.
- Update the UI
- Update the CSS

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

diff --git a/controller/mariadb.js b/controller/mariadb.js
index 83cd76a..1fa8d56 100644 (file)
--- a/controller/mariadb.js
+++ b/controller/mariadb.js
@@ -75,11 +75,13 @@ mariadb.queries = {
         'insert into tic_image ',
         '(',
             'image_type, ',
-            'image_pid',
+            'image_name, ',
+            'image_size',
         ') ',
         'values (',
             '"<%= imageType %>", ',
-            '"<%= imagePid %>"',
+            '"<%= imageName %>", ',
+            '"<%= imageSize %>"',
         ');'
     ]
 };
@@ -299,8 +301,8 @@ mariadb.getImagesTotalCount = function getImagesTotalCount(req, res) {
 /**
  * Add The New Image
  */
-mariadb.addImage = function addImage(req, res) {
-    var queryString, paramObj, imagePid;
+mariadb.addImage = function addImage (req, res) {
+    var queryString, paramObj;
 
     function onSuccess(err, rows) {
         if (err) {
@@ -315,11 +317,11 @@ mariadb.addImage = function addImage(req, res) {
     }
 
     paramObj = req.body;
-    imagePid = paramObj.imagePid;
 
     queryString = _.template(_.join(this.queries['addImage'], ''))({
-        imageType: 'external',
-        imagePid: imagePid
+        imageType: paramObj.image_type,
+        imageName: paramObj.image_name,
+        imageSize: paramObj.image_size
     });
 
     logger.info('addJob: query = ' + queryString);

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 99bacf1..9df483d 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -140,7 +140,6 @@ body {
 #tic-job-list {
     height: calc(100vh - 210px);
     display: inline-block;
-    overflow: auto;
     width: 100%;
 }
 #tic-job-section .panel-heading .pull-right {
@@ -164,11 +163,17 @@ body {
     white-space: nowrap;
     vertical-align: middle;
     border-radius: 10px;
-    background-color: #c3bbbb;
+    background-color: rgba(47, 45, 45, 0.48);
 }
 #tic-job-list .btndownload {
     background-color: #337ab7;
 }
+#tic-job-list .btnnotactive {
+    pointer-events: none;
+    cursor: defulat;
+    background-color: rgba(47, 45, 45, 0.48);
+    opacity: 0.6;
+}
 #tic-job-list .btncancel {
     background-color: #020202;
 }
@@ -178,12 +183,37 @@ body {
     line-height: 12vh;
     overflow: scroll;
     font-size: 12px;
-    background-color: #000;
+    background-color: rgba(13, 19, 14, 0.71);
     color: #ddd;
+    text-align: left;
+}
+td.extended_job_table_container > div {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+td.extended_job_table_container {
+    height: 10vh;
+}
+tr.extended_job_table_row:hover {
+    background-color: rgba(13, 19, 14, 0.71);
+}
+tr.extended_job_table_row:hover td {
+    background-color: transparent;
+}
+#tic-job-table {
+    height: calc(100vh - 320px);
+    text-overflow: ellipsis;
+    text-align: center;
+}
+#tic-job-filter {
+    width: 100%;
+    float: left;
 }
 
-.extended_job_table_row td {
-    line-height: 1;
+#tic-job-list-pagination {
+    float: right;
+    text-align: center;
 }
 
 /* Image Page */
@@ -192,17 +222,21 @@ body {
     padding-top: 70px;
     background: #e1e1e1;
 }
-
 #tic-image-new-container {
     height: calc(50vh - 183px);
     display: inline-block;
     overflow: auto;
 }
-
 #tic-image-list {
-    height: calc(100vh - 210px);
+    height: calc(100vh - 320px);
     display: inline-block;
     overflow: auto;
+    text-overflow: ellipsis;
+    width: 100%;
+}
+#tic-image-filter {
+        width: 100%;
+    float: left
 }
 
 /* Image List Item */
@@ -241,6 +275,22 @@ body {
 }
 .image-item {
     overflow: hidden;
+    height: 20vh;
+}
+.image-item-title {
+    width: 100%;
+}
+.image-item-info {
+    width: 60%;
+
+}
+.image-item-btnbox {
+    width: 40%;
+    float: right;
+    height: 100%;
+    position: absolute;
+    top: 20px;
+    right: 20px;
 }
 
 /* Settings Page */

diff --git a/public/src/index.html b/public/src/index.html
index fef9851..4189c0e 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -188,11 +188,6 @@
                         <div class="panel panel-primary">
                             <div class="panel-heading">
                                 <h3 class="panel-title">Job List</h3>
-                                <div class="pull-right">
-                                    <button class="btn btn-default btn-xs btn-filter">
-                                        <span class="glyphicon glyphicon-filter"></span> Filter
-                                    </button>
-                                </div>
                             </div>
                             <div class="panel-body">
                                 <div id="tic-job-list">
@@ -200,7 +195,7 @@
                                         <div id="tic-job-filter">
                                             <form class="navbar-form" role="search">
                                                 <div class="input-group">
-                                                    <input type="text" class="form-control" placeholder="Search" name="q">
+                                                    <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>
@@ -213,9 +208,8 @@
                                                     <tr class="filters text-center">
                                                         <th>#</th>
                                                         <th>Status</th>
-                                                        <th>Image Name</th>
+                                                        <th>Image</th>
                                                         <th>Image Size</th>
-                                                        <th>Download</th>
                                                         <th>Updated</th>
                                                         <th>Action</th>
                                                         <th>KS</th>
@@ -250,7 +244,21 @@
                         <div class="panel panel-primary">
                             <div class="panel-heading">Image List</div>
                             <div class="panel-body">
-                                <ul class="list-group" id="tic-image-list"></ul>
+                                <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>
+                                </div>
                                 <div id="tic-image-list-pagination">
                                     <ul class="pagination pagination-sm">
                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>

diff --git a/public/src/js/page/job.js b/public/src/js/page/job.js
index 743ac22..2593411 100644 (file)
--- a/public/src/js/page/job.js
+++ b/public/src/js/page/job.js
@@ -8,7 +8,8 @@ define([
     '../widget/JobPaging',
     '../widget/JobTableItem',
     '../widget/JobTableEmptyItem',
-    '../widget/JobLog'
+    '../widget/JobLog',
+    './image'
 ], function (
     $,
     _,
@@ -19,7 +20,8 @@ define([
     JobPaging,
     JobTableItem,
     JobTableEmptyItem,
-    JobLog
+    JobLog,
+    Image
 ) {
     'use strict';
 
@@ -243,10 +245,13 @@ define([
             }
 
             function updateJobListView() {
-                logger.info('IMAGE_ADD_FINISH.updateJobListView: ' + JSON.stringify(msgObj));
+                logger.info('IMAGE_ADD_FINISH.updateJobListView');
+
                 // upate the list of jobs
                 updateList(ModelJobPaging.getCurrentPoint());
 
+                Image.updateList();
+
                 // notification popup
                 Util.showInfoDialog('Image created successfully. The #ID is ' + jobId + '.');
             }
@@ -255,7 +260,7 @@ define([
                 // update the status and image_id
                 var msgObj = {
                     job_status: JOB_STATUS_DONE,
-                    image_id: data.image_id
+                    job_image_id: data.image_id
                 };
 
                 logger.info('IMAGE_ADD_FINISH.updateJobInfo: ' + JSON.stringify(msgObj));
@@ -287,7 +292,13 @@ define([
                             image_type: 'external',
                             image_size: imageInfo.size
                         };
-                        return Util.POST(AppConfig.EVENT.IMAGE.IMAGE_ADD_ONE, msgObj)
+
+                        Util.POST(AppConfig.EVENT.IMAGE.IMAGE_ADD_ONE, msgObj)
+                        .then(function (data) {
+                            resolve(data);
+                        }).catch(function (err) {
+                            reject(err);
+                        });
                     } else {
                         reject();
                     }
@@ -298,7 +309,17 @@ define([
                 return new Promise(function (resolve, reject) {
                     var url = AppConfig.TIC_WEB.PATH_ABSTRACT + jobId;
                     logger.info('IMAGE_ADD_FINISH.getAnImageInfo: ' + url);
-                    return Util.POST(url);
+
+                    $.ajax(url, {
+                        type: 'GET',
+                        dataType: 'json',
+                        success: function(data) { 
+                            resolve(data);
+                        },
+                        error  : function(err) { 
+                            reject(err);
+                        }
+                    });
                 });
             }
 
@@ -374,4 +395,4 @@ define([
         doCreateAnImage: doCreateAnImage
     }
 
-});
+});
\ No newline at end of file

diff --git a/public/src/js/widget/ImageItem.js b/public/src/js/widget/ImageItem.js
index 18df379..828bebf 100644 (file)
--- a/public/src/js/widget/ImageItem.js
+++ b/public/src/js/widget/ImageItem.js
@@ -18,12 +18,19 @@ define([
 
     var strItem = [
         '<li class="list-group-item image-item">',
-            '<p class="image-list-name" title="<%= imageFileName %>"><%= imageFileName %></p>',
-            '<p class="image-list-detail">Size: <%= fileSize %></p>',
-            '<p class="image-list-detail">Updated: <%= fileTime %></p>',
-            '<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 class="image-item-title">',
+                '<p class="image-list-name" title="<%= imageFileName %>"><%= imageFileName %></p>',
+            '</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>'
     ];
 
@@ -53,8 +60,9 @@ define([
 
     ImageItem.prototype.setTemplate = function setTemplate(item) {
         this.template = _.template(_.join(strItem, ''))({
+            jobId: item.getImageJobId(),
             fileSize: item.getImageSize(),
-            fileTime: new Date(item.setImageUptime()).toLocaleString(),
+            fileTime: item.getImageUptime(),
             imageFileName: item.getImageName(),
             ksFileName: AppConfig.TIC_WEB.KS_FILE_NAME,
             logFileName: AppConfig.TIC_WEB.LOG_FILE_NAME,

diff --git a/public/src/js/widget/JobLog.js b/public/src/js/widget/JobLog.js
index 263ab49..9decd49 100644 (file)
--- a/public/src/js/widget/JobLog.js
+++ b/public/src/js/widget/JobLog.js
@@ -31,7 +31,7 @@ define([
             log: this.msg
         });
         logViewId = 'extended_job_table_row_' + this.jobId;
-        logViewElem = $('[id='+logViewId+'] > td');
+        logViewElem = $('[id='+logViewId+'] > td > div');
         logViewElem.append(this.template);
         logViewElem.animate({
             scrollTop: logViewElem.prop('scrollHeight')

diff --git a/public/src/js/widget/JobTableItem.js b/public/src/js/widget/JobTableItem.js
index 2e0c317..ed335d3 100644 (file)
--- a/public/src/js/widget/JobTableItem.js
+++ b/public/src/js/widget/JobTableItem.js
@@ -17,13 +17,12 @@ define([
         '<tr id="job_table_row_<%= jobNum %>">',
             '<td><%= jobNum %></td>',
             '<td><%= jobStatus %></td>',
-            '<td><%= jobImageName %></td>',
+            '<td><a class="tic-job-list-btn btndownload" href="<%= jobImagePath %>" title="<%= jobImageName %>">Download</a></td>',
             '<td><%= jobImageSize %></td>',
-            '<td><a class="tic-job-list-btn btndownload" href="<%= jobImagePath %>">Download</a></td>',
             '<td><%= jobUptime %></td>',
-            '<td><a class="tic-job-list-btn btncancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobKsPath %>">KS</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobLogPath %>">Log</a></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" href="<%= jobLogPath %>" title="Log">Log</a></td>',
         '</tr>'
     ];
 
@@ -31,16 +30,17 @@ define([
         '<tr id="job_table_row_<%= jobNum %>">',
             '<td><%= jobNum %></td>',
             '<td><%= jobStatus %></td>',
-            '<td><%= jobImageName %></td>',
+            '<td><a class="tic-job-list-btn btndownload btnnotactive">Download</a></td>',
             '<td><%= jobImageSize %></td>',
-            '<td><a class="tic-job-list-btn btndownload" href="<%= jobImagePath %>">Download</a></td>',
             '<td><%= jobUptime %></td>',
-            '<td><a class="tic-job-list-btn btncancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobKsPath %>">KS</a></td>',
-            '<td><a class="tic-job-list-btn" href="<%= jobLogPath %>">Log</a></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" href="<%= jobLogPath %>" title="Log">Log</a></td>',
         '</tr>',
         '<tr id="extended_job_table_row_<%= jobNum %>" class="extended_job_table_row">',
-            '<td colspan="10">',
+            '<td colspan="10" class="extended_job_table_container">',
+                '<div>',
+                '</div>',
             '</td>',
         '</tr>'
     ];