refactor(services): Refactor chartService and pluginService (#1340)

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: {
+      options: defaultChartOptions('nearest', tooltipCallback, scalesCallback)
-        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
-              }
-            }
-          ]
-        }
-      }
     });
+  }
+
+  service.CreateCPUChart = function(context) {
+    return CreateChart(context, 'CPU', percentageBasedTooltipLabel, percentageBasedAxisLabel);
   };
 
   service.CreateMemoryChart = function(context) {
-    return new Chart(context, {
+    return  CreateChart(context, 'Memory', byteBasedTooltipLabel, byteBasedAxisLabel);
-      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
-              }
-            }
-          ]
-        }
-      }
-    });
   };
 
   service.CreateNetworkChart = function(context) {
@@ -143,39 +96,11 @@ angular.module('portainer.services')
           }
         ]
       },
-      options: {
+      options: defaultChartOptions('average', byteBasedTooltipLabel, byteBasedAxisLabel)
-        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
-            }
-          }]
-        }
-      }
     });
   };
 
-  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);

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) {
+      if (systemPlugins[pluginType]) {
-        volumePlugins = volumePlugins.concat(systemPlugins.Volume);
+        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')) {
+        if (plugin.Enabled && _.includes(plugin.Config.Interface.Types, pluginVersion)) {
-          volumePlugins.push(plugin.Name);
+          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();
+    return servicePlugins(systemOnly, 'Network', 'docker.networkdriver/1.0');
-
-    $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 service;

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;
 }