diff --git a/app/services/chartService.js b/app/services/chartService.js index 5dcacce80..5aa2ac1db 100644 --- a/app/services/chartService.js +++ b/app/services/chartService.js @@ -7,14 +7,42 @@ angular.module('portainer.services') var service = {}; - service.CreateCPUChart = function(context) { + function defaultChartOptions(pos, tooltipCallback, scalesCallback) { + return { + animation: { duration: 0 }, + responsiveAnimationDuration: 0, + responsive: true, + tooltips: { + mode: 'index', + intersect: false, + position: pos, + callbacks: { + label: function(tooltipItem, data) { + var datasetLabel = data.datasets[tooltipItem.datasetIndex].label; + return tooltipCallback(datasetLabel, tooltipItem.yLabel); + } + } + }, + hover: { animationDuration: 0 }, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + callback: scalesCallback + } + }] + } + }; + } + + function CreateChart (context, label, tooltipCallback, scalesCallback) { return new Chart(context, { type: 'line', data: { labels: [], datasets: [ { - label: 'CPU', + label: label, data: [], fill: true, backgroundColor: 'rgba(151,187,205,0.4)', @@ -26,91 +54,16 @@ angular.module('portainer.services') } ] }, - options: { - animation: { - duration: 0 - }, - responsiveAnimationDuration: 0, - responsive: true, - tooltips: { - mode: 'index', - intersect: false, - position: 'nearest', - callbacks: { - label: function(tooltipItem, data) { - var datasetLabel = data.datasets[tooltipItem.datasetIndex].label; - return percentageBasedTooltipLabel(datasetLabel, tooltipItem.yLabel); - } - } - }, - hover: { - animationDuration: 0 - }, - scales: { - yAxes: [ - { - ticks: { - beginAtZero: true, - callback: percentageBasedAxisLabel - } - } - ] - } - } + options: defaultChartOptions('nearest', tooltipCallback, scalesCallback) }); + } + + service.CreateCPUChart = function(context) { + return CreateChart(context, 'CPU', percentageBasedTooltipLabel, percentageBasedAxisLabel); }; service.CreateMemoryChart = function(context) { - return new Chart(context, { - type: 'line', - data: { - labels: [], - datasets: [ - { - label: 'Memory', - data: [], - fill: true, - backgroundColor: 'rgba(151,187,205,0.4)', - borderColor: 'rgba(151,187,205,0.6)', - pointBackgroundColor: 'rgba(151,187,205,1)', - pointBorderColor: 'rgba(151,187,205,1)', - pointRadius: 2, - borderWidth: 2 - } - ] - }, - options: { - animation: { - duration: 0 - }, - responsiveAnimationDuration: 0, - responsive: true, - tooltips: { - mode: 'index', - intersect: false, - position: 'nearest', - callbacks: { - label: function(tooltipItem, data) { - var datasetLabel = data.datasets[tooltipItem.datasetIndex].label; - return byteBasedTooltipLabel(datasetLabel, tooltipItem.yLabel); - } - } - }, - hover: { - animationDuration: 0 - }, - scales: { - yAxes: [ - { - ticks: { - beginAtZero: true, - callback: byteBasedAxisLabel - } - } - ] - } - } - }); + return CreateChart(context, 'Memory', byteBasedTooltipLabel, byteBasedAxisLabel); }; service.CreateNetworkChart = function(context) { @@ -143,39 +96,11 @@ angular.module('portainer.services') } ] }, - options: { - animation: { - duration: 0 - }, - responsiveAnimationDuration: 0, - responsive: true, - tooltips: { - mode: 'index', - intersect: false, - position: 'average', - callbacks: { - label: function(tooltipItem, data) { - var datasetLabel = data.datasets[tooltipItem.datasetIndex].label; - return byteBasedTooltipLabel(datasetLabel, tooltipItem.yLabel); - } - } - }, - hover: { - animationDuration: 0 - }, - scales: { - yAxes: [{ - ticks: { - beginAtZero: true, - callback: byteBasedAxisLabel - } - }] - } - } + options: defaultChartOptions('average', byteBasedTooltipLabel, byteBasedAxisLabel) }); }; - service.UpdateMemoryChart = function(label, value, chart) { + function UpdateChart(label, value, chart) { chart.data.labels.push(label); chart.data.datasets[0].data.push(value); @@ -185,19 +110,10 @@ angular.module('portainer.services') } chart.update(0); - }; + } - service.UpdateCPUChart = function(label, value, chart) { - chart.data.labels.push(label); - chart.data.datasets[0].data.push(value); - - if (chart.data.datasets[0].data.length > CHART_LIMIT) { - chart.data.labels.pop(); - chart.data.datasets[0].data.pop(); - } - - chart.update(0); - }; + service.UpdateMemoryChart = UpdateChart; + service.UpdateCPUChart = UpdateChart; service.UpdateNetworkChart = function(label, rx, tx, chart) { chart.data.labels.push(label); diff --git a/app/services/docker/pluginService.js b/app/services/docker/pluginService.js index 690010d1a..a539105ad 100644 --- a/app/services/docker/pluginService.js +++ b/app/services/docker/pluginService.js @@ -20,7 +20,7 @@ angular.module('portainer.services') return deferred.promise; }; - service.volumePlugins = function(systemOnly) { + function servicePlugins(systemOnly, pluginType, pluginVersion) { var deferred = $q.defer(); $q.all({ @@ -28,60 +28,36 @@ angular.module('portainer.services') plugins: systemOnly ? [] : service.plugins() }) .then(function success(data) { - var volumePlugins = []; + var aggregatedPlugins = []; var systemPlugins = data.system; var plugins = data.plugins; - if (systemPlugins.Volume) { - volumePlugins = volumePlugins.concat(systemPlugins.Volume); + if (systemPlugins[pluginType]) { + aggregatedPlugins = aggregatedPlugins.concat(systemPlugins[pluginType]); } for (var i = 0; i < plugins.length; i++) { var plugin = plugins[i]; - if (plugin.Enabled && _.includes(plugin.Config.Interface.Types, 'docker.volumedriver/1.0')) { - volumePlugins.push(plugin.Name); + if (plugin.Enabled && _.includes(plugin.Config.Interface.Types, pluginVersion)) { + aggregatedPlugins.push(plugin.Name); } } - deferred.resolve(volumePlugins); + deferred.resolve(aggregatedPlugins); }) .catch(function error(err) { deferred.reject({ msg: err.msg, err: err }); }); return deferred.promise; + } + + service.volumePlugins = function(systemOnly) { + return servicePlugins(systemOnly, 'Volume', 'docker.volumedriver/1.0'); }; service.networkPlugins = function(systemOnly) { - var deferred = $q.defer(); - - $q.all({ - system: SystemService.plugins(), - plugins: systemOnly ? [] : service.plugins() - }) - .then(function success(data) { - var networkPlugins = []; - var systemPlugins = data.system; - var plugins = data.plugins; - - if (systemPlugins.Network) { - networkPlugins = networkPlugins.concat(systemPlugins.Network); - } - - for (var i = 0; i < plugins.length; i++) { - var plugin = plugins[i]; - if (plugin.Enabled && _.includes(plugin.Config.Interface.Types, 'docker.networkdriver/1.0')) { - networkPlugins.push(plugin.Name); - } - } - - deferred.resolve(networkPlugins); - }) - .catch(function error(err) { - deferred.reject({ msg: err.msg, err: err }); - }); - - return deferred.promise; + return servicePlugins(systemOnly, 'Network', 'docker.networkdriver/1.0'); }; return service; diff --git a/assets/css/app.css b/assets/css/app.css index b514b7bfe..aa2e3b644 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -26,11 +26,8 @@ html, body, #page-wrapper, #content-wrapper, .page-content, #view { .logo { display: inline; - width: 100%; max-width: 155px; - height: 100%; max-height: 55px; - margin-bottom: 5px; } .containerNameInput { @@ -490,6 +487,8 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active { padding-right: 24px; transition: all ease 0.2s; -webkit-transition: all ease 0.2s; + -moz-transition: all ease 0.2s; + -o-transition: all ease 0.2s; border-radius: 24px; box-shadow: inset 0 0 1px 1px rgba(0,0,0,.5); } @@ -508,6 +507,7 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active { padding-right: 0; padding-left: 24px; -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #337ab7; + -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #337ab7; box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #337ab7; }