refactor(app): move storidge to new 'integrations' module (#2905)

* refactor(app): move storidge to new 'integrations' module

* style(storidge): revert TODO note removal

app/integrations/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html

@@ -0,0 +1,84 @@
+<div class="datatable">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <div class="toolBar">
+        <div class="toolBarTitle">
+          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
+        </div>
+      </div>
+      <div class="searchBar">
+        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Time')">
+                  Date
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Time' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Category')">
+                  Category
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Category' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Category' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Module')">
+                  Module
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Module' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Module' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Content')">
+                  Content
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Content' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Content' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+              <td>{{ item.Time }}</td>
+              <td>{{ item.Category }}</td>
+              <td>{{ item.Module }}</td>
+              <td>{{ item.Content }}</td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="4" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="4" class="text-center text-muted">No events available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/integrations/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.js

@@ -0,0 +1,12 @@
+angular.module('portainer.integrations.storidge').component('storidgeClusterEventsDatatable', {
+  templateUrl: './storidgeClusterEventsDatatable.html',
+  controller: 'GenericDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<'
+  }
+});

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatable.html

@@ -0,0 +1,130 @@
+<div class="datatable">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <div class="toolBar">
+        <div class="toolBarTitle">
+          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
+        </div>
+      </div>
+      <div class="actionBar">
+        <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.rescanAction()">
+          <i class="fa fa-sync space-right" aria-hidden="true"></i>Rescan drives
+        </button>
+      </div>
+      <div class="searchBar">
+        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Id')">
+                  Id
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Node')">
+                  Node
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Device')">
+                  Device
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Device' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Device' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Size')">
+                  Size
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Use')">
+                  Use
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Use' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Use' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Type')">
+                  Type
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Status')">
+                  Status
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+              <td>
+                <a ui-sref="storidge.drives.drive({id: item.Id})"> {{ item.Id }}</a>
+              </td>
+              <td>{{ item.Node }}</td>
+              <td>{{ item.Device }}</td>
+              <td>{{ item.Size }}</td>
+              <td>{{ item.Use }}</td>
+              <td>{{ item.Type }}</td>
+              <td>
+                <span class="label label-{{ item.Status|drivestatusbadge }}">{{ item.Status|capitalize }}</span>
+              </td>
+              <td>
+                <button ng-if="item.Status === 'available'" type="button" class="btn btn-sm btn-primary btn-datatable"
+                  ng-click="$ctrl.addAction(item, $index)" button-spinner="$ctrl.additionInProgress[$index]" ng-disabled="$ctrl.actionInProgress">
+                  <span ng-hide="$ctrl.additionInProgress[$index]"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add to storage pool</span>
+                  <span ng-show="$ctrl.additionInProgress[$index]">Addition in progress...</span>
+                </button>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="7" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td class="text-center text-muted">No drives available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+          {{ $ctrl.state.selectedItemCount }} item(s) selected
+        </div>
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatable.js

@@ -0,0 +1,17 @@
+angular.module('portainer.integrations.storidge').component('storidgeDrivesDatatable', {
+  templateUrl: './storidgeDrivesDatatable.html',
+  controller: 'StoridgeDrivesDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+    removeAction: '<',
+    addAction: '<',
+    rescanAction: '<',
+    actionInProgress: '<',
+    additionInProgress: '<'
+  }
+});

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatableController.js

@@ -0,0 +1,16 @@
+angular.module('portainer.docker')
+  .controller('StoridgeDrivesDatatableController', ['$scope', '$controller',
+    function ($scope, $controller) {
+      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+
+      this.selectAll = function() {
+        for (var i = 0; i < this.state.filteredDataSet.length; i++) {
+          var item = this.state.filteredDataSet[i];
+          if (item.Status !== 'normal' && item.Checked !== this.state.selectAll) {
+            item.Checked = this.state.selectAll;
+            this.selectItem(item);
+          }
+        }
+      };
+  }
+]);

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatable.html

@@ -0,0 +1,108 @@
+<div class="datatable">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <div class="toolBar">
+        <div class="toolBarTitle">
+          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
+        </div>
+      </div>
+      <div class="actionBar">
+        <div class="row">
+          <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.addNodeAction()">
+            <i class="fa fa-plus space-right" aria-hidden="true"></i>Add node
+          </button>
+          <div  style="margin-bottom: 0px;">
+            <span ng-if="$ctrl.addInfo" class="text-muted small">
+              To add a node to this cluster, run the following command on your new node
+              <code>
+                {{ $ctrl.addInfo }}
+              </code>
+              <span class="btn btn-primary btn-sm space-left" ng-click="$ctrl.copyAddNodeCommand()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</span>
+              <span>
+                <i id="copyNotification" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="searchBar">
+        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Name')">
+                  Name
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('IP')">
+                  IP Address
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Role')">
+                  Role
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Status')">
+                  Status
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+              <td>
+                <a ui-sref="storidge.cluster.node({name: item.Name})"> {{ item.Name }}</a>
+              </td>
+              <td>{{ item.IP }}</td>
+              <td>{{ item.Role }}</td>
+              <td>
+                <i class="fa fa-heartbeat space-right {{ item.Status | storidgeNodeStatusBadge }}"></i>
+                {{ item.Status }}
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="4" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="4" class="text-center text-muted">No nodes available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatable.js

@@ -0,0 +1,12 @@
+angular.module('portainer.integrations.storidge').component('storidgeNodesDatatable', {
+  templateUrl: './storidgeNodesDatatable.html',
+  controller: 'StoridgeNodesDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<'
+  }
+});

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatableController.js

@@ -0,0 +1,23 @@
+angular.module('portainer.integrations.storidge')
+.controller('StoridgeNodesDatatableController', ['$scope', '$controller', 'clipboard', 'Notifications', 'StoridgeNodeService',
+function($scope, $controller, clipboard, Notifications, StoridgeNodeService) {
+  angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
+
+  var ctrl = this;
+
+  this.addNodeAction = function() {
+    StoridgeNodeService.add()
+      .then(function sucess(data) {
+        ctrl.addInfo = data.content;
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve the "add node" command');
+      });
+  };
+
+  this.copyAddNodeCommand = function() {
+    clipboard.copyText(ctrl.addInfo);
+    $('#copyNotification').show();
+    $('#copyNotification').fadeOut(2000);
+  };
+}]);

app/integrations/storidge/components/profileSelector/storidgeProfileSelector.html

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label for="storidge_profile" class="col-sm-2 col-lg-1 control-label text-left">Profile</label>
+  <div class="col-sm-10 col-lg-11">
+    <select id="storidge_profile" ng-model="$ctrl.storidgeProfile" ng-options="profile.Name for profile in $ctrl.profiles" class="form-control">
+      <option selected disabled hidden value="">Select a profile</option>
+    </select>
+  </div>
+</div>

app/integrations/storidge/components/profileSelector/storidgeProfileSelector.js

@@ -0,0 +1,7 @@
+angular.module('portainer.integrations.storidge').component('storidgeProfileSelector', {
+  templateUrl: './storidgeProfileSelector.html',
+  controller: 'StoridgeProfileSelectorController',
+  bindings: {
+    'storidgeProfile': '='
+  }
+});

app/integrations/storidge/components/profileSelector/storidgeProfileSelectorController.js

@@ -0,0 +1,17 @@
+angular.module('portainer.integrations.storidge')
+.controller('StoridgeProfileSelectorController', ['StoridgeProfileService', 'Notifications',
+function (StoridgeProfileService, Notifications) {
+  var ctrl = this;
+
+  function initComponent() {
+    StoridgeProfileService.profiles()
+    .then(function success(data) {
+      ctrl.profiles = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve Storidge profiles');
+    });
+  }
+
+  initComponent();
+}]);

app/integrations/storidge/components/profiles-datatable/storidgeProfilesDatatable.html

@@ -0,0 +1,79 @@
+<div class="datatable">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <div class="toolBar">
+        <div class="toolBarTitle">
+          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
+        </div>
+      </div>
+      <div class="actionBar">
+        <button type="button" class="btn btn-sm btn-danger"
+          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
+        </button>
+      </div>
+      <div class="searchBar">
+        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>
+                <span class="md-checkbox">
+                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                  <label for="select_all"></label>
+                </span>
+                <a ng-click="$ctrl.changeOrderBy('Name')">
+                  Name
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+              <td>
+                <span class="md-checkbox">
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-change="$ctrl.selectItem(item)"/>
+                  <label for="select_{{ $index }}"></label>
+                </span>
+                <a ui-sref="storidge.profiles.profile({id: item.Name})">{{ item.Name }}</a>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td class="text-center text-muted">No profile available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+          {{ $ctrl.state.selectedItemCount }} item(s) selected
+        </div>
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/integrations/storidge/components/profiles-datatable/storidgeProfilesDatatable.js

@@ -0,0 +1,13 @@
+angular.module('portainer.integrations.storidge').component('storidgeProfilesDatatable', {
+  templateUrl: './storidgeProfilesDatatable.html',
+  controller: 'GenericDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+    removeAction: '<'
+  }
+});

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreation.html

@@ -0,0 +1,23 @@
+<rd-widget>
+  <rd-widget-header icon="fa-plus" title-text="Create snapshot">
+  </rd-widget-header>
+  <rd-widget-body>
+    <form class="form-horizontal">
+      <div class="form-group">
+        <label for="description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
+        <div class="col-sm-9 col-lg-10">
+          <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description">
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-12">
+          <button type="button" class="btn btn-primary btn-sm" ng-disabled="$ctrl.state.actionInProgress"
+            ng-click="$ctrl.createSnapshot()" button-spinner="$ctrl.state.actionInProgress">
+            <span ng-hide="$ctrl.state.actionInProgress">Create snapshot</span>
+            <span ng-show="$ctrl.state.actionInProgress">Creating snapshot...</span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </rd-widget-body>
+</rd-widget>

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreation.js

@@ -0,0 +1,7 @@
+angular.module('portainer.docker').component('storidgeSnapshotCreation', {
+  templateUrl: './storidgeSnapshotCreation.html',
+  controller: 'StoridgeSnapshotCreationController',
+  bindings: {
+    volumeId: '<'
+  }
+});

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreationController.js

@@ -0,0 +1,26 @@
+angular.module('portainer.docker')
+.controller('StoridgeSnapshotCreationController', ['StoridgeSnapshotService', 'Notifications', '$state',
+function (StoridgeSnapshotService, Notifications, $state) {
+  var ctrl = this;
+
+  this.formValues = {};
+  this.state = {
+    actionInProgress: false
+  };
+
+  this.createSnapshot = function () {
+    ctrl.state.actionInProgress = true;
+    StoridgeSnapshotService.create(ctrl.volumeId, ctrl.formValues.Description)
+      .then(function success() {
+        Notifications.success('Success', 'Snapshot successfully created');
+        $state.reload();
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to create snapshot');
+      })
+      .finally(function final() {
+        ctrl.state.actionInProgress = false;
+      });
+  };
+
+}]);

app/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatable.html

@@ -0,0 +1,95 @@
+<div class="datatable">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <div class="toolBar">
+        <div class="toolBarTitle">
+          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
+        </div>
+      </div>
+      <div class="actionBar">
+        <button type="button" class="btn btn-sm btn-danger"
+          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
+        </button>
+      </div>
+      <div class="searchBar">
+        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>
+                <span class="md-checkbox">
+                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                  <label for="select_all"></label>
+                </span>
+                <a ng-click="$ctrl.changeOrderBy('Id')">
+                  Id
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Date')">
+                  Date
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('Description')">
+                  Description
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Description' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Description' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+              <td>
+                <span class="md-checkbox">
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-change="$ctrl.selectItem(item)" ng-disabled="item.Status === 'normal'"/>
+                  <label for="select_{{ $index }}"></label>
+                </span>
+                <a ui-sref="docker.volumes.volume.snapshot({snapshotId: item.Id})"> {{ item.Id }}</a>
+              </td>
+              <td>{{ item.Date }}</td>
+              <td>{{ item.Description }}</td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="7" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="3" class="text-center text-muted">No snapshots available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+          {{ $ctrl.state.selectedItemCount }} item(s) selected
+        </div>
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatable.js

@@ -0,0 +1,13 @@
+angular.module('portainer.integrations.storidge').component('storidgeSnapshotsDatatable', {
+  templateUrl: './storidgeSnapshotsDatatable.html',
+  controller: 'StoridgeSnapshotsDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+    removeAction: '<'
+  }
+});

app/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatableController.js

@@ -0,0 +1,7 @@
+angular.module('portainer.docker')
+  .controller('StoridgeSnapshotsDatatableController', ['$scope', '$controller',
+    function ($scope, $controller) {
+      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+
+  }
+]);

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfo.html

@@ -0,0 +1,198 @@
+<rd-widget>
+  <rd-widget-header icon="fa-cube" title-text="Storidge details">
+    <div class="form-group">
+      <div class="col-sm-12">
+        <button type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.updateVolume()" ng-if="!$ctrl.state.updateInProgress">
+          <span>Update the volume</span>
+        </button>
+        <button type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.confirmUpdate()" ng-if="$ctrl.state.updateInProgress" button-spinner="$ctrl.state.isUpdating">
+          <span ng-hide="$ctrl.state.isUpdating">Confirm</span>
+          <span ng-show="$ctrl.state.isUpdating">Updating the volume...</span>
+        </button>
+        <button type="button" class="btn btn-danger btn-sm" ng-click="$ctrl.cancelUpdate()" ng-if="$ctrl.state.updateInProgress" ng-disabled="$ctrl.state.isUpdating">
+          <span>Cancel</span>
+        </button>
+      </div>
+    </div>
+  </rd-widget-header>
+  <rd-widget-body classes="no-padding" ng-if="!$ctrl.state.updateInProgress">
+    <table class="table">
+      <tbody>
+        <tr>
+          <td>Name</td>
+          <td>{{ $ctrl.volume.Name }}</td>
+        </tr>
+        <tr>
+          <td>UUID</td>
+          <td>{{ $ctrl.volume.Uuid }}</td>
+        </tr>
+        <tr>
+          <td>Node</td>
+          <td>{{ $ctrl.volume.Node }}</td>
+        </tr>
+        <tr>
+          <td>Node ID</td>
+          <td>{{ $ctrl.volume.NodeID }}</td>
+        </tr>
+        <tr>
+          <td>Directory</td>
+          <td>{{ $ctrl.volume.Directory }}</td>
+        </tr>
+        <tr>
+          <td>Capacity</td>
+          <td>{{ $ctrl.volume.Capacity }}</td>
+        </tr>
+        <tr>
+          <td>Allocated</td>
+          <td>{{ $ctrl.volume.Allocated }}</td>
+        </tr>
+        <tr>
+          <td>IOPS Min</td>
+          <td>{{ $ctrl.volume.IOPSMin }}</td>
+        </tr>
+        <tr>
+          <td>IOPS Max</td>
+          <td>{{ $ctrl.volume.IOPSMax }}</td>
+        </tr>
+        <tr>
+          <td>Bandwidth Min</td>
+          <td>{{ $ctrl.volume.BandwidthMin }}</td>
+        </tr>
+        <tr>
+          <td>Bandwidth Max</td>
+          <td>{{ $ctrl.volume.BandwidthMax }}</td>
+        </tr>
+        <tr>
+          <td>Local Drive Only</td>
+          <td>{{ $ctrl.volume.LocalDriveOnly }}</td>
+        </tr>
+        <tr>
+          <td>Provisioning</td>
+          <td>{{ $ctrl.volume.Provisioning }}</td>
+        </tr>
+        <tr>
+          <td>Redundancy</td>
+          <td>{{ $ctrl.volume.Redundancy }}</td>
+        </tr>
+        <tr>
+          <td>Vdisk</td>
+          <td>{{ $ctrl.volume.Vdisk }}</td>
+        </tr>
+        <tr>
+          <td>IP</td>
+          <td>{{ $ctrl.volume.IP}}</td>
+        </tr>
+        <tr>
+          <td>Drive Type</td>
+          <td>{{ $ctrl.volume.DriveType}}</td>
+        </tr>
+        <tr>
+          <td>Encryption</td>
+          <td>{{ $ctrl.volume.Encryption}}</td>
+        </tr>
+        <tr>
+          <td>Snapshot Enabled</td>
+          <td>{{ $ctrl.volume.SnapshotEnabled}}</td>
+        </tr>
+        <tr>
+          <td>Snapshot Interval</td>
+          <td>{{ $ctrl.volume.SnapshotInterval}} minute(s)</td>
+        </tr>
+        <tr>
+          <td>Max Snapshots</td>
+          <td>{{ $ctrl.volume.SnapshotMax}}</td>
+        </tr>
+        <tr>
+          <td>Filesystem</td>
+          <td>{{ $ctrl.volume.Filesystem}}</td>
+        </tr>
+        <tr ng-if="$ctrl.volume.Labels">
+          <td>Labels</td>
+          <td>
+            <table class="table table-bordered table-condensed">
+              <tr ng-repeat="var in $ctrl.volume.Labels">
+                <td>{{ var|key: '=' }}</td>
+                <td>{{ var|value: '=' }}</td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </rd-widget-body>
+  <rd-widget-body ng-if="$ctrl.state.updateInProgress">
+    <form class="form-horizontal" name="storidgeUpdateVolumeForm">
+      <!-- Node -->
+      <div class="form-group">
+        <label for="volume_node" class="col-sm-2 col-lg-1 control-label text-left">Node</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="text" class="form-control" ng-model="$ctrl.formValues.Node" name="volume_node" placeholder="2">
+        </div>
+      </div>
+      <!-- !Node -->
+      <!-- Capacity -->
+      <div class="form-group">
+        <label for="volume_capacity" class="col-sm-2 col-lg-1 control-label text-left">Capacity</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="text" class="form-control" ng-model="$ctrl.formValues.Capacity" name="volume_capacity" placeholder="2">
+        </div>
+      </div>
+      <!-- !Capacity -->
+      <!-- IOPS -->
+      <div class="form-group">
+        <label for="min_iops" class="col-sm-2 col-lg-1 control-label text-left">Min IOPS</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMin" name="min_iops" placeholder="100">
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="max_iops" class="col-sm-2 col-lg-1 control-label text-left">Max IOPS</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMax" name="max_iops" placeholder="2000">
+        </div>
+      </div>
+      <!-- !IOPS -->
+      <!-- Bandwidth -->
+      <div class="form-group">
+        <label for="min_bandwidth" class="col-sm-2 col-lg-1 control-label text-left">Min Bandwidth</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMin" name="min_bandwidth" placeholder="100">
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="max_bandwidth" class="col-sm-2 col-lg-1 control-label text-left">Max Bandwidth</label>
+        <div class="col-sm-10 col-lg-11">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMax" name="max_bandwidth" placeholder="2000">
+        </div>
+      </div>
+      <!-- !Bandwidth -->
+      <!-- labels -->
+      <div class="form-group">
+        <div class="col-sm-12" style="margin-top: 5px;">
+          <label class="control-label text-left">Labels</label>
+          <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addLabel()">
+            <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+          </span>
+        </div>
+        <!-- labels-input-list -->
+        <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+          <div ng-repeat="label in $ctrl.formValues.Labels" 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="label.name" placeholder="e.g. com.example.foo">
+            </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="label.value" placeholder="e.g. bar">
+            </div>
+            <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
+              <i class="fa fa-trash" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        <!-- !labels-input-list -->
+      </div>
+      <!-- !labels -->
+    </form>
+  </rd-widget-body>
+</rd-widget>

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfo.js

@@ -0,0 +1,7 @@
+angular.module('portainer.docker').component('volumeStoridgeInfo', {
+  templateUrl: './volumeStoridgeInfo.html',
+  controller: 'VolumeStoridgeInfoController',
+  bindings: {
+    volume: '<'
+  }
+});

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfoController.js

@@ -0,0 +1,103 @@
+angular.module('portainer.docker')
+.controller('VolumeStoridgeInfoController', ['$state', 'StoridgeVolumeService', 'Notifications',
+function ($state, StoridgeVolumeService, Notifications) {
+  var ctrl = this;
+
+  this.state = {
+    updateInProgress: false,
+    isUpdating: false
+  };
+
+  this.addLabel = function() {
+    this.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  this.removeLabel = function(index) {
+    this.formValues.Labels.splice(index, 1);
+  };
+
+  this.initLabels = function() {
+    var labels = this.volume.Labels;
+    if (labels) {
+      this.formValues.Labels = Object.keys(labels).map(function(key) {
+        return { name:key, value:labels[key] };
+      });
+    }
+  };
+
+  this.updateVolume = function() {
+    this.state.updateInProgress = true;
+    this.formValues = {
+      IOPSMin: this.volume.IOPSMin,
+      IOPSMax: this.volume.IOPSMax,
+      Node: this.volume.Node,
+      Capacity: this.volume.Capacity,
+      BandwidthMin: this.volume.BandwidthMin,
+      BandwidthMax: this.volume.BandwidthMax,
+      Labels: []
+    };
+    this.initLabels();
+  };
+
+  this.cancelUpdate = function() {
+    this.state.updateInProgress = false;
+    this.formValues = {};
+  };
+
+  this.prepareLabels = function(volume) {
+    var labels = {};
+    this.formValues.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+        labels[label.name] = label.value;
+      }
+    });
+    volume.Labels = labels;
+  };
+
+  this.prepareVolume = function() {
+    var volume = angular.copy(this.formValues);
+    var data = this.volume;
+    
+    if (volume.Node === data.Node || !volume.Node) {
+      delete volume.Node;
+    }
+    if (volume.Capacity === data.Capacity || !volume.Capacity) {
+      delete volume.Capacity;
+    }
+    if (volume.IOPSMin === data.IOPSMin || !volume.IOPSMin) {
+      delete volume.IOPSMin;
+    } else {
+      volume.IOPSMin = volume.IOPSMin.toString();
+    }
+    if (volume.IOPSMax === data.IOPSMax || !volume.IOPSMax) {
+      delete volume.IOPSMax;
+    } else {
+      volume.IOPSMax = volume.IOPSMax.toString();
+    }
+    if (volume.BandwidthMin === data.BandwidthMin || !volume.BandwidthMin) {
+      delete volume.BandwidthMin;
+    }
+    if (volume.BandwidthMax === data.BandwidthMax || !volume.BandwidthMax) {
+      delete volume.BandwidthMax;
+    }
+    this.prepareLabels(volume);
+    return volume;
+  };
+
+  this.confirmUpdate = function() {
+    this.state.isUpdating = true;
+
+    var volume = this.prepareVolume();
+    volume.Name = this.volume.Name;
+    StoridgeVolumeService.update(volume)
+    .then(function success() {
+      Notifications.success('Volume successfully updated');
+      $state.reload();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to update volume');
+      ctrl.state.isUpdating = false;
+    });
+  };
+
+}]);