From 850a6583af1585340fb45542d2d305dceee80a6e Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Fri, 18 Nov 2016 15:52:20 +1000 Subject: [PATCH] WIP: Implementing client side capabilities This commit adds architecture to support client side capabilities. With it are two important custom directives: capability-if (hide or show DOM based on a model capability) and capability-enabled (apply a capability-enabled or capability-disabled class to DOM based on a model capability). capability-if appears to work, however capability-enabled is only partially working. --- .../fileList/fileList.tpl.html | 2 +- src/app/app.js | 1 + src/app/eventDiagnostics.js | 22 +++ src/app/jobs/details/jobDetails.tpl.html | 25 +-- src/app/jobs/list/jobsList.tpl.html | 1 + src/app/navigation/rightNavBar.tpl.html | 2 +- src/app/uiHints/_cornerRibbon.scss | 1 + src/app/uiHints/capability.js | 154 ++++++++++++++++++ src/app/uiHints/uiHints.js | 3 +- src/components/models/analysisJob.js | 30 +++- src/components/models/associations.js | 95 ++++++++++- src/sass/_bootstrapCustomization.scss | 1 - 12 files changed, 317 insertions(+), 20 deletions(-) create mode 100644 src/app/eventDiagnostics.js create mode 100644 src/app/uiHints/capability.js diff --git a/src/app/analysisResults/fileList/fileList.tpl.html b/src/app/analysisResults/fileList/fileList.tpl.html index dca9f77a..e4bb7fea 100644 --- a/src/app/analysisResults/fileList/fileList.tpl.html +++ b/src/app/analysisResults/fileList/fileList.tpl.html @@ -8,7 +8,7 @@ Download this folder - +
diff --git a/src/app/app.js b/src/app/app.js index ed8f5206..c3fc6b53 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -70,6 +70,7 @@ angular.module("baw", "bawApp.configuration", /* a mapping of all static path configurations and a module that contains all app configuration */ "bawApp.predictiveCacheDefaultProfiles", + "bawApp.diagnostics", "http-auth-interceptor", /* the auth module */ "angular-auth", /* the auth module */ diff --git a/src/app/eventDiagnostics.js b/src/app/eventDiagnostics.js new file mode 100644 index 00000000..9f481a31 --- /dev/null +++ b/src/app/eventDiagnostics.js @@ -0,0 +1,22 @@ +//http://plnkr.co/edit/cn3MZynbpTYIcKUWmsBi?p=preview +angular + .module("bawApp.diagnostics", []); + // .config(["$provide", function($provide) { + // $provide.decorator("$rootScope", ["$delegate", function($delegate) { + // var scope = $delegate.constructor; + // var origBroadcast = scope.prototype.$broadcast; + // var origEmit = scope.prototype.$emit; + // + // scope.prototype.$broadcast = function() { + // console.debug("$broadcast was called on $scope " + scope.$id + " with arguments:", + // arguments); + // return origBroadcast.apply(this, arguments); + // }; + // scope.prototype.$emit = function() { + // console.debug("$emit was called on $scope " + scope.$id + " with arguments:", + // arguments); + // return origEmit.apply(this, arguments); + // }; + // return $delegate; + // }]); + // }]); \ No newline at end of file diff --git a/src/app/jobs/details/jobDetails.tpl.html b/src/app/jobs/details/jobDetails.tpl.html index 590c4b48..37adf00f 100644 --- a/src/app/jobs/details/jobDetails.tpl.html +++ b/src/app/jobs/details/jobDetails.tpl.html @@ -1,4 +1,4 @@ - + @@ -20,37 +20,38 @@
    • -
  • - +
  • - +
    • -
  • +
  • -
    • -
  • +
  • - +
    • diff --git a/src/app/jobs/list/jobsList.tpl.html b/src/app/jobs/list/jobsList.tpl.html index fcac8a14..cd4ff786 100644 --- a/src/app/jobs/list/jobsList.tpl.html +++ b/src/app/jobs/list/jobsList.tpl.html @@ -4,6 +4,7 @@ New analysis job +
    diff --git a/src/app/navigation/rightNavBar.tpl.html b/src/app/navigation/rightNavBar.tpl.html index 250c0507..a26ecee6 100644 --- a/src/app/navigation/rightNavBar.tpl.html +++ b/src/app/navigation/rightNavBar.tpl.html @@ -7,7 +7,7 @@

    -
      +

      diff --git a/src/app/uiHints/_cornerRibbon.scss b/src/app/uiHints/_cornerRibbon.scss index 6e1d20f9..c5de92e0 100644 --- a/src/app/uiHints/_cornerRibbon.scss +++ b/src/app/uiHints/_cornerRibbon.scss @@ -82,6 +82,7 @@ ribbon, .ribbon-box { background: linear-gradient( to bottom, transparent, + rgba(256, 256, 256, $darken-amount / 100%), rgba(0, 0, 0, $darken-amount / 100%) ), repeating-linear-gradient( diff --git a/src/app/uiHints/capability.js b/src/app/uiHints/capability.js new file mode 100644 index 00000000..dddb623c --- /dev/null +++ b/src/app/uiHints/capability.js @@ -0,0 +1,154 @@ +angular + .module("bawApp.uiHints.capability", []) + .directive( + "capabilityModel", + [ + function() { + return { + restrict: "EA", + multiElement: true, + controller: [ + "$scope", + "$element", + "$attrs", + function CapabilityController(scope, element, attributes) { + this.model = undefined; + this.modelUpdateEvent = "bawApp.uiHints.capability.capabilityModelUpdate"; + + // we need root scope because sometimes elements can be transcluded and + // the event hierarchy breaks - i think! + scope.$watch(attributes.capabilityModel, (newValue) => { + if (newValue && !newValue.can) { + throw new Error("The capability-model must have a `can` method."); + } + + this.model = newValue; + scope.$root.$broadcast(this.modelUpdateEvent, this.model); + }); + + this.createEvaluator = function(action) { + if (this.model) { + var model = this.model; + return function() { + return model.can(action); + }; + } else { + return () => {}; + } + }; + } + ] + }; + } + ]) + /** + * Using model capabilities, selectively keep or remove elements from the DOM. + * Best used for removing UI actions that a user does not have access to. + */ + .directive( + "capabilityIf", + [ + "ngIfDirective", + function(ngIfDirective) { + // based off http://stackoverflow.com/a/29010910/224512 + + var ngIf = ngIfDirective[0]; + + return { + transclude: ngIf.transclude, + priority: ngIf.priority - 1, + terminal: ngIf.terminal, + restrict: "A", + require: "^capabilityModel", + link: function (scope, element, attributes, capabilityController) { + + var initialNgIf, + ifEvaluator; + + scope.$watch(attributes.capabilityIf, update); + scope.$on(capabilityController.modelUpdateEvent, update); + + let capability = () => {}; + let capabilityWrapper = function() { + return capability(); + }; + + function update() { + capability = capabilityController.createEvaluator(attributes.capabilityIf); + } + + // find the initial ng-if attribute + initialNgIf = attributes.ngIf; + // if it exists, evaluates ngIf && capability + if (initialNgIf) { + ifEvaluator = function () { + return scope.$eval(initialNgIf) && capabilityWrapper(); + }; + } else { + // if there's no ng-if, process normally + ifEvaluator = capabilityWrapper; + } + attributes.ngIf = ifEvaluator; + + ngIf.link.apply(ngIf, arguments); + } + }; + }]) + /** + * Using model capabilities, selectively apply the `.capability-enabled` or `capability-disabled` class. + * Best used for disabling UI actions that use should not be allowed to use at the present time. + * Can be used for security restricted actions that should be seen, or to disable actions that are invalid + * for the current state of the model. + */ + .directive( + "capabilityEnabled", + [ + function() { + var capabilityEnabled = "capability-enabled", + capabilityDisabled = "capability-disabled"; + + return { + restrict: "A", + require: "^capabilityModel", + link: function (scope, element, attributes, capabilityController) { + + scope.$watch(attributes.capabilityEnabled, update); + scope.$on(capabilityController.modelUpdateEvent, update); + attributes.$observe("class", function(value) { + update(scope.$eval(attributes.capabilityEnabled)); + }); + + var oldVal; + + function addClasses(classes) { + classes.forEach(attributes.$addClass, attributes); + } + + function toClasses(expression) { + // can is defined on the ApiBase class + let capability = capabilityController.createEvaluator(expression); + + var result = capability(); + if (result) { + return [capabilityEnabled]; + } + else { + return [capabilityDisabled]; + } + } + + function update(newVal) { + var newClasses = toClasses(newVal || ""); + if (!oldVal) { + addClasses(newClasses); + } else if (!angular.equals(newVal,oldVal)) { + attributes.$updateClass(newClasses, oldVal); + } + + oldVal = newVal; + } + } + + }; + }] +); diff --git a/src/app/uiHints/uiHints.js b/src/app/uiHints/uiHints.js index 3947e524..0ba9c27a 100644 --- a/src/app/uiHints/uiHints.js +++ b/src/app/uiHints/uiHints.js @@ -2,5 +2,6 @@ angular .module( "bawApp.uiHints", [ - "bawApp.uiHints.ribbon" + "bawApp.uiHints.ribbon", + "bawApp.uiHints.capability" ]); \ No newline at end of file diff --git a/src/components/models/analysisJob.js b/src/components/models/analysisJob.js index 3b59c321..53e0974e 100644 --- a/src/components/models/analysisJob.js +++ b/src/components/models/analysisJob.js @@ -84,9 +84,7 @@ angular return this.isNew || this.isPreparing || this.isProcessing; } - get canRetry() { - return this.isCompleted && this.successfulRatio < 1.0; - } + get completedRatio() { return ( @@ -191,6 +189,32 @@ angular this.scriptId = value && value.id || null; } + // capabilities (mocked here until API capabilities are real + static get capabilities() { + //return this.isCompleted && this.successfulRatio < 1.0; + return { + "update": { + can: true + }, + "destroy": { + can: true + }, + "create": { + can: true + }, + "pause": { + can: false + }, + "resume": { + can: true + }, + "retry": { + can: false + } + }; + } + + toJSON() { return { name: this.name, diff --git a/src/components/models/associations.js b/src/components/models/associations.js index b7de2bac..d0010b3d 100644 --- a/src/components/models/associations.js +++ b/src/components/models/associations.js @@ -8,9 +8,67 @@ angular .module("bawApp.models.associations", []) .factory( - "baw.models.ApiBase", + "baw.models.Capabilities", [ function () { + let missingCapability = Object.freeze({ + can: null, + details: "No reason is available", + message: null + }); + + class Capabilities { + constructor(capabilityObject) { + this.actions = capabilityObject; + + } + + can(source, actionName) { + return this.get(source, actionName, "can"); + } + + details(source, actionName) { + return this.get(source, actionName, "details"); + } + + message(source, actionName) { + return this.get(source, actionName, "message"); + } + + get(source, actionName, selector) { + let action = this.actions[actionName]; + if (action) { + if (selector) { + let value = action[selector]; + if (angular.isFunction(value)) { + return value.call(action, action, source); + } + else { + return value; + } + } + return action; + } + else { + return missingCapability; + } + } + + static get missing() { + return missingCapability; + } + } + + return Capabilities; + } + ] + ).factory( + "baw.models.ApiBase", + [ + "baw.models.Capabilities", + function (Capabilities) { + let metaKey = Symbol("meta"); + class ApiBase { constructor(resource) { @@ -48,6 +106,21 @@ angular return !(this.id === undefined || this.id === null); } + /** + * Holds the meta object from an API response. + * @returns {*} + */ + get meta() { + return this[metaKey]; + } + + /** + * Capability tester. Can an action be implemented? + */ + can(actionName) { + return this[metaKey].capabilities.can(this, actionName); + } + static make(resource) { //noinspection JSValidateTypes if (this === window) { @@ -81,6 +154,26 @@ angular items[0] = this.make(response.data.data); } + // allow all object to get and set their meta data object + let meta = response.data.meta; + + // setup capabilities + + // HACK: while capabilities not supported by API we instead draw them from the client Models + if (meta.capabilities === undefined) { + if (this.capabilities) { + console.warn(`Capabilities for ${this.name} are drawn from client model`); + meta.capabilities = this.capabilities; + } + else { + meta.capabilities = {}; + } + } + meta.capabilities = new Capabilities(meta.capabilities); + + // give each object a reference to meta + items.forEach((a) => a[metaKey] = meta); + response.data.data = items; return response; diff --git a/src/sass/_bootstrapCustomization.scss b/src/sass/_bootstrapCustomization.scss index f738e714..77e54c67 100644 --- a/src/sass/_bootstrapCustomization.scss +++ b/src/sass/_bootstrapCustomization.scss @@ -35,7 +35,6 @@ pointer-events: auto; cursor: default; text-decoration: none; - } // ensure glyphicons in links retain formatting and style