refactor(container): container creation page and plus button [EE-3744] (#7325)

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html

@@ -33,7 +33,7 @@
             <tr>
               <td>
                 <div class="nopadding">
-                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> label </a>
+                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> label </a>
                 </div>
                 Node Labels
               </td>

app/docker/views/configs/create/createconfig.html

@@ -31,7 +31,7 @@
             <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
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
               </span>
             </div>
             <!-- labels-input-list -->

app/docker/views/containers/create/createcontainer.html

@@ -103,7 +103,7 @@
                 ></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> publish a new network port
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> publish a new network port
               </span>
             </div>
             <!-- port-mapping-input-list -->
@@ -334,7 +334,7 @@
                     style="margin-left: 10px"
                     ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
                   >
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
                   </span>
                 </div>
                 <!-- logging-opts-input-list -->
@@ -367,7 +367,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Volume mapping</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addVolume()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional volume
                   </span>
                 </div>
                 <!-- volumes-input-list -->
@@ -525,7 +525,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Hosts file entries</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addExtraHost()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional entry
                   </span>
                 </div>
                 <!-- extra-hosts-input-list -->
@@ -554,7 +554,7 @@
                 <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="addLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
                   </span>
                 </div>
                 <!-- labels-input-list -->
@@ -645,7 +645,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Devices</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDevice()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add device
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add device
                   </span>
                 </div>
                 <!-- devices-input-list -->
@@ -672,7 +672,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Sysctls</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSysctl()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add sysctl
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add sysctl
                   </span>
                 </div>
                 <!-- sysctls-input-list -->

app/docker/views/images/build/buildimage.html

@@ -17,7 +17,7 @@
                 <div class="col-sm-12">
                   <label class="control-label text-left">Names</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addImageName()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional name
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional name
                   </span>
                 </div>
               </div>

app/docker/views/images/edit/image.html

@@ -251,7 +251,7 @@
                     {{ layer.CreatedBy | imagelayercommand | truncate: 130 }}
                     <span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px">
                       <a id="layer-command-expander{{ $index }}" class="btn" ng-click="toggleLayerCommand($index)">
-                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon>
                       </a>
                     </span>
                   </span>

app/docker/views/secrets/create/createsecret.html

@@ -38,7 +38,9 @@
           <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="addLabel()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add label </span>
+              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
+              </span>
             </div>
             <!-- labels-input-list -->
             <div class="col-sm-12 form-inline" style="margin-top: 10px">

app/docker/views/services/create/createservice.html

@@ -51,7 +51,7 @@
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">Port mapping</label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional port
               </span>
             </div>
             <div class="col-sm-12 form-inline" style="margin-top: 10px">
@@ -218,7 +218,7 @@
                     style="margin-left: 10px"
                     ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
                   >
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
                   </span>
                 </div>
                 <!-- logging-opts-input-list -->
@@ -251,7 +251,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Volume mapping</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addVolume()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional volume
                   </span>
                 </div>
                 <!-- volumes-input-list -->
@@ -350,7 +350,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Extra networks</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addExtraNetwork()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add extra network
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add extra network
                   </span>
                 </div>
                 <!-- network-input-list -->
@@ -373,7 +373,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Hosts file entries</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addHostsEntry()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional entry
                   </span>
                 </div>
                 <!-- hosts-input-list -->
@@ -411,7 +411,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Service labels</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add service label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add service label
                   </span>
                 </div>
                 <!-- labels-input-list -->
@@ -438,7 +438,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Container labels</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addContainerLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add container label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add container label
                   </span>
                 </div>
                 <!-- container-labels-input-list -->

app/docker/views/services/create/includes/config.html

@@ -2,7 +2,9 @@
   <div class="form-group">
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Configs</label>
-      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addConfig()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a config </span>
+      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addConfig()">
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add a config
+      </span>
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Configs.$invalid" style="margin-bottom: 0px">

app/docker/views/services/create/includes/resources-placement.html

@@ -56,7 +56,7 @@
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Placement constraints</label>
       <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPlacementConstraint()">
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement constraint
       </span>
     </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px">
@@ -87,7 +87,7 @@
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Placement preferences</label>
       <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPlacementPreference()">
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement preference
       </span>
     </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px">

app/docker/views/services/create/includes/secret.html

@@ -8,7 +8,9 @@
   <div class="form-group">
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Secrets</label>
-      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSecret()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a secret </span>
+      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSecret()">
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add a secret
+      </span>
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Secrets.$invalid" style="margin-bottom: 0px">

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

@@ -7,7 +7,7 @@
         <select class="form-control" ng-options="config.Name for config in configs | orderBy: 'Name'" ng-model="newConfig">
           <option selected disabled hidden value="">Select a config</option>
         </select>
-        <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add config </a>
+        <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add config </a>
       </div>
       <table class="table" style="margin-top: 5px">
         <thead>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Placement constraints">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementConstraint(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement constraint
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Container labels">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addContainerLabel(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> container label
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Environment variables">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addEnvironmentVariable(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> environment variable
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Hosts file entries">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addHostsEntry(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add host entry
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add host entry
         </a>
       </div>
     </rd-widget-header>

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

@@ -10,7 +10,7 @@
           <option value="none">none</option>
         </select>
         <a class="btn btn-default btn-sm" ng-click="!service.LogDriverName || service.LogDriverName === 'none' || addLogDriverOpt(service)">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
         </a>
       </div>
       <table class="table">

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Mounts">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addMount(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> mount
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> mount
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Networks">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addNetwork(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> network
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> network
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Placement preferences">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementPreference(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement preference
         </a>
       </div>
     </rd-widget-header>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Published ports">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addPublishedPort(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> port mapping
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> port mapping
         </a>
       </div>
     </rd-widget-header>

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

@@ -15,7 +15,7 @@
           <label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="false">Default location</label>
           <label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="true">Override</label>
         </div>
-        <a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add secret </a>
+        <a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add secret </a>
       </div>
       <table class="table" style="margin-top: 5px">
         <thead>

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

@@ -3,7 +3,7 @@
     <rd-widget-header icon="list" feather-icon="true" title-text="Service labels">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addLabel(service)" ng-disabled="isUpdating">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> label
         </a>
       </div>
     </rd-widget-header>

app/docker/views/volumes/create/createvolume.html

@@ -33,7 +33,7 @@
                 <portainer-tooltip 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
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add driver option
               </span>
             </div>
             <!-- driver-options-input-list -->