feat(storidge): add drives list and details view

app/extensions/storidge/__module.js

@@ -32,6 +32,28 @@ angular.module('extension.storidge', [])
     }
   };
 
+  var drives = {
+    name: 'storidge.drives',
+    url: '/drives',
+    views: {
+      'content@': {
+        templateUrl: 'app/extensions/storidge/views/drives/drives.html',
+        controller: 'StoridgeDrivesController'
+      }
+    }
+  };
+
+  var drive = {
+    name: 'storidge.drives.drive',
+    url: '/:id',
+    views: {
+      'content@': {
+        templateUrl: 'app/extensions/storidge/views/drives/inspect/drive.html',
+        controller: 'StoridgeDriveController'
+      }
+    }
+  };
+
   var profileCreation = {
     name: 'storidge.profiles.new',
     url: '/new',
@@ -69,6 +91,8 @@ angular.module('extension.storidge', [])
   };
 
   $stateRegistryProvider.register(storidge);
+  $stateRegistryProvider.register(drives);
+  $stateRegistryProvider.register(drive);
   $stateRegistryProvider.register(profiles);
   $stateRegistryProvider.register(profile);
   $stateRegistryProvider.register(profileCreation);

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

@@ -2,7 +2,7 @@ angular.module('extension.storidge').component('storidgeClusterEventsDatatable',
   templateUrl: 'app/extensions/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html',
   controller: 'GenericDatatableController',
   bindings: {
-    title: '@',
+    titleText: '@',
     titleIcon: '@',
     dataset: '<',
     tableKey: '@',

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

@@ -0,0 +1,133 @@
+<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>
+        <button type="button" class="btn btn-sm btn-primary"
+          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.addAction($ctrl.state.selectedItems)">
+          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add to storage pool
+        </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('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>
+            </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="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>
+            </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/extensions/storidge/components/drives-datatable/storidgeDrivesDatatable.js

@@ -0,0 +1,14 @@
+angular.module('extension.storidge').component('storidgeDrivesDatatable', {
+  templateUrl: 'app/extensions/storidge/components/drives-datatable/storidgeDrivesDatatable.html',
+  controller: 'StoridgeDrivesDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+    removeAction: '<',
+    addAction: '<'
+  }
+});

app/extensions/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/extensions/storidge/components/nodes-datatable/storidgeNodesDatatable.js

@@ -2,7 +2,7 @@ angular.module('extension.storidge').component('storidgeNodesDatatable', {
   templateUrl: 'app/extensions/storidge/components/nodes-datatable/storidgeNodesDatatable.html',
   controller: 'GenericDatatableController',
   bindings: {
-    title: '@',
+    titleText: '@',
     titleIcon: '@',
     dataset: '<',
     tableKey: '@',

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

@@ -2,7 +2,7 @@ angular.module('extension.storidge').component('storidgeProfilesDatatable', {
   templateUrl: 'app/extensions/storidge/components/profiles-datatable/storidgeProfilesDatatable.html',
   controller: 'GenericDatatableController',
   bindings: {
-    title: '@',
+    titleText: '@',
     titleIcon: '@',
     dataset: '<',
     tableKey: '@',

app/extensions/storidge/filters/filters.js

@@ -0,0 +1,15 @@
+angular.module('extension.storidge')
+.filter('drivestatusbadge', function () {
+'use strict';
+  return function (text) {
+    var status = _.toLower(text);
+    if (includeString(status, ['normal'])) {
+    return 'success';
+    } else if (includeString(status, ['available'])) {
+    return 'info';
+    } else if (includeString(status, ['faulty'])) {
+    return 'danger';
+    }
+    return 'info';
+  };
+});

app/extensions/storidge/models/drive.js

@@ -0,0 +1,9 @@
+function StoridgeDriveModel(data) {
+  this.Id = data.driveid;
+  this.Node = data.node;
+  this.Use = data.use;
+  this.Status = data.drivestatus.toLowerCase();
+  this.Size = data.size;
+  this.Type = data.type;
+  this.Device = data.device;
+}

app/extensions/storidge/rest/storidge.js

@@ -15,6 +15,11 @@ angular.module('extension.storidge')
     getProfile: { method: 'GET', params: { resource: 'profiles' } },
     createProfile: { method: 'POST', params: { resource: 'profiles' } },
     updateProfile: { method: 'PUT', params: { resource: 'profiles', id: '@name' } },
-    deleteProfile: { method: 'DELETE', params: { resource: 'profiles' } }
+    deleteProfile: { method: 'DELETE', params: { resource: 'profiles' } },
+    queryDrives: { method: 'GET', params: { resource: 'drives' } },
+    getDrive: { method: 'GET', params: { resource: 'drives', id: '@id' } },
+    addDrive: { method: 'POST', params: { resource: 'drives' } },
+    removeDrive: { method: 'DELETE', params: { resource: 'drives', id: '@id' } },
+    getNode: { method: 'GET', params: { resource: 'nodes', id: '@id' } }
   });
 }]);

app/extensions/storidge/services/driveService.js

@@ -0,0 +1,73 @@
+angular.module('extension.storidge')
+.factory('StoridgeDriveService', ['$q', 'Storidge', function StoridgeDriveServiceFactory($q, Storidge) {
+  'use strict';
+  var service = {};
+
+  service.drives = function () {
+    var deferred = $q.defer();
+
+    Storidge.queryDrives().$promise
+    .then(function success(data) {
+      var driveData = data.drives;
+      var drives = driveData.map(function (drive) {
+        return new StoridgeDriveModel(drive);
+      });
+
+      deferred.resolve(drives);
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to retrieve Storidge drives', err: err });
+    });
+
+    return deferred.promise;
+  };
+
+  service.drive = function (id) {
+    var deferred = $q.defer();
+    
+    Storidge.getDrive({ id: id }).$promise
+    .then(function success(data) {
+      var drive = new StoridgeDriveModel(data);
+      Storidge.getNode({ id: data.nodeid }).$promise
+      .then(function (data) {
+        drive.Node = data.name;
+        deferred.resolve(drive);
+      });
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to retrieve Storidge drive', err: err });
+    });
+
+    return deferred.promise;
+  };
+
+  service.add = function (device, node) {
+    var deferred = $q.defer();
+
+    Storidge.addDrive({ device: device, node: node }).$promise
+    .then(function success() {
+      deferred.resolve();
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to add Storidge drive', err: err });
+    });
+
+    return deferred.promise;
+  };
+
+  service.remove = function (id) {
+    var deferred = $q.defer();
+
+    Storidge.removeDrive({ id: id }).$promise
+    .then(function success() {
+      deferred.resolve();
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to remove Storidge drive', err: err });
+    });
+
+    return deferred.promise;
+  };
+
+  return service;
+}]);

app/extensions/storidge/views/drives/drives.html

@@ -0,0 +1,22 @@
+<rd-header>
+  <rd-header-title title-text="Storidge drives">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="storidge.drives" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="storidge.cluster">Storidge</a> &gt; <a ui-sref="storidge.drives">Drives</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <storidge-drives-datatable
+    title-text="Drives" title-icon="fa-hdd"
+    dataset="drives" table-key="storidge_drives"
+    order-by="Id" 
+    remove-action="removeAction"
+    add-action="addAction"
+    ></storidge-drives-datatable>
+  </div>
+</div>

app/extensions/storidge/views/drives/drivesController.js

@@ -0,0 +1,73 @@
+angular.module('extension.storidge')
+.controller('StoridgeDrivesController', ['$q', '$scope', '$state', 'Notifications', 'ModalService', 'StoridgeDriveService',
+function ($q, $scope, $state, Notifications, ModalService, StoridgeDriveService) {
+
+  $scope.removeAction = function(selectedItems) {
+    ModalService.confirm({
+      title: 'Are you sure?',
+      message: 'Do you want really want to remove this drive from the storage pool?',
+      buttons: {
+        confirm: {
+          label: 'Remove',
+          className: 'btn-danger'
+        }
+      },
+      callback: function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        var actionCount = selectedItems.length;
+        selectedItems = selectedItems.filter(function (item) {
+          return item.Status === 'faulty';
+        });
+        angular.forEach(selectedItems, function (drive) {
+          StoridgeDriveService.delete(drive.Id)
+          .then(function success() {
+            Notifications.success('Drive successfully removed', drive.Id);
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to remove drive');
+          })
+          .finally(function final() {
+            --actionCount;
+            if (actionCount === 0) {
+              $state.reload();
+            }
+          });
+        });
+      }
+    });
+  };
+
+  $scope.addAction = function (selectedItems) {
+    var actionCount = selectedItems.length;
+    selectedItems = selectedItems.filter(function (item) {
+      return item.Status === 'available';
+    });
+    angular.forEach(selectedItems, function (drive) {
+      StoridgeDriveService.add(drive.Id)
+      .then(function success() {
+        Notifications.success('Drive successfully added', drive.Id);
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to add drive');
+      })
+      .finally(function final() {
+        --actionCount;
+        if (actionCount === 0) {
+          $state.reload();
+        }
+      });
+    });
+  };
+
+  function initView() {
+    StoridgeDriveService.drives()
+    .then(function success(data) {
+      $scope.drives = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve drives');
+    });
+  }
+
+  initView();
+}]);

app/extensions/storidge/views/drives/inspect/drive.html

@@ -0,0 +1,58 @@
+<rd-header>
+  <rd-header-title title-text="Drive details"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="storidge.cluster">Storidge</a> &gt; <a ui-sref="storidge.drives">Drives</a> &gt; <a ui-sref="storidge.drives.drive({id: drive.Id})">{{ drive.Id }}</a>
+  </rd-header-content>
+</rd-header>
+  
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-hdd" title-text="Drive details "></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>ID</td>
+              <td>
+                {{ drive.Id }}
+                <button class="btn btn-xs btn-primary" ng-click="addDrive()" ng-if="drive.Status === 'available'">
+                  <i class="fa fa-plus space-right" aria-hidden="true"></i>Add to storage pool
+                </button>
+                <button class="btn btn-xs btn-danger" ng-click="removeDrive()" ng-if="drive.Status === 'faulty'">
+                  <i class="fa fa-trash space-right" aria-hidden="true"></i>Remove from storage pool
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>Node</td>
+              <td>{{ drive.Node }}</td>
+            </tr>
+            <tr>
+              <td>Device</td>
+              <td>{{ drive.Device }}</td>
+            </tr>
+            <tr>
+              <td>Size</td>
+              <td>{{ drive.Size }}</td>
+            </tr>
+            <tr>
+              <td>Use</td>
+              <td>{{ drive.Use }}</td>
+            </tr>
+            <tr>
+              <td>Type</td>
+              <td>{{ drive.Type }}</td>
+            </tr>
+            <tr>
+              <td>Status</td>
+              <td>
+                <span class="label label-{{ drive.Status|drivestatusbadge }}">{{ drive.Status|capitalize }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/extensions/storidge/views/drives/inspect/driveController.js

@@ -0,0 +1,54 @@
+angular.module('extension.storidge')
+.controller('StoridgeDriveController', ['$scope', '$state', '$transition$', 'Notifications', 'StoridgeDriveService',
+function ($scope, $state, $transition$, Notifications, StoridgeDriveService) {
+
+  $scope.addDrive = function () {
+    StoridgeDriveService.add($scope.drive.Device, $scope.drive.Node)
+    .then(function () {
+      Notifications.success('Success', 'Drive added to storage pool');
+      $state.reload();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to add drive to storage pool');
+    });
+  };
+
+  $scope.removeDrive = function () {
+    ModalService.confirm({
+      title: 'Are you sure?',
+      message: 'Do you want really want to remove this drive from the storage pool?',
+      buttons: {
+        confirm: {
+          label: 'Remove',
+          className: 'btn-danger'
+        }
+      },
+      callback: function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        StoridgeDriveService.remove($scope.drive.Id)
+        .then(function () {
+          Notifications.success('Success', 'Drive removed from storage pool');
+          $state.reload();
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove drive from storage pool');
+        });
+      }
+    });
+  };
+
+  function initView() {
+    $scope.id = $transition$.params().id;
+
+    StoridgeDriveService.drive($scope.id)
+    .then(function success(data) {
+      $scope.drive = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve drive details');
+    });
+  }
+
+  initView();
+
+}]);

app/portainer/views/sidebar/sidebar.html

@@ -29,12 +29,15 @@
     </li>
     <li class="sidebar-list" ng-if="applicationState.endpoint.mode && applicationState.endpoint.extensions.indexOf('storidge') !== -1 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
       <a ui-sref="storidge.cluster" ui-sref-active="active">Storidge <span class="menu-icon fa fa-bolt fa-fw"></span></a>
-      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'storidge.cluster' || $state.current.name === 'storidge.profiles' || $state.current.name === 'storidge.monitor' || $state.current.name === 'storidge.profiles.new' || $state.current.name === 'storidge.profiles.profile')">
+      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'storidge.cluster' || $state.current.name === 'storidge.profiles' || $state.current.name === 'storidge.monitor' || $state.current.name === 'storidge.profiles.new' || $state.current.name === 'storidge.profiles.profile' || $state.current.name === 'storidge.drives' || $state.current.name === 'storidge.drives.drive')">
         <a ui-sref="storidge.monitor" ui-sref-active="active">Monitor</a>
       </div>
-      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'storidge.cluster' || $state.current.name === 'storidge.profiles' || $state.current.name === 'storidge.monitor' || $state.current.name === 'storidge.profiles.new' || $state.current.name === 'storidge.profiles.profile')">
+      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'storidge.cluster' || $state.current.name === 'storidge.profiles' || $state.current.name === 'storidge.monitor' || $state.current.name === 'storidge.profiles.new' || $state.current.name === 'storidge.profiles.profile' || $state.current.name === 'storidge.drives' || $state.current.name === 'storidge.drives.drive')">
         <a ui-sref="storidge.profiles" ui-sref-active="active">Profiles</a>
       </div>
+      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'storidge.cluster' || $state.current.name === 'storidge.profiles' || $state.current.name === 'storidge.monitor' || $state.current.name === 'storidge.profiles.new' || $state.current.name === 'storidge.profiles.profile' || $state.current.name === 'storidge.drives' || $state.current.name === 'storidge.drives.drive')">
+        <a ui-sref="storidge.drives" ui-sref-active="active">Drives</a>
+      </div>
     </li>
     <li class="sidebar-title" ng-if="(!applicationState.application.authentication || isAdmin) && applicationState.application.enableHostManagementFeatures">
       <span>Scheduler</span>