Initial setup of mycontroller
This commit is contained in:
189
www/controllers/adf-widgets/adf-myc-hm/adf-myc-heat-map.js
Normal file
189
www/controllers/adf-widgets/adf-myc-hm/adf-myc-heat-map.js
Normal file
@@ -0,0 +1,189 @@
|
||||
/*
|
||||
* Copyright 2015-2018 Jeeva Kandasamy (jkandasa@gmail.com)
|
||||
* and other contributors as indicated by the @author tags.
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
angular.module('adf.widget.myc-heat-map', [])
|
||||
.config(function(dashboardProvider){
|
||||
dashboardProvider
|
||||
.widget('mycHeatMap', {
|
||||
title: 'Heatmap chart',
|
||||
description: 'Displays data as heatmap chart',
|
||||
templateUrl: 'controllers/adf-widgets/adf-myc-hm/view.html?mcv=29',
|
||||
controller: 'mycHeatMapController',
|
||||
controllerAs: 'mycHeatMap',
|
||||
config: {
|
||||
dataType: null,
|
||||
upperLimit: null,
|
||||
thresholds: [],
|
||||
colorPattern: [],
|
||||
legendLabels: [],
|
||||
dataKey:null,
|
||||
refreshTime:30,
|
||||
height:200,
|
||||
maxBlockSize:50,
|
||||
showLegends:true,
|
||||
},
|
||||
edit: {
|
||||
templateUrl: 'controllers/adf-widgets/adf-myc-hm/edit.html?mcv=29',
|
||||
controller: 'mycHeatMapEditController',
|
||||
controllerAs: 'mycHeatMapEdit',
|
||||
}
|
||||
});
|
||||
})
|
||||
.controller('mycHeatMapController', function($scope, $interval, config, mchelper, $filter, MetricsFactory,$state){
|
||||
var mycHeatMap = this;
|
||||
mycHeatMap.showLoading = true;
|
||||
mycHeatMap.isSyncing = false;
|
||||
mycHeatMap.data = {};
|
||||
mycHeatMap.dataAvailable = false;
|
||||
|
||||
function updateState(){
|
||||
if(mycHeatMap.data.length === 0){
|
||||
mycHeatMap.dataAvailable = false;
|
||||
}else{
|
||||
mycHeatMap.dataAvailable = true;
|
||||
}
|
||||
mycHeatMap.isSyncing = false;
|
||||
if(mycHeatMap.showLoading){
|
||||
mycHeatMap.showLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
function loadData(){
|
||||
mycHeatMap.isSyncing = true;
|
||||
if(config.dataType === 'NODE_STATUS'){
|
||||
MetricsFactory.getHeatMapHeatMapNodeStatus({'nodeId':config.dataKey}, function(response){
|
||||
mycHeatMap.data = response;
|
||||
updateState();
|
||||
});
|
||||
}else if(config.dataType === 'BATTERY_LEVEL'){
|
||||
MetricsFactory.getHeatMapBatteryLevel({'nodeId':config.dataKey}, function(response){
|
||||
mycHeatMap.data = response;
|
||||
updateState();
|
||||
});
|
||||
}else if(config.dataType === 'SENSOR_VARIABLES'){
|
||||
MetricsFactory.getHeatMapHeatMapSensorVariable({'variableId':config.dataKey, 'upperLimit':config.upperLimit}, function(response){
|
||||
mycHeatMap.data = response;
|
||||
updateState();
|
||||
});
|
||||
}else if(config.dataType === 'SCRIPT'){
|
||||
MetricsFactory.getHeatMapHeatMapScript({'scriptName':config.dataKey}, function(response){
|
||||
mycHeatMap.data = response;
|
||||
updateState();
|
||||
});
|
||||
}else{
|
||||
mycHeatMap.isSyncing = false;
|
||||
if(mycHeatMap.showLoading){
|
||||
mycHeatMap.showLoading = false;
|
||||
}
|
||||
}
|
||||
//remove this line
|
||||
if(mycHeatMap.showLoading){
|
||||
mycHeatMap.showLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
function updateData(){
|
||||
if(mycHeatMap.isSyncing){
|
||||
return;
|
||||
}else if(config.dataKey !== null){
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
|
||||
//load variables initially
|
||||
if(config.dataKey !== null){
|
||||
updateData();
|
||||
}else{
|
||||
mycHeatMap.showLoading = false;
|
||||
}
|
||||
|
||||
//Heat map click action
|
||||
mycHeatMap.hmClickAction = function(block){
|
||||
if(config.dataType === 'NODE_STATUS' || config.dataType === 'BATTERY_LEVEL'){
|
||||
$state.go("nodesDetail", {'id':block.altId});
|
||||
}else if(config.dataType === 'SENSOR_VARIABLES'){
|
||||
$state.go("sensorsDetail", {'id':block.altId});
|
||||
}else if(config.dataType === 'SCRIPT'){
|
||||
//Not implemented yet
|
||||
}
|
||||
};
|
||||
|
||||
// refresh every second
|
||||
var promise = $interval(updateData, config.refreshTime*1000);
|
||||
|
||||
// cancel interval on scope destroy
|
||||
$scope.$on('$destroy', function(){
|
||||
$interval.cancel(promise);
|
||||
});
|
||||
|
||||
}).controller('mycHeatMapEditController', function($scope, $interval, config, mchelper, $filter, TypesFactory, ScriptsFactory, CommonServices){
|
||||
var mycHeatMapEdit = this;
|
||||
mycHeatMapEdit.cs = CommonServices;
|
||||
|
||||
var generalColorPattern = ['#21781F', '#3F9C35', '#57A8D4', '#F9D67A', '#EC7A08', '#CC0000', '#F00'];
|
||||
var generalThresholds = [0.1, 0.3, 0.5, 0.7, 0.8, 0.9];
|
||||
var generalLabels = ['< 10%', '10-30%', '30-50%', '50-70%', '70-80%', '80-90%', '> 90%'];
|
||||
var statusColorPattern = ['#C00', '#808080', '#3F9C35'];
|
||||
var statusThresholds = [0.4, 0.6];
|
||||
var statusLabels = ['Down', 'Unavailable', 'Up'];
|
||||
|
||||
//Change data type
|
||||
mycHeatMapEdit.changeDataType = function(){
|
||||
//Update pattern, colors, labels
|
||||
if(config.dataType === 'NODE_STATUS'){
|
||||
config.thresholds = angular.copy(statusThresholds);
|
||||
config.colorPattern = angular.copy(statusColorPattern);
|
||||
config.legendLabels = angular.copy(statusLabels);
|
||||
}else if(config.dataType){
|
||||
config.thresholds = angular.copy(generalThresholds);
|
||||
config.colorPattern = angular.copy(generalColorPattern);
|
||||
config.legendLabels = angular.copy(generalLabels);
|
||||
}
|
||||
//Change color to reverse order if selected object is battery level
|
||||
if(config.dataType === 'BATTERY_LEVEL'){
|
||||
mycHeatMapEdit.swapColors();
|
||||
}
|
||||
//Change object type
|
||||
if(config.dataType === 'SCRIPT'){
|
||||
config.dataKey = {};
|
||||
}else{
|
||||
config.dataKey = [];
|
||||
}
|
||||
//load variables
|
||||
loadVariables();
|
||||
};
|
||||
|
||||
var loadVariables = function(){
|
||||
if(config.dataType === 'NODE_STATUS' || config.dataType === 'BATTERY_LEVEL'){
|
||||
mycHeatMapEdit.variables = TypesFactory.getNodes();
|
||||
}else if(config.dataType === 'SENSOR_VARIABLES'){
|
||||
//Get only DOUBLE type devices
|
||||
mycHeatMapEdit.variables = TypesFactory.getSensorVariables({"metricType":"Double"});
|
||||
}else if(config.dataType === 'SCRIPT'){
|
||||
mycHeatMapEdit.variables = ScriptsFactory.getAllLessInfo({"type":"Operation"});
|
||||
}
|
||||
}
|
||||
|
||||
// load variables at startup
|
||||
loadVariables();
|
||||
|
||||
//Swap up down color
|
||||
mycHeatMapEdit.swapColors = function(){
|
||||
config.colorPattern.reverse();
|
||||
}
|
||||
});
|
||||
84
www/controllers/adf-widgets/adf-myc-hm/edit.html
Normal file
84
www/controllers/adf-widgets/adf-myc-hm/edit.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!--
|
||||
|
||||
Copyright (C) 2015-2016 Jeeva Kandasamy (jkandasa@gmail.com)
|
||||
|
||||
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.
|
||||
|
||||
-->
|
||||
<form role="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label>{{ 'REFRESH_TIME_SECONDS' | translate }}</label>
|
||||
<input type="text" class="form-control" id="refreshTime" placeholder="{{'REFRESH_TIME_SECONDS' | translate}}" ng-model="config.refreshTime" pf-validation="mycHeatMapEdit.cs.isNumber(input)" required>
|
||||
<span class="help-block">{{ 'VALIDATION_ERROR_NUMBER' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="config.dataType">
|
||||
<label class="mc-margin-right">{{ 'HEIGHT' | translate }}</label>
|
||||
<input class="mc-margin-right" type="text" id="height" placeholder="{{'HEIGHT' | translate}}" ng-model="config.height" pf-validation="mycHeatMapEdit.cs.isNumber(input)" required>
|
||||
<span class="help-block">{{ 'VALIDATION_ERROR_NUMBER' | translate }}</span>
|
||||
<label class="mc-margin-right">{{ 'MAXIMUM_BLOCK_SIZE' | translate }}</label>
|
||||
<input type="text" id="height" placeholder="{{'MAXIMUM_BLOCK_SIZE' | translate}}" ng-model="config.maxBlockSize" pf-validation="mycHeatMapEdit.cs.isNumber(input)" required>
|
||||
<span class="help-block">{{ 'VALIDATION_ERROR_NUMBER' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input ng-model="config.showLegends" type="checkbox"/>
|
||||
<label class="control-label">{{ 'SHOW_LEGENDS' | translate }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>{{ 'DATA_TYPE' | translate }}</label>
|
||||
<select id="panelSize" class="form-control" pf-select ng-change="mycHeatMapEdit.changeDataType()" ng-model="config.dataType">
|
||||
<option value="" ng-hide="true"></option>
|
||||
<option value="BATTERY_LEVEL">{{ 'BATTERY_LEVEL' | translate }}</option>
|
||||
<option value="NODE_STATUS">{{ 'NODE_STATUS' | translate }}</option>
|
||||
<option value="SENSOR_VARIABLES">{{ 'SENSOR_VARIABLES' | translate }}</option>
|
||||
<option value="SCRIPT">{{ 'SCRIPT' | translate }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="config.dataType === 'SENSOR_VARIABLES'">
|
||||
<label>{{ 'UPPER_LIMIT' | translate }}</label>
|
||||
<input type="text" class="form-control" id="refreshTime" placeholder="{{'UPPER_LIMIT' | translate}}" ng-model="config.upperLimit" pf-validation="mycHeatMapEdit.cs.isNumber(input)" required>
|
||||
<span class="help-block">{{ 'VALIDATION_ERROR_NUMBER' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="config.dataType">
|
||||
<label class="mc-margin-right">{{ 'COLOR' | translate }}</label>
|
||||
<i uib-tooltip="{{ 'SWAP' | translate }}" tooltip-placement="top" ng-click="mycHeatMapEdit.swapColors()" class="fa fa-exchange mc-icon-md-3 mc-pointer text-primary"></i>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="config.dataType">
|
||||
<span ng-repeat="item in config.colorPattern track by $index">
|
||||
<span style="background-color:{{config.colorPattern[$index]}};width:72px;color:white;" class="btn btn-sm mc-margin-right" colorpicker="hex" colorpicker-position="top"
|
||||
ng-model="config.colorPattern[$index]">{{config.legendLabels[$index] || "-"}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label ng-if="config.dataType === 'SENSOR_VARIABLES'">{{ 'SENSOR_VARIABLES' | translate }}</label>
|
||||
<label ng-if="config.dataType === 'BATTERY_LEVEL'">{{ 'NODES' | translate }}</label>
|
||||
<label ng-if="config.dataType === 'NODE_STATUS'">{{ 'NODES' | translate }}</label>
|
||||
<label ng-if="config.dataType === 'SCRIPT'">{{ 'SCRIPT' | translate }}</label>
|
||||
<select ng-if="config.dataType === 'SENSOR_VARIABLES' || config.dataType === 'BATTERY_LEVEL' || config.dataType === 'NODE_STATUS'"
|
||||
id="dataKey" class="form-control" multiple pf-select data-live-search="true" ng-model="config.dataKey">
|
||||
<option value="" ng-hide="true"></option>
|
||||
<option ng-repeat="res in mycHeatMapEdit.variables" ng-bind-html="res.displayName | mcResourceRepresentation" value="{{res.id}}" ng-selected="config.dataKey.indexOf(res.id.toString()) != -1"></option>
|
||||
</select>
|
||||
<select ng-if="config.dataType === 'SCRIPT'" id="dataKey" class="form-control" pf-select data-live-search="true" ng-options="resource for resource in mycHeatMapEdit.variables" ng-model="config.dataKey">
|
||||
<option value="" ng-hide="true"></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
36
www/controllers/adf-widgets/adf-myc-hm/view.html
Normal file
36
www/controllers/adf-widgets/adf-myc-hm/view.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!--
|
||||
|
||||
Copyright (C) 2015-2016 Jeeva Kandasamy (jkandasa@gmail.com)
|
||||
|
||||
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.
|
||||
|
||||
-->
|
||||
<!-- Loading icon disaplay -->
|
||||
<div ng-show="mycHeatMap.showLoading">
|
||||
<div ng-include src="'partials/common-html/loading-sm.html'"></div>
|
||||
</div>
|
||||
|
||||
<div ng-if="!mycHeatMap.showLoading">
|
||||
<div class="adf-myc-shm-margin" ng-if="mycHeatMap.data.length > 0" pf-heatmap
|
||||
data="mycHeatMap.data" chart-data-available="mycHeatMap.dataAvailable"
|
||||
show-legend="config.showLegends" legend-labels="config.legendLabels"
|
||||
heatmap-color-pattern="config.colorPattern" thresholds="config.thresholds"
|
||||
max-block-size="{{config.maxBlockSize}}" height="config.height"
|
||||
click-action="mycHeatMap.hmClickAction">
|
||||
</div>
|
||||
<div ng-if="mycHeatMap.data.length == 0">
|
||||
<span>{{'NO_DATA_AVAILABLE' | translate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="config.dataKey === null" ng-include src="'partials/common-html/no-items-filter-sm.html'"></div>
|
||||
Reference in New Issue
Block a user