chore(project): add prettier for code format (#3645)

* chore(project): install prettier and lint-staged * chore(project): apply prettier to html too * chore(project): git ignore eslintcache * chore(project): add a comment about format script * chore(prettier): update printWidth * chore(prettier): remove useTabs option * chore(prettier): add HTML validation * refactor(prettier): fix closing tags * feat(prettier): define angular parser for html templates * style(prettier): run prettier on codebase Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
2025-08-08 15:25:22 +02:00 · 2020-04-11 00:54:53 +03:00 · 2020-04-11 00:54:53 +03:00 · cf5056d9c0
commit cf5056d9c0
parent 6663073be1
714 changed files with 31228 additions and 28305 deletions
--- a/app/docker/views/volumes/browse/browseVolumeController.js
+++ b/app/docker/views/volumes/browse/browseVolumeController.js
@ -1,12 +1,14 @@
-angular.module('portainer.docker')
-.controller('BrowseVolumeController', ['$scope', '$transition$', 'StateManager',
-function ($scope, $transition$, StateManager) {
+angular.module('portainer.docker').controller('BrowseVolumeController', [
+  '$scope',
+  '$transition$',
+  'StateManager',
+  function ($scope, $transition$, StateManager) {
+    function initView() {
+      $scope.volumeId = $transition$.params().id;
+      $scope.nodeName = $transition$.params().nodeName;
+      $scope.agentApiVersion = StateManager.getAgentApiVersion();
+    }

-  function initView() {
-    $scope.volumeId = $transition$.params().id;
-    $scope.nodeName = $transition$.params().nodeName;
-    $scope.agentApiVersion = StateManager.getAgentApiVersion();
-  }
-
-  initView();
-}]);
+    initView();
+  },
+]);
--- a/app/docker/views/volumes/browse/browsevolume.html
+++ b/app/docker/views/volumes/browse/browsevolume.html
@ -7,11 +7,6 @@

 <div class="row">
  <div class="col-sm-12">
-    <volume-browser
-      volume-id="volumeId"
-      node-name="nodeName"
-      
-      is-upload-enabled="agentApiVersion > 1"
-    ></volume-browser>
+    <volume-browser volume-id="volumeId" node-name="nodeName" is-upload-enabled="agentApiVersion > 1"></volume-browser>
  </div>
 </div>
--- a/app/docker/views/volumes/create/createVolumeController.js
+++ b/app/docker/views/volumes/create/createVolumeController.js
@ -1,114 +1,123 @@
 import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
 import { VolumesNFSFormData } from '../../../components/volumesNFSForm/volumesNFSFormModel';

-angular.module('portainer.docker')
-.controller('CreateVolumeController', ['$q', '$scope', '$state', 'VolumeService', 'PluginService', 'ResourceControlService', 'Authentication', 'Notifications', 'FormValidator', 'HttpRequestHelper',
-function ($q, $scope, $state, VolumeService, PluginService, ResourceControlService, Authentication, Notifications, FormValidator, HttpRequestHelper) {
+angular.module('portainer.docker').controller('CreateVolumeController', [
+  '$q',
+  '$scope',
+  '$state',
+  'VolumeService',
+  'PluginService',
+  'ResourceControlService',
+  'Authentication',
+  'Notifications',
+  'FormValidator',
+  'HttpRequestHelper',
+  function ($q, $scope, $state, VolumeService, PluginService, ResourceControlService, Authentication, Notifications, FormValidator, HttpRequestHelper) {
+    $scope.formValues = {
+      Driver: 'local',
+      DriverOptions: [],
+      AccessControlData: new AccessControlFormData(),
+      NodeName: null,
+      NFSData: new VolumesNFSFormData(),
+    };

-  $scope.formValues = {
-    Driver: 'local',
-    DriverOptions: [],
-    AccessControlData: new AccessControlFormData(),
-    NodeName: null,
-    NFSData: new VolumesNFSFormData()
-  };
+    $scope.state = {
+      formValidationError: '',
+      actionInProgress: false,
+    };

-  $scope.state = {
-    formValidationError: '',
-    actionInProgress: false
-  };
+    $scope.availableVolumeDrivers = [];

-  $scope.availableVolumeDrivers = [];
+    $scope.addDriverOption = function () {
+      $scope.formValues.DriverOptions.push({ name: '', value: '' });
+    };

-  $scope.addDriverOption = function() {
-    $scope.formValues.DriverOptions.push({ name: '', value: '' });
-  };
+    $scope.removeDriverOption = function (index) {
+      $scope.formValues.DriverOptions.splice(index, 1);
+    };

-  $scope.removeDriverOption = function(index) {
-    $scope.formValues.DriverOptions.splice(index, 1);
-  };
+    function validateForm(accessControlData, isAdmin) {
+      $scope.state.formValidationError = '';
+      var error = '';
+      error = FormValidator.validateAccessControl(accessControlData, isAdmin);

-  function validateForm(accessControlData, isAdmin) {
-    $scope.state.formValidationError = '';
-    var error = '';
-    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
-
-    if (error) {
-      $scope.state.formValidationError = error;
-      return false;
-    }
-    return true;
-  }
-
-  function prepareNFSConfiguration(driverOptions) {
-    var data = $scope.formValues.NFSData;
-
-    driverOptions.push({ name: 'type', value: data.version.toLowerCase() });
-
-    var options = 'addr=' + data.serverAddress + ',' + data.options;
-    driverOptions.push({ name: 'o', value: options });
-
-    var mountPoint = data.mountPoint[0] === ':' ? data.mountPoint : ':' + data.mountPoint;
-    driverOptions.push({ name: 'device', value: mountPoint });
-  }
-
-  $scope.create = function () {
-    var name = $scope.formValues.Name;
-    var driver = $scope.formValues.Driver;
-    var driverOptions = $scope.formValues.DriverOptions;
-    var storidgeProfile = $scope.formValues.StoridgeProfile;
-
-    if (driver === 'cio:latest' && storidgeProfile) {
-      driverOptions.push({ name: 'profile', value: storidgeProfile.Name });
+      if (error) {
+        $scope.state.formValidationError = error;
+        return false;
+      }
+      return true;
    }

-    if ($scope.formValues.NFSData.useNFS) {
-      prepareNFSConfiguration(driverOptions);
+    function prepareNFSConfiguration(driverOptions) {
+      var data = $scope.formValues.NFSData;
+
+      driverOptions.push({ name: 'type', value: data.version.toLowerCase() });
+
+      var options = 'addr=' + data.serverAddress + ',' + data.options;
+      driverOptions.push({ name: 'o', value: options });
+
+      var mountPoint = data.mountPoint[0] === ':' ? data.mountPoint : ':' + data.mountPoint;
+      driverOptions.push({ name: 'device', value: mountPoint });
    }

-    var volumeConfiguration = VolumeService.createVolumeConfiguration(name, driver, driverOptions);
-    var accessControlData = $scope.formValues.AccessControlData;
-    var userDetails = Authentication.getUserDetails();
-    var isAdmin = Authentication.isAdmin();
+    $scope.create = function () {
+      var name = $scope.formValues.Name;
+      var driver = $scope.formValues.Driver;
+      var driverOptions = $scope.formValues.DriverOptions;
+      var storidgeProfile = $scope.formValues.StoridgeProfile;

-    if (!validateForm(accessControlData, isAdmin)) {
-      return;
+      if (driver === 'cio:latest' && storidgeProfile) {
+        driverOptions.push({ name: 'profile', value: storidgeProfile.Name });
+      }
+
+      if ($scope.formValues.NFSData.useNFS) {
+        prepareNFSConfiguration(driverOptions);
+      }
+
+      var volumeConfiguration = VolumeService.createVolumeConfiguration(name, driver, driverOptions);
+      var accessControlData = $scope.formValues.AccessControlData;
+      var userDetails = Authentication.getUserDetails();
+      var isAdmin = Authentication.isAdmin();
+
+      if (!validateForm(accessControlData, isAdmin)) {
+        return;
+      }
+
+      var nodeName = $scope.formValues.NodeName;
+      HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
+
+      $scope.state.actionInProgress = true;
+      VolumeService.createVolume(volumeConfiguration)
+        .then(function success(data) {
+          const userId = userDetails.ID;
+          const resourceControl = data.ResourceControl;
+          return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
+        })
+        .then(function success() {
+          Notifications.success('Volume successfully created');
+          $state.go('docker.volumes', {}, { reload: true });
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'An error occured during volume creation');
+        })
+        .finally(function final() {
+          $scope.state.actionInProgress = false;
+        });
+    };
+
+    function initView() {
+      var apiVersion = $scope.applicationState.endpoint.apiVersion;
+      var endpointProvider = $scope.applicationState.endpoint.mode.provider;
+
+      PluginService.volumePlugins(apiVersion < 1.25 || endpointProvider === 'VMWARE_VIC')
+        .then(function success(data) {
+          $scope.availableVolumeDrivers = data;
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve volume drivers');
+        });
    }

-    var nodeName = $scope.formValues.NodeName;
-    HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
-
-    $scope.state.actionInProgress = true;
-    VolumeService.createVolume(volumeConfiguration)
-    .then(function success(data) {
-      const userId = userDetails.ID;
-      const resourceControl = data.ResourceControl;
-      return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
-    })
-    .then(function success() {
-      Notifications.success('Volume successfully created');
-      $state.go('docker.volumes', {}, {reload: true});
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'An error occured during volume creation');
-    })
-    .finally(function final() {
-      $scope.state.actionInProgress = false;
-    });
-  };
-
-  function initView() {
-    var apiVersion = $scope.applicationState.endpoint.apiVersion;
-    var endpointProvider = $scope.applicationState.endpoint.mode.provider;
-
-    PluginService.volumePlugins(apiVersion < 1.25 || endpointProvider === 'VMWARE_VIC')
-    .then(function success(data) {
-      $scope.availableVolumeDrivers = data;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve volume drivers');
-    });
-  }
-
-  initView();
-}]);
+    initView();
+  },
+]);
--- a/app/docker/views/volumes/create/createvolume.html
+++ b/app/docker/views/volumes/create/createvolume.html
@ -1,8 +1,6 @@
 <rd-header>
  <rd-header-title title-text="Create volume"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.volumes">Volumes</a> &gt; Add volume
-  </rd-header-content>
+  <rd-header-content> <a ui-sref="docker.volumes">Volumes</a> &gt; Add volume </rd-header-content>
 </rd-header>

 <div class="row">
@ -14,7 +12,7 @@
          <div class="form-group">
            <label for="volume_name" class="col-sm-2 col-md-1 control-label text-left">Name</label>
            <div class="col-sm-10 col-md-11">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume" />
            </div>
          </div>
          <!-- !name-input -->
@ -28,7 +26,7 @@
              <select class="form-control" ng-options="driver for driver in availableVolumeDrivers" ng-model="formValues.Driver" ng-if="availableVolumeDrivers.length > 0">
                <option disabled hidden value="">Select a driver</option>
              </select>
-              <input type="text" class="form-control" ng-model="formValues.Driver" id="volume_driver" placeholder="e.g. driverName" ng-if="availableVolumeDrivers.length === 0">
+              <input type="text" class="form-control" ng-model="formValues.Driver" id="volume_driver" placeholder="e.g. driverName" ng-if="availableVolumeDrivers.length === 0" />
            </div>
          </div>
          <!-- !driver-input -->
@ -37,7 +35,10 @@
            <div class="col-sm-12" style="margin-top: 5px;">
              <label class="control-label text-left">
                Driver options
-                <portainer-tooltip position="bottom" message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."></portainer-tooltip>
+                <portainer-tooltip
+                  position="bottom"
+                  message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."
+                ></portainer-tooltip>
              </label>
              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addDriverOption()">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
@ -48,11 +49,11 @@
              <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
                <div class="input-group col-sm-5 input-group-sm">
                  <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint">
+                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint" />
                </div>
                <div class="input-group col-sm-5 input-group-sm">
                  <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host">
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host" />
                </div>
                <button class="btn btn-sm btn-danger" type="button" ng-click="removeDriverOption($index)">
                  <i class="fa fa-trash" aria-hidden="true"></i>
@ -78,9 +79,7 @@
              Deployment
            </div>
            <!-- node-selection -->
-            <node-selector
-              model="formValues.NodeName">
-            </node-selector>
+            <node-selector model="formValues.NodeName"> </node-selector>
            <!-- !node-selection -->
          </div>
          <!-- access-control -->
@ -92,7 +91,13 @@
          </div>
          <div class="form-group">
            <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-click="create()" ng-disabled="state.actionInProgress || (formValues.NFSData.useNFS && !volumeCreationForm.$valid)" button-spinner="state.actionInProgress">
+              <button
+                type="button"
+                class="btn btn-primary btn-sm"
+                ng-click="create()"
+                ng-disabled="state.actionInProgress || (formValues.NFSData.useNFS && !volumeCreationForm.$valid)"
+                button-spinner="state.actionInProgress"
+              >
                <span ng-hide="state.actionInProgress">Create the volume</span>
                <span ng-show="state.actionInProgress">Creating volume...</span>
              </button>
--- a/app/docker/views/volumes/edit/volume.html
+++ b/app/docker/views/volumes/edit/volume.html
@ -16,7 +16,9 @@
              <td>ID</td>
              <td>
                {{ volume.Id }}
-                <button authorization="DockerVolumeDelete" class="btn btn-xs btn-danger" ng-click="removeVolume()"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove this volume</button>
+                <button authorization="DockerVolumeDelete" class="btn btn-xs btn-danger" ng-click="removeVolume()"
+                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove this volume</button
+                >
              </td>
            </tr>
            <tr>
@ -51,35 +53,32 @@

 <div class="row" ng-if="isCioDriver">
  <div class="col-sm-12">
-    <volume-storidge-info volume="storidgeVolume">
-    </volume-storidge-info>
+    <volume-storidge-info volume="storidgeVolume"> </volume-storidge-info>
  </div>
 </div>

 <div class="row" ng-if="isCioDriver">
  <div class="col-sm-12">
-    <storidge-snapshot-creation volume-id="storidgeVolume.Vdisk" ng-if="storidgeVolume.SnapshotEnabled">
-    </storidge-snapshot-creation>
+    <storidge-snapshot-creation volume-id="storidgeVolume.Vdisk" ng-if="storidgeVolume.SnapshotEnabled"> </storidge-snapshot-creation>
  </div>
 </div>

 <div class="row" ng-if="isCioDriver && storidgeVolume.SnapshotEnabled">
  <div class="col-sm-12">
    <storidge-snapshots-datatable
-      title-text="Snapshots" title-icon="fa-camera"
-      dataset="storidgeSnapshots" table-key="storidgeSnapshots"
+      title-text="Snapshots"
+      title-icon="fa-camera"
+      dataset="storidgeSnapshots"
+      table-key="storidgeSnapshots"
      order-by="Id"
-      remove-action="removeSnapshot">
+      remove-action="removeSnapshot"
+    >
    </storidge-snapshots-datatable>
  </div>
 </div>

 <!-- access-control-panel -->
-<por-access-control-panel
-  ng-if="volume && applicationState.application.authentication"
-  resource-id="volume.Id"
-  resource-control="volume.ResourceControl"
-  resource-type="'volume'">
+<por-access-control-panel ng-if="volume && applicationState.application.authentication" resource-id="volume.Id" resource-control="volume.ResourceControl" resource-type="'volume'">
 </por-access-control-panel>
 <!-- !access-control-panel -->

@ -113,7 +112,9 @@
          </thead>
          <tbody>
            <tr ng-repeat="container in containersUsingVolume">
-              <td><a ui-sref="docker.containers.container({ id: container.Id, nodeName: container.NodeName })">{{ container | containername }}</a></td>
+              <td
+                ><a ui-sref="docker.containers.container({ id: container.Id, nodeName: container.NodeName })">{{ container | containername }}</a></td
+              >
              <td>{{ container.volumeData.Destination }}</td>
              <td>{{ !container.volumeData.RW }}</td>
            </tr>
--- a/app/docker/views/volumes/edit/volumeController.js
+++ b/app/docker/views/volumes/edit/volumeController.js
@ -1,103 +1,115 @@
-angular.module('portainer.docker')
-.controller('VolumeController', ['$scope', '$state', '$transition$', '$q', 'ModalService', 'VolumeService', 'ContainerService', 'Notifications', 'HttpRequestHelper', 'StoridgeVolumeService', 'StoridgeSnapshotService',
-function ($scope, $state, $transition$, $q, ModalService, VolumeService, ContainerService, Notifications, HttpRequestHelper, StoridgeVolumeService, StoridgeSnapshotService) {
+angular.module('portainer.docker').controller('VolumeController', [
+  '$scope',
+  '$state',
+  '$transition$',
+  '$q',
+  'ModalService',
+  'VolumeService',
+  'ContainerService',
+  'Notifications',
+  'HttpRequestHelper',
+  'StoridgeVolumeService',
+  'StoridgeSnapshotService',
+  function ($scope, $state, $transition$, $q, ModalService, VolumeService, ContainerService, Notifications, HttpRequestHelper, StoridgeVolumeService, StoridgeSnapshotService) {
+    $scope.storidgeSnapshots = [];
+    $scope.storidgeVolume = {};

-  $scope.storidgeSnapshots = [];
-  $scope.storidgeVolume = {};
-
-  $scope.removeSnapshot = function (selectedItems) {
-    ModalService.confirm({
-      title: 'Are you sure?',
-      message: 'Do you want really want to remove this snapshot?',
-      buttons: {
-        confirm: {
-          label: 'Remove',
-          className: 'btn-danger'
-        }
-      },
-      callback: function onConfirm(confirmed) {
-        if(!confirmed) { return; }
-        var actionCount = selectedItems.length;
-        angular.forEach(selectedItems, function (item) {
-          StoridgeSnapshotService.remove(item.Id)
-          .then(function success() {
-            Notifications.success('Snapshot successfully removed', item.Id);
-            var index = $scope.storidgeSnapshots.indexOf(item);
-            $scope.storidgeSnapshots.splice(index, 1);
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'Unable to remove snapshot');
-          })
-          .finally(function final() {
-            --actionCount;
-            if (actionCount === 0) {
-              $state.reload();
-            }
+    $scope.removeSnapshot = function (selectedItems) {
+      ModalService.confirm({
+        title: 'Are you sure?',
+        message: 'Do you want really want to remove this snapshot?',
+        buttons: {
+          confirm: {
+            label: 'Remove',
+            className: 'btn-danger',
+          },
+        },
+        callback: function onConfirm(confirmed) {
+          if (!confirmed) {
+            return;
+          }
+          var actionCount = selectedItems.length;
+          angular.forEach(selectedItems, function (item) {
+            StoridgeSnapshotService.remove(item.Id)
+              .then(function success() {
+                Notifications.success('Snapshot successfully removed', item.Id);
+                var index = $scope.storidgeSnapshots.indexOf(item);
+                $scope.storidgeSnapshots.splice(index, 1);
+              })
+              .catch(function error(err) {
+                Notifications.error('Failure', err, 'Unable to remove snapshot');
+              })
+              .finally(function final() {
+                --actionCount;
+                if (actionCount === 0) {
+                  $state.reload();
+                }
+              });
          });
-        });
-      }
-    });
-  };
-
-  $scope.removeVolume = function removeVolume() {
-    VolumeService.remove($scope.volume)
-    .then(function success() {
-      Notifications.success('Volume successfully removed', $transition$.params().id);
-      $state.go('docker.volumes', {});
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to remove volume');
-    });
-  };
-
-  function getVolumeDataFromContainer(container, volumeId) {
-    return container.Mounts.find(function(volume) {
-      return volume.Name === volumeId;
-    });
-  }
-
-  function initView() {
-    HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
-
-    VolumeService.volume($transition$.params().id)
-    .then(function success(data) {
-      var volume = data;
-      $scope.volume = volume;
-      var containerFilter = { volume: [volume.Id] };
-
-      $scope.isCioDriver = volume.Driver.includes('cio');
-      if ($scope.isCioDriver) {
-        return $q.all({
-          containers: ContainerService.containers(1, containerFilter),
-          storidgeVolume: StoridgeVolumeService.volume($transition$.params().id)
-        });
-      } else {
-        return ContainerService.containers(1, containerFilter);
-      }
-    })
-    .then(function success(data) {
-      var dataContainers = $scope.isCioDriver ? data.containers : data;
-
-      var containers = dataContainers.map(function(container) {
-        container.volumeData = getVolumeDataFromContainer(container, $scope.volume.Id);
-        return container;
+        },
      });
-      $scope.containersUsingVolume = containers;
+    };

-      if ($scope.isCioDriver) {
-        $scope.storidgeVolume = data.storidgeVolume;
-        if ($scope.storidgeVolume.SnapshotEnabled) {
-          return StoridgeSnapshotService.snapshots(data.storidgeVolume.Vdisk);
-        }
-      }
-    })
-    .then(function success(data) {
-      $scope.storidgeSnapshots = data;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve volume details');
-    });
-  }
+    $scope.removeVolume = function removeVolume() {
+      VolumeService.remove($scope.volume)
+        .then(function success() {
+          Notifications.success('Volume successfully removed', $transition$.params().id);
+          $state.go('docker.volumes', {});
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove volume');
+        });
+    };

-  initView();
-}]);
+    function getVolumeDataFromContainer(container, volumeId) {
+      return container.Mounts.find(function (volume) {
+        return volume.Name === volumeId;
+      });
+    }
+
+    function initView() {
+      HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
+
+      VolumeService.volume($transition$.params().id)
+        .then(function success(data) {
+          var volume = data;
+          $scope.volume = volume;
+          var containerFilter = { volume: [volume.Id] };
+
+          $scope.isCioDriver = volume.Driver.includes('cio');
+          if ($scope.isCioDriver) {
+            return $q.all({
+              containers: ContainerService.containers(1, containerFilter),
+              storidgeVolume: StoridgeVolumeService.volume($transition$.params().id),
+            });
+          } else {
+            return ContainerService.containers(1, containerFilter);
+          }
+        })
+        .then(function success(data) {
+          var dataContainers = $scope.isCioDriver ? data.containers : data;
+
+          var containers = dataContainers.map(function (container) {
+            container.volumeData = getVolumeDataFromContainer(container, $scope.volume.Id);
+            return container;
+          });
+          $scope.containersUsingVolume = containers;
+
+          if ($scope.isCioDriver) {
+            $scope.storidgeVolume = data.storidgeVolume;
+            if ($scope.storidgeVolume.SnapshotEnabled) {
+              return StoridgeSnapshotService.snapshots(data.storidgeVolume.Vdisk);
+            }
+          }
+        })
+        .then(function success(data) {
+          $scope.storidgeSnapshots = data;
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve volume details');
+        });
+    }
+
+    initView();
+  },
+]);
--- a/app/docker/views/volumes/volumes.html
+++ b/app/docker/views/volumes/volumes.html
@ -10,8 +10,10 @@
 <div class="row">
  <div class="col-sm-12">
    <volumes-datatable
-      title-text="Volumes" title-icon="fa-cubes"
-      dataset="volumes" table-key="volumes"
+      title-text="Volumes"
+      title-icon="fa-cubes"
+      dataset="volumes"
+      table-key="volumes"
      order-by="Id"
      remove-action="removeAction"
      show-ownership-column="applicationState.application.authentication"
--- a/app/docker/views/volumes/volumesController.js
+++ b/app/docker/views/volumes/volumesController.js
@ -1,74 +1,88 @@
-angular.module('portainer.docker')
-.controller('VolumesController', ['$q', '$scope', '$state', 'VolumeService', 'ServiceService', 'VolumeHelper', 'Notifications', 'HttpRequestHelper', 'EndpointProvider', 'Authentication', 'ExtensionService',
-function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notifications, HttpRequestHelper, EndpointProvider, Authentication, ExtensionService) {
+angular.module('portainer.docker').controller('VolumesController', [
+  '$q',
+  '$scope',
+  '$state',
+  'VolumeService',
+  'ServiceService',
+  'VolumeHelper',
+  'Notifications',
+  'HttpRequestHelper',
+  'EndpointProvider',
+  'Authentication',
+  'ExtensionService',
+  function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notifications, HttpRequestHelper, EndpointProvider, Authentication, ExtensionService) {
+    $scope.removeAction = function (selectedItems) {
+      var actionCount = selectedItems.length;
+      angular.forEach(selectedItems, function (volume) {
+        HttpRequestHelper.setPortainerAgentTargetHeader(volume.NodeName);
+        VolumeService.remove(volume)
+          .then(function success() {
+            Notifications.success('Volume successfully removed', volume.Id);
+            var index = $scope.volumes.indexOf(volume);
+            $scope.volumes.splice(index, 1);
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to remove volume');
+          })
+          .finally(function final() {
+            --actionCount;
+            if (actionCount === 0) {
+              $state.reload();
+            }
+          });
+      });
+    };

-  $scope.removeAction = function (selectedItems) {
-    var actionCount = selectedItems.length;
-    angular.forEach(selectedItems, function (volume) {
-      HttpRequestHelper.setPortainerAgentTargetHeader(volume.NodeName);
-      VolumeService.remove(volume)
-      .then(function success() {
-        Notifications.success('Volume successfully removed', volume.Id);
-        var index = $scope.volumes.indexOf(volume);
-        $scope.volumes.splice(index, 1);
+    $scope.offlineMode = false;
+
+    $scope.getVolumes = getVolumes;
+    function getVolumes() {
+      var endpointProvider = $scope.applicationState.endpoint.mode.provider;
+      var endpointRole = $scope.applicationState.endpoint.mode.role;
+
+      $q.all({
+        attached: VolumeService.volumes({ filters: { dangling: ['false'] } }),
+        dangling: VolumeService.volumes({ filters: { dangling: ['true'] } }),
+        services: endpointProvider === 'DOCKER_SWARM_MODE' && endpointRole === 'MANAGER' ? ServiceService.services() : [],
      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to remove volume');
-      })
-      .finally(function final() {
-        --actionCount;
-        if (actionCount === 0) {
-          $state.reload();
+        .then(function success(data) {
+          var services = data.services;
+          $scope.offlineMode = EndpointProvider.offlineMode();
+          $scope.volumes = data.attached
+            .map(function (volume) {
+              volume.dangling = false;
+              return volume;
+            })
+            .concat(
+              data.dangling.map(function (volume) {
+                volume.dangling = true;
+                if (VolumeHelper.isVolumeUsedByAService(volume, services)) {
+                  volume.dangling = false;
+                }
+                return volume;
+              })
+            );
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve volumes');
+        });
+    }
+
+    function initView() {
+      getVolumes();
+
+      $scope.showBrowseAction = $scope.applicationState.endpoint.mode.agentProxy;
+
+      ExtensionService.extensionEnabled(ExtensionService.EXTENSIONS.RBAC).then(function success(extensionEnabled) {
+        if (!extensionEnabled) {
+          var isAdmin = Authentication.isAdmin();
+          if (!$scope.applicationState.application.enableVolumeBrowserForNonAdminUsers && !isAdmin) {
+            $scope.showBrowseAction = false;
+          }
        }
      });
-    });
-  };
+    }

-  $scope.offlineMode = false;
-
-  $scope.getVolumes = getVolumes;
-  function getVolumes() {
-    var endpointProvider = $scope.applicationState.endpoint.mode.provider;
-    var endpointRole = $scope.applicationState.endpoint.mode.role;
-
-    $q.all({
-      attached: VolumeService.volumes({ filters: { 'dangling': ['false'] } }),
-      dangling: VolumeService.volumes({ filters: { 'dangling': ['true'] } }),
-      services: endpointProvider === 'DOCKER_SWARM_MODE' && endpointRole === 'MANAGER' ? ServiceService.services() : []
-    })
-    .then(function success(data) {
-      var services = data.services;
-      $scope.offlineMode = EndpointProvider.offlineMode();
-      $scope.volumes = data.attached.map(function(volume) {
-        volume.dangling = false;
-        return volume;
-      }).concat(data.dangling.map(function(volume) {
-        volume.dangling = true;
-        if (VolumeHelper.isVolumeUsedByAService(volume, services)) {
-          volume.dangling = false;
-        }
-        return volume;
-      }));
-    }).catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve volumes');
-    });
-  }
-
-  function initView() {
-    getVolumes();
-
-    $scope.showBrowseAction = $scope.applicationState.endpoint.mode.agentProxy;
-
-    ExtensionService.extensionEnabled(ExtensionService.EXTENSIONS.RBAC)
-    .then(function success(extensionEnabled) {
-      if (!extensionEnabled) {
-        var isAdmin = Authentication.isAdmin();
-        if (!$scope.applicationState.application.enableVolumeBrowserForNonAdminUsers && !isAdmin) {
-          $scope.showBrowseAction = false;
-        }
-      }
-    });
-  }
-
-  initView();
-}]);
+    initView();
+  },
+]);