refactor(UX): disable/remove uneeded UI elements (#3530)

* refactor(UX): disable/remove uneeded UI elements

* refactor(UX): rm missed th in container network

* refactor(UX): minor formatting improvement

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html

@@ -33,7 +33,7 @@
               <th>IP Address</th>
               <th>Gateway</th>
               <th>MAC Address</th>
-              <th>Actions</th>
+              <th authorization="DockerNetworkDisconnect">Actions</th>
             </tr>
           </thead>
           <tbody>

app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html

@@ -1,11 +1,10 @@
-<td ng-if="allowCheckbox">
+<td ng-if="allowCheckbox" authorization="DockerNetworkDelete, DockerNetworkCreate">
   <span class="md-checkbox" ng-if="!parentCtrl.offlineMode">
     <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="parentCtrl.selectItem(item, $event); $event.stopPropagation()" ng-disabled="parentCtrl.disableRemove(item)"/>
     <label for="select_{{ $index }}"></label>
   </span>
   <a ng-if="parentCtrl.itemCanExpand(item)"><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
 </td>
-<td ng-if="!allowCheckbox"></td>
 <td>
   <a ng-if="!parentCtrl.offlineMode" ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate:40 }}</a>
   <span ng-if="parentCtrl.offlineMode">{{ item.Name | truncate:40 }}</span>

app/docker/components/datatables/networks-datatable/networksDatatable.html

@@ -61,7 +61,7 @@
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
-              <th style="width:55px;">
+              <th style="width:55px;" authorization="DockerNetworkDelete, DockerNetworkCreate">
                 <span class="md-checkbox" ng-if="!$ctrl.offlineMode">
                   <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                   <label for="select_all"></label>

app/docker/views/services/edit/includes/configs.html

@@ -27,7 +27,7 @@
           <tr ng-repeat="config in service.ServiceConfigs">
             <td><a ui-sref="docker.configs.config({id: config.Id})">{{ config.Name }}</a></td>
             <td>
-              <input class="form-control" ng-model="config.FileName" ng-change="updateConfig(service)" placeholder="e.g. /path/in/container" required />
+              <input class="form-control" ng-model="config.FileName" ng-change="updateConfig(service)" placeholder="e.g. /path/in/container" required disable-authorization="DockerServiceUpdate"/>
             </td>
             <td>{{ config.Uid }}</td>
             <td>{{ config.Gid }}</td>

app/docker/views/services/edit/includes/constraints.html

@@ -23,12 +23,12 @@
           <tr ng-repeat="constraint in service.ServiceConstraints">
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <select name="constraintOperator" class="form-control" ng-model="constraint.operator" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating">
+                <select name="constraintOperator" class="form-control" ng-model="constraint.operator" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                   <option value="==">==</option>
                   <option value="!=">!=</option>
                 </select>
@@ -36,7 +36,7 @@
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" ng-change="updatePlacementConstraint(service, constraint)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/containerlabels.html

@@ -23,13 +23,13 @@
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">name</span>
-                <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">value</span>
-                <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateContainerLabel(service, label)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/environmentvariables.html

@@ -29,7 +29,7 @@
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">value</span>
-                <input type="text" class="form-control" ng-model="var.value" ng-change="updateEnvironmentVariable(service, var)" placeholder="e.g. bar" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="var.value" ng-change="updateEnvironmentVariable(service, var)" placeholder="e.g. bar" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/hosts.html

@@ -22,12 +22,12 @@
           <tr ng-repeat="entry in service.Hosts">
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="entry.hostname" placeholder="e.g. example.com" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="entry.hostname" placeholder="e.g. example.com" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="entry.ip" placeholder="e.g. 10.0.1.1" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="entry.ip" placeholder="e.g. 10.0.1.1" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/logging.html

@@ -32,7 +32,7 @@
               <td>
                 <div class="input-group input-group-sm">
                   <span class="input-group-addon fit-text-size">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" ng-change="updateLogDriverOpt(service, option)" placeholder="e.g. bar" ng-disabled="isUpdating">
+                  <input type="text" class="form-control" ng-model="option.value" ng-change="updateLogDriverOpt(service, option)" placeholder="e.g. bar" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                   <span class="input-group-btn" authorization="DockerServiceUpdate">
                     <button class="btn btn-sm btn-danger" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
                       <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/mounts.html

@@ -17,28 +17,28 @@
             <th ng-if="isAdmin || allowBindMounts">Type</th>
             <th>Source</th>
             <th>Target</th>
-            <th>Read only</th>
-            <th>Actions</th>
+            <th authorization="DockerServiceUpdate">Read only</th>
+            <th authorization="DockerServiceUpdate">Actions</th>
           </tr>
         </thead>
         <tbody>
           <tr ng-repeat="mount in service.ServiceMounts">
             <td ng-if="isAdmin || allowBindMounts">
-              <select name="mountType" class="form-control" ng-model="mount.Type" ng-disabled="isUpdating">
+              <select name="mountType" class="form-control" ng-model="mount.Type" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <option value="volume">Volume</option>
                 <option value="bind">Bind</option>
               </select>
             </td>
             <td>
-              <select class="form-control" ng-model="mount.Source" ng-options="vol.Id as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30))  for vol in availableVolumes" ng-if="mount.Type === 'volume'">
+              <select class="form-control" ng-model="mount.Source" ng-options="vol.Id as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30))  for vol in availableVolumes" ng-if="mount.Type === 'volume'" disable-authorization="DockerServiceUpdate">
                 <option selected disabled hidden value="">Select a volume</option>
               </select>
               <input type="text" class="form-control" ng-model="mount.Source" placeholder="e.g. /tmp/portainer/data" ng-change="updateMount(service, mount)" ng-disabled="isUpdating || (!isAdmin && !allowBindMounts && mount.Type === 'bind')" ng-if="mount.Type === 'bind'">
             </td>
             <td>
-              <input type="text" class="form-control" ng-model="mount.Target" placeholder="e.g. /tmp/portainer/data" ng-change="updateMount(service, mount)" ng-disabled="isUpdating">
+              <input type="text" class="form-control" ng-model="mount.Target" placeholder="e.g. /tmp/portainer/data" ng-change="updateMount(service, mount)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
             </td>
-            <td>
+            <td authorization="DockerServiceUpdate">
               <input type="checkbox" class="form-control" ng-model="mount.ReadOnly" ng-change="updateMount(service, mount)" ng-disabled="isUpdating">
             </td>
             <td authorization="DockerServiceUpdate">

app/docker/views/services/edit/includes/placementPreferences.html

@@ -22,12 +22,12 @@
           <tr ng-repeat="preference in service.ServicePreferences">
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. node.role" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. node.role" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. manager" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. manager" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/includes/ports.html

@@ -18,7 +18,7 @@
             <th>Container port</th>
             <th>Protocol</th>
             <th>Publish mode</th>
-            <th>Actions</th>
+            <th authorization="DockerServiceUpdate">Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -26,18 +26,18 @@
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon">host</span>
-                <input type="number" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 8080" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating">
+                <input type="number" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 8080" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon">container</span>
-                <input type="number" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating">
+                <input type="number" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <select class="selectpicker form-control" ng-model="portBinding.Protocol" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating">
+                <select class="selectpicker form-control" ng-model="portBinding.Protocol" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                   <option value="tcp">tcp</option>
                   <option value="udp">udp</option>
                 </select>
@@ -45,7 +45,7 @@
             </td>
             <td>
               <div class="input-group input-group-sm">
-                <select class="selectpicker form-control" ng-model="portBinding.PublishMode" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating">
+                <select class="selectpicker form-control" ng-model="portBinding.PublishMode" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                   <option value="ingress">ingress</option>
                   <option value="host">host</option>
                 </select>

app/docker/views/services/edit/includes/resources.html

@@ -38,7 +38,7 @@
               </div>
             </td>
             <td>
-              <slider model="service.ReservationNanoCPUs" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="service && state.sliderMaxCpu" on-change="updateServiceAttribute(service, 'ReservationNanoCPUs')"></slider>
+              <slider model="service.ReservationNanoCPUs" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="service && state.sliderMaxCpu" on-change="updateServiceAttribute(service, 'ReservationNanoCPUs')" disable-authorization="DockerServiceUpdate"></slider>
             </td>
             <td style="vertical-align : middle;">
               <p class="small text-muted">
@@ -53,7 +53,7 @@
               </div>
             </td>
             <td>
-              <slider model="service.LimitNanoCPUs" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="service && state.sliderMaxCpu" on-change="updateServiceAttribute(service, 'LimitNanoCPUs')"></slider>
+              <slider model="service.LimitNanoCPUs" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="service && state.sliderMaxCpu" on-change="updateServiceAttribute(service, 'LimitNanoCPUs')" disable-authorization="DockerServiceUpdate"></slider>
             </td>
             <td style="vertical-align : middle;">
               <p class="small text-muted">

app/docker/views/services/edit/includes/servicelabels.html

@@ -27,13 +27,13 @@
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">name</span>
-                <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
               </div>
             </td>
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">value</span>
-                <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)" ng-disabled="isUpdating">
+                <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate">
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>

app/docker/views/services/edit/service.html

@@ -88,7 +88,7 @@
           </tr>
             <tr authorization="DockerServiceLogs, DockerServiceUpdate, DockerServiceDelete">
               <td colspan="2">
-                <p class="small text-muted">
+                <p class="small text-muted" authorization="DockerServiceUpdate">
                   Note: you can only rollback one level of changes. Clicking the rollback button without making a new change will undo your previous rollback
                 <p>
                 <a authorization="DockerServiceLogs" ng-if="applicationState.endpoint.apiVersion >= 1.30" class="btn btn-primary btn-sm" type="button" ui-sref="docker.services.service.logs({id: service.Id})"><i class="fa fa-file-alt space-right" aria-hidden="true"></i>Service logs</a>

app/extensions/rbac/directives/disable-authorization.js

@@ -18,6 +18,9 @@ angular.module('portainer.extensions.rbac')
 
       if (!Authentication.hasAuthorizations(authorizations)) {
         elem.attr('disabled', true);
+        if (elem.is('Slider')) {
+          elem.css('pointer-events', 'none');
+        }
       }
     }