mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 09:26:45 +00:00
[Autoflow] Rewrite Autoflow Tabular using new APIs (#1816)
Rewrite Autoflow tabular using Vue and all new telemetry APIs. Also adds LAD support to autoflow tabular. * [Autoflow] Add Vue dependency ...to begin refactor away from Angular, #1810 * [Autoflow] Add Vue to require config ...to support usage in refactoring Autoflow Tabular view. * [Autoflow] Sketch in new plugin registration * [Autoflow] Bring over template, without Angular * [Autoflow] Add license headers * [Autoflow] Add VueView ...to simplify addition of Vue-based views. * [Autoflow] Add Vue bindings to template * [Autoflow] Sketch in AutoflowTabularView * [Autoflow] Include title for row names * [Autoflow] Begin adding controller * [Autoflow] Sketch in controller functionality * [Autoflow] Support object filtering * [Autoflow] Unlisten from controller on destroy * [Autoflow] Track rows on an interval * [Autoflow] Support column width changes * [Autoflow] Expose new plugin through openmct.plugins * [Autoflow] Fix run-time errors instantiating view * [Autoflow] Fix row generation error * [Autoflow] Fix row formatting * [Autoflow] Utilize width * [Autoflow] Update autoflow view when filter changes * [Autoflow] Enable autoflow for telemetry panels ...in developer environment. * [Autoflow] Bind data-value for rows * [Autoflow] Include limit evaluations * [Autoflow] Rename property rows to rowCount * [Autoflow] Retain rows during update * [Autoflow] Add bindings to clear autoflow filter * [Autoflow] Show updated timestamp * [Autoflow] Remove obsolete plugin * [Autoflow] Load vue for tests * [Autoflow] Begin adding spec for autoflow tabular plugin * [Autoflow] Test plugin registration * [Autoflow] Begin spec for AutoflowTabularView * [Autoflow] Obey contract from VueView.show ...by populating a container, instead of replacing it. * [Autoflow] Begin testing behavior * [Autoflow] Get initial row heights * [Autoflow] Verify unsubscription on destroy * [Autoflow] Test column width button * [Autoflow] Simplify controller activation/destruction * [Autoflow] Verify data display * [Autoflow] Test limit display * [Autoflow] Fully initialize controller * [Autoflow] Add missing semicolon * [Autoflow] Separate out constants ...to access them from tests * [Autoflow] Use constants from spec * [Autoflow] Test autoflow behavior * [Autoflow] Refactor test case ...to support tests for composition changes * [Autoflow] Add test cases for composition change * [Autoflow] Handle composition changes * [Autoflow] Sketch in row controller https://github.com/nasa/openmct/pull/1816/files#r153015544 * [Autoflow] Integrate row controller https://github.com/nasa/openmct/pull/1816#pullrequestreview-79305103 * [Autoflow] Add tests for historical request * [Autoflow] Request historical telemetry * [Autoflow] Remove unused active flag * [Autoflow] Clarify row destruction ...to avoid problems with binding destroy * [Autoflow] Fix mistake in test * [Autoflow] Simplify waiting for view updates in test * [Autoflow] Move filtering, autoflow to view * [Autoflow] Remove unused caching * [Autoflow] Remove obsolete method reference * [Autoflow] Fix lint errors Add missing semicolon, remove unused vars * [Autoflow] Refactor test to simplify emitting events * [Autoflow] Emit add events during load for testing ...to simulate the actual behavior of this method. * [Autoflow] Provide composition in mock ...to allow constructor-time usage of dependency from controller * [Autoflow] Avoid intermittent errors ...by checking to see if tabularArea is available before accessing its clientHeight; depending on the timing of setInterval versus Vue's mount event, it may not be! * [Autoflow] Use add/remove composition events from controller ...exclusively, instead of attempting to load again and triggering an infiniute loop each time. * [Autoflow] Test that composition does not reload * [Autoflow] Expect identifiers for remove events * [Autoflow] Simplify row-matching test * [Autoflow] Combine down to a single integration test * [Autoflow] Remove possible test race condition * [Autoflow] Add JSDoc * [Autoflow] Remove excess test case ...which is no longer needed after combining behavioral tests for view into a single spec. * [Autoflow] Remove unused destroy call https://github.com/nasa/openmct/pull/1816/files#r154787335 * [Autoflow] Use requestAnimationFrame in tests ...to avoid brittle change detection. https://github.com/nasa/openmct/pull/1816/files#r154785549 * [Autoflow] Use MCT instance for spies ...such that test case becomes sensitive to API changes in MCT.
This commit is contained in:
Victor Woeltjen
Pete Richards
parent
a51b9bc63f
commit
50b4d5cb28
@ -43,6 +43,9 @@
|
||||
openmct.install(openmct.plugins.ExampleImagery());
|
||||
openmct.install(openmct.plugins.UTCTimeSystem());
|
||||
openmct.install(openmct.plugins.ImportExport());
|
||||
openmct.install(openmct.plugins.AutoflowView({
|
||||
type: "telemetry.panel"
|
||||
}));
|
||||
openmct.install(openmct.plugins.Conductor({
|
||||
menuOptions: [
|
||||
{
|
||||
|
||||
@ -36,6 +36,7 @@ module.exports = function(config) {
|
||||
files: [
|
||||
{pattern: 'bower_components/**/*.js', included: false},
|
||||
{pattern: 'node_modules/d3-*/**/*.js', included: false},
|
||||
{pattern: 'node_modules/vue/**/*.js', included: false},
|
||||
{pattern: 'src/**/*.js', included: false},
|
||||
{pattern: 'example/**/*.html', included: false},
|
||||
{pattern: 'example/**/*.js', included: false},
|
||||
|
||||
@ -37,6 +37,7 @@ requirejs.config({
|
||||
"screenfull": "bower_components/screenfull/dist/screenfull.min",
|
||||
"text": "bower_components/text/text",
|
||||
"uuid": "bower_components/node-uuid/uuid",
|
||||
"vue": "node_modules/vue/dist/vue.min",
|
||||
"zepto": "bower_components/zepto/zepto.min",
|
||||
"lodash": "bower_components/lodash/lodash",
|
||||
"d3-selection": "node_modules/d3-selection/build/d3-selection.min",
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"d3-time-format": "^2.0.3",
|
||||
"express": "^4.13.1",
|
||||
"minimist": "^1.1.1",
|
||||
"request": "^2.69.0"
|
||||
"request": "^2.69.0",
|
||||
"vue": "^2.5.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bower": "^1.7.7",
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
define([
|
||||
'text!./res/templates/autoflow-tabular.html',
|
||||
'./src/AutoflowTabularController',
|
||||
'./src/MCTAutoflowTable'
|
||||
], function (
|
||||
autoflowTabularTemplate,
|
||||
AutoflowTabularController,
|
||||
MCTAutoflowTable
|
||||
) {
|
||||
return function (options) {
|
||||
return function (openmct) {
|
||||
openmct.legacyRegistry.register("platform/features/autoflow", {
|
||||
"name": "WARP Telemetry Adapter",
|
||||
"description": "Retrieves telemetry from the WARP Server and provides related types and views.",
|
||||
"resources": "res",
|
||||
"extensions": {
|
||||
"views": [
|
||||
{
|
||||
"key": "autoflow",
|
||||
"name": "Autoflow Tabular",
|
||||
"cssClass": "icon-packet",
|
||||
"description": "A tabular view of packet contents.",
|
||||
"template": autoflowTabularTemplate,
|
||||
"type": options && options.type,
|
||||
"needs": [
|
||||
"telemetry"
|
||||
],
|
||||
"delegation": true
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "AutoflowTabularController",
|
||||
"implementation": AutoflowTabularController,
|
||||
"depends": [
|
||||
"$scope",
|
||||
"$timeout",
|
||||
"telemetrySubscriber"
|
||||
]
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctAutoflowTable",
|
||||
"implementation": MCTAutoflowTable
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
openmct.legacyRegistry.enable("platform/features/autoflow");
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
<div class="items-holder abs contents autoflow obj-value-format"
|
||||
ng-controller="AutoflowTabularController as autoflow">
|
||||
<div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
|
||||
<mct-include key="'input-filter'"
|
||||
ng-model="autoflow.filter"
|
||||
class="flex-elem">
|
||||
</mct-include>
|
||||
<div class="flex-elem grows t-last-update" title="Last Update">{{autoflow.updated()}}</div>
|
||||
<a title="Change column width"
|
||||
class="s-button flex-elem icon-arrows-right-left change-column-width"
|
||||
ng-click="autoflow.increaseColumnWidth()"></a>
|
||||
</div>
|
||||
<div class="abs t-autoflow-items l-autoflow-items"
|
||||
mct-resize="autoflow.setBounds(bounds)"
|
||||
mct-resize-interval="50">
|
||||
<mct-autoflow-table values="autoflow.rangeValues()"
|
||||
objects="autoflow.getTelemetryObjects()"
|
||||
rows="autoflow.getRows()"
|
||||
classes="autoflow.classes()"
|
||||
updated="autoflow.updated()"
|
||||
column-width="autoflow.columnWidth()"
|
||||
counter="autoflow.counter()"
|
||||
>
|
||||
</mct-autoflow-table>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,169 +0,0 @@
|
||||
/*global angular*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
|
||||
/**
|
||||
* The link step for the `mct-autoflow-table` directive;
|
||||
* watches scope and updates the DOM appropriately.
|
||||
* See documentation in `MCTAutoflowTable.js` for the rationale
|
||||
* for including this directive, as well as for an explanation
|
||||
* of which values are placed in scope.
|
||||
*
|
||||
* @constructor
|
||||
* @param {Scope} scope the scope for this usage of the directive
|
||||
* @param element the jqLite-wrapped element which used this directive
|
||||
*/
|
||||
function AutoflowTableLinker(scope, element) {
|
||||
var objects, // Domain objects at last structure refresh
|
||||
rows, // Number of rows from last structure refresh
|
||||
priorClasses = {},
|
||||
valueSpans = {}; // Span elements to put data values in
|
||||
|
||||
// Create a new name-value pair in the specified column
|
||||
function createListItem(domainObject, ul) {
|
||||
// Create a new li, and spans to go in it.
|
||||
var li = angular.element('<li>'),
|
||||
titleSpan = angular.element('<span>'),
|
||||
valueSpan = angular.element('<span>');
|
||||
|
||||
// Place spans in the li, and li into the column.
|
||||
// valueSpan must precede titleSpan in the DOM due to new CSS float approach
|
||||
li.append(valueSpan).append(titleSpan);
|
||||
ul.append(li);
|
||||
|
||||
// Style appropriately
|
||||
li.addClass('l-autoflow-row');
|
||||
titleSpan.addClass('l-autoflow-item l');
|
||||
valueSpan.addClass('l-autoflow-item r l-obj-val-format');
|
||||
|
||||
// Set text/tooltip for the name-value row
|
||||
titleSpan.text(domainObject.getModel().name);
|
||||
titleSpan.attr("title", domainObject.getModel().name);
|
||||
|
||||
// Keep a reference to the span which will hold the
|
||||
// data value, to populate in the next refreshValues call
|
||||
valueSpans[domainObject.getId()] = valueSpan;
|
||||
|
||||
return li;
|
||||
}
|
||||
|
||||
// Create a new column of name-value pairs in this table.
|
||||
function createColumn(el) {
|
||||
// Create a ul
|
||||
var ul = angular.element('<ul>');
|
||||
|
||||
// Add it into the mct-autoflow-table
|
||||
el.append(ul);
|
||||
|
||||
// Style appropriately
|
||||
ul.addClass('l-autoflow-col');
|
||||
|
||||
// Get the current col width and apply at time of column creation
|
||||
// Important to do this here, as new columns could be created after
|
||||
// the user has changed the width.
|
||||
ul.css('width', scope.columnWidth + 'px');
|
||||
|
||||
// Return it, so some li elements can be added
|
||||
return ul;
|
||||
}
|
||||
|
||||
// Change the width of the columns when user clicks the resize button.
|
||||
function resizeColumn() {
|
||||
element.find('ul').css('width', scope.columnWidth + 'px');
|
||||
}
|
||||
|
||||
// Rebuild the DOM associated with this table.
|
||||
function rebuild(domainObjects, rowCount) {
|
||||
var activeColumn;
|
||||
|
||||
// Empty out our cached span elements
|
||||
valueSpans = {};
|
||||
|
||||
// Start with an empty DOM beneath this directive
|
||||
element.html("");
|
||||
|
||||
// Add DOM elements for each domain object being displayed
|
||||
// in this table.
|
||||
domainObjects.forEach(function (object, index) {
|
||||
// Start a new column if we'd run out of room
|
||||
if (index % rowCount === 0) {
|
||||
activeColumn = createColumn(element);
|
||||
}
|
||||
// Add the DOM elements for that object to whichever
|
||||
// column (a `ul` element) is current.
|
||||
createListItem(object, activeColumn);
|
||||
});
|
||||
}
|
||||
|
||||
// Update spans with values, as made available via the
|
||||
// `values` attribute of this directive.
|
||||
function refreshValues() {
|
||||
// Get the available values
|
||||
var values = scope.values || {},
|
||||
classes = scope.classes || {};
|
||||
|
||||
// Populate all spans with those values (or clear
|
||||
// those spans if no value is available)
|
||||
(objects || []).forEach(function (object) {
|
||||
var id = object.getId(),
|
||||
span = valueSpans[id],
|
||||
value;
|
||||
|
||||
if (span) {
|
||||
// Look up the value...
|
||||
value = values[id];
|
||||
// ...and convert to empty string if it's undefined
|
||||
value = value === undefined ? "" : value;
|
||||
span.attr("data-value", value);
|
||||
|
||||
// Update the span
|
||||
span.text(value);
|
||||
span.attr("title", value);
|
||||
span.removeClass(priorClasses[id]);
|
||||
span.addClass(classes[id]);
|
||||
priorClasses[id] = classes[id];
|
||||
}
|
||||
// Also need stale/alert/ok class
|
||||
// on span
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh the DOM for this table, if necessary
|
||||
function refreshStructure() {
|
||||
// Only rebuild if number of rows or set of objects
|
||||
// has changed; otherwise, our structure is still valid.
|
||||
if (scope.objects !== objects ||
|
||||
scope.rows !== rows) {
|
||||
|
||||
// Track those values to support future refresh checks
|
||||
objects = scope.objects;
|
||||
rows = scope.rows;
|
||||
|
||||
// Rebuild the DOM
|
||||
rebuild(objects || [], rows || 1);
|
||||
|
||||
// Refresh all data values shown
|
||||
refreshValues();
|
||||
}
|
||||
}
|
||||
|
||||
// Changing the domain objects in use or the number
|
||||
// of rows should trigger a structure change (DOM rebuild)
|
||||
scope.$watch("objects", refreshStructure);
|
||||
scope.$watch("rows", refreshStructure);
|
||||
|
||||
// When the current column width has been changed, resize the column
|
||||
scope.$watch('columnWidth', resizeColumn);
|
||||
|
||||
// When the last-updated time ticks,
|
||||
scope.$watch("updated", refreshValues);
|
||||
|
||||
// Update displayed values when the counter changes.
|
||||
scope.$watch("counter", refreshValues);
|
||||
|
||||
}
|
||||
|
||||
return AutoflowTableLinker;
|
||||
}
|
||||
);
|
||||
@ -1,324 +0,0 @@
|
||||
|
||||
define(
|
||||
['moment'],
|
||||
function (moment) {
|
||||
|
||||
var ROW_HEIGHT = 16,
|
||||
SLIDER_HEIGHT = 10,
|
||||
INITIAL_COLUMN_WIDTH = 225,
|
||||
MAX_COLUMN_WIDTH = 525,
|
||||
COLUMN_WIDTH_STEP = 25,
|
||||
DEBOUNCE_INTERVAL = 100,
|
||||
DATE_FORMAT = "YYYY-DDD HH:mm:ss.SSS\\Z",
|
||||
NOT_UPDATED = "No updates",
|
||||
EMPTY_ARRAY = [];
|
||||
|
||||
/**
|
||||
* Responsible for supporting the autoflow tabular view.
|
||||
* Implements the all-over logic which drives that view,
|
||||
* mediating between template-provided areas, the included
|
||||
* `mct-autoflow-table` directive, and the underlying
|
||||
* domain object model.
|
||||
* @constructor
|
||||
*/
|
||||
function AutflowTabularController(
|
||||
$scope,
|
||||
$timeout,
|
||||
telemetrySubscriber
|
||||
) {
|
||||
var filterValue = "",
|
||||
filterValueLowercase = "",
|
||||
subscription,
|
||||
filteredObjects = [],
|
||||
lastUpdated = {},
|
||||
updateText = NOT_UPDATED,
|
||||
rangeValues = {},
|
||||
classes = {},
|
||||
limits = {},
|
||||
updatePending = false,
|
||||
lastBounce = Number.NEGATIVE_INFINITY,
|
||||
columnWidth = INITIAL_COLUMN_WIDTH,
|
||||
rows = 1,
|
||||
counter = 0;
|
||||
|
||||
// Trigger an update of the displayed table by incrementing
|
||||
// the counter that it watches.
|
||||
function triggerDisplayUpdate() {
|
||||
counter += 1;
|
||||
}
|
||||
|
||||
// Check whether or not an object's name matches the
|
||||
// user-entered filter value.
|
||||
function filterObject(domainObject) {
|
||||
return (domainObject.getModel().name || "")
|
||||
.toLowerCase()
|
||||
.indexOf(filterValueLowercase) !== -1;
|
||||
}
|
||||
|
||||
// Comparator for sorting points back into packet order
|
||||
function compareObject(objectA, objectB) {
|
||||
var indexA = objectA.getModel().index || 0,
|
||||
indexB = objectB.getModel().index || 0;
|
||||
return indexA - indexB;
|
||||
}
|
||||
|
||||
// Update the list of currently-displayed objects; these
|
||||
// will be the subset of currently subscribed-to objects
|
||||
// which match a user-entered filter.
|
||||
function doUpdateFilteredObjects() {
|
||||
// Generate the list
|
||||
filteredObjects = (
|
||||
subscription ?
|
||||
subscription.getTelemetryObjects() :
|
||||
[]
|
||||
).filter(filterObject).sort(compareObject);
|
||||
|
||||
// Clear the pending flag
|
||||
updatePending = false;
|
||||
|
||||
// Track when this occurred, so that we can wait
|
||||
// a whole before updating again.
|
||||
lastBounce = Date.now();
|
||||
|
||||
triggerDisplayUpdate();
|
||||
}
|
||||
|
||||
// Request an update to the list of current objects; this may
|
||||
// run on a timeout to avoid excessive calls, e.g. while the user
|
||||
// is typing a filter.
|
||||
function updateFilteredObjects() {
|
||||
// Don't do anything if an update is already scheduled
|
||||
if (!updatePending) {
|
||||
if (Date.now() > lastBounce + DEBOUNCE_INTERVAL) {
|
||||
// Update immediately if it's been long enough
|
||||
doUpdateFilteredObjects();
|
||||
} else {
|
||||
// Otherwise, update later, and track that we have
|
||||
// an update pending so that subsequent calls can
|
||||
// be ignored.
|
||||
updatePending = true;
|
||||
$timeout(doUpdateFilteredObjects, DEBOUNCE_INTERVAL);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Track the latest data values for this domain object
|
||||
function recordData(telemetryObject) {
|
||||
// Get latest domain/range values for this object.
|
||||
var id = telemetryObject.getId(),
|
||||
domainValue = subscription.getDomainValue(telemetryObject),
|
||||
rangeValue = subscription.getRangeValue(telemetryObject);
|
||||
|
||||
// Track the most recent timestamp change observed...
|
||||
if (domainValue !== undefined && domainValue !== lastUpdated[id]) {
|
||||
lastUpdated[id] = domainValue;
|
||||
// ... and update the displayable text for that timestamp
|
||||
updateText = isNaN(domainValue) ? "" :
|
||||
moment.utc(domainValue).format(DATE_FORMAT);
|
||||
}
|
||||
|
||||
// Store data values into the rangeValues structure, which
|
||||
// will be used to populate the table itself.
|
||||
// Note that we want full precision here.
|
||||
rangeValues[id] = rangeValue;
|
||||
|
||||
// Update limit states as well
|
||||
classes[id] = limits[id] && (limits[id].evaluate({
|
||||
// This relies on external knowledge that the
|
||||
// range value of a telemetry point is encoded
|
||||
// in its datum as "value."
|
||||
value: rangeValue
|
||||
}) || {}).cssClass;
|
||||
}
|
||||
|
||||
|
||||
// Look at telemetry objects from the subscription; this is watched
|
||||
// to detect changes from the subscription.
|
||||
function subscribedTelemetry() {
|
||||
return subscription ?
|
||||
subscription.getTelemetryObjects() : EMPTY_ARRAY;
|
||||
}
|
||||
|
||||
// Update the data values which will be used to populate the table
|
||||
function updateValues() {
|
||||
subscribedTelemetry().forEach(recordData);
|
||||
triggerDisplayUpdate();
|
||||
}
|
||||
|
||||
// Getter-setter function for user-entered filter text.
|
||||
function filter(value) {
|
||||
// If value was specified, we're a setter
|
||||
if (value !== undefined) {
|
||||
// Store the new value
|
||||
filterValue = value;
|
||||
filterValueLowercase = value.toLowerCase();
|
||||
// Change which objects appear in the table
|
||||
updateFilteredObjects();
|
||||
}
|
||||
|
||||
// Always act as a getter
|
||||
return filterValue;
|
||||
}
|
||||
|
||||
// Update the bounds (width and height) of this view;
|
||||
// called from the mct-resize directive. Recalculates how
|
||||
// many rows should appear in the contained table.
|
||||
function setBounds(bounds) {
|
||||
var availableSpace = bounds.height - SLIDER_HEIGHT;
|
||||
rows = Math.max(1, Math.floor(availableSpace / ROW_HEIGHT));
|
||||
}
|
||||
|
||||
// Increment the current column width, up to the defined maximum.
|
||||
// When the max is hit, roll back to the default.
|
||||
function increaseColumnWidth() {
|
||||
columnWidth += COLUMN_WIDTH_STEP;
|
||||
// Cycle down to the initial width instead of exceeding max
|
||||
columnWidth = columnWidth > MAX_COLUMN_WIDTH ?
|
||||
INITIAL_COLUMN_WIDTH : columnWidth;
|
||||
}
|
||||
|
||||
// Get displayable text for last-updated value
|
||||
function updated() {
|
||||
return updateText;
|
||||
}
|
||||
|
||||
// Unsubscribe, if a subscription is active.
|
||||
function releaseSubscription() {
|
||||
if (subscription) {
|
||||
subscription.unsubscribe();
|
||||
subscription = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Update set of telemetry objects managed by this view
|
||||
function updateTelemetryObjects(telemetryObjects) {
|
||||
updateFilteredObjects();
|
||||
limits = {};
|
||||
telemetryObjects.forEach(function (telemetryObject) {
|
||||
var id = telemetryObject.getId();
|
||||
limits[id] = telemetryObject.getCapability('limit');
|
||||
});
|
||||
}
|
||||
|
||||
// Create a subscription for the represented domain object.
|
||||
// This will resolve capability delegation as necessary.
|
||||
function makeSubscription(domainObject) {
|
||||
// Unsubscribe, if there is an existing subscription
|
||||
releaseSubscription();
|
||||
|
||||
// Clear updated timestamp
|
||||
lastUpdated = {};
|
||||
updateText = NOT_UPDATED;
|
||||
|
||||
// Create a new subscription; telemetrySubscriber gets
|
||||
// to do the meaningful work here.
|
||||
subscription = domainObject && telemetrySubscriber.subscribe(
|
||||
domainObject,
|
||||
updateValues
|
||||
);
|
||||
|
||||
// Our set of in-view telemetry objects may have changed,
|
||||
// so update the set that is being passed down to the table.
|
||||
updateFilteredObjects();
|
||||
}
|
||||
|
||||
// Watch for changes to the set of objects which have telemetry
|
||||
$scope.$watch(subscribedTelemetry, updateTelemetryObjects);
|
||||
|
||||
// Watch for the represented domainObject (this field will
|
||||
// be populated by mct-representation)
|
||||
$scope.$watch("domainObject", makeSubscription);
|
||||
|
||||
// Make sure we unsubscribe when this view is destroyed.
|
||||
$scope.$on("$destroy", releaseSubscription);
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the number of rows which should be shown in this table.
|
||||
* @return {number} the number of rows to show
|
||||
*/
|
||||
getRows: function () {
|
||||
return rows;
|
||||
},
|
||||
/**
|
||||
* Get the objects which should currently be displayed in
|
||||
* this table. This will be watched, so the return value
|
||||
* should be stable when this list is unchanging. Only
|
||||
* objects which match the user-entered filter value should
|
||||
* be returned here.
|
||||
* @return {DomainObject[]} the domain objects to include in
|
||||
* this table.
|
||||
*/
|
||||
getTelemetryObjects: function () {
|
||||
return filteredObjects;
|
||||
},
|
||||
/**
|
||||
* Set the bounds (width/height) of this autoflow tabular view.
|
||||
* The template must ensure that these bounds are tracked on
|
||||
* the table area only.
|
||||
* @param bounds the bounds; and object with `width` and
|
||||
* `height` properties, both as numbers, in pixels.
|
||||
*/
|
||||
setBounds: setBounds,
|
||||
/**
|
||||
* Increments the width of the autoflow column.
|
||||
* Setting does not yet persist.
|
||||
*/
|
||||
increaseColumnWidth: increaseColumnWidth,
|
||||
/**
|
||||
* Get-or-set the user-supplied filter value.
|
||||
* @param {string} [value] the new filter value; omit to use
|
||||
* as a getter
|
||||
* @returns {string} the user-supplied filter value
|
||||
*/
|
||||
filter: filter,
|
||||
/**
|
||||
* Get all range values for use in this table. These will be
|
||||
* returned as an object of key-value pairs, where keys are
|
||||
* domain object IDs, and values are the most recently observed
|
||||
* data values associated with those objects, formatted for
|
||||
* display.
|
||||
* @returns {object.<string,string>} most recent values
|
||||
*/
|
||||
rangeValues: function () {
|
||||
return rangeValues;
|
||||
},
|
||||
/**
|
||||
* Get CSS classes to apply to specific rows, representing limit
|
||||
* states and/or stale states. These are returned as key-value
|
||||
* pairs where keys are domain object IDs, and values are CSS
|
||||
* classes to display for domain objects with those IDs.
|
||||
* @returns {object.<string,string>} CSS classes
|
||||
*/
|
||||
classes: function () {
|
||||
return classes;
|
||||
},
|
||||
/**
|
||||
* Get the "last updated" text for this view; this will be
|
||||
* the most recent timestamp observed for any telemetry-
|
||||
* providing object, formatted for display.
|
||||
* @returns {string} the time of the most recent update
|
||||
*/
|
||||
updated: updated,
|
||||
/**
|
||||
* Get the current column width, in pixels.
|
||||
* @returns {number} column width
|
||||
*/
|
||||
columnWidth: function () {
|
||||
return columnWidth;
|
||||
},
|
||||
/**
|
||||
* Keep a counter and increment this whenever the display
|
||||
* should be updated; this will be watched by the
|
||||
* `mct-autoflow-table`.
|
||||
* @returns {number} a counter value
|
||||
*/
|
||||
counter: function () {
|
||||
return counter;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return AutflowTabularController;
|
||||
}
|
||||
);
|
||||
@ -1,60 +0,0 @@
|
||||
|
||||
define(
|
||||
["./AutoflowTableLinker"],
|
||||
function (AutoflowTableLinker) {
|
||||
|
||||
/**
|
||||
* The `mct-autoflow-table` directive specifically supports
|
||||
* autoflow tabular views; it is not intended for use outside
|
||||
* of that view.
|
||||
*
|
||||
* This directive is responsible for creating the structure
|
||||
* of the table in this view, and for updating its values.
|
||||
* While this is achievable using a regular Angular template,
|
||||
* this is undesirable from the perspective of performance
|
||||
* due to the number of watches that can be involved for large
|
||||
* tables. Instead, this directive will maintain a small number
|
||||
* of watches, rebuilding table structure only when necessary,
|
||||
* and updating displayed values in the more common case of
|
||||
* new data arriving.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function MCTAutoflowTable() {
|
||||
return {
|
||||
// Only applicable at the element level
|
||||
restrict: "E",
|
||||
|
||||
// The link function; handles DOM update/manipulation
|
||||
link: AutoflowTableLinker,
|
||||
|
||||
// Parameters to pass from attributes into scope
|
||||
scope: {
|
||||
// Set of domain objects to show in the table
|
||||
objects: "=",
|
||||
|
||||
// Values for those objects, by ID
|
||||
values: "=",
|
||||
|
||||
// CSS classes to show for objects, by ID
|
||||
classes: "=",
|
||||
|
||||
// Number of rows to show before autoflowing
|
||||
rows: "=",
|
||||
|
||||
// Time of last update; watched to refresh values
|
||||
updated: "=",
|
||||
|
||||
// Current width of the autoflow column
|
||||
columnWidth: "=",
|
||||
|
||||
// A counter used to trigger display updates
|
||||
counter: "="
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return MCTAutoflowTable;
|
||||
|
||||
}
|
||||
);
|
||||
@ -1,178 +0,0 @@
|
||||
|
||||
define(
|
||||
["../src/AutoflowTableLinker"],
|
||||
function (AutoflowTableLinker) {
|
||||
|
||||
describe("The mct-autoflow-table linker", function () {
|
||||
var cachedAngular,
|
||||
mockAngular,
|
||||
mockScope,
|
||||
mockElement,
|
||||
mockElements,
|
||||
linker;
|
||||
|
||||
// Utility function to generate more mock elements
|
||||
function createMockElement(html) {
|
||||
var mockEl = jasmine.createSpyObj(
|
||||
"element-" + html,
|
||||
[
|
||||
"append",
|
||||
"addClass",
|
||||
"removeClass",
|
||||
"text",
|
||||
"attr",
|
||||
"html",
|
||||
"css",
|
||||
"find"
|
||||
]
|
||||
);
|
||||
mockEl.testHtml = html;
|
||||
mockEl.append.andReturn(mockEl);
|
||||
mockElements.push(mockEl);
|
||||
return mockEl;
|
||||
}
|
||||
|
||||
function createMockDomainObject(id) {
|
||||
var mockDomainObject = jasmine.createSpyObj(
|
||||
"domainObject-" + id,
|
||||
["getId", "getModel"]
|
||||
);
|
||||
mockDomainObject.getId.andReturn(id);
|
||||
mockDomainObject.getModel.andReturn({name: id.toUpperCase()});
|
||||
return mockDomainObject;
|
||||
}
|
||||
|
||||
function fireWatch(watchExpression, value) {
|
||||
mockScope.$watch.calls.forEach(function (call) {
|
||||
if (call.args[0] === watchExpression) {
|
||||
call.args[1](value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// AutoflowTableLinker accesses Angular in the global
|
||||
// scope, since it is not injectable; we simulate that
|
||||
// here by adding/removing it to/from the window object.
|
||||
beforeEach(function () {
|
||||
mockElements = [];
|
||||
|
||||
mockAngular = jasmine.createSpyObj("angular", ["element"]);
|
||||
mockScope = jasmine.createSpyObj("scope", ["$watch"]);
|
||||
mockElement = createMockElement('<div>');
|
||||
|
||||
mockAngular.element.andCallFake(createMockElement);
|
||||
|
||||
if (window.angular !== undefined) {
|
||||
cachedAngular = window.angular;
|
||||
}
|
||||
window.angular = mockAngular;
|
||||
|
||||
linker = new AutoflowTableLinker(mockScope, mockElement);
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
if (cachedAngular !== undefined) {
|
||||
window.angular = cachedAngular;
|
||||
} else {
|
||||
delete window.angular;
|
||||
}
|
||||
});
|
||||
|
||||
it("watches for changes in inputs", function () {
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
||||
"objects",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
||||
"rows",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
||||
"counter",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
});
|
||||
|
||||
it("changes structure when domain objects change", function () {
|
||||
// Set up scope
|
||||
mockScope.rows = 4;
|
||||
mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
|
||||
.map(createMockDomainObject);
|
||||
|
||||
// Fire an update to the set of objects
|
||||
fireWatch("objects");
|
||||
|
||||
// Should have rebuilt with two columns of
|
||||
// four and two rows each; first, by clearing...
|
||||
expect(mockElement.html).toHaveBeenCalledWith("");
|
||||
|
||||
// Should have appended two columns...
|
||||
expect(mockElement.append.calls.length).toEqual(2);
|
||||
|
||||
// ...which should have received two and four rows each
|
||||
expect(mockElement.append.calls[0].args[0].append.calls.length)
|
||||
.toEqual(4);
|
||||
expect(mockElement.append.calls[1].args[0].append.calls.length)
|
||||
.toEqual(2);
|
||||
});
|
||||
|
||||
it("updates values", function () {
|
||||
var mockSpans;
|
||||
|
||||
mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
|
||||
.map(createMockDomainObject);
|
||||
mockScope.values = { a: 0 };
|
||||
|
||||
// Fire an update to the set of values
|
||||
fireWatch("objects");
|
||||
fireWatch("updated");
|
||||
|
||||
// Get all created spans
|
||||
mockSpans = mockElements.filter(function (mockElem) {
|
||||
return mockElem.testHtml === '<span>';
|
||||
});
|
||||
|
||||
// First span should be a, should have gotten this value.
|
||||
// This test detects, in particular, WTD-749
|
||||
expect(mockSpans[0].text).toHaveBeenCalledWith('A');
|
||||
expect(mockSpans[1].text).toHaveBeenCalledWith(0);
|
||||
});
|
||||
|
||||
it("listens for changes in column width", function () {
|
||||
var mockUL = createMockElement("<ul>");
|
||||
mockElement.find.andReturn(mockUL);
|
||||
mockScope.columnWidth = 200;
|
||||
fireWatch("columnWidth", mockScope.columnWidth);
|
||||
expect(mockUL.css).toHaveBeenCalledWith("width", "200px");
|
||||
});
|
||||
|
||||
it("updates CSS classes", function () {
|
||||
var mockSpans;
|
||||
|
||||
mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
|
||||
.map(createMockDomainObject);
|
||||
mockScope.values = { a: "a value to find" };
|
||||
mockScope.classes = { a: 'class-a' };
|
||||
|
||||
// Fire an update to the set of values
|
||||
fireWatch("objects");
|
||||
fireWatch("updated");
|
||||
|
||||
// Figure out which span holds the relevant value...
|
||||
mockSpans = mockElements.filter(function (mockElem) {
|
||||
return mockElem.testHtml === '<span>';
|
||||
}).filter(function (mockSpan) {
|
||||
var attrCalls = mockSpan.attr.calls;
|
||||
return attrCalls.some(function (call) {
|
||||
return call.args[0] === 'title' &&
|
||||
call.args[1] === mockScope.values.a;
|
||||
});
|
||||
});
|
||||
|
||||
// ...and make sure it also has had its class applied
|
||||
expect(mockSpans[0].addClass)
|
||||
.toHaveBeenCalledWith(mockScope.classes.a);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@ -1,341 +0,0 @@
|
||||
|
||||
define(
|
||||
["../src/AutoflowTabularController"],
|
||||
function (AutoflowTabularController) {
|
||||
|
||||
describe("The autoflow tabular controller", function () {
|
||||
var mockScope,
|
||||
mockTimeout,
|
||||
mockSubscriber,
|
||||
mockDomainObject,
|
||||
mockSubscription,
|
||||
controller;
|
||||
|
||||
// Fire watches that are registered as functions.
|
||||
function fireFnWatches() {
|
||||
mockScope.$watch.calls.forEach(function (call) {
|
||||
if (typeof call.args[0] === 'function') {
|
||||
call.args[1](call.args[0]());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
mockScope = jasmine.createSpyObj(
|
||||
"$scope",
|
||||
["$on", "$watch"]
|
||||
);
|
||||
mockTimeout = jasmine.createSpy("$timeout");
|
||||
mockSubscriber = jasmine.createSpyObj(
|
||||
"telemetrySubscriber",
|
||||
["subscribe"]
|
||||
);
|
||||
mockDomainObject = jasmine.createSpyObj(
|
||||
"domainObject",
|
||||
["getId", "getModel", "getCapability"]
|
||||
);
|
||||
mockSubscription = jasmine.createSpyObj(
|
||||
"subscription",
|
||||
[
|
||||
"unsubscribe",
|
||||
"getTelemetryObjects",
|
||||
"getDomainValue",
|
||||
"getRangeValue"
|
||||
]
|
||||
);
|
||||
|
||||
mockSubscriber.subscribe.andReturn(mockSubscription);
|
||||
mockDomainObject.getModel.andReturn({name: "something"});
|
||||
|
||||
controller = new AutoflowTabularController(
|
||||
mockScope,
|
||||
mockTimeout,
|
||||
mockSubscriber
|
||||
);
|
||||
});
|
||||
|
||||
it("listens for the represented domain object", function () {
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
||||
"domainObject",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
});
|
||||
|
||||
it("provides a getter-setter function for filtering", function () {
|
||||
expect(controller.filter()).toEqual("");
|
||||
controller.filter("something");
|
||||
expect(controller.filter()).toEqual("something");
|
||||
});
|
||||
|
||||
it("tracks bounds and adjust number of rows accordingly", function () {
|
||||
// Rows are 15px high, and need room for an 10px slider
|
||||
controller.setBounds({ width: 700, height: 120 });
|
||||
expect(controller.getRows()).toEqual(6); // 110 usable height / 16px
|
||||
controller.setBounds({ width: 700, height: 240 });
|
||||
expect(controller.getRows()).toEqual(14); // 230 usable height / 16px
|
||||
});
|
||||
|
||||
it("subscribes to a represented object's telemetry", function () {
|
||||
// Set up subscription, scope
|
||||
mockSubscription.getTelemetryObjects
|
||||
.andReturn([mockDomainObject]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
|
||||
// Invoke the watcher with represented domain object
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
|
||||
// Should have subscribed to it
|
||||
expect(mockSubscriber.subscribe).toHaveBeenCalledWith(
|
||||
mockDomainObject,
|
||||
jasmine.any(Function)
|
||||
);
|
||||
|
||||
// Should report objects as reported from subscription
|
||||
expect(controller.getTelemetryObjects())
|
||||
.toEqual([mockDomainObject]);
|
||||
});
|
||||
|
||||
it("releases subscriptions on destroy", function () {
|
||||
// Set up subscription...
|
||||
mockSubscription.getTelemetryObjects
|
||||
.andReturn([mockDomainObject]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
|
||||
// Verify precondition
|
||||
expect(mockSubscription.unsubscribe).not.toHaveBeenCalled();
|
||||
|
||||
// Make sure we're listening for $destroy
|
||||
expect(mockScope.$on).toHaveBeenCalledWith(
|
||||
"$destroy",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
|
||||
// Fire a destroy event
|
||||
mockScope.$on.mostRecentCall.args[1]();
|
||||
|
||||
// Should have unsubscribed
|
||||
expect(mockSubscription.unsubscribe).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("presents latest values and latest update state", function () {
|
||||
// Make sure values are available
|
||||
mockSubscription.getDomainValue.andReturn(402654321123);
|
||||
mockSubscription.getRangeValue.andReturn(789);
|
||||
mockDomainObject.getId.andReturn('testId');
|
||||
|
||||
// Set up subscription...
|
||||
mockSubscription.getTelemetryObjects
|
||||
.andReturn([mockDomainObject]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
|
||||
// Fire subscription callback
|
||||
mockSubscriber.subscribe.mostRecentCall.args[1]();
|
||||
|
||||
// ...and exposed the results for template to consume
|
||||
expect(controller.updated()).toEqual("1982-278 08:25:21.123Z");
|
||||
expect(controller.rangeValues().testId).toEqual(789);
|
||||
});
|
||||
|
||||
it("sorts domain objects by index", function () {
|
||||
var testIndexes = { a: 2, b: 1, c: 3, d: 0 },
|
||||
mockDomainObjects = Object.keys(testIndexes).sort().map(function (id) {
|
||||
var mockDomainObj = jasmine.createSpyObj(
|
||||
"domainObject",
|
||||
["getId", "getModel"]
|
||||
);
|
||||
|
||||
mockDomainObj.getId.andReturn(id);
|
||||
mockDomainObj.getModel.andReturn({ index: testIndexes[id] });
|
||||
|
||||
return mockDomainObj;
|
||||
});
|
||||
|
||||
// Expose those domain objects...
|
||||
mockSubscription.getTelemetryObjects.andReturn(mockDomainObjects);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
|
||||
// Fire subscription callback
|
||||
mockSubscriber.subscribe.mostRecentCall.args[1]();
|
||||
|
||||
// Controller should expose same objects, but sorted by index from model
|
||||
expect(controller.getTelemetryObjects()).toEqual([
|
||||
mockDomainObjects[3], // d, index=0
|
||||
mockDomainObjects[1], // b, index=1
|
||||
mockDomainObjects[0], // a, index=2
|
||||
mockDomainObjects[2] // c, index=3
|
||||
]);
|
||||
});
|
||||
|
||||
it("uses a timeout to throttle update", function () {
|
||||
// Set up subscription...
|
||||
mockSubscription.getTelemetryObjects
|
||||
.andReturn([mockDomainObject]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
|
||||
// Set the object in view; should not need a timeout
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
expect(mockTimeout.calls.length).toEqual(0);
|
||||
|
||||
// Next call should schedule an update on a timeout
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
expect(mockTimeout.calls.length).toEqual(1);
|
||||
|
||||
// ...but this last one should not, since existing
|
||||
// timeout will cover it
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
expect(mockTimeout.calls.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("allows changing column width", function () {
|
||||
var initialWidth = controller.columnWidth();
|
||||
controller.increaseColumnWidth();
|
||||
expect(controller.columnWidth()).toBeGreaterThan(initialWidth);
|
||||
});
|
||||
|
||||
describe("filter", function () {
|
||||
var doFilter,
|
||||
filteredObjects,
|
||||
filteredObjectNames;
|
||||
|
||||
beforeEach(function () {
|
||||
var telemetryObjects,
|
||||
updateFilteredObjects;
|
||||
|
||||
telemetryObjects = [
|
||||
'DEF123',
|
||||
'abc789',
|
||||
'456abc',
|
||||
'4ab3cdef',
|
||||
'hjs[12].*(){}^\\'
|
||||
].map(function (objectName, index) {
|
||||
var mockTelemetryObject = jasmine.createSpyObj(
|
||||
objectName,
|
||||
["getId", "getModel"]
|
||||
);
|
||||
|
||||
mockTelemetryObject.getId.andReturn(objectName);
|
||||
mockTelemetryObject.getModel.andReturn({
|
||||
name: objectName,
|
||||
index: index
|
||||
});
|
||||
|
||||
return mockTelemetryObject;
|
||||
});
|
||||
|
||||
mockSubscription
|
||||
.getTelemetryObjects
|
||||
.andReturn(telemetryObjects);
|
||||
|
||||
// Trigger domainObject change to create subscription.
|
||||
mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
|
||||
|
||||
updateFilteredObjects = function () {
|
||||
filteredObjects = controller.getTelemetryObjects();
|
||||
filteredObjectNames = filteredObjects.map(function (o) {
|
||||
return o.getModel().name;
|
||||
});
|
||||
};
|
||||
|
||||
doFilter = function (term) {
|
||||
controller.filter(term);
|
||||
// Filter is debounced so we have to force it to occur.
|
||||
mockTimeout.mostRecentCall.args[0]();
|
||||
updateFilteredObjects();
|
||||
};
|
||||
|
||||
updateFilteredObjects();
|
||||
});
|
||||
|
||||
it("initially shows all objects", function () {
|
||||
expect(filteredObjectNames).toEqual([
|
||||
'DEF123',
|
||||
'abc789',
|
||||
'456abc',
|
||||
'4ab3cdef',
|
||||
'hjs[12].*(){}^\\'
|
||||
]);
|
||||
});
|
||||
|
||||
it("by blank string matches all objects", function () {
|
||||
doFilter('');
|
||||
expect(filteredObjectNames).toEqual([
|
||||
'DEF123',
|
||||
'abc789',
|
||||
'456abc',
|
||||
'4ab3cdef',
|
||||
'hjs[12].*(){}^\\'
|
||||
]);
|
||||
});
|
||||
|
||||
it("exactly matches an object name", function () {
|
||||
doFilter('4ab3cdef');
|
||||
expect(filteredObjectNames).toEqual(['4ab3cdef']);
|
||||
});
|
||||
|
||||
it("partially matches object names", function () {
|
||||
doFilter('abc');
|
||||
expect(filteredObjectNames).toEqual([
|
||||
'abc789',
|
||||
'456abc'
|
||||
]);
|
||||
});
|
||||
|
||||
it("matches case insensitive names", function () {
|
||||
doFilter('def');
|
||||
expect(filteredObjectNames).toEqual([
|
||||
'DEF123',
|
||||
'4ab3cdef'
|
||||
]);
|
||||
});
|
||||
|
||||
it("works as expected with special characters", function () {
|
||||
doFilter('[12]');
|
||||
expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
|
||||
doFilter('.*');
|
||||
expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
|
||||
doFilter('.*()');
|
||||
expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
|
||||
doFilter('.*?');
|
||||
expect(filteredObjectNames).toEqual([]);
|
||||
doFilter('.+');
|
||||
expect(filteredObjectNames).toEqual([]);
|
||||
});
|
||||
|
||||
it("exposes CSS classes from limits", function () {
|
||||
var id = mockDomainObject.getId(),
|
||||
testClass = "some-css-class",
|
||||
mockLimitCapability =
|
||||
jasmine.createSpyObj('limit', ['evaluate']);
|
||||
|
||||
mockDomainObject.getCapability.andCallFake(function (key) {
|
||||
return key === 'limit' && mockLimitCapability;
|
||||
});
|
||||
mockLimitCapability.evaluate
|
||||
.andReturn({ cssClass: testClass });
|
||||
|
||||
mockSubscription.getTelemetryObjects
|
||||
.andReturn([mockDomainObject]);
|
||||
|
||||
fireFnWatches();
|
||||
mockSubscriber.subscribe.mostRecentCall.args[1]();
|
||||
|
||||
expect(controller.classes()[id]).toEqual(testClass);
|
||||
});
|
||||
|
||||
it("exposes a counter that changes with each update", function () {
|
||||
var i, prior;
|
||||
|
||||
for (i = 0; i < 10; i += 1) {
|
||||
prior = controller.counter();
|
||||
expect(controller.counter()).toEqual(prior);
|
||||
mockSubscriber.subscribe.mostRecentCall.args[1]();
|
||||
expect(controller.counter()).not.toEqual(prior);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@ -1,39 +0,0 @@
|
||||
|
||||
define(
|
||||
["../src/MCTAutoflowTable"],
|
||||
function (MCTAutoflowTable) {
|
||||
|
||||
describe("The mct-autoflow-table directive", function () {
|
||||
var mctAutoflowTable;
|
||||
|
||||
beforeEach(function () {
|
||||
mctAutoflowTable = new MCTAutoflowTable();
|
||||
});
|
||||
|
||||
// Real functionality is contained/tested in the linker,
|
||||
// so just check to make sure we're exposing the directive
|
||||
// appropriately.
|
||||
it("is applicable at the element level", function () {
|
||||
expect(mctAutoflowTable.restrict).toEqual("E");
|
||||
});
|
||||
|
||||
it("two-ways binds needed scope variables", function () {
|
||||
expect(mctAutoflowTable.scope).toEqual({
|
||||
objects: "=",
|
||||
values: "=",
|
||||
rows: "=",
|
||||
updated: "=",
|
||||
classes: "=",
|
||||
columnWidth: "=",
|
||||
counter: "="
|
||||
});
|
||||
});
|
||||
|
||||
it("provides a link function", function () {
|
||||
expect(mctAutoflowTable.link).toEqual(jasmine.any(Function));
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
34
src/plugins/autoflow/AutoflowTabularConstants.js
Normal file
34
src/plugins/autoflow/AutoflowTabularConstants.js
Normal file
@ -0,0 +1,34 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
/**
|
||||
* Constant values used by the Autoflow Tabular View.
|
||||
*/
|
||||
return {
|
||||
ROW_HEIGHT: 16,
|
||||
SLIDER_HEIGHT: 10,
|
||||
INITIAL_COLUMN_WIDTH: 225,
|
||||
MAX_COLUMN_WIDTH: 525,
|
||||
COLUMN_WIDTH_STEP: 25
|
||||
};
|
||||
});
|
||||
121
src/plugins/autoflow/AutoflowTabularController.js
Normal file
121
src/plugins/autoflow/AutoflowTabularController.js
Normal file
@ -0,0 +1,121 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./AutoflowTabularRowController'
|
||||
], function (AutoflowTabularRowController) {
|
||||
/**
|
||||
* Controller for an Autoflow Tabular View. Subscribes to telemetry
|
||||
* associated with children of the domain object and passes that
|
||||
* information on to the view.
|
||||
*
|
||||
* @param {DomainObject} domainObject the object being viewed
|
||||
* @param {*} data the view data
|
||||
* @param openmct a reference to the openmct application
|
||||
*/
|
||||
function AutoflowTabularController(domainObject, data, openmct) {
|
||||
this.composition = openmct.composition.get(domainObject);
|
||||
this.data = data;
|
||||
this.openmct = openmct;
|
||||
|
||||
this.rows = {};
|
||||
this.controllers = {};
|
||||
|
||||
this.addRow = this.addRow.bind(this);
|
||||
this.removeRow = this.removeRow.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the "Last Updated" value to be displayed.
|
||||
* @param {String} value the value to display
|
||||
* @private
|
||||
*/
|
||||
AutoflowTabularController.prototype.trackLastUpdated = function (value) {
|
||||
this.data.updated = value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Respond to an `add` event from composition by adding a new row.
|
||||
* @private
|
||||
*/
|
||||
AutoflowTabularController.prototype.addRow = function (childObject) {
|
||||
var identifier = childObject.identifier;
|
||||
var id = [identifier.namespace, identifier.key].join(":");
|
||||
|
||||
if (!this.rows[id]) {
|
||||
this.rows[id] = {
|
||||
classes: "",
|
||||
name: childObject.name,
|
||||
value: undefined
|
||||
};
|
||||
this.controllers[id] = new AutoflowTabularRowController(
|
||||
childObject,
|
||||
this.rows[id],
|
||||
this.openmct,
|
||||
this.trackLastUpdated.bind(this)
|
||||
);
|
||||
this.controllers[id].activate();
|
||||
this.data.items.push(this.rows[id]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Respond to an `remove` event from composition by removing any
|
||||
* related row.
|
||||
* @private
|
||||
*/
|
||||
AutoflowTabularController.prototype.removeRow = function (identifier) {
|
||||
var id = [identifier.namespace, identifier.key].join(":");
|
||||
|
||||
if (this.rows[id]) {
|
||||
this.data.items = this.data.items.filter(function (item) {
|
||||
return item !== this.rows[id];
|
||||
}.bind(this));
|
||||
this.controllers[id].destroy();
|
||||
delete this.controllers[id];
|
||||
delete this.rows[id];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Activate this controller; begin listening for changes.
|
||||
*/
|
||||
AutoflowTabularController.prototype.activate = function () {
|
||||
this.composition.on('add', this.addRow);
|
||||
this.composition.on('remove', this.removeRow);
|
||||
this.composition.load();
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy this controller; detach any associated resources.
|
||||
*/
|
||||
AutoflowTabularController.prototype.destroy = function () {
|
||||
Object.keys(this.controllers).forEach(function (id) {
|
||||
this.controllers[id].destroy();
|
||||
}.bind(this));
|
||||
this.controllers = {};
|
||||
this.composition.off('add', this.addRow);
|
||||
this.composition.off('remove', this.removeRow);
|
||||
};
|
||||
|
||||
return AutoflowTabularController;
|
||||
});
|
||||
60
src/plugins/autoflow/AutoflowTabularPlugin.js
Normal file
60
src/plugins/autoflow/AutoflowTabularPlugin.js
Normal file
@ -0,0 +1,60 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./AutoflowTabularView'
|
||||
], function (
|
||||
AutoflowTabularView
|
||||
) {
|
||||
/**
|
||||
* This plugin provides an Autoflow Tabular View for domain objects
|
||||
* in Open MCT.
|
||||
*
|
||||
* @param {Object} options
|
||||
* @param {String} [options.type] the domain object type for which
|
||||
* this view should be available; if omitted, this view will
|
||||
* be available for all objects
|
||||
*/
|
||||
return function (options) {
|
||||
return function (openmct) {
|
||||
var views = (openmct.mainViews || openmct.objectViews);
|
||||
|
||||
views.addProvider({
|
||||
name: "Autoflow Tabular",
|
||||
key: "autoflow",
|
||||
cssClass: "icon-packet",
|
||||
description: "A tabular view of packet contents.",
|
||||
canView: function (d) {
|
||||
return !options || (options.type === d.type);
|
||||
},
|
||||
view: function (domainObject) {
|
||||
return new AutoflowTabularView(
|
||||
domainObject,
|
||||
openmct,
|
||||
document
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
319
src/plugins/autoflow/AutoflowTabularPluginSpec.js
Normal file
319
src/plugins/autoflow/AutoflowTabularPluginSpec.js
Normal file
@ -0,0 +1,319 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./AutoflowTabularPlugin',
|
||||
'./AutoflowTabularConstants',
|
||||
'../../MCT',
|
||||
'zepto'
|
||||
], function (AutoflowTabularPlugin, AutoflowTabularConstants, MCT, $) {
|
||||
describe("AutoflowTabularPlugin", function () {
|
||||
var testType;
|
||||
var testObject;
|
||||
var mockmct;
|
||||
|
||||
beforeEach(function () {
|
||||
testType = "some-type";
|
||||
testObject = { type: testType };
|
||||
mockmct = new MCT();
|
||||
spyOn(mockmct.composition, 'get');
|
||||
spyOn(mockmct.objectViews, 'addProvider');
|
||||
spyOn(mockmct.telemetry, 'getMetadata');
|
||||
spyOn(mockmct.telemetry, 'getValueFormatter');
|
||||
spyOn(mockmct.telemetry, 'limitEvaluator');
|
||||
spyOn(mockmct.telemetry, 'request');
|
||||
spyOn(mockmct.telemetry, 'subscribe');
|
||||
|
||||
var plugin = new AutoflowTabularPlugin({ type: testType });
|
||||
plugin(mockmct);
|
||||
});
|
||||
|
||||
it("installs a view provider", function () {
|
||||
expect(mockmct.objectViews.addProvider).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe("installs a view provider which", function () {
|
||||
var provider;
|
||||
|
||||
beforeEach(function () {
|
||||
provider =
|
||||
mockmct.objectViews.addProvider.mostRecentCall.args[0];
|
||||
});
|
||||
|
||||
it("applies its view to the type from options", function () {
|
||||
expect(provider.canView(testObject)).toBe(true);
|
||||
});
|
||||
|
||||
it("does not apply to other types", function () {
|
||||
expect(provider.canView({ type: 'foo' })).toBe(false);
|
||||
});
|
||||
|
||||
describe("provides a view which", function () {
|
||||
var testKeys;
|
||||
var testChildren;
|
||||
var testContainer;
|
||||
var testHistories;
|
||||
var mockComposition;
|
||||
var mockMetadata;
|
||||
var mockEvaluator;
|
||||
var mockUnsubscribes;
|
||||
var callbacks;
|
||||
var view;
|
||||
|
||||
function waitsForChange() {
|
||||
var callback = jasmine.createSpy('callback');
|
||||
window.requestAnimationFrame(callback);
|
||||
waitsFor(function () {
|
||||
return callback.calls.length > 0;
|
||||
});
|
||||
}
|
||||
|
||||
function emitEvent(mockEmitter, type, event) {
|
||||
mockEmitter.on.calls.forEach(function (call) {
|
||||
if (call.args[0] === type) {
|
||||
call.args[1](event);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
callbacks = {};
|
||||
|
||||
testObject = { type: 'some-type' };
|
||||
testKeys = ['abc', 'def', 'xyz'];
|
||||
testChildren = testKeys.map(function (key) {
|
||||
return {
|
||||
identifier: { namespace: "test", key: key },
|
||||
name: "Object " + key
|
||||
};
|
||||
});
|
||||
testContainer = $('<div>')[0];
|
||||
testHistories = testKeys.reduce(function (histories, key, index) {
|
||||
histories[key] = { key: key, range: index + 10, domain: key + index };
|
||||
return histories;
|
||||
}, {});
|
||||
|
||||
mockComposition =
|
||||
jasmine.createSpyObj('composition', ['load', 'on', 'off']);
|
||||
mockMetadata =
|
||||
jasmine.createSpyObj('metadata', ['valuesForHints']);
|
||||
|
||||
mockEvaluator = jasmine.createSpyObj('evaluator', ['evaluate']);
|
||||
mockUnsubscribes = testKeys.reduce(function (map, key) {
|
||||
map[key] = jasmine.createSpy('unsubscribe-' + key);
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
mockmct.composition.get.andReturn(mockComposition);
|
||||
mockComposition.load.andCallFake(function () {
|
||||
testChildren.forEach(emitEvent.bind(null, mockComposition, 'add'));
|
||||
return Promise.resolve(testChildren);
|
||||
});
|
||||
|
||||
mockmct.telemetry.getMetadata.andReturn(mockMetadata);
|
||||
mockmct.telemetry.getValueFormatter.andCallFake(function (metadatum) {
|
||||
var mockFormatter = jasmine.createSpyObj('formatter', ['format']);
|
||||
mockFormatter.format.andCallFake(function (datum) {
|
||||
return datum[metadatum.hint];
|
||||
});
|
||||
return mockFormatter;
|
||||
});
|
||||
mockmct.telemetry.limitEvaluator.andReturn(mockEvaluator);
|
||||
mockmct.telemetry.subscribe.andCallFake(function (obj, callback) {
|
||||
var key = obj.identifier.key;
|
||||
callbacks[key] = callback;
|
||||
return mockUnsubscribes[key];
|
||||
});
|
||||
mockmct.telemetry.request.andCallFake(function (obj, request) {
|
||||
var key = obj.identifier.key;
|
||||
return Promise.resolve([testHistories[key]]);
|
||||
});
|
||||
mockMetadata.valuesForHints.andCallFake(function (hints) {
|
||||
return [{ hint: hints[0] }];
|
||||
});
|
||||
|
||||
view = provider.view(testObject);
|
||||
view.show(testContainer);
|
||||
|
||||
waitsForChange();
|
||||
});
|
||||
|
||||
it("populates its container", function () {
|
||||
expect(testContainer.children.length > 0).toBe(true);
|
||||
});
|
||||
|
||||
describe("when rows have been populated", function () {
|
||||
function rowsMatch() {
|
||||
var rows = $(testContainer).find(".l-autoflow-row").length;
|
||||
return rows === testChildren.length;
|
||||
}
|
||||
|
||||
it("shows one row per child object", function () {
|
||||
waitsFor(rowsMatch);
|
||||
});
|
||||
|
||||
it("adds rows on composition change", function () {
|
||||
var child = {
|
||||
identifier: { namespace: "test", key: "123" },
|
||||
name: "Object 123"
|
||||
};
|
||||
testChildren.push(child);
|
||||
emitEvent(mockComposition, 'add', child);
|
||||
waitsFor(rowsMatch);
|
||||
});
|
||||
|
||||
it("removes rows on composition change", function () {
|
||||
var child = testChildren.pop();
|
||||
emitEvent(mockComposition, 'remove', child.identifier);
|
||||
waitsFor(rowsMatch);
|
||||
});
|
||||
});
|
||||
|
||||
it("removes subscriptions when destroyed", function () {
|
||||
testKeys.forEach(function (key) {
|
||||
expect(mockUnsubscribes[key]).not.toHaveBeenCalled();
|
||||
});
|
||||
view.destroy();
|
||||
testKeys.forEach(function (key) {
|
||||
expect(mockUnsubscribes[key]).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it("provides a button to change column width", function () {
|
||||
var initialWidth = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
|
||||
var nextWidth =
|
||||
initialWidth + AutoflowTabularConstants.COLUMN_WIDTH_STEP;
|
||||
|
||||
expect($(testContainer).find('.l-autoflow-col').css('width'))
|
||||
.toEqual(initialWidth + 'px');
|
||||
|
||||
$(testContainer).find('.change-column-width').click();
|
||||
|
||||
waitsFor(function () {
|
||||
var width = $(testContainer).find('.l-autoflow-col').css('width');
|
||||
return width !== initialWidth + 'px';
|
||||
});
|
||||
|
||||
runs(function () {
|
||||
expect($(testContainer).find('.l-autoflow-col').css('width'))
|
||||
.toEqual(nextWidth + 'px');
|
||||
});
|
||||
});
|
||||
|
||||
it("subscribes to all child objects", function () {
|
||||
testKeys.forEach(function (key) {
|
||||
expect(callbacks[key]).toEqual(jasmine.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
it("displays historical telemetry", function () {
|
||||
waitsFor(function () {
|
||||
return $(testContainer).find(".l-autoflow-item").filter(".r").text() !== "";
|
||||
});
|
||||
|
||||
runs(function () {
|
||||
testKeys.forEach(function (key, index) {
|
||||
var datum = testHistories[key];
|
||||
var $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
|
||||
expect($cell.text()).toEqual(String(datum.range));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("displays incoming telemetry", function () {
|
||||
var testData = testKeys.map(function (key, index) {
|
||||
return { key: key, range: index * 100, domain: key + index };
|
||||
});
|
||||
|
||||
testData.forEach(function (datum) {
|
||||
callbacks[datum.key](datum);
|
||||
});
|
||||
|
||||
waitsForChange();
|
||||
|
||||
runs(function () {
|
||||
testData.forEach(function (datum, index) {
|
||||
var $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
|
||||
expect($cell.text()).toEqual(String(datum.range));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("updates classes for limit violations", function () {
|
||||
var testClass = "some-limit-violation";
|
||||
mockEvaluator.evaluate.andReturn({ cssClass: testClass });
|
||||
testKeys.forEach(function (key) {
|
||||
callbacks[key]({ range: 'foo', domain: 'bar' });
|
||||
});
|
||||
|
||||
waitsForChange();
|
||||
|
||||
runs(function () {
|
||||
testKeys.forEach(function (datum, index) {
|
||||
var $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
|
||||
expect($cell.hasClass(testClass)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("automatically flows to new columns", function () {
|
||||
var rowHeight = AutoflowTabularConstants.ROW_HEIGHT;
|
||||
var sliderHeight = AutoflowTabularConstants.SLIDER_HEIGHT;
|
||||
var count = testKeys.length;
|
||||
var $container = $(testContainer);
|
||||
|
||||
function columnsHaveAutoflowed() {
|
||||
var itemsHeight = $container.find('.l-autoflow-items').height();
|
||||
var availableHeight = itemsHeight - sliderHeight;
|
||||
var availableRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
|
||||
var columns = Math.ceil(count / availableRows);
|
||||
return $container.find('.l-autoflow-col').length === columns;
|
||||
}
|
||||
|
||||
$container.find('.abs').css({
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
right: '0px',
|
||||
top: '0px',
|
||||
bottom: '0px'
|
||||
});
|
||||
$container.css({ position: 'absolute' });
|
||||
|
||||
runs($container.appendTo.bind($container, document.body));
|
||||
for (var height = 0; height < rowHeight * count * 2; height += rowHeight / 2) {
|
||||
runs($container.css.bind($container, 'height', height + 'px'));
|
||||
waitsFor(columnsHaveAutoflowed);
|
||||
}
|
||||
runs($container.remove.bind($container));
|
||||
});
|
||||
|
||||
it("loads composition exactly once", function () {
|
||||
var testObj = testChildren.pop();
|
||||
emitEvent(mockComposition, 'remove', testObj.identifier);
|
||||
testChildren.push(testObj);
|
||||
emitEvent(mockComposition, 'add', testObj);
|
||||
expect(mockComposition.load.calls.length).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
94
src/plugins/autoflow/AutoflowTabularRowController.js
Normal file
94
src/plugins/autoflow/AutoflowTabularRowController.js
Normal file
@ -0,0 +1,94 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
/**
|
||||
* Controller for individual rows of an Autoflow Tabular View.
|
||||
* Subscribes to telemetry and updates row data.
|
||||
*
|
||||
* @param {DomainObject} domainObject the object being viewed
|
||||
* @param {*} data the view data
|
||||
* @param openmct a reference to the openmct application
|
||||
* @param {Function} callback a callback to invoke with "last updated" timestamps
|
||||
*/
|
||||
function AutoflowTabularRowController(domainObject, data, openmct, callback) {
|
||||
this.domainObject = domainObject;
|
||||
this.data = data;
|
||||
this.openmct = openmct;
|
||||
this.callback = callback;
|
||||
|
||||
this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
|
||||
this.ranges = this.metadata.valuesForHints(['range']);
|
||||
this.domains = this.metadata.valuesForHints(['domain']);
|
||||
this.rangeFormatter =
|
||||
this.openmct.telemetry.getValueFormatter(this.ranges[0]);
|
||||
this.domainFormatter =
|
||||
this.openmct.telemetry.getValueFormatter(this.domains[0]);
|
||||
this.evaluator =
|
||||
this.openmct.telemetry.limitEvaluator(this.domainObject);
|
||||
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update row to reflect incoming telemetry data.
|
||||
* @private
|
||||
*/
|
||||
AutoflowTabularRowController.prototype.updateRowData = function (datum) {
|
||||
var violations = this.evaluator.evaluate(datum, this.ranges[0]);
|
||||
|
||||
this.initialized = true;
|
||||
this.data.classes = violations ? violations.cssClass : "";
|
||||
this.data.value = this.rangeFormatter.format(datum);
|
||||
this.callback(this.domainFormatter.format(datum));
|
||||
};
|
||||
|
||||
/**
|
||||
* Activate this controller; begin listening for changes.
|
||||
*/
|
||||
AutoflowTabularRowController.prototype.activate = function () {
|
||||
this.unsubscribe = this.openmct.telemetry.subscribe(
|
||||
this.domainObject,
|
||||
this.updateRowData.bind(this)
|
||||
);
|
||||
|
||||
this.openmct.telemetry.request(
|
||||
this.domainObject,
|
||||
{ size: 1 }
|
||||
).then(function (history) {
|
||||
if (!this.initialized && history.length > 0) {
|
||||
this.updateRowData(history[history.length - 1]);
|
||||
}
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy this controller; detach any associated resources.
|
||||
*/
|
||||
AutoflowTabularRowController.prototype.destroy = function () {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
};
|
||||
|
||||
return AutoflowTabularRowController;
|
||||
});
|
||||
125
src/plugins/autoflow/AutoflowTabularView.js
Normal file
125
src/plugins/autoflow/AutoflowTabularView.js
Normal file
@ -0,0 +1,125 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./AutoflowTabularController',
|
||||
'./AutoflowTabularConstants',
|
||||
'../../ui/VueView',
|
||||
'text!./autoflow-tabular.html'
|
||||
], function (
|
||||
AutoflowTabularController,
|
||||
AutoflowTabularConstants,
|
||||
VueView,
|
||||
autoflowTemplate
|
||||
) {
|
||||
var ROW_HEIGHT = AutoflowTabularConstants.ROW_HEIGHT;
|
||||
var SLIDER_HEIGHT = AutoflowTabularConstants.SLIDER_HEIGHT;
|
||||
var INITIAL_COLUMN_WIDTH = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
|
||||
var MAX_COLUMN_WIDTH = AutoflowTabularConstants.MAX_COLUMN_WIDTH;
|
||||
var COLUMN_WIDTH_STEP = AutoflowTabularConstants.COLUMN_WIDTH_STEP;
|
||||
|
||||
/**
|
||||
* Implements the Autoflow Tabular view of a domain object.
|
||||
*/
|
||||
function AutoflowTabularView(domainObject, openmct) {
|
||||
var data = {
|
||||
items: [],
|
||||
columns: [],
|
||||
width: INITIAL_COLUMN_WIDTH,
|
||||
filter: "",
|
||||
updated: "No updates",
|
||||
rowCount: 1
|
||||
};
|
||||
var controller =
|
||||
new AutoflowTabularController(domainObject, data, openmct);
|
||||
var interval;
|
||||
|
||||
VueView.call(this, {
|
||||
data: data,
|
||||
methods: {
|
||||
increaseColumnWidth: function () {
|
||||
data.width += COLUMN_WIDTH_STEP;
|
||||
data.width = data.width > MAX_COLUMN_WIDTH ?
|
||||
INITIAL_COLUMN_WIDTH : data.width;
|
||||
},
|
||||
reflow: function () {
|
||||
var column = [];
|
||||
var index = 0;
|
||||
var filteredItems =
|
||||
data.items.filter(function (item) {
|
||||
return item.name.toLowerCase()
|
||||
.indexOf(data.filter.toLowerCase()) !== -1;
|
||||
});
|
||||
|
||||
data.columns = [];
|
||||
|
||||
while (index < filteredItems.length) {
|
||||
if (column.length >= data.rowCount) {
|
||||
data.columns.push(column);
|
||||
column = [];
|
||||
}
|
||||
|
||||
column.push(filteredItems[index]);
|
||||
index += 1;
|
||||
}
|
||||
|
||||
if (column.length > 0) {
|
||||
data.columns.push(column);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filter: 'reflow',
|
||||
items: 'reflow',
|
||||
rowCount: 'reflow'
|
||||
},
|
||||
template: autoflowTemplate,
|
||||
destroyed: function () {
|
||||
controller.destroy();
|
||||
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
interval = undefined;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
controller.activate();
|
||||
|
||||
var updateRowHeight = function () {
|
||||
var tabularArea = this.$refs.autoflowItems;
|
||||
var height = tabularArea ? tabularArea.clientHeight : 0;
|
||||
var available = height - SLIDER_HEIGHT;
|
||||
var rows = Math.max(1, Math.floor(available / ROW_HEIGHT));
|
||||
data.rowCount = rows;
|
||||
}.bind(this);
|
||||
|
||||
interval = setInterval(updateRowHeight, 50);
|
||||
this.$nextTick(updateRowHeight);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
AutoflowTabularView.prototype = Object.create(VueView.prototype);
|
||||
|
||||
return AutoflowTabularView;
|
||||
});
|
||||
|
||||
42
src/plugins/autoflow/autoflow-tabular.html
Normal file
42
src/plugins/autoflow/autoflow-tabular.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="items-holder abs contents autoflow obj-value-format">
|
||||
<div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
|
||||
<span class="t-filter l-filter">
|
||||
<input type="search" class="t-filter-input" v-model="filter"/>
|
||||
<a v-if="filter !== ''" v-on:click="filter = ''" class="clear-icon icon-x-in-circle"></a>
|
||||
</span>
|
||||
|
||||
<div class="flex-elem grows t-last-update" title="Last Update">{{updated}}</div>
|
||||
<a title="Change column width"
|
||||
v-on:click="increaseColumnWidth()"
|
||||
class="s-button flex-elem icon-arrows-right-left change-column-width"></a>
|
||||
</div>
|
||||
<div class="abs t-autoflow-items l-autoflow-items" ref="autoflowItems">
|
||||
<ul v-for="column in columns" class="l-autoflow-col" :style="{ width: width + 'px' }">
|
||||
<li v-for="row in column" class="l-autoflow-row" >
|
||||
<span :title="row.value" :data-value="row.value" :class="'l-autoflow-item r l-obj-val-format ' + row.classes">{{row.value}}</span>
|
||||
<span :title="row.name" class="l-autoflow-item l">{{row.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ define([
|
||||
'lodash',
|
||||
'./utcTimeSystem/plugin',
|
||||
'../../example/generator/plugin',
|
||||
'../../platform/features/autoflow/plugin',
|
||||
'./autoflow/AutoflowTabularPlugin',
|
||||
'./timeConductor/plugin',
|
||||
'../../example/imagery/plugin',
|
||||
'../../platform/import-export/bundle',
|
||||
|
||||
33
src/ui/VueView.js
Normal file
33
src/ui/VueView.js
Normal file
@ -0,0 +1,33 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(['vue'], function (Vue) {
|
||||
function VueView(options) {
|
||||
var vm = new Vue(options);
|
||||
this.show = function (container) {
|
||||
container.appendChild(vm.$mount().$el);
|
||||
};
|
||||
this.destroy = vm.$destroy.bind(vm);
|
||||
}
|
||||
|
||||
return VueView;
|
||||
});
|
||||
@ -63,6 +63,7 @@ requirejs.config({
|
||||
"screenfull": "bower_components/screenfull/dist/screenfull.min",
|
||||
"text": "bower_components/text/text",
|
||||
"uuid": "bower_components/node-uuid/uuid",
|
||||
"vue": "node_modules/vue/dist/vue.min",
|
||||
"zepto": "bower_components/zepto/zepto.min",
|
||||
"lodash": "bower_components/lodash/lodash",
|
||||
"d3-selection": "node_modules/d3-selection/build/d3-selection.min",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user