Much improved capability picker

finos#107
saravananaa · Mar 11, 2016 · f5aa0f7 · f5aa0f7
1 parent d6ca3fe
commit f5aa0f7
Show file tree

Hide file tree

Showing 20 changed files with 352 additions and 268 deletions.
diff --git a/waltz-jobs/src/main/java/com/khartec/waltz/jobs/sample/AppGenerator2.java b/waltz-jobs/src/main/java/com/khartec/waltz/jobs/sample/AppGenerator2.java
diff --git a/waltz-jobs/src/main/resources/capabilities.csv b/waltz-jobs/src/main/resources/capabilities.csv
@@ -34,4 +34,9 @@ id	parentId	name	description
 3100	3000	Settlements	Bank settlement system across all business lines. Providing aggregation of settlement instructions for efficiency.
 1100	1000	Trade Manager	Management of the Trade and it's life cycle events
 3700	3000	Trade Reporting	Regulatory Trade Reporting across the different business lines.
-
+6000	0	Data Management	Data Management Functions
+6100	6000	ETL	Extract Transform Load
+6200	6000	Exceptions	Exception Management
+6300	6000	Log Management	Management of log files
+6400	6000	Security	Authentication and authorization
+6500	6000	Reporting	Report Generation
diff --git a/waltz-model/src/main/java/com/khartec/waltz/model/app_group/AppGroupDetail.java b/waltz-model/src/main/java/com/khartec/waltz/model/app_group/AppGroupDetail.java
@@ -7,9 +7,6 @@
 
 import java.util.List;
 
-/**
- * Created by dwatkins on 06/02/2016.
- */
 @Value.Immutable
 @JsonSerialize(as = ImmutableAppGroupDetail.class)
 @JsonDeserialize(as = ImmutableAppGroupDetail.class)

diff --git a/waltz-ng/.eslintrc b/waltz-ng/.eslintrc
@@ -1,8 +1,8 @@
 {
-  "extends": "eslint-config-airbnb",
+  "extends": "",
   "env": {
     "browser": true,
-    "node": true,
+    "node": false,
     "mocha": true
   },
   "rules": {
@@ -29,5 +29,11 @@
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true,
     "__PORT__" : true
-  }
+  },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true,
+            "modules": true
+        }
+    }
 }
diff --git a/waltz-ng/client/app-capabilities/directives/app-capability-usage-editor.html b/waltz-ng/client/app-capabilities/directives/app-capability-usage-editor.html
@@ -1,78 +1,77 @@
-<div>
-    <table class="table table-condensed">
-        <colgroup>
-            <col width="5%"/>
-            <col width="25%"/>
-            <col width="45%"/>
-            <col width="25%"/>
-        </colgroup>
-        <thead>
-        <tr>
-            <th></th>
-            <th>Capability</th>
-            <th>Description</th>
-            <th>Action</th>
-        </tr>
-        </thead>
+<div class="container-fluid">
 
-        <tbody>
-        <tr class="waltz-visibility-parent"
-            ng-repeat="usage in ctrl.usedCapabilities | orderBy:'capability.name'">
-            <td>
-                <waltz-icon style="color: goldenrod"
-                            name="star"
-                            ng-if="usage.primary"></waltz-icon>
-            </td>
-            <td>
+    <div class="row">
+        <div class="col-md-12">
+            <label>Register new capability:</label>
+            <waltz-capability-picker capabilities="ctrl.availableCapabilities"
+                                     selected-node="ctrl.selectedNode"
+                                     on-add="ctrl.addCapability">
+            </waltz-capability-picker>
+            <div class="help-block small" ng-if="ctrl.hasHiddenCapabilities">
+                Note, some capabilities are not available unless corresponding traits are selected.
+            </div>
+        </div>
+
+    </div>
+
+    <hr>
+
+    <div class="row">
+        <div class="col-md-12">
+            <table class="table table-condensed table-striped">
+                <colgroup>
+                    <col width="5%"/>
+                    <col width="25%"/>
+                    <col width="45%"/>
+                    <col width="25%"/>
+                </colgroup>
+                <thead>
+                <tr>
+                    <th></th>
+                    <th>Capability</th>
+                    <th>Description</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr class="waltz-visibility-parent"
+                    ng-repeat="usage in ctrl.usedCapabilities | orderBy:'capability.name'">
+                    <td>
+                        <waltz-icon style="color: goldenrod"
+                                    name="star"
+                                    ng-if="usage.primary"></waltz-icon>
+                    </td>
+                    <td>
                 <span class='wce-name'>
                     {{ usage.capability.name }}
                 </span>
-            </td>
-            <td>
+                    </td>
+                    <td>
                 <span class='small'>
                     {{ usage.capability.description }}
                 </span>
-            </td>
-            <td class="waltz-visibility-child-30">
-                <a href ng-click="ctrl.remove(usage.capability)">
-                    <waltz-icon fixed-width='true'
-                                name="trash"></waltz-icon>
-                    Remove
-                </a>
+                    </td>
+                    <td class="waltz-visibility-child-30">
+                        <a href ng-click="ctrl.remove(usage.capability)">
+                            <waltz-icon fixed-width='true'
+                                        name="trash"></waltz-icon>
+                            Remove
+                        </a>
 
-                <br>
+                        <br>
 
-                <waltz-toggle icon-on="star-o"
-                              icon-off="star"
-                              label-on="Un-mark as primary"
-                              label-off="Mark as primary"
-                              on-toggle="ctrl.togglePrimary(usage.capability, !usage.primary)"
-                              state="usage.primary"></waltz-toggle>
-            </td>
-        </tr>
+                        <waltz-toggle icon-on="star-o"
+                                      icon-off="star"
+                                      label-on="Un-mark as primary"
+                                      label-off="Mark as primary"
+                                      on-toggle="ctrl.togglePrimary(usage.capability, !usage.primary)"
+                                      state="usage.primary"></waltz-toggle>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 
-        <tr style="background-color: #f5f5f5; border-bottom: 1px solid #ccc;">
-            <td></td>
-            <td><label>Register new capability:</label></td>
-            <td><waltz-capability-selector capabilities="ctrl.availableCapabilities"
-                                           model="ctrl.addForm"></waltz-capability-selector></td>
-            <td>
-                <button ng-click="ctrl.add(ctrl.addForm.capability)"
-                        class="btn btn-sm btn-primary"
-                        ng-disabled="!ctrl.addForm.capability">
-                    <waltz-icon name="plus"></waltz-icon>
-                    Add
-                </button>
-            </td>
-        </tr>
-        <tr ng-if="ctrl.hasHiddenCapabilities">
-            <td></td>
-            <td colspan="3">
-                <span class="small text-muted">
-                    Note, some capabilities are not available unless corresponding traits are selected.
-                </span>
-            </td>
-        </tr>
-        </tbody>
-    </table>
 </div>
diff --git a/waltz-ng/client/app-capabilities/directives/app-capability-usage-editor.js b/waltz-ng/client/app-capabilities/directives/app-capability-usage-editor.js
@@ -31,8 +31,6 @@ function controller($scope) {
 
     const vm = this;
 
-    vm.addForm = {};
-
     const watchExpressions = [
         'ctrl.usages',
         'ctrl.capabilities',
@@ -64,6 +62,11 @@ function controller($scope) {
         vm.hasHiddenCapabilities = capabilityIdsToRemove.length > 0;
 
     });
+
+    vm.addCapability = (c) => {
+        console.log('c', c);
+        vm.add(c).then(vm.selectedNode = null);
+    }
 }
 
 

diff --git a/waltz-ng/client/app-capabilities/edit.html b/waltz-ng/client/app-capabilities/edit.html
@@ -8,49 +8,28 @@
         </ol>
     </waltz-page-header>
 
-    <div>
+    <waltz-section name="Traits" icon="cubes">
+        <waltz-trait-usage-editor traits="ctrl.traits.all"
+                                  usages="ctrl.traits.usages"
+                                  add="ctrl.addTrait"
+                                  remove="ctrl.removeTrait">
+        </waltz-trait-usage-editor>
+    </waltz-section>
+
+    <waltz-section name="Capabilities" icon="puzzle-piece">
         <div class="row">
-            <div class="col-md-6">
-
-                <h3>
-                    <waltz-icon name="cubes"></waltz-icon>
-                    Traits
-                </h3>
-
-                <waltz-trait-usage-editor traits="ctrl.traits.all"
-                                          usages="ctrl.traits.usages"
-                                          add="ctrl.addTrait"
-                                          remove="ctrl.removeTrait">
-                </waltz-trait-usage-editor>
-
-            </div>
-
-            <div class="col-md-6">
-                <h3>
-                    <waltz-icon name="puzzle-piece"></waltz-icon>
-                    Capabilities
-                </h3>
-
+            <div class="col-md-12">
                 <waltz-app-capability-usage-editor usages="ctrl.capabilities.usages"
                                                    capabilities="ctrl.capabilities.all"
                                                    capability-traits="ctrl.capabilities.capabilityTraits"
                                                    trait-usages="ctrl.traits.usages"
                                                    add="ctrl.addCapability"
                                                    remove="ctrl.removeCapability"
                                                    toggle-primary="ctrl.togglePrimary">
-
                 </waltz-app-capability-usage-editor>
-
             </div>
-
         </div>
 
-        <hr>
-
-        <a ui-sref="main.app-view ({id: ctrl.application.id})">
-            &laquo; Go back to {{ctrl.application.name}}
-        </a>
-
-    </div>
+    </waltz-section>
 
 </div>
diff --git a/waltz-ng/client/app-capabilities/edit.js b/waltz-ng/client/app-capabilities/edit.js
@@ -56,7 +56,7 @@ const controller = function(appCapabilityStore,
 
     vm.togglePrimary = (c, primary) => appCapabilityStore
         .setIsPrimary(id, c.id, primary)
-        .then(() => notification.success(`${c.name} ${primary ? ' not ' : ''}  marked as primary`))
+        .then(() => notification.success(`${c.name} ${primary ? '' : ' not '}  marked as primary`))
         .then(() => appCapabilityStore.findCapabilitiesByApplicationId(id))
         .then(usages => vm.capabilities.usages = usages);
 

diff --git a/waltz-ng/client/capabilities/directives/capability-picker.html b/waltz-ng/client/capabilities/directives/capability-picker.html
@@ -0,0 +1,17 @@
+<div class="row">
+    <div class="col-md-8">
+        <waltz-capability-selector selected-node='ctrl.selectedNode'
+                                   capabilities="ctrl.capabilities"></waltz-capability-selector>
+        <div class="help-block small">Search for a capability by name or browse using the '...' button</div>
+    </div>
+    <div class="col-md-4">
+        <waltz-capability-selector-modal selected-node='ctrl.selectedNode'
+                                         capabilities="ctrl.capabilities">
+        </waltz-capability-selector-modal>
+        <button ng-disabled='!ctrl.selectedNode'
+                class="btn btn-success"
+                ng-click="ctrl.onAdd(ctrl.selectedNode)">
+            Add
+        </button>
+    </div>
+</div>