From fad8f67bf037e4130612536960dd56e31306195f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Gauthier?= <rga@normation.com>
Date: Tue, 21 Feb 2017 14:10:04 +0100
Subject: [PATCH] Work in progress

---
 .../template/dataSourceManagement.html        | 406 +++++++++---------
 .../toserve/datasources/dataSource.js         |   7 +-
 .../toserve/datasources/rudder-datasource.css |  74 ++--
 3 files changed, 248 insertions(+), 239 deletions(-)

diff --git a/src/main/resources/template/dataSourceManagement.html b/src/main/resources/template/dataSourceManagement.html
index e7c67e2..7a5f9b1 100644
--- a/src/main/resources/template/dataSourceManagement.html
+++ b/src/main/resources/template/dataSourceManagement.html
@@ -5,14 +5,17 @@
     <script type="text/javascript" class="lift:DataSourcesResources.js"></script>
   </head>
   <div class="tw-bs" id="datasource" ng-controller="datasourceCtrl">
-    <div class="row">
-      <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
-        <div class="left-container col-xs-12">
-          <div class="page-title">
-            Data sources
-            <button type="button" class="btn btn-success btn-xs" ng-click="createNewDatasource()">New data source <i class="add-icon ion ion-android-add-circle"></i></button>
+    <div class="row small-margin">
+      <div class="col-xs-12 col-lg-3 col-md-4">
+        <div class="box">
+          <div class="box-header with-border">
+            <h3 class="box-title">Data sources</h3>
+            <div class="box-tools pull-right">
+              <button type="button" class="new-icon btn tech btn-success btn-sm" ng-click="createNewDatasource()">New data source</button>
+              <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-chevron-down"></i></button>
+            </div>
           </div>
-          <div id="datasources-tree">
+          <div class="box-body" id="datasources-tree">
             <ul ng-cloak>
               <li ng-repeat="datasource in datasources track by $index" ng-click="selectDatasource(datasource.id)" ng-class="{'datasource-active':datasource.id == selectedDatasource.id}">
                 <h4 class="no-margin">
@@ -25,225 +28,228 @@ <h4 class="no-margin">
           </div>
         </div>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-7 col-lg-8" ng-cloak>
-        <div class="right-container datasource-bloc col-xs-12" ng-if="selectedDatasource">
-          <div class="page-title">
-            <span ng-if="selectedDatasource.name.length>0">{{selectedDatasource.name}}</span>
-            <span ng-if="!selectedDatasource.name && selectedDatasource.isNew">New data source</span>
-            <span ng-if="!selectedDatasource.name && !selectedDatasource.isNew" style="font-style:italic; color:#777;">Unnamed</span>
+      <div class="col-xs-12 col-lg-9 col-md-8" ng-cloak>
+        <div class="box" ng-if="selectedDatasource">
+          <div class="box-header with-border">
+            <h3 class="box-title">
+              <span ng-if="selectedDatasource.name.length>0">{{selectedDatasource.name}}</span>
+              <span ng-if="!selectedDatasource.name && selectedDatasource.isNew">New data source</span>
+              <span ng-if="!selectedDatasource.name && !selectedDatasource.isNew" style="font-style:italic; color:#777;">Unnamed</span>
+            </h3>
           </div>
-          <!-- <h3 class="section-title">Data source information</h3> -->
-          <form class="bloc-body show-details" name="forms.datasourceForm">
-            <div class="form-group">
-              <label for="name">Name</label>
-              <input type="text" class="form-control" id="name" ng-value="selectedDatasource.name" name="datasourceName" required ng-model="selectedDatasource.name" ng-change="updateKeyName(selectedDatasource.name)">
-              <span class="text-danger" ng-show="forms.datasourceForm.datasourceName.$error.required && forms.datasourceForm.datasourceName.$dirty">Name is required</span>
-            </div>
-            <div class="form-group">
-              <label for="key">Key name</label>
-              <div class="group-warning" ng-show="selectedDatasource.isNew"><span class="fa fa-info-circle"></span>Key name cannot be modified after creation.</div>
-              <input type="text" class="form-control has-example-help" id="key" name="datasourceKey" ng-value="selectedDatasource.id" required ng-model="selectedDatasource.id" ng-if="selectedDatasource.isNew" ng-change="updateKeyName(selectedDatasource.id)">
-              <input type="text" disabled class="form-control has-example-help" ng-if="!selectedDatasource.isNew" ng-value="selectedDatasource.id" ng-model="selectedDatasource.id"/>
-              <div class="example-help">
-                The key name will be used to access imported data, such as <pre>${node.properties[{{selectedDatasource.id ? selectedDatasource.id : "key_name"}}]}</pre>
+          <div class="box-body" id="datasource-details">
+            <form class="bloc-body show-details" name="forms.datasourceForm">
+              <div class="form-group">
+                <label for="name">Name</label>
+                <input type="text" class="form-control" id="name" ng-value="selectedDatasource.name" name="datasourceName" required ng-model="selectedDatasource.name" ng-change="updateKeyName(selectedDatasource.name)">
+                <span class="text-danger" ng-show="forms.datasourceForm.datasourceName.$error.required && forms.datasourceForm.datasourceName.$dirty">Name is required</span>
               </div>
-              <span class="text-danger" ng-show="forms.datasourceForm.datasourceKey.$error.required && forms.datasourceForm.datasourceKey.$dirty">Key name is required</span>
-            </div>
-            <div class="form-group">
-              <label for="description" class="optional">Description</label>
-              <textarea class="form-control" id="description" ng-value="selectedDatasource.description" ng-model="selectedDatasource.description"></textarea>
-            </div>
-            <div class="form-group">
-              <label class="bloc">Type</label>
-              <div class="btn-group" data-toggle="buttons">
-                <label class="btn btn-default active disabled">HTTP</label>
+              <div class="form-group">
+                <label for="key">Key name</label>
+                <div class="group-warning" ng-show="selectedDatasource.isNew"><span class="fa fa-info-circle"></span>Key name cannot be modified after creation.</div>
+                <input type="text" class="form-control has-example-help" id="key" name="datasourceKey" ng-value="selectedDatasource.id" required ng-model="selectedDatasource.id" ng-if="selectedDatasource.isNew" ng-change="updateKeyName(selectedDatasource.id)">
+                <input type="text" disabled class="form-control has-example-help" ng-if="!selectedDatasource.isNew" ng-value="selectedDatasource.id" ng-model="selectedDatasource.id"/>
+                <div class="example-help">
+                  The key name will be used to access imported data, such as <pre>${node.properties[{{selectedDatasource.id ? selectedDatasource.id : "key_name"}}]}</pre>
+                </div>
+                <span class="text-danger" ng-show="forms.datasourceForm.datasourceKey.$error.required && forms.datasourceForm.datasourceKey.$dirty">Key name is required</span>
               </div>
-            </div>
-            <div class="form-group">
-              <label class="bloc">Method</label>
-              <div class="btn-group">
-                <label class="btn btn-default btn-radio" for="get" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='GET'}">
-                  <input type="radio" id="get" ng-model="selectedDatasource.type.parameters.requestMethod" value="GET"> GET
-                </label>
-                <label class="btn btn-default btn-radio" for="post" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='POST'}">
-                  <input type="radio" id="post" ng-model="selectedDatasource.type.parameters.requestMethod" value="POST"> POST
-                </label>
+              <div class="form-group">
+                <label for="description" class="optional">Description</label>
+                <textarea class="form-control" id="description" ng-value="selectedDatasource.description" ng-model="selectedDatasource.description"></textarea>
               </div>
-            </div>
-            <div class="form-group" ng-show="selectedDatasource.type.parameters.requestMethod=='POST'">
-              <label><a ng-click="toggleWell($event)">Parameters<span class="fa fa-chevron-right"></span></a></label>
-              <div class="well" style="display:none">
-                <div class="group-warning" ng-hide="selectedDatasource.type.parameters.params.length>0"><span class="fa fa-info-circle"></span>No parameters defined for this data source.</div>
-                <div class="input-group group-header" ng-repeat="param in selectedDatasource.type.parameters.params track by $index">
-                  <input type="text" class="form-control" ng-model="param.name">
-                  <span class="input-group-addon">:</span>
-                  <input type="text" class="form-control" ng-model="param.value">
-                  <span class="input-group-btn">
-                    <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.params, $index)"><span class="fa fa-minus"></span></button>
-                  </span>
+              <div class="form-group">
+                <label class="bloc">Type</label>
+                <div class="btn-group" data-toggle="buttons">
+                  <label class="btn btn-default active disabled">HTTP</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="bloc">Method</label>
+                <div class="btn-group">
+                  <label class="btn btn-default btn-radio" for="get" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='GET'}">
+                    <input type="radio" id="get" ng-model="selectedDatasource.type.parameters.requestMethod" value="GET"> GET
+                  </label>
+                  <label class="btn btn-default btn-radio" for="post" ng-class="{'active':selectedDatasource.type.parameters.requestMethod=='POST'}">
+                    <input type="radio" id="post" ng-model="selectedDatasource.type.parameters.requestMethod" value="POST"> POST
+                  </label>
                 </div>
-                <div class="new-headers">
-                  <div class="input-group group-header">
-                    <input type="text" class="form-control " ng-value="selectedDatasource.newParam.name" ng-model="selectedDatasource.newParam.name" placeholder="name">
+              </div>
+              <div class="form-group" ng-show="selectedDatasource.type.parameters.requestMethod=='POST'">
+                <label><a ng-click="toggleWell($event)">Parameters<span class="fa fa-chevron-right"></span></a></label>
+                <div class="well" style="display:none">
+                  <div class="group-warning" ng-hide="selectedDatasource.type.parameters.params.length>0"><span class="fa fa-info-circle"></span>No parameters defined for this data source.</div>
+                  <div class="input-group group-header" ng-repeat="param in selectedDatasource.type.parameters.params track by $index">
+                    <input type="text" class="form-control" ng-model="param.name">
                     <span class="input-group-addon">:</span>
-                    <input type="text" class="form-control " ng-value="selectedDatasource.newParam.value" ng-model="selectedDatasource.newParam.value" placeholder="value">
+                    <input type="text" class="form-control" ng-model="param.value">
                     <span class="input-group-btn">
-                      <button class="btn btn-success " type="button" ng-click="addNewObj(selectedDatasource.type.parameters.params,selectedDatasource.newParam)"><span class="fa fa-plus"></span></button>
+                      <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.params, $index)"><span class="fa fa-minus"></span></button>
                     </span>
                   </div>
+                  <div class="new-headers">
+                    <div class="input-group group-header">
+                      <input type="text" class="form-control " ng-value="selectedDatasource.newParam.name" ng-model="selectedDatasource.newParam.name" placeholder="name">
+                      <span class="input-group-addon">:</span>
+                      <input type="text" class="form-control " ng-value="selectedDatasource.newParam.value" ng-model="selectedDatasource.newParam.value" placeholder="value">
+                      <span class="input-group-btn">
+                        <button class="btn btn-success " type="button" ng-click="addNewObj(selectedDatasource.type.parameters.params,selectedDatasource.newParam)"><span class="fa fa-plus"></span></button>
+                      </span>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="form-group clearfix">
-              <label for="url">URL</label>
-              <input type="text" class="form-control has-example-help" id="url" ng-value="selectedDatasource.type.parameters.url" ng-model="selectedDatasource.type.parameters.url">
-              <div class="example-help">
-                You can use Rudder variable expansion (<pre>${rudder.node.xxx}, ${rudder.param.xxx}, ${node.properties[xxx]}</pre>) here. They will be replaced by their values for each node at the time the HTTP query is run.
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="optional-link"><a ng-click="toggleHeaders('headers',$event);"><b>Headers</b><span class="fa fa-chevron-right"></span></a></label>
-              <div id="headers" class="well" style="display:none;">
-                <div class="group-warning" ng-hide="selectedDatasource.type.parameters.headers.length>0"><span class="fa fa-info-circle"></span>No headers defined for this data source.</div>
-                <div class="input-group group-header" ng-repeat="header in selectedDatasource.type.parameters.headers track by $index">
-                  <input type="text" class="form-control" ng-model="header.name">
-                  <span class="input-group-addon">:</span>
-                  <input type="text" class="form-control" ng-model="header.value">
-                  <span class="input-group-btn">
-                    <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.headers, $index)"><span class="fa fa-minus"></span></button>
-                  </span>
+              <div class="form-group clearfix">
+                <label for="url">URL</label>
+                <input type="text" class="form-control has-example-help" id="url" ng-value="selectedDatasource.type.parameters.url" ng-model="selectedDatasource.type.parameters.url">
+                <div class="example-help">
+                  You can use Rudder variable expansion (<pre>${rudder.node.xxx}, ${rudder.param.xxx}, ${node.properties[xxx]}</pre>) here. They will be replaced by their values for each node at the time the HTTP query is run.
                 </div>
-                <div id="new-headers" class="new-headers">
-                  <div class="input-group group-header">
-                    <input type="text" class="form-control" id="new-header" ng-value="selectedDatasource.newHeader.name" ng-model="selectedDatasource.newHeader.name" placeholder="name">
+              </div>
+              <div class="form-group">
+                <label class="optional-link"><a ng-click="toggleHeaders('headers',$event);"><b>Headers</b><span class="fa fa-chevron-right"></span></a></label>
+                <div id="headers" class="well" style="display:none;">
+                  <div class="group-warning" ng-hide="selectedDatasource.type.parameters.headers.length>0"><span class="fa fa-info-circle"></span>No headers defined for this data source.</div>
+                  <div class="input-group group-header" ng-repeat="header in selectedDatasource.type.parameters.headers track by $index">
+                    <input type="text" class="form-control" ng-model="header.name">
                     <span class="input-group-addon">:</span>
-                    <input type="text" class="form-control" ng-value="selectedDatasource.newHeader.value" ng-model="selectedDatasource.newHeader.value" placeholder="value">
+                    <input type="text" class="form-control" ng-model="header.value">
                     <span class="input-group-btn">
-                      <button class="btn btn-success" type="button" ng-click="addNewObj(selectedDatasource.type.parameters.headers,selectedDatasource.newHeader)"><span class="fa fa-plus"></span></button>
+                      <button class="btn btn-danger" type="button" ng-click="removeObj(selectedDatasource.type.parameters.headers, $index)"><span class="fa fa-minus"></span></button>
                     </span>
                   </div>
+                  <div id="new-headers" class="new-headers">
+                    <div class="input-group group-header">
+                      <input type="text" class="form-control" id="new-header" ng-value="selectedDatasource.newHeader.name" ng-model="selectedDatasource.newHeader.name" placeholder="name">
+                      <span class="input-group-addon">:</span>
+                      <input type="text" class="form-control" ng-value="selectedDatasource.newHeader.value" ng-model="selectedDatasource.newHeader.value" placeholder="value">
+                      <span class="input-group-btn">
+                        <button class="btn btn-success" type="button" ng-click="addNewObj(selectedDatasource.type.parameters.headers,selectedDatasource.newHeader)"><span class="fa fa-plus"></span></button>
+                      </span>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="form-group clearfix">
-              <label for="jsonpath" class="optional">
-                JSON path
-                <span class="fa fa-question-circle icon-info" ng-mouseover="toggleInfo($event, 'show')" ng-mouseout="toggleInfo($event, 'hide')" data-toggle="popover" data-placement="right" data-content="You can also use Rudder variable expansion here. See help for URL above."></span>
-              </label>
-              <div class="input-group">
-                <label class="input-group-addon addon has-example-help" for="jsonpath">$.</label>
-                <input type="text" class="form-control has-example-help" id="jsonpath" ng-value="selectedDatasource.type.parameters.path" ng-model="selectedDatasource.type.parameters.path">
-              </div>
-              <div class="example-help">
-                When a JSON document is returned, you can define a JSON path expression (see <a href="https://github.com/jayway/JsonPath/#getting-started" target="_blank">documentation</a>) to select only a sub-part of the document as the actual data to use as a node property.
-              </div>
-            </div>
-            <div class="form-group">
-              <label><a ng-click="toggleWell($event)">Advanced options <span class="fa fa-chevron-right"></span></a></label>
-              <div class="well options" style="display:none">
-                <ul class="form-group ">
-                  <li class="rudder-form">
-                    <div class="input-group">
-                      <label class="input-group-addon" for="checkSsl">
-                        <input type="checkbox" id="checkSsl" ng-model="selectedDatasource.type.parameters.checkSsl" ng-true-value="false" ng-false-value="true"/>
-                        <label for="checkSsl" class="label-radio">
-                          <span class="ion ion-checkmark-round"></span>
-                        </label>
-                        <span class="ion ion-checkmark-round check-icon"></span>
-                      </label>
-                      <label class="form-control" for="checkSsl">
-                        Ignore SSL certificate validation
-                      </label>
-                    </div>
-                  </li>
-                </ul>
-                <label>HTTP request timeout</label>
-                <div class="input-group group-update-frequency">
-                  <input type="number" class="form-control " id="requesttimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.minute">
-                  <label for="requesttimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.minute<2}">s</span></label>
-                  <input type="number" class="form-control " id="requesttimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.second">
-                  <label for="requesttimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.second<2}">s</span></label>
+              <div class="form-group clearfix">
+                <label for="jsonpath" class="optional">
+                  JSON path
+                  <span class="fa fa-question-circle icon-info" ng-mouseover="toggleInfo($event, 'show')" ng-mouseout="toggleInfo($event, 'hide')" data-toggle="popover" data-placement="right" data-content="You can also use Rudder variable expansion here. See help for URL above."></span>
+                </label>
+                <div class="input-group">
+                  <label class="input-group-addon addon has-example-help" for="jsonpath">$.</label>
+                  <input type="text" class="form-control has-example-help" id="jsonpath" ng-value="selectedDatasource.type.parameters.path" ng-model="selectedDatasource.type.parameters.path">
                 </div>
-                <label>Data source update max duration</label>
-                <div class="input-group group-update-frequency">
-                  <input type="number" class="form-control " id="updatetimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.minute">
-                  <label for="updatetimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.minute<2}">s</span></label>
-                  <input type="number" class="form-control " id="updatetimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.second">
-                  <label for="updatetimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.second<2}">s</span></label>
+                <div class="example-help">
+                  When a JSON document is returned, you can define a JSON path expression (see <a href="https://github.com/jayway/JsonPath/#getting-started" target="_blank">documentation</a>) to select only a sub-part of the document as the actual data to use as a node property.
                 </div>
               </div>
-            </div>
-            <div class="form-group">
-              <label class="bloc"><a ng-click="toggleWell($event)">Update triggers<span class="fa fa-chevron-right"></span></a></label>
-              <div class="well" style="display:none">
-                <ul class="form-group ">
-                  <li class="rudder-form">
-                    <div class="input-group">
-                      <label class="input-group-addon" for="neverUpdate">
-                        <input type="checkbox" id="neverUpdate" ng-model="selectedDatasource.runParameters.schedule.type" ng-true-value="'scheduled'" ng-false-value="'notscheduled'">
-                        <label for="neverUpdate" class="label-radio">
-                          <span class="ion ion-checkmark-round"></span>
+              <div class="form-group">
+                <label><a ng-click="toggleWell($event)">Advanced options <span class="fa fa-chevron-right"></span></a></label>
+                <div class="well options" style="display:none">
+                  <ul class="form-group ">
+                    <li class="rudder-form">
+                      <div class="input-group">
+                        <label class="input-group-addon" for="checkSsl">
+                          <input type="checkbox" id="checkSsl" ng-model="selectedDatasource.type.parameters.checkSsl" ng-true-value="false" ng-false-value="true"/>
+                          <label for="checkSsl" class="label-radio">
+                            <span class="ion ion-checkmark-round"></span>
+                          </label>
+                          <span class="ion ion-checkmark-round check-icon"></span>
                         </label>
-                        <span class="ion ion-checkmark-round check-icon"></span>
-                      </label>
-                      <label class="form-control" for="neverUpdate">
-                        Update periodically - {{selectedDatasource.runParameters.schedule.type}}
-                      </label>
-                    </div>
-                  </li>
-                </ul>
-                <div class="input-group group-update-frequency" ng-hide="selectedDatasource.runParameters.schedule.type=='notscheduled'">
-                  <input type="number" class="form-control " id="updateFrequency-hours" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.hour">
-                  <label for="updateFrequency-hours" class="input-group-addon">hour<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.hour<2}">s</span></label>
-                  <input type="number" class="form-control " id="updateFrequency-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.minute">
-                  <label for="updateFrequency-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.minute<2}">s</span></label>
+                        <label class="form-control" for="checkSsl">
+                          Ignore SSL certificate validation
+                        </label>
+                      </div>
+                    </li>
+                  </ul>
+                  <label>HTTP request timeout</label>
+                  <div class="input-group group-update-frequency">
+                    <input type="number" class="form-control " id="requesttimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.minute">
+                    <label for="requesttimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.minute<2}">s</span></label>
+                    <input type="number" class="form-control " id="requesttimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.requestTimeout.second">
+                    <label for="requesttimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.requestTimeout.second<2}">s</span></label>
+                  </div>
+                  <label>Data source update max duration</label>
+                  <div class="input-group group-update-frequency">
+                    <input type="number" class="form-control " id="updatetimeout-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.minute">
+                    <label for="updatetimeout-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.minute<2}">s</span></label>
+                    <input type="number" class="form-control " id="updatetimeout-seconds" ng-min="0" ng-model="selectedDatasource.modifiedTimes.updateTimeout.second">
+                    <label for="updatetimeout-seconds" class="input-group-addon">second<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.updateTimeout.second<2}">s</span></label>
+                  </div>
                 </div>
-                <ul class="form-group ">
-                  <li class="rudder-form">
-                    <div class="input-group">
-                      <label class="input-group-addon" for="onGeneration">
-                        <input type="checkbox" id="onGeneration" ng-model="selectedDatasource.runParameters.onGeneration" ng-checked="selectedDatasource.runParameters.onGeneration">
-                        <label for="onGeneration" class="label-radio">
-                          <span class="ion ion-checkmark-round"></span>
+              </div>
+              <div class="form-group">
+                <label class="bloc"><a ng-click="toggleWell($event)">Update triggers<span class="fa fa-chevron-right"></span></a></label>
+                <div class="well" style="display:none">
+                  <ul class="form-group ">
+                    <li class="rudder-form">
+                      <div class="input-group">
+                        <label class="input-group-addon" for="neverUpdate">
+                          <input type="checkbox" id="neverUpdate" ng-model="selectedDatasource.runParameters.schedule.type" ng-true-value="'scheduled'" ng-false-value="'notscheduled'">
+                          <label for="neverUpdate" class="label-radio">
+                            <span class="ion ion-checkmark-round"></span>
+                          </label>
+                          <span class="ion ion-checkmark-round check-icon"></span>
                         </label>
-                        <span class="ion ion-checkmark-round check-icon"></span>
-                      </label>
-                      <label class="form-control" for="onGeneration">
-                        Update when a policy generation starts
-                      </label>
-                    </div>
-                  </li>
-                  <li class="rudder-form">
-                    <div class="input-group">
-                      <label class="input-group-addon" for="onNewNode">
-                        <input type="checkbox" id="onNewNode" ng-model="selectedDatasource.runParameters.onNewNode" ng-checked="selectedDatasource.runParameters.onNewNode">
-                        <label for="onNewNode" class="label-radio">
-                          <span class="ion ion-checkmark-round"></span>
+                        <label class="form-control" for="neverUpdate">
+                          Update periodically - {{selectedDatasource.runParameters.schedule.type}}
                         </label>
-                        <span class="ion ion-checkmark-round check-icon"></span>
-                      </label>
-                      <label class="form-control" for="onNewNode">
-                        Update when a new node is accepted
-                      </label>
-                    </div>
-                  </li>
-                </ul>
+                      </div>
+                    </li>
+                  </ul>
+                  <div class="input-group group-update-frequency" ng-hide="selectedDatasource.runParameters.schedule.type=='notscheduled'">
+                    <input type="number" class="form-control " id="updateFrequency-hours" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.hour">
+                    <label for="updateFrequency-hours" class="input-group-addon">hour<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.hour<2}">s</span></label>
+                    <input type="number" class="form-control " id="updateFrequency-minutes" ng-min="0" ng-model="selectedDatasource.modifiedTimes.schedule.minute">
+                    <label for="updateFrequency-minutes" class="input-group-addon">minute<span ng-class="{'invisible' : selectedDatasource.modifiedTimes.schedule.minute<2}">s</span></label>
+                  </div>
+                  <ul class="form-group ">
+                    <li class="rudder-form">
+                      <div class="input-group">
+                        <label class="input-group-addon" for="onGeneration">
+                          <input type="checkbox" id="onGeneration" ng-model="selectedDatasource.runParameters.onGeneration" ng-checked="selectedDatasource.runParameters.onGeneration">
+                          <label for="onGeneration" class="label-radio">
+                            <span class="ion ion-checkmark-round"></span>
+                          </label>
+                          <span class="ion ion-checkmark-round check-icon"></span>
+                        </label>
+                        <label class="form-control" for="onGeneration">
+                          Update when a policy generation starts
+                        </label>
+                      </div>
+                    </li>
+                    <li class="rudder-form">
+                      <div class="input-group">
+                        <label class="input-group-addon" for="onNewNode">
+                          <input type="checkbox" id="onNewNode" ng-model="selectedDatasource.runParameters.onNewNode" ng-checked="selectedDatasource.runParameters.onNewNode">
+                          <label for="onNewNode" class="label-radio">
+                            <span class="ion ion-checkmark-round"></span>
+                          </label>
+                          <span class="ion ion-checkmark-round check-icon"></span>
+                        </label>
+                        <label class="form-control" for="onNewNode">
+                          Update when a new node is accepted
+                        </label>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="datasource-toolbar box-footer with-border">
+            <div class="btn-toolbar" role="toolbar"  ng-if="selectedDatasource">
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-danger" ng-click="deleteDatasource()" ng-if="!selectedDatasource.isNew">Delete</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default" ng-hide="selectedDatasource.isNew" ng-click="toggleEnabled()">{{selectedDatasource.enabled ? 'Disable' : 'Enable'}}</button>
+              </div>
+              <div class="btn-group pull-right" role="group">
+                <button type="button" class="btn btn-default" ng-click="selectDatasource(selectedDatasource.id)" ng-if="!selectedDatasource.isNew">Reset</button>
+                <button type="button" class="btn btn-default" ng-click="createNewDatasource()" ng-if="selectedDatasource.isNew">Reset</button>
+                <button type="button" class="btn btn-success" ng-click="saveDatasource()" ng-disabled="!forms.datasourceForm.$valid" >Save</button>
               </div>
-            </div>
-          </form>
-        </div>
-        <div class="datasource-toolbar col-xs-12" ng-if="selectedDatasource">
-          <div class="btn-toolbar" role="toolbar">
-            <div class="btn-group" role="group">
-              <button type="button" class="btn btn-danger" ng-click="deleteDatasource()" ng-if="!selectedDatasource.isNew">Delete</button>
-            </div>
-            <div class="btn-group" role="group">
-              <button type="button" class="btn btn-default" ng-hide="selectedDatasource.isNew" ng-click="toggleEnabled()">{{selectedDatasource.enabled ? 'Disable' : 'Enable'}}</button>
-            </div>
-            <div class="btn-group pull-right" role="group">
-              <button type="button" class="btn btn-default" ng-click="selectDatasource(selectedDatasource.id)" ng-if="!selectedDatasource.isNew">Reset</button>
-              <button type="button" class="btn btn-default" ng-click="createNewDatasource()" ng-if="selectedDatasource.isNew">Reset</button>
-              <button type="button" class="btn btn-success" ng-click="saveDatasource()" ng-disabled="!forms.datasourceForm.$valid" >Save</button>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/toserve/datasources/dataSource.js b/src/main/resources/toserve/datasources/dataSource.js
index 084faa3..9c15ff6 100644
--- a/src/main/resources/toserve/datasources/dataSource.js
+++ b/src/main/resources/toserve/datasources/dataSource.js
@@ -184,6 +184,7 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
     var getDatasource = $scope.getDatasource(id);
     if(getDatasource){
       $scope.selectedDatasource = jQuery.extend(true, {}, getDatasource);
+      $timeout(function(){adjustHeight("#datasource-details", ".datasource-toolbar", true)},0);
     }
   }
   $scope.deleteDatasource = function(){
@@ -237,7 +238,7 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
     el.find('.fa').toggleClass('fa-rotate-90');
     el.parent().parent().find('.well').toggle();
   }
-  adjustHeight($scope.treeId, true);
+  adjustHeight($scope.treeId, false, true);
 }]);
 
 function convertFromSecond(time) {
@@ -272,5 +273,9 @@ function objToArray(obj){
 
 $(document).ready(function(){
   angular.bootstrap('#datasource', ['datasource']);
+  $(window).on('resize',function(){
+    adjustHeight("#datasources-tree", false, true);
+    adjustHeight("#datasource-details", ".datasource-toolbar", true);
+  });
 });
 
diff --git a/src/main/resources/toserve/datasources/rudder-datasource.css b/src/main/resources/toserve/datasources/rudder-datasource.css
index 3e8f57c..5179032 100644
--- a/src/main/resources/toserve/datasources/rudder-datasource.css
+++ b/src/main/resources/toserve/datasources/rudder-datasource.css
@@ -34,6 +34,11 @@
 *
 *************************************************************************************
 */
+@media screen and (min-width: 992px){
+  .box{
+    margin-bottom:0;
+  }
+}
 @media screen and (min-width: 768px){
   .tw-bs .jumbotron.jumbotron-datasource h1{
     font-size:55px;
@@ -89,10 +94,6 @@
   padding-right: 30px;
   padding-left: 30px;
 }
-.datasource-toolbar > .btn-toolbar{
-  position:relative;
-  top:7px;
-}
 .datasource-toolbar > .btn-toolbar > .btn-group > .btn{
   min-width:80px;
 }
@@ -108,15 +109,10 @@
 .datasource-bloc > .bloc-body.show-details{
   height: auto;
 }
-.datasource-bloc > .bloc-body form{
-  height: auto;
-  max-height: 700px;
-  overflow: auto;
-  margin-left: -15px;
-  margin-right: -15px;
-  padding: 0 15px;
+#datasource-details{
+  overflow:auto;
 }
-.datasource-bloc > .bloc-body .new-headers{
+.box-body .new-headers{
   margin-top: 10px;
   border-top: 1px solid #e6e6e6;
   padding-top: 10px
@@ -127,15 +123,15 @@
 #new-headers .input-group.group-header,.new-headers .input-group.group-header{
   margin-bottom:0;
 }
-.datasource-bloc > .bloc-body .group-warning{
+.box-body .group-warning{
   color: #777;
   margin-bottom: 6px;
 }
-.datasource-bloc > .bloc-body .group-warning > span{
+.box-body .group-warning > span{
   font-size: 16px;
   margin-right: 6px;
 }
-.datasource-bloc > .bloc-body .input-group.group-header .form-control:first-child{
+.box-body .input-group.group-header .form-control:first-child{
   border-right:none;
 }
 .tw-bs .input-group-addon.addon{
@@ -143,27 +139,27 @@
   border-bottom-left-radius:4px;
   background-color:#f4f4f4;
 }
-.datasource-bloc > .bloc-body .input-group.group-header .input-group-addon + .form-control{
+.box-body .input-group.group-header .input-group-addon + .form-control{
   border-left:none;
 }
-.datasource-bloc > .bloc-body .input-group.group-header .form-control + .input-group-addon {
+.box-body .input-group.group-header .form-control + .input-group-addon {
   border-color: #d0d0d0;
   background-color: #f4f4f4;
 }
-.datasource-bloc > .bloc-body .input-group.group-header .form-control[disabled] + .input-group-addon {
+.box-body .input-group.group-header .form-control[disabled] + .input-group-addon {
   border-color: #d0d0d0;
   background-color: #e6e6e6;
 }
-.datasource-bloc > .bloc-body .input-group.group-update-frequency{
+.box-body .input-group.group-update-frequency{
   display:flex;
   margin-bottom:8px;
   max-width: 450px;
   width: 100%;
 }
-.datasource-bloc > .bloc-body .input-group.group-update-frequency > .form-control{
+.box-body .input-group.group-update-frequency > .form-control{
   text-align:right;
 }
-.datasource-bloc > .bloc-body .input-group.group-update-frequency > .input-group-addon{
+.box-body .input-group.group-update-frequency > .input-group-addon{
   width: auto;
   padding: 6px 4px;
   border-color: #d0d0d0;
@@ -172,16 +168,17 @@
   border-right: none;
   margin-bottom:0;
 }
-.datasource-bloc > .bloc-body .input-group.group-update-frequency > .form-control[disabled] + .input-group-addon{
+.box-body .input-group.group-update-frequency > .form-control[disabled] + .input-group-addon{
   background-color: #e6e6e6;
 }
-.datasource-bloc > .bloc-body .input-group.group-update-frequency > .input-group-addon:last-child{
+.box-body .input-group.group-update-frequency > .input-group-addon:last-child{
   border-right: 1px solid #d0d0d0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.datasource-bloc > .bloc-body label{
+.box-body label{
   cursor:pointer;
+  color: #555;
 }
 label.optional,label.optional-link > a > b{
 	font-weight: normal !important;
@@ -206,54 +203,54 @@ label.optional.option-span > span:after{
 .option-disabled{
   font-size
 }
-.datasource-bloc > .bloc-body label.bloc{
+.box-body label.bloc{
   display:block;
   cursor:default;
 }
-.datasource-bloc > .bloc-body label a{
+.box-body label a{
   color:#555;
   text-decoration:none !important;
 }edit:hover
-.datasource-bloc > .bloc-body label a:hover{
+.box-body label a:hover{
   color:#333;
 }
-.datasource-bloc > .bloc-body label a span{
+.box-body label a span{
   top: 0;
   position: relative;
   transition-duration:.2s;
   margin-left: 6px;
   font-size: 12px;
 }
-.datasource-bloc > .bloc-body .btn-radio.active{
+.box-body .btn-radio.active{
   cursor:default;
   color:#fff;
   background-color: #9bc832;
   border-color: #7b9e28;
   box-shadow: none;
 }
-.datasource-bloc > .bloc-body .btn-radio.active[disabled]{
+.box-body .btn-radio.active[disabled]{
   cursor: not-allowed;
 }
-.datasource-bloc > .bloc-body .group-test{
+.box-body .group-test{
   margin: 15px -15px;
   border-top: 1px solid #e6e6e6;
   padding-top: 15px;
 }
-.datasource-bloc > .bloc-body .group-test .btn{
+.box-body .group-test .btn{
   width: 100%;
   padding: 8px 16px;
   font-size: 16px;
   line-height: 1.3;
 }
-.datasource-bloc > .bloc-body .group-test .btn .fa-spin{
+.box-body .group-test .btn .fa-spin{
   margin-left:5px;
 }
-.datasource-bloc > .bloc-body .actions{
+.box-body .actions{
   text-align: right;
   padding: 10px 15px;
   border-top: 1px solid #ddd;
 }
-.datasource-bloc > .bloc-body .actions .btn{
+.box-body .actions .btn{
   min-width:60px;
 }
 /* EXAMPLE */
@@ -316,7 +313,7 @@ a.btn-example.show:after{
   top: 1px;
   position: relative;
 }
-.datasource-bloc > .bloc-body .input-group-btn:last-child > .btn{
+.box-body .input-group-btn:last-child > .btn{
   margin-left:0 !important;
 }
 
@@ -420,8 +417,6 @@ span.type{
 #datasources-tree{
   overflow-x:hidden;
   overflow-y:auto;
-  margin-right: -15px;
-  padding-right: 15px;
 }
 #datasources-tree li{
   padding: 10px;
@@ -533,4 +528,7 @@ ul > li.rudder-form > .input-group.disabled *{
   background-color: #efefef;
   border-color: #cecece;
   box-shadow: inset 0 3px 3px rgba(0,0,0,.125);
+}
+.box-footer.with-border{
+  border-top-color:#e2e2e2 !important;
 }
\ No newline at end of file