mirror of
https://github.com/nasa/openmct.git
synced 2025-06-25 18:50:11 +00:00
Compare commits
9 Commits
plotly-tes
...
indicators
Author | SHA1 | Date | |
---|---|---|---|
7e3ade81e3 | |||
05ed6597e8 | |||
638651a0ad | |||
dbae627ad9 | |||
a6e93f7ad0 | |||
0dc75b2ace | |||
96e11c4f1b | |||
6cc7f23786 | |||
ce11d48d25 |
@ -38,7 +38,8 @@ define([
|
||||
"provides": "identityService",
|
||||
"type": "provider",
|
||||
"depends": [
|
||||
"dialogService"
|
||||
"dialogService",
|
||||
"$q"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
@ -55,21 +55,37 @@ define(
|
||||
* @implements {IdentityService}
|
||||
* @memberof platform/identity
|
||||
*/
|
||||
function ExampleIdentityProvider(dialogService) {
|
||||
// Handle rejected dialog messages by treating the
|
||||
// current user as undefined.
|
||||
function echo(v) { return v; }
|
||||
function giveUndefined() { return undefined; }
|
||||
function ExampleIdentityProvider(dialogService, $q) {
|
||||
this.dialogService = dialogService;
|
||||
this.$q = $q;
|
||||
|
||||
this.userPromise =
|
||||
dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
|
||||
.then(echo, giveUndefined);
|
||||
this.returnUser = this.returnUser.bind(this);
|
||||
this.returnUndefined = this.returnUndefined.bind(this);
|
||||
}
|
||||
|
||||
ExampleIdentityProvider.prototype.getUser = function () {
|
||||
return this.userPromise;
|
||||
if (this.user) {
|
||||
return this.$q.when(this.user);
|
||||
} else {
|
||||
return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
|
||||
.then(this.returnUser, this.returnUndefined);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ExampleIdentityProvider.prototype.returnUser = function (user) {
|
||||
return this.user = user;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ExampleIdentityProvider.prototype.returnUndefined = function () {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return ExampleIdentityProvider;
|
||||
}
|
||||
);
|
||||
|
@ -54,7 +54,7 @@ define(
|
||||
return "icon-object-unknown";
|
||||
},
|
||||
getText: function () {
|
||||
return latest;
|
||||
return "" + latest;
|
||||
},
|
||||
getDescription: function () {
|
||||
return "";
|
||||
|
@ -34,7 +34,6 @@ define([
|
||||
"./src/controllers/ContextMenuController",
|
||||
"./src/controllers/ClickAwayController",
|
||||
"./src/controllers/ViewSwitcherController",
|
||||
"./src/controllers/BottomBarController",
|
||||
"./src/controllers/GetterSetterController",
|
||||
"./src/controllers/SelectorController",
|
||||
"./src/controllers/ObjectInspectorController",
|
||||
@ -49,6 +48,7 @@ define([
|
||||
"./src/directives/MCTSplitPane",
|
||||
"./src/directives/MCTSplitter",
|
||||
"./src/directives/MCTTree",
|
||||
"./src/directives/MCTIndicators",
|
||||
"./src/filters/ReverseFilter",
|
||||
"text!./res/templates/bottombar.html",
|
||||
"text!./res/templates/controls/action-button.html",
|
||||
@ -84,7 +84,6 @@ define([
|
||||
ContextMenuController,
|
||||
ClickAwayController,
|
||||
ViewSwitcherController,
|
||||
BottomBarController,
|
||||
GetterSetterController,
|
||||
SelectorController,
|
||||
ObjectInspectorController,
|
||||
@ -99,6 +98,7 @@ define([
|
||||
MCTSplitPane,
|
||||
MCTSplitter,
|
||||
MCTTree,
|
||||
MCTIndicators,
|
||||
ReverseFilter,
|
||||
bottombarTemplate,
|
||||
actionButtonTemplate,
|
||||
@ -275,13 +275,6 @@ define([
|
||||
"$timeout"
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "BottomBarController",
|
||||
"implementation": BottomBarController,
|
||||
"depends": [
|
||||
"indicators[]"
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "GetterSetterController",
|
||||
"implementation": GetterSetterController,
|
||||
@ -395,6 +388,11 @@ define([
|
||||
"key": "mctTree",
|
||||
"implementation": MCTTree,
|
||||
"depends": ['gestureService']
|
||||
},
|
||||
{
|
||||
"key": "mctIndicators",
|
||||
"implementation": MCTIndicators,
|
||||
"depends": ['openmct']
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
|
@ -19,14 +19,9 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
|
||||
<div class='abs bottom-bar ue-bottom-bar mobile-disable-select'>
|
||||
<div id='status' class='status-holder'>
|
||||
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
||||
ng-model="indicator.ngModel"
|
||||
key="indicator.template"
|
||||
class="status-block-holder"
|
||||
ng-class='indicator.ngModel.getGlyphClass()'>
|
||||
</mct-include>
|
||||
<mct-indicators></mct-indicators>
|
||||
</div>
|
||||
<mct-include key="'message-banner'"></mct-include>
|
||||
<mct-include key="'about-logo'"></mct-include>
|
||||
|
@ -21,13 +21,11 @@
|
||||
-->
|
||||
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
|
||||
<div class='status block'
|
||||
title="{{ngModel.getDescription()}}"
|
||||
ng-click='ngModel.configure()'
|
||||
ng-show="ngModel.getText().length > 0">
|
||||
<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
|
||||
ng-class='ngModel.getTextClass()'>
|
||||
{{ngModel.getText()}}
|
||||
<a class="s-button icon-gear" ng-if="ngModel.configure"></a>
|
||||
title="{{ngModel.description()}}"
|
||||
ng-show="ngModel.text().length > 0">
|
||||
<span class="status-indicator {{ngModel.cssClass()}}"></span><span class="label"
|
||||
ng-class='ngModel.textClass()'>
|
||||
{{ngModel.text()}}
|
||||
</span><span class="count">
|
||||
</span>
|
||||
</div>
|
||||
|
@ -23,37 +23,21 @@
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
|
||||
/**
|
||||
* Controller for the bottombar template. Exposes
|
||||
* available indicators (of extension category "indicators")
|
||||
* @memberof platform/commonUI/general
|
||||
* @constructor
|
||||
*/
|
||||
function BottomBarController(indicators) {
|
||||
// Utility function used to make indicators presentable
|
||||
// for display.
|
||||
function present(Indicator) {
|
||||
return {
|
||||
template: Indicator.template || "indicator",
|
||||
ngModel: typeof Indicator === 'function' ?
|
||||
new Indicator() : Indicator
|
||||
};
|
||||
}
|
||||
|
||||
this.indicators = indicators.map(present);
|
||||
function MCTIndicators(openmct) {
|
||||
return {
|
||||
restrict: "E",
|
||||
link: function link(scope, element, attrs) {
|
||||
openmct.indicators.displayFunctions().then(function (displayFunctions){
|
||||
displayFunctions.forEach(function (displayFunction){
|
||||
var displayElement = displayFunction();
|
||||
element.append(displayElement);
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all indicators to display.
|
||||
* @returns {Indicator[]} all indicators
|
||||
* to display in the bottom bar.
|
||||
* @memberof platform/commonUI/general.BottomBarController#
|
||||
*/
|
||||
BottomBarController.prototype.getIndicators = function () {
|
||||
return this.indicators;
|
||||
};
|
||||
return MCTIndicators;
|
||||
|
||||
return BottomBarController;
|
||||
}
|
||||
);
|
@ -1,76 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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(
|
||||
["../../src/controllers/BottomBarController"],
|
||||
function (BottomBarController) {
|
||||
|
||||
describe("The bottom bar controller", function () {
|
||||
var testIndicators,
|
||||
testIndicatorA,
|
||||
testIndicatorB,
|
||||
testIndicatorC,
|
||||
mockIndicator,
|
||||
controller;
|
||||
|
||||
beforeEach(function () {
|
||||
mockIndicator = jasmine.createSpyObj(
|
||||
"indicator",
|
||||
["getGlyph", "getCssClass", "getText"]
|
||||
);
|
||||
|
||||
testIndicatorA = {};
|
||||
testIndicatorB = function () {
|
||||
return mockIndicator;
|
||||
};
|
||||
testIndicatorC = { template: "someTemplate" };
|
||||
|
||||
testIndicators = [
|
||||
testIndicatorA,
|
||||
testIndicatorB,
|
||||
testIndicatorC
|
||||
];
|
||||
|
||||
controller = new BottomBarController(testIndicators);
|
||||
});
|
||||
|
||||
it("exposes one indicator description per extension", function () {
|
||||
expect(controller.getIndicators().length)
|
||||
.toEqual(testIndicators.length);
|
||||
});
|
||||
|
||||
it("uses template field provided, or its own default", function () {
|
||||
// "indicator" is the default;
|
||||
// only testIndicatorC overrides this.
|
||||
var indicators = controller.getIndicators();
|
||||
expect(indicators[0].template).toEqual("indicator");
|
||||
expect(indicators[1].template).toEqual("indicator");
|
||||
expect(indicators[2].template).toEqual("someTemplate");
|
||||
});
|
||||
|
||||
it("instantiates indicators given as constructors", function () {
|
||||
// testIndicatorB constructs to mockIndicator
|
||||
expect(controller.getIndicators()[1].ngModel).toBe(mockIndicator);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
@ -55,7 +55,6 @@ define([
|
||||
timerTemplate,
|
||||
legacyRegistry
|
||||
) {
|
||||
|
||||
legacyRegistry.register("platform/features/clock", {
|
||||
"name": "Clocks/Timers",
|
||||
"descriptions": "Domain objects for displaying current & relative times.",
|
||||
@ -86,11 +85,6 @@ define([
|
||||
"CLOCK_INDICATOR_FORMAT"
|
||||
],
|
||||
"priority": "preferred"
|
||||
},
|
||||
{
|
||||
"implementation": FollowIndicator,
|
||||
"depends": ["timerService"],
|
||||
"priority": "fallback"
|
||||
}
|
||||
],
|
||||
"services": [
|
||||
@ -305,6 +299,10 @@ define([
|
||||
}
|
||||
}
|
||||
],
|
||||
"runs": [{
|
||||
"implementation": FollowIndicator,
|
||||
"depends": ["openmct", "timerService"]
|
||||
}],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "moment-duration-format",
|
||||
|
@ -20,38 +20,29 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
['moment'],
|
||||
function (moment) {
|
||||
var NO_TIMER = "No timer being followed";
|
||||
define([],function () {
|
||||
|
||||
/**
|
||||
* Indicator that displays the active timer, as well as its
|
||||
* current state.
|
||||
* @implements {Indicator}
|
||||
* @memberof platform/features/clock
|
||||
*/
|
||||
function FollowIndicator(timerService) {
|
||||
this.timerService = timerService;
|
||||
function setIndicatorStatus(indicator, timer) {
|
||||
if (timer !== undefined) {
|
||||
indicator.cssClass('icon-timer s-status-ok');
|
||||
indicator.text('Following timer ' + timer.name);
|
||||
} else {
|
||||
indicator.cssClass('icon-timer');
|
||||
indicator.text('No timer being followed.');
|
||||
}
|
||||
|
||||
FollowIndicator.prototype.getGlyphClass = function () {
|
||||
return "";
|
||||
};
|
||||
|
||||
FollowIndicator.prototype.getCssClass = function () {
|
||||
return (this.timerService.getTimer()) ? "icon-timer s-status-ok" : "icon-timer";
|
||||
};
|
||||
|
||||
FollowIndicator.prototype.getText = function () {
|
||||
var timer = this.timerService.getTimer();
|
||||
return (timer) ? 'Following timer ' + timer.getModel().name : NO_TIMER;
|
||||
};
|
||||
|
||||
FollowIndicator.prototype.getDescription = function () {
|
||||
return "";
|
||||
};
|
||||
|
||||
return FollowIndicator;
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Indicator that displays the active timer, as well as its
|
||||
* current state.
|
||||
* @memberof platform/features/clock
|
||||
*/
|
||||
return function installFollowIndicator(openmct, timerService) {
|
||||
var indicator = openmct.indicators.create();
|
||||
var timer = timerService.getTimer();
|
||||
var setIndicatorStatusFromTimer = setIndicatorStatus.bind(this, indicator);
|
||||
|
||||
setIndicatorStatusFromTimer(timer);
|
||||
timerService.on('change', setIndicatorStatusFromTimer);
|
||||
};
|
||||
});
|
||||
|
@ -44,7 +44,7 @@ define(['EventEmitter'], function (EventEmitter) {
|
||||
*/
|
||||
TimerService.prototype.setTimer = function (timer) {
|
||||
this.timer = timer;
|
||||
this.emit('change');
|
||||
this.emit('change', timer);
|
||||
|
||||
if (this.stopObserving) {
|
||||
this.stopObserving();
|
||||
|
@ -193,6 +193,15 @@ define([
|
||||
* @name telemetry
|
||||
*/
|
||||
this.telemetry = new api.TelemetryAPI(this);
|
||||
|
||||
/**
|
||||
* An interface for creating new indicators and changing them dynamically.
|
||||
*
|
||||
* @type {module:openmct.IndicatorAPI}
|
||||
* @memberof module:openmct.MCT#
|
||||
* @name indicators
|
||||
*/
|
||||
this.indicators = new api.IndicatorAPI(this);
|
||||
|
||||
this.Dialog = api.Dialog;
|
||||
|
||||
|
@ -27,7 +27,8 @@ define([
|
||||
'./types/TypeRegistry',
|
||||
'./ui/Dialog',
|
||||
'./ui/GestureAPI',
|
||||
'./telemetry/TelemetryAPI'
|
||||
'./telemetry/TelemetryAPI',
|
||||
'./indicators/IndicatorAPI'
|
||||
], function (
|
||||
TimeAPI,
|
||||
ObjectAPI,
|
||||
@ -35,7 +36,8 @@ define([
|
||||
TypeRegistry,
|
||||
Dialog,
|
||||
GestureAPI,
|
||||
TelemetryAPI
|
||||
TelemetryAPI,
|
||||
IndicatorAPI
|
||||
) {
|
||||
return {
|
||||
TimeAPI: TimeAPI,
|
||||
@ -44,6 +46,7 @@ define([
|
||||
Dialog: Dialog,
|
||||
TypeRegistry: TypeRegistry,
|
||||
GestureAPI: GestureAPI,
|
||||
TelemetryAPI: TelemetryAPI
|
||||
TelemetryAPI: TelemetryAPI,
|
||||
IndicatorAPI: IndicatorAPI
|
||||
};
|
||||
});
|
||||
|
111
src/api/indicators/Indicator.js
Normal file
111
src/api/indicators/Indicator.js
Normal file
@ -0,0 +1,111 @@
|
||||
/*****************************************************************************
|
||||
* 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([
|
||||
'text!./res/indicator-template.html'
|
||||
], function (
|
||||
indicatorTemplate
|
||||
) {
|
||||
|
||||
function Indicator(openmct) {
|
||||
this.openmct = openmct;
|
||||
this.textValue = '';
|
||||
this.descriptionValue = '';
|
||||
this.cssClassValue = '';
|
||||
this.iconClassValue = '';
|
||||
this.textClassValue = '';
|
||||
this.glyphClassValue = '';
|
||||
this.node = undefined;
|
||||
}
|
||||
|
||||
Indicator.prototype.text = function (text) {
|
||||
if (text !== undefined && text !== this.textValue) {
|
||||
this.textValue = text;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.textValue;
|
||||
}
|
||||
|
||||
Indicator.prototype.description = function (description) {
|
||||
if (description !== undefined && description !== this.descriptionValue) {
|
||||
this.descriptionValue = description;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.descriptionValue;
|
||||
}
|
||||
|
||||
Indicator.prototype.iconClass = function (iconClass) {
|
||||
if (iconClass !== undefined && iconClass !== this.iconClassValue) {
|
||||
this.iconClassValue = iconClass;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.iconClassValue;
|
||||
}
|
||||
|
||||
Indicator.prototype.cssClass = function (cssClass) {
|
||||
if (cssClass !== undefined && cssClass !== this.cssClassValue) {
|
||||
this.cssClassValue = cssClass;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.cssClassValue;
|
||||
}
|
||||
|
||||
Indicator.prototype.glyphClass = function (glyphClass) {
|
||||
if (glyphClass !== undefined && glyphClass !== this.glyphClassValue) {
|
||||
this.glyphClassValue = glyphClass;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.glyphClassValue;
|
||||
}
|
||||
|
||||
Indicator.prototype.textClass = function (textClass) {
|
||||
if (textClass !== undefined && textClass !== this.textClassValue) {
|
||||
this.textClassValue = textClass;
|
||||
Indicator.defaultDisplayFunction.call(this);
|
||||
}
|
||||
|
||||
return this.textClassValue;
|
||||
}
|
||||
|
||||
Indicator.defaultDisplayFunction = function () {
|
||||
var html = indicatorTemplate.replace('{{indicator.text}}', this.text())
|
||||
.replace('{{indicator.textClass}}', this.textClass())
|
||||
.replace('{{indicator.cssClass}}', this.cssClass())
|
||||
.replace('{{indicator.glyphClass}}', this.glyphClass())
|
||||
.replace('{{indicator.description}}', this.description());
|
||||
|
||||
if (!this.node){
|
||||
this.node = document.createElement('div');
|
||||
this.node.className = 'status-block-holder';
|
||||
}
|
||||
this.node.innerHTML = html;
|
||||
|
||||
return this.node;
|
||||
}
|
||||
|
||||
return Indicator;
|
||||
});
|
85
src/api/indicators/IndicatorAPI.js
Normal file
85
src/api/indicators/IndicatorAPI.js
Normal file
@ -0,0 +1,85 @@
|
||||
/*****************************************************************************
|
||||
* 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([
|
||||
'./Indicator',
|
||||
'./LegacyIndicator'
|
||||
], function (
|
||||
Indicator,
|
||||
LegacyIndicator
|
||||
) {
|
||||
|
||||
function IndicatorAPI(openmct) {
|
||||
this.openmct = openmct;
|
||||
this.indicators = [];
|
||||
this.legacyIndicatorsPromise = new Promise(function (resolve) {
|
||||
this.resolveWithIndicators = resolve;
|
||||
onStartWrapLegacyIndicators.call(this);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
IndicatorAPI.prototype.create = function (displayFunction) {
|
||||
if (displayFunction !== undefined) {
|
||||
this.indicators.push(displayFunction);
|
||||
} else {
|
||||
var indicator = new Indicator(this.openmct);
|
||||
this.indicators.push(Indicator.defaultDisplayFunction.bind(indicator));
|
||||
return indicator;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IndicatorAPI.prototype.displayFunctions = function () {
|
||||
return this.legacyIndicatorsPromise.then(function (legacyIndicators) {
|
||||
var wrappedLegacyIndicators = wrapAllLegacyIndicators.call(this, legacyIndicators);
|
||||
return this.indicators.concat(wrappedLegacyIndicators);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
function onStartWrapLegacyIndicators() {
|
||||
this.openmct.legacyExtension('runs', {
|
||||
depends: ['indicators[]'],
|
||||
implementation: this.resolveWithIndicators
|
||||
});
|
||||
}
|
||||
|
||||
function wrapAllLegacyIndicators(legacyIndicators) {
|
||||
return legacyIndicators.map(convertToNewIndicator.bind(this));
|
||||
}
|
||||
|
||||
function convertToNewIndicator(legacyIndicatorDef) {
|
||||
var legacyIndicator;
|
||||
if (typeof legacyIndicatorDef === 'function') {
|
||||
legacyIndicator = new legacyIndicatorDef();
|
||||
} else {
|
||||
legacyIndicator = legacyIndicatorDef;
|
||||
}
|
||||
|
||||
var newStyleIndicator = new LegacyIndicator(this.openmct, legacyIndicator, legacyIndicatorDef.template);
|
||||
return LegacyIndicator.displayFunction.bind(newStyleIndicator);
|
||||
}
|
||||
|
||||
return IndicatorAPI;
|
||||
|
||||
});
|
81
src/api/indicators/LegacyIndicator.js
Normal file
81
src/api/indicators/LegacyIndicator.js
Normal file
@ -0,0 +1,81 @@
|
||||
/*****************************************************************************
|
||||
* 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([
|
||||
'zepto',
|
||||
'./Indicator'
|
||||
], function ($, Indicator) {
|
||||
|
||||
var TEMPLATE =
|
||||
'<mct-include ' +
|
||||
' ng-model="indicator" ' +
|
||||
' key="template" ' +
|
||||
' class="status-block-holder" ' +
|
||||
' ng-class="indicator.glyphClass()"> ' +
|
||||
' </mct-include>';
|
||||
|
||||
function LegacyIndicator(openmct, legacyIndicator, template) {
|
||||
this.openmct = openmct;
|
||||
this.legacyIndicator = legacyIndicator;
|
||||
this.template = template;
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.display = function () {
|
||||
return legacyDisplayFunction.bind(this);
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.text = function () {
|
||||
return this.legacyIndicator.getText &&
|
||||
this.legacyIndicator.getText();
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.description = function () {
|
||||
return this.legacyIndicator.getDescription &&
|
||||
this.legacyIndicator.getDescription();
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.cssClass = function () {
|
||||
return this.legacyIndicator.getCssClass &&
|
||||
this.legacyIndicator.getCssClass();
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.glyphClass = function () {
|
||||
return this.legacyIndicator.getGlyphClass &&
|
||||
this.legacyIndicator.getGlyphClass();
|
||||
}
|
||||
|
||||
LegacyIndicator.prototype.textClass = function () {
|
||||
return this.legacyIndicator.getTextClass &&
|
||||
this.legacyIndicator.getTextClass();
|
||||
}
|
||||
|
||||
LegacyIndicator.displayFunction = function () {
|
||||
var $compile = this.openmct.$injector.get('$compile');
|
||||
var $rootScope = this.openmct.$injector.get('$rootScope');
|
||||
var scope = $rootScope.$new(true);
|
||||
scope.indicator = this;
|
||||
scope.template = this.template || 'indicator';
|
||||
return $compile(TEMPLATE)(scope)[0];
|
||||
}
|
||||
|
||||
return LegacyIndicator;
|
||||
});
|
7
src/api/indicators/res/indicator-template.html
Normal file
7
src/api/indicators/res/indicator-template.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="{{indicator.glyphClass}}">
|
||||
<div class="status block" title="{{indicator.description}}" ng-show="ngModel.text().length > 0">
|
||||
<span class="status-indicator {{indicator.cssClass}}"></span><span class="label" class='{{indicator.textClass}}'>
|
||||
{{indicator.text}}
|
||||
</span><span class="count"></span>
|
||||
</div>
|
||||
</div>
|
@ -21,8 +21,8 @@
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
['zepto'],
|
||||
function ($) {
|
||||
|
||||
// Set of connection states; changing among these states will be
|
||||
// reflected in the indicator's appearance.
|
||||
@ -33,65 +33,81 @@ define(
|
||||
glyphClass: "ok"
|
||||
},
|
||||
PENDING = {
|
||||
glyphClass: 'caution'
|
||||
glyphClass: "caution"
|
||||
},
|
||||
DISCONNECTED = {
|
||||
glyphClass: "err"
|
||||
};
|
||||
function URLIndicator($http, $interval) {
|
||||
var self = this;
|
||||
this.cssClass = this.options.cssClass ? this.options.cssClass : "icon-database";
|
||||
this.URLpath = this.options.url;
|
||||
this.label = this.options.label ? this.options.label : this.options.url;
|
||||
this.interval = this.options.interval || 10000;
|
||||
this.state = PENDING;
|
||||
function URLIndicator(options, openmct) {
|
||||
this.bindMethods();
|
||||
|
||||
function handleError(e) {
|
||||
self.state = DISCONNECTED;
|
||||
}
|
||||
function handleResponse() {
|
||||
self.state = CONNECTED;
|
||||
}
|
||||
function updateIndicator() {
|
||||
$http.get(self.URLpath).then(handleResponse, handleError);
|
||||
}
|
||||
updateIndicator();
|
||||
$interval(updateIndicator, self.interval, 0, false);
|
||||
this.indicator = openmct.indicators.create();
|
||||
this.setDefaultsFromOptions(options);
|
||||
this.setIndicatorToState(PENDING);
|
||||
|
||||
this.fetchUrl();
|
||||
setInterval(this.fetchUrl, this.interval);
|
||||
}
|
||||
|
||||
URLIndicator.prototype.getCssClass = function () {
|
||||
return this.cssClass;
|
||||
};
|
||||
URLIndicator.prototype.getGlyphClass = function () {
|
||||
return this.state.glyphClass;
|
||||
};
|
||||
URLIndicator.prototype.getText = function () {
|
||||
switch (this.state) {
|
||||
URLIndicator.prototype.setIndicatorToState = function (state) {
|
||||
switch (state) {
|
||||
case CONNECTED: {
|
||||
return this.label + " is connected";
|
||||
this.indicator.text(this.label + " is connected");
|
||||
this.indicator.description(this.label + " is online, checking status every " + this.interval + " milliseconds.");
|
||||
break;
|
||||
}
|
||||
case PENDING: {
|
||||
return "Checking status of " + this.label + " please stand by...";
|
||||
this.indicator.text("Checking status of " + this.label + " please stand by...");
|
||||
this.indicator.description("Checking status of " + this.label + " please stand by...");
|
||||
break;
|
||||
}
|
||||
case DISCONNECTED: {
|
||||
return this.label + " is offline";
|
||||
this.indicator.text(this.label + " is offline");
|
||||
this.indicator.description(this.label + " is offline, checking status every " + this.interval + " milliseconds");
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
this.indicator.glyphClass(state.glyphClass);
|
||||
};
|
||||
URLIndicator.prototype.getDescription = function () {
|
||||
switch (this.state) {
|
||||
case CONNECTED: {
|
||||
return this.label + " is online, checking status every " +
|
||||
this.interval + " milliseconds.";
|
||||
}
|
||||
case PENDING: {
|
||||
return "Checking status of " + this.label + " please stand by...";
|
||||
}
|
||||
case DISCONNECTED: {
|
||||
return this.label + " is offline, checking status every " +
|
||||
this.interval + " milliseconds";
|
||||
}
|
||||
}
|
||||
|
||||
URLIndicator.prototype.fetchUrl = function () {
|
||||
this.get(this.URLpath)
|
||||
.then(this.handleSuccess)
|
||||
.catch(this.handleError);
|
||||
};
|
||||
|
||||
URLIndicator.prototype.get = function (url) {
|
||||
return new Promise(function(resolve, reject){
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
success: resolve,
|
||||
error: reject
|
||||
});
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
URLIndicator.prototype.handleError = function (e) {
|
||||
this.setIndicatorToState(DISCONNECTED);
|
||||
};
|
||||
|
||||
URLIndicator.prototype.handleSuccess = function () {
|
||||
this.setIndicatorToState(CONNECTED);
|
||||
}
|
||||
|
||||
URLIndicator.prototype.setDefaultsFromOptions = function (options) {
|
||||
this.URLpath = options.url;
|
||||
this.label = options.label || options.url;
|
||||
this.interval = options.inverval || 10000;
|
||||
this.indicator.cssClass(options.cssClass || 'icon-database');
|
||||
}
|
||||
|
||||
URLIndicator.prototype.bindMethods = function () {
|
||||
this.fetchUrl = this.fetchUrl.bind(this);
|
||||
this.handleSuccess = this.handleSuccess.bind(this);
|
||||
this.handleError = this.handleError.bind(this);
|
||||
this.setIndicatorToState = this.setIndicatorToState.bind(this);
|
||||
}
|
||||
|
||||
return URLIndicator;
|
||||
});
|
||||
|
@ -3,18 +3,10 @@ define(
|
||||
'./URLIndicator'
|
||||
],
|
||||
function URLIndicatorPlugin(URLIndicator) {
|
||||
|
||||
return function (opts) {
|
||||
// Wrap the plugin in a function so we can apply the arguments.
|
||||
function URLIndicatorWrapper() {
|
||||
this.options = opts;
|
||||
URLIndicator.apply(this, arguments);
|
||||
}
|
||||
URLIndicatorWrapper.prototype = Object.create(URLIndicator.prototype);
|
||||
return function install(openmct) {
|
||||
openmct.legacyExtension('indicators', {
|
||||
"implementation": URLIndicatorWrapper,
|
||||
"depends": ["$http", "$interval"]
|
||||
});
|
||||
return new URLIndicator(opts, openmct);
|
||||
};
|
||||
};
|
||||
});
|
||||
|
@ -35,6 +35,10 @@ define([
|
||||
key: 'local-format',
|
||||
implementation: LocalTimeFormat
|
||||
});
|
||||
|
||||
var indicator = openmct.indicators.create();
|
||||
indicator.cssClass('something');
|
||||
indicator.show(function showIndicator(element) {});
|
||||
};
|
||||
};
|
||||
});
|
||||
|
@ -128,7 +128,7 @@ define([
|
||||
plugins.ExampleImagery = ExampleImagery;
|
||||
plugins.SummaryWidget = SummaryWidget;
|
||||
plugins.TelemetryMean = TelemetryMean;
|
||||
plugins.URLIndicatorPlugin = URLIndicatorPlugin;
|
||||
plugins.URLIndicator = URLIndicatorPlugin;
|
||||
|
||||
return plugins;
|
||||
});
|
||||
|
Reference in New Issue
Block a user