584 lines
No EOL
16 KiB
JavaScript
584 lines
No EOL
16 KiB
JavaScript
angular.module("core-ui", [])
|
|
.factory('CoreDialog', [function() {
|
|
var service = {};
|
|
service['fatal'] = function(title, message) {
|
|
bootbox.dialog({
|
|
"title": title,
|
|
"message": "<div class='alert-icon-container-container'><div class='alert-icon-container'><div class='alert-icon'></div></div></div>" + message,
|
|
"buttons": {},
|
|
"className": "co-dialog fatal-error",
|
|
"closeButton": false
|
|
});
|
|
};
|
|
|
|
return service;
|
|
}])
|
|
|
|
.directive('corLogBox', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-log-box.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'logs': '=logs'
|
|
},
|
|
controller: function($rootScope, $scope, $element, $timeout) {
|
|
$scope.hasNewLogs = false;
|
|
|
|
var scrollHandlerBound = false;
|
|
var isAnimatedScrolling = false;
|
|
var isScrollBottom = true;
|
|
|
|
var scrollHandler = function() {
|
|
if (isAnimatedScrolling) { return; }
|
|
var element = $element.find("#co-log-viewer")[0];
|
|
isScrollBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
|
|
if (isScrollBottom) {
|
|
$scope.hasNewLogs = false;
|
|
}
|
|
};
|
|
|
|
var animateComplete = function() {
|
|
isAnimatedScrolling = false;
|
|
};
|
|
|
|
$scope.moveToBottom = function() {
|
|
$scope.hasNewLogs = false;
|
|
isAnimatedScrolling = true;
|
|
isScrollBottom = true;
|
|
|
|
$element.find("#co-log-viewer").animate(
|
|
{ scrollTop: $element.find("#co-log-content").height() }, "slow", null, animateComplete);
|
|
};
|
|
|
|
$scope.$watch('logs', function(value, oldValue) {
|
|
if (!value) { return; }
|
|
|
|
$timeout(function() {
|
|
if (!scrollHandlerBound) {
|
|
$element.find("#co-log-viewer").on('scroll', scrollHandler);
|
|
scrollHandlerBound = true;
|
|
}
|
|
|
|
if (!isScrollBottom) {
|
|
$scope.hasNewLogs = true;
|
|
return;
|
|
}
|
|
|
|
$scope.moveToBottom();
|
|
}, 500);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corOptionsMenu', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-options-menu.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corOption', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-option.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'optionClick': '&optionClick'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
|
|
.directive('corTitle', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleAction', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-action.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleContent', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-content.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleLink', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-link.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabPanel', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-tab-panel.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabContent', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 2,
|
|
templateUrl: '/static/directives/cor-tab-content.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabs', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 3,
|
|
templateUrl: '/static/directives/cor-tabs.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corFloatingBottomBar', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 3,
|
|
templateUrl: '/static/directives/cor-floating-bottom-bar.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element, $timeout, $interval) {
|
|
var handler = function() {
|
|
$element.removeClass('floating');
|
|
$element.css('width', $element[0].parentNode.clientWidth + 'px');
|
|
|
|
var windowHeight = $(window).height();
|
|
var rect = $element[0].getBoundingClientRect();
|
|
if (rect.bottom > windowHeight) {
|
|
$element.addClass('floating');
|
|
}
|
|
};
|
|
|
|
$(window).on("scroll", handler);
|
|
$(window).on("resize", handler);
|
|
|
|
var previousHeight = $element[0].parentNode.clientHeight;
|
|
var stop = $interval(function() {
|
|
var currentHeight = $element[0].parentNode.clientWidth;
|
|
if (previousHeight != currentHeight) {
|
|
currentHeight = previousHeight;
|
|
handler();
|
|
}
|
|
}, 100);
|
|
|
|
$scope.$on('$destroy', function() {
|
|
$(window).off("resize", handler);
|
|
$(window).off("scroll", handler);
|
|
$interval.cancel(stop);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
|
|
})
|
|
|
|
.directive('corLoaderInline', function() {
|
|
var directiveDefinitionObject = {
|
|
templateUrl: '/static/directives/cor-loader-inline.html',
|
|
replace: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corLoader', function() {
|
|
var directiveDefinitionObject = {
|
|
templateUrl: '/static/directives/cor-loader.html',
|
|
replace: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTab', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-tab.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'tabActive': '@tabActive',
|
|
'tabTitle': '@tabTitle',
|
|
'tabTarget': '@tabTarget',
|
|
'tabInit': '&tabInit',
|
|
'tabShown': '&tabShown',
|
|
'tabHidden': '&tabHidden'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$element.find('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
|
|
$scope.tabHidden({});
|
|
});
|
|
|
|
$element.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
$scope.tabShown({});
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corStep', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-step.html',
|
|
replace: true,
|
|
transclude: false,
|
|
requires: '^corStepBar',
|
|
restrict: 'C',
|
|
scope: {
|
|
'icon': '@icon',
|
|
'title': '@title',
|
|
'text': '@text'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('realtimeAreaChart', function () {
|
|
var directiveDefinitionObject = {
|
|
priority: 0,
|
|
templateUrl: '/static/directives/realtime-area-chart.html',
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {
|
|
'data': '=data',
|
|
'labels': '=labels',
|
|
'colors': '=colors',
|
|
'counter': '=counter'
|
|
},
|
|
controller: function($scope, $element) {
|
|
var graph = null;
|
|
var series = [];
|
|
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
|
|
var colors = $scope.colors || [];
|
|
|
|
var setupGraph = function() {
|
|
for (var i = 0; i < $scope.labels.length; ++i) {
|
|
series.push({
|
|
name: $scope.labels[i],
|
|
color: i >= colors.length ? palette.color(): $scope.colors[i],
|
|
stroke: 'rgba(0,0,0,0.15)',
|
|
data: []
|
|
});
|
|
}
|
|
|
|
var options = {
|
|
element: $element.find('.chart')[0],
|
|
renderer: 'area',
|
|
stroke: true,
|
|
series: series,
|
|
min: 0,
|
|
padding: {
|
|
'top': 0.3,
|
|
'left': 0,
|
|
'right': 0,
|
|
'bottom': 0.3
|
|
}
|
|
};
|
|
|
|
if ($scope.minimum != null) {
|
|
options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
|
|
} else {
|
|
options['min'] = 0;
|
|
}
|
|
|
|
if ($scope.maximum != null) {
|
|
options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
|
|
}
|
|
|
|
graph = new Rickshaw.Graph(options);
|
|
|
|
xaxes = new Rickshaw.Graph.Axis.Time({
|
|
graph: graph,
|
|
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
|
});
|
|
|
|
yaxes = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
|
});
|
|
|
|
hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph,
|
|
xFormatter: function(x) {
|
|
return new Date(x * 1000).toString();
|
|
}
|
|
});
|
|
};
|
|
|
|
var refresh = function(data) {
|
|
if (!data || $scope.counter < 0) { return; }
|
|
if (!graph) {
|
|
setupGraph();
|
|
}
|
|
|
|
var timecode = new Date().getTime() / 1000;
|
|
for (var i = 0; i < $scope.data.length; ++i) {
|
|
var arr = series[i].data;
|
|
arr.push(
|
|
{'x': timecode, 'y': $scope.data[i] }
|
|
);
|
|
|
|
if (arr.length > 10) {
|
|
series[i].data = arr.slice(arr.length - 10, arr.length);
|
|
}
|
|
}
|
|
|
|
graph.renderer.unstack = true;
|
|
graph.update();
|
|
};
|
|
|
|
$scope.$watch('counter', function() {
|
|
refresh($scope.data_raw);
|
|
});
|
|
|
|
$scope.$watch('data', function(data) {
|
|
$scope.data_raw = data;
|
|
refresh($scope.data_raw);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
|
|
.directive('realtimeLineChart', function () {
|
|
var directiveDefinitionObject = {
|
|
priority: 0,
|
|
templateUrl: '/static/directives/realtime-line-chart.html',
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {
|
|
'data': '=data',
|
|
'labels': '=labels',
|
|
'counter': '=counter',
|
|
'labelTemplate': '@labelTemplate',
|
|
'minimum': '@minimum',
|
|
'maximum': '@maximum'
|
|
},
|
|
controller: function($scope, $element) {
|
|
var graph = null;
|
|
var xaxes = null;
|
|
var yaxes = null;
|
|
var hoverDetail = null;
|
|
var series = [];
|
|
var counter = 0;
|
|
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
|
|
|
|
var setupGraph = function() {
|
|
var options = {
|
|
element: $element.find('.chart')[0],
|
|
renderer: 'line',
|
|
series: series,
|
|
padding: {
|
|
'top': 0.3,
|
|
'left': 0,
|
|
'right': 0,
|
|
'bottom': 0.3
|
|
}
|
|
};
|
|
|
|
if ($scope.minimum != null) {
|
|
options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
|
|
} else {
|
|
options['min'] = 0;
|
|
}
|
|
|
|
if ($scope.maximum != null) {
|
|
options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
|
|
}
|
|
|
|
graph = new Rickshaw.Graph(options);
|
|
xaxes = new Rickshaw.Graph.Axis.Time({
|
|
graph: graph,
|
|
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
|
});
|
|
|
|
yaxes = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
|
});
|
|
|
|
hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph,
|
|
xFormatter: function(x) {
|
|
return new Date(x * 1000).toString();
|
|
}
|
|
});
|
|
};
|
|
|
|
var refresh = function(data) {
|
|
if (data == null) { return; }
|
|
if (!graph) {
|
|
setupGraph();
|
|
}
|
|
|
|
if (typeof data == 'number') {
|
|
data = [data];
|
|
}
|
|
|
|
if ($scope.labels) {
|
|
data = data.slice(0, $scope.labels.length);
|
|
}
|
|
|
|
if (series.length == 0){
|
|
for (var i = 0; i < data.length; ++i) {
|
|
var title = $scope.labels ? $scope.labels[i] : $scope.labelTemplate.replace('{x}', i + 1);
|
|
series.push({
|
|
'color': palette.color(),
|
|
'data': [],
|
|
'name': title
|
|
})
|
|
}
|
|
}
|
|
|
|
counter++;
|
|
var timecode = new Date().getTime() / 1000;
|
|
|
|
for (var i = 0; i < data.length; ++i) {
|
|
var arr = series[i].data;
|
|
arr.push({
|
|
'x': timecode,
|
|
'y': data[i]
|
|
})
|
|
|
|
if (arr.length > 10) {
|
|
series[i].data = arr.slice(arr.length - 10, arr.length);
|
|
}
|
|
}
|
|
|
|
graph.update();
|
|
};
|
|
|
|
$scope.$watch('counter', function(counter) {
|
|
refresh($scope.data_raw);
|
|
});
|
|
|
|
$scope.$watch('data', function(data) {
|
|
$scope.data_raw = data;
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corStepBar', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-step-bar.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'progress': '=progress'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.$watch('progress', function(progress) {
|
|
if (!progress) { return; }
|
|
|
|
var index = 0;
|
|
for (var i = 0; i < progress.length; ++i) {
|
|
if (progress[i]) {
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
$element.find('.transclude').children('.co-step-element').each(function(i, elem) {
|
|
$(elem).removeClass('active');
|
|
if (i <= index) {
|
|
$(elem).addClass('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
}); |