- Added feature : Import service tags from JSON file.

- Added feature : Check all services buttons, check all pushed checkboxes.
vagharsh · Dec 21, 2017 · 1461447 · 1461447
1 parent b70e374
commit 1461447
Show file tree

Hide file tree

Showing 6 changed files with 340 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Need to know
 
 Demo
 ------
-![Dashboard](https://image.ibb.co/cccHKb/Capture.png "Dashboard")
+![Dashboard](https://image.ibb.co/ifZsh6/dashboard.png "Dashboard")
 
 Quick Start
 -----------
@@ -66,8 +66,9 @@ $title = "Deploy Micro-Services";
 
 Release Notes
 ---------
-v 1.2
-- Added connection check and a warning message if no connection.
+v 1.3
+- Added feature : Import service tags from JSON file.
+- Added feature : Check all services buttons, check all pushed checkboxes.
 
 Release notes are available [here](release.md).
 

diff --git a/backend/version b/backend/version
@@ -1 +1 @@
-v1.2
+v1.3
diff --git a/index.php b/index.php
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="lib/css/style.css">
 </head>
 <body>
-<div class="container" style="padding-top: 30px">
+<div class="container" style="padding-top: 20px">
     <div class="col-md-12">
         <div class="row">
             <div class="form-group">
@@ -23,9 +23,12 @@
                     <select id="projectSelector" class="form-control"></select>
                 </div>
 
-                <div class="col-sm-5">
+                <div class="col-sm-6">
                     <button disabled class="btn btn-primary submitButton"><?php echo $JenkinsJobShortTitle; ?></button>
                     <button disabled class="btn btn-info bulkDeploySpinnaker">Bulk deploy to Spinnaker</button>
+                    <button class="btn btn-default" data-toggle="modal" data-target="#importJSONModalId">Import tags via
+                        JSON
+                    </button>
                 </div>
             </div>
         </div>
@@ -38,19 +41,20 @@
         </div>
         <div class="row">
             <div class="col-md-2">
-                <label>Service Name</label>
+                <label>Service Name </label> <span id="selectAllSvcId" class='glyphicon glyphicon-unchecked'></span>
             </div>
             <div class="col-md-1">
                 <label>Image Tag</label>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4" style="margin-right: -10px!important;">
                 <label>Image Group to be pushed</label>
             </div>
             <div class="col-md-1">
                 <label>Status</label>
             </div>
             <div class="col-md-1">
-                <label>Pushed</label>
+                <label>Pushed</label> <span id="selectAllPushedId"
+                                            class='glyphicon glyphicon-unchecked disabled'></span>
             </div>
             <div class="col-md-2">
                 <label>Deploy to Spinnaker</label>
@@ -113,6 +117,35 @@
         </div>
     </div>
 </div>
+<div class="modal fade" id="importJSONModalId" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span>
+                </button>
+                <h4 class="modal-title"><strong>Import tags via JSON</strong></h4>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="jsonInputFile">Browse JSON file : </label>
+                        <input type="file" class="form-control" id="jsonInputFile">
+                    </div>
+                    <button type="button" id="importJSONBtnId" class="btn btn-info">Import</button>
+                </form>
+                <br>
+                <span>JSON syntax example</span>
+                <pre>{
+    "demoservice1" : "1.2.1",
+    "demoservice2" : "1.2.1"
+}</pre>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
 <footer id="pageFooter">
     <div class="container">
         <p class="navbar-text">Jen2Spinnaker <?php echo $jen2SpinnakerVersion; ?></p>

diff --git a/lib/js/functions.js b/lib/js/functions.js
@@ -1,6 +1,7 @@
 function checkSubmit(){
     var btns = $('button[name*=short]'),
-        btnsCount = 0;
+        btnsCount = 0,
+        pushedCheckBoxALl = $('#selectAllPushedId');
 
     $.each(btns, function (key, item) {
         if ($(item).hasClass('btn-primary')){
@@ -9,8 +10,12 @@ function checkSubmit(){
     });
     if (btnsCount === 0){
         $('.submitButton').attr('disabled', true);
+        pushedCheckBoxALl.addClass('disabled');
+        pushedCheckBoxALl.removeClass('glyphicon-check');
+        pushedCheckBoxALl.addClass('glyphicon-unchecked');
     } else {
         $('.submitButton').attr('disabled', false);
+        pushedCheckBoxALl.removeClass('disabled');
     }
 }
 
@@ -222,49 +227,44 @@ function getPipelines(pipelineConfig, applications_count, count){
     $(".svcBtnEnabler").unbind('click');
     $(".tagField").unbind('click');
 
-    $.ajax({
-        url: "http://localhost:8084//applications/"+ pipelineConfig['application'] +"/pipelineConfigs/" + pipelineConfig['name'],
-        type: 'get'
-    }).success(function (item) {
-        var pipeline = pipelineConfig['name'],
-            pipelineId = pipelineConfig['id'],
-            pipelineConfigId = pipelineConfig['pipelineConfigId'],
-            repository = pipelineConfig['repository'],
-            application_name = pipelineConfig['application'],
-            rowContent = "\
-                <div class=\"form-group\">\
-                    <div class=\"row\">\
-                        <div class=\"col-md-2\">\
-                            <button class=\"btn btn-default svcBtnEnabler btn-block\" type=\"button\" name=\"short\" data-toggle=\"button\" aria-pressed=\"false\"><span class=\"pull-left\">" + application_name + "</span></button>\
-                        </div>\
-                        <div class=\"col-md-1\">\
-                            <input class=\"form-control editableField tagField\" required name=\"image_tag[]\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"This field is required\" placeholder=\"Tag\" disabled>\
-                        </div>\
-                        <div class=\"col-md-4\">\
-                            <input class=\"form-control editableField image_group\" name=\"image_group[]\" disabled value='" + repository + "'>\
-                        </div>\
-                        <div class=\"col-md-1\">\
-                            <a href=\"#\" class=\"btn btn-default btn-block disabled\" role=\"button\"><span class='glyphicon glyphicon-refresh'></span></a>\
-                        </div>\
-                        <div class=\"col-md-1\">\
-                            <a href=\"#\" class=\"btn btn-default btn-block disabled checkbox-btn\" role=\"button\">\
-                                <span class='glyphicon glyphicon-unchecked'></span>\
-                                <input class='checkbox-inp hidden' type=\"checkbox\">\
-                            </a>\
-                        </div>\
-                        <div class=\"col-md-2\">\
-                            <a href=\"#\" class=\"btn btn-primary btn-block disabled\" role=\"button\">Deploy to Spinnaker</a>\
-                            <button class=\"btn btn-primary btn-block hidden deployToSpinnaker\" data-pipeline-id=\"" + pipelineId + "\" data-pipeline=\"" + pipeline + "\">Deploy to Spinnaker</button>\
-                        </div>\
-                        <div class=\"col-md-1\">\
-                            <a href=\"#\" class=\"btn btn-warning btn-block disabled\" role=\"button\"><span class='glyphicon glyphicon-menu-hamburger'></span></a>\
-                            <button class=\"btn btn-warning btn-block hidden retrieveLogs\"><span class='glyphicon glyphicon-menu-hamburger'></span></button>\
-                        </div>\
+    var pipeline = pipelineConfig['name'],
+        pipelineId = pipelineConfig['id'],
+        pipelineConfigId = pipelineConfig['pipelineConfigId'],
+        repository = pipelineConfig['repository'],
+        application_name = pipelineConfig['application'],
+        rowContent = "\
+            <div class=\"form-group\">\
+                <div class=\"row\">\
+                    <div class=\"col-md-2\">\
+                        <button class=\"btn btn-default svcBtnEnabler btn-block\" type=\"button\" name=\"short\" data-toggle=\"button\" aria-pressed=\"false\"><span class=\"pull-left\">" + application_name + "</span></button>\
                     </div>\
-                </div>";
-        $('#serviceList').append(rowContent);
-        changeProgress(applications_count, count)
-    })
+                    <div class=\"col-md-1\">\
+                        <input class=\"form-control editableField tagField\" required name=\"image_tag[]\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"This field is required\" placeholder=\"Tag\" disabled>\
+                    </div>\
+                    <div class=\"col-md-4\">\
+                        <input class=\"form-control editableField image_group\" name=\"image_group[]\" disabled value='" + repository + "'>\
+                    </div>\
+                    <div class=\"col-md-1\">\
+                        <a href=\"#\" class=\"btn btn-default btn-block disabled\" role=\"button\"><span class='glyphicon glyphicon-refresh'></span></a>\
+                    </div>\
+                    <div class=\"col-md-1\">\
+                        <a href=\"#\" class=\"btn btn-default btn-block disabled checkbox-btn\" role=\"button\">\
+                            <span class='glyphicon glyphicon-unchecked'></span>\
+                            <input class='checkbox-inp hidden' type=\"checkbox\">\
+                        </a>\
+                    </div>\
+                    <div class=\"col-md-2\">\
+                        <a href=\"#\" class=\"btn btn-primary btn-block disabled\" role=\"button\">Deploy to Spinnaker</a>\
+                        <button class=\"btn btn-primary btn-block hidden deployToSpinnaker\" data-pipeline-id=\"" + pipelineId + "\" data-pipeline=\"" + pipeline + "\">Deploy to Spinnaker</button>\
+                    </div>\
+                    <div class=\"col-md-1\">\
+                        <a href=\"#\" class=\"btn btn-warning btn-block disabled\" role=\"button\"><span class='glyphicon glyphicon-menu-hamburger'></span></a>\
+                        <button class=\"btn btn-warning btn-block hidden retrieveLogs\"><span class='glyphicon glyphicon-menu-hamburger'></span></button>\
+                    </div>\
+                </div>\
+            </div>";
+    $('#serviceList').append(rowContent);
+    changeProgress(applications_count, count)
 }
 
 function getProjects(){
@@ -284,4 +284,25 @@ function getProjects(){
         })
         $('#projectSelector').trigger('change');
     })
+}
+
+function svcEnablerFn(status, imageTag, imageGroupInp, that, pushedImageCheck, spinnakerLogBtn) {
+    if (status) {
+        that.removeClass('btn-default');
+        that.addClass('btn-primary');
+        imageTag.removeAttr('disabled');
+        imageGroupInp.removeAttr('disabled');
+    } else {
+        that.removeClass('btn-primary');
+        that.addClass('btn-default');
+        imageTag.val('');
+        imageTag.attr('disabled', true);
+        imageGroupInp.attr('disabled', true);
+        pushedImageCheck.find('a').addClass('disabled');
+        pushedImageCheck.find('input').prop("checked", false);
+        pushedImageCheck.find('input').attr("checked", false);
+        checkBoxBtnBehaviour(pushedImageCheck.find('a'))
+        enableBulkDeploy();
+        SpinnakerLogBtnBehaviour(spinnakerLogBtn, 'disable')
+    }
 }