Support adding properties to a Config Admin PID, for #355

hawtio · Jun 20, 2013 · 762856e · 762856e
1 parent 2906ef8
commit 762856e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/hawtio-web/src/main/webapp/app/osgi/html/pid-details.html b/hawtio-web/src/main/webapp/app/osgi/html/pid-details.html
@@ -10,21 +10,47 @@ <h4>Configuration Admin PID: {{pid}}</h4>
         <tr ng-repeat="(Key, Value) in row">
             <td id="pid.{{Key}}"><strong>{{Key}}</strong></td>
             <td onclick="Osgi.editPidValueCell(this)" class="pid-value">{{Value.Value}}</td>
-            <td><button class="btn" ng-click="deletePidProp(this)">Delete</button></td>
+            <td><button class="btn" ng-click="deletePidProp(this)" title="Delete"><i class="icon-trash"></i></button></td>
         </tr>
     </table>
 
+    <button class="btn btn-primary" ng-click="addPropertyDialog.open()">Add</button>
     <button id="saveButton" class="btn btn-primary" disabled="disabled" ng-click="pidSave()">Save</button>
 
     <div modal="deleteConfirmDialog.show" close="deleteConfirmDialog.close()" options="deleteConfirmDialog.options">
-        <form class="form-horizontal no-bottom-margin" ng-submit="deleteConfirmDialog.close()">
+        <form name="deleteProperty" class="form-horizontal no-bottom-margin" ng-submit="deletePidPropConfirmed()">
             <div class="modal-header"><h4>Delete property '{{deleteKey}}'</h4></div>
             <div class="modal-body">
                 <p>Are you sure?</p>
             </div>
             <div class="modal-footer">
-                <input class="btn" ng-click="editDialog.close()" type="submit" value="Cancel">
-                <input class="btn btn-primary" ng-click="deletePidPropConfirmed(de)" type="submit" value="OK">
+                <input class="btn btn-success" type="submit" value="Delete">
+                <input class="btn btn-primary" ng-click="deleteConfirmDialog.close()" type="button" value="Cancel">
+            </div>
+        </form>
+    </div>
+
+    <div modal="addPropertyDialog.show" close="addPropertyDialog.close()" options="addPropertyDialog.options">
+        <form name="addProperty" class="form-horizontal no-bottom-margin" ng-submit="addPropertyConfirmed(addPropKey, addPropValue)">
+            <div class="modal-header"><h4>Add property</h4></div>
+            <div class="modal-body">
+                <div class="control-group">
+                    <label class="control-label" for="propKey">Key</label>
+                    <div class="controls">
+                        <input class="input-xlarge" type="text" id="propKey" placeholder="Key" ng-model="addPropKey" />
+                        <span class="help-block" ng-hide="addPropKey !== '' && addPropKey !== undefined">A key must be specified</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="propValue">Value</label>
+                    <div class="controls">
+                        <input class="input-xlarge" type="text" id="propValue" placeholder="Value" ng-model="addPropValue" />
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <input class="btn btn-success" ng-disabled="!(addPropKey !== '' && addPropKey !== undefined)" type="submit" value="Add">
+                <input class="btn btn-primary" ng-click="addPropertyDialog.close()" type="button" value="Cancel">
             </div>
         </form>
     </div>

diff --git a/hawtio-web/src/main/webapp/app/osgi/js/pid.ts b/hawtio-web/src/main/webapp/app/osgi/js/pid.ts
@@ -1,6 +1,7 @@
 module Osgi {
     export function PidController($scope, $filter:ng.IFilterService, workspace:Workspace, $routeParams) {
         $scope.deleteConfirmDialog = new Core.Dialog();
+        $scope.addPropertyDialog = new Core.Dialog();
         $scope.pid = $routeParams.pid;
 
         updateTableContents();
@@ -29,21 +30,33 @@ module Osgi {
                             notification("error", response.error);
                         },
                         success: function(response) {
+                            enableSave(false);
                             notification("success", "Successfully updated pid: " + $scope.pid);
                         }
                     });
             }
         }
 
+        $scope.addPropertyConfirmed = function(key, value) {
+            $scope.addPropertyDialog.close();
+            $scope.row[key] = {
+                Key: key,
+                Value: value,
+                Type: "String"
+            };
+            enableSave(true);
+        }
+
         $scope.deletePidProp = (e) => {
             $scope.deleteKey = e.Key;
             $scope.deleteConfirmDialog.open();
         }
 
         $scope.deletePidPropConfirmed = () => {
+            $scope.deleteConfirmDialog.close();
             var cell : any = document.getElementById("pid." + $scope.deleteKey);
             cell.parentElement.remove();
-            enableSave();
+            enableSave(true);
         }
 
         function jmxError(response) {
@@ -68,11 +81,11 @@ module Osgi {
 
     export function editPidValueCell(e) {
         e.contentEditable = true;
-        enableSave();
+        enableSave(true);
     }
 
-    function enableSave() {
+    function enableSave(enablement : boolean) {
         var saveBtn = document.getElementById("saveButton");
-        saveBtn.disabled = false;
+        saveBtn.disabled = !enablement;
     }
 }