feat(app): add a preview for business edition features (#4578)

* feat(app): add a preview for business edition features

* feat(app): open links in new tab + show storage quota section + grey out unavailable providers

app/kubernetes/views/configure/configure.html

@@ -132,7 +132,53 @@
             </div>
 
             <div class="col-sm-12 form-section-title">
-              Metrics
+              Security
+            </div>
+
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                By default, all the users have access to the default namespace. Enable this option to set accesses on the default namespace.
+              </span>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label class="control-label text-left">
+                  Restrict access to the default namespace
+                </label>
+                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
+                <span class="text-muted small" style="margin-left: 15px;">
+                  <i class="fa fa-user" aria-hidden="true"></i>
+                  This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-setup-default" target="_blank"> Portainer Business Edition</a>.
+                </span>
+              </div>
+            </div>
+
+            <div class="col-sm-12 form-section-title">
+              Resources and Metrics
+            </div>
+
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
+                deployment failures if there is insufficient resource to service demand.
+                <p style="margin-top: 2px;">
+                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                  By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
+                  minus any system resource reservation.
+                </p>
+              </span>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label class="control-label text-left">
+                  Allow resource over-commit
+                </label>
+                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" checked disabled /><i></i> </label>
+                <span class="text-muted small" style="margin-left: 15px;">
+                  <i class="fa fa-user" aria-hidden="true"></i>
+                  This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-setup-overcommit" target="_blank"> Portainer Business Edition</a>.
+                </span>
+              </div>
             </div>
 
             <div class="form-group">

app/kubernetes/views/resource-pools/create/createResourcePool.html

@@ -129,6 +129,63 @@
             </div>
             <!-- #endregion -->
 
+            <!-- #region LOAD-BALANCERS -->
+            <div class="col-sm-12 form-section-title">
+              Load balancers
+            </div>
+
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                You can set a quota on the amount of external load balancers that can be created inside this resource pool. Set this quota to 0 to effectively disable the use of
+                load balancers in this resource pool.
+              </span>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label class="control-label text-left">
+                  Load Balancer quota
+                </label>
+                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
+                <span class="text-muted small" style="margin-left: 15px;">
+                  <i class="fa fa-user" aria-hidden="true"></i>
+                  This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-lbquota" target="_blank"> Portainer Business Edition</a>.
+                </span>
+              </div>
+            </div>
+            <!-- #endregion -->
+
+            <!-- #region STORAGES -->
+            <div class="col-sm-12 form-section-title">
+              Storages
+            </div>
+
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to effectively
+                prevent the usage of a specific storage option inside this resource pool.
+              </span>
+            </div>
+            <div class="col-sm-12 form-section-title">
+              <i class="fa fa-route" aria-hidden="true" style="margin-right: 2px;"></i>
+              standard
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label class="control-label text-left">
+                  Enable quota
+                </label>
+                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
+                <span class="text-muted small" style="margin-left: 15px;">
+                  <i class="fa fa-user" aria-hidden="true"></i>
+                  This feature is available in
+                  <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-storagequota" target="_blank"> Portainer Business Edition</a>.
+                </span>
+              </div>
+            </div>
+            <!-- #endregion -->
+
             <div ng-if="ctrl.state.canUseIngress">
               <div class="col-sm-12 form-section-title">
                 Ingresses

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -250,6 +250,63 @@
                   </div>
                   <!-- #endregion -->
                 </div>
+                <!-- #region LOAD-BALANCERS -->
+                <div class="col-sm-12 form-section-title">
+                  Load balancers
+                </div>
+
+                <div class="form-group">
+                  <span class="col-sm-12 text-muted small">
+                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                    You can set a quota on the amount of external load balancers that can be created inside this resource pool. Set this quota to 0 to effectively disable the use
+                    of load balancers in this resource pool.
+                  </span>
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <label class="control-label text-left">
+                      Load Balancer quota
+                    </label>
+                    <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
+                    <span class="text-muted small" style="margin-left: 15px;">
+                      <i class="fa fa-user" aria-hidden="true"></i>
+                      This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-lbquota" target="_blank"> Portainer Business Edition</a>.
+                    </span>
+                  </div>
+                </div>
+                <!-- #endregion -->
+
+                <!-- #region LOAD-BALANCERS -->
+                <div class="col-sm-12 form-section-title">
+                  Storages
+                </div>
+
+                <div class="form-group">
+                  <span class="col-sm-12 text-muted small">
+                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to
+                    effectively prevent the usage of a specific storage option inside this resource pool.
+                  </span>
+                </div>
+                <div class="col-sm-12 form-section-title">
+                  <i class="fa fa-route" aria-hidden="true" style="margin-right: 2px;"></i>
+                  standard
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <label class="control-label text-left">
+                      Enable quota
+                    </label>
+                    <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
+                    <span class="text-muted small" style="margin-left: 15px;">
+                      <i class="fa fa-user" aria-hidden="true"></i>
+                      This feature is available in
+                      <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-storagequota" target="_blank"> Portainer Business Edition</a>.
+                    </span>
+                  </div>
+                </div>
+                <!-- #endregion -->
+
                 <!-- actions -->
                 <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">
                   Actions

app/portainer/__module.js

@@ -392,6 +392,16 @@ angular.module('portainer.app', ['portainer.oauth']).config([
       },
     };
 
+    var roles = {
+      name: 'portainer.roles',
+      url: '/roles',
+      views: {
+        'content@': {
+          templateUrl: './views/roles/roles.html',
+        },
+      },
+    };
+
     $stateRegistryProvider.register(root);
     $stateRegistryProvider.register(endpointRoot);
     $stateRegistryProvider.register(portainer);
@@ -422,6 +432,7 @@ angular.module('portainer.app', ['portainer.oauth']).config([
     $stateRegistryProvider.register(user);
     $stateRegistryProvider.register(teams);
     $stateRegistryProvider.register(team);
+    $stateRegistryProvider.register(roles);
   },
 ]);
 

app/portainer/components/accessManagement/porAccessManagement.html

@@ -28,6 +28,18 @@
             </div>
           </div>
 
+          <div class="form-group">
+            <label class="col-sm-3 col-lg-2 control-label text-left">
+              Role
+            </label>
+            <div class="col-sm-9 col-lg-4">
+              <span class="text-muted small">
+                <i class="fa fa-user" aria-hidden="true"></i>
+                This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-rbac-access" target="_blank"> Portainer Business Edition</a>.
+              </span>
+            </div>
+          </div>
+
           <!-- actions -->
           <div class="form-group">
             <div class="col-sm-12">

app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.html

@@ -0,0 +1,26 @@
+<div class="datatable">
+  <div class="searchBar">
+    <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+    <input type="text" class="searchInput" placeholder="Search..." ng-model-options="{ debounce: 300 }" />
+  </div>
+  <div class="table-responsive">
+    <table class="table table-hover nowrap-cells">
+      <thead>
+        <tr>
+          <th>
+            Endpoint
+          </th>
+          <th>
+            Role
+          </th>
+          <th>Access origin</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-if="!$ctrl.dataset">
+          <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.js

@@ -0,0 +1,11 @@
+angular.module('portainer.app').component('accessViewerDatatable', {
+  templateUrl: './accessViewerDatatable.html',
+  controller: 'GenericDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    tableKey: '@',
+    orderBy: '@',
+    dataset: '<',
+  },
+});

app/portainer/components/datatables/registries-datatable/registriesDatatable.html

@@ -66,6 +66,9 @@
               </td>
               <td>
                 <a ui-sref="portainer.registries.registry.access({id: item.Id})" ng-if="$ctrl.accessManagement"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
+                <span class="text-muted space-left" style="cursor: pointer;" data-toggle="tooltip" title="This feature is available in Portainer Business Edition">
+                  <i class="fa fa-search" aria-hidden="true"></i> Browse</span
+                >
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">

app/portainer/components/datatables/roles-datatable/rolesDatatable.html

@@ -0,0 +1,64 @@
+<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" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover nowrap-cells">
+          <thead>
+            <tr>
+              <th>
+                Name
+              </th>
+              <th>
+                Description
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="text-muted">Endpoint administrator</td>
+              <td class="text-muted">Full control of all resources in an endpoint</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Helpdesk</td>
+              <td class="text-muted">Read-only access of all resources in an endpoint</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Read-only user</td>
+              <td class="text-muted">Read-only access of assigned resources in an endpoint</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Standard user</td>
+              <td class="text-muted">Full control of assigned resources in an endpoint</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="footer">
+          <div class="paginationControls">
+            <form class="form-inline">
+              <span class="limitSelector">
+                <span style="margin-right: 5px;">
+                  Items per page
+                </span>
+                <select class="form-control">
+                  <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>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/portainer/components/datatables/roles-datatable/rolesDatatable.js

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

app/portainer/views/roles/roles.html

@@ -0,0 +1,56 @@
+<rd-header>
+  <rd-header-title title-text="Roles">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.roles" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Role management</rd-header-content>
+</rd-header>
+
+<information-panel title-text="Information">
+  <span class="small">
+    <p class="text-muted">
+      <i class="fa fa-user" aria-hidden="true" style="margin-right: 2px;"></i>
+      This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-rbac-roles" target="_blank">Portainer Business Edition</a>.
+    </p>
+  </span>
+</information-panel>
+
+<div class="row">
+  <div class="col-sm-12">
+    <roles-datatable title-text="Roles" title-icon="fa-file-code" table-key="roles" order-by="Name"></roles-datatable>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-12" style="margin-bottom: 0px;">
+    <rd-widget>
+      <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <div class="col-sm-12 form-section-title">
+            User
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">
+                No user available
+              </span>
+            </div>
+          </div>
+
+          <div class="col-sm-12 form-section-title">
+            Access
+          </div>
+          <div>
+            <div class="small text-muted" style="margin-bottom: 15px;">
+              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+              Effective role for each endpoint will be displayed for the selected user
+            </div>
+          </div>
+          <access-viewer-datatable table-key="access_viewer" order-by="EndpointName"> </access-viewer-datatable>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/views/settings/authentication/settingsAuthentication.html

@@ -366,6 +366,57 @@
             <!-- !group-search-settings -->
           </div>
 
+          <div ng-if="isOauthEnabled()">
+            <div class="col-sm-12 form-section-title">
+              Provider
+            </div>
+            <div class="form-group"></div>
+            <div class="form-group" style="margin-bottom: 0;">
+              <div class="boxselector_wrapper">
+                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
+                  <input type="radio" id="microsoft" disabled />
+                  <label for="microsoft" style="cursor: pointer; border-color: #767676;">
+                    <div class="boxselector_header">
+                      <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Microsoft
+                    </div>
+                    <p>Microsoft OAuth provider</p>
+                  </label>
+                </div>
+                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
+                  <input type="radio" id="google" disabled />
+                  <label for="google" style="cursor: pointer; border-color: #767676;">
+                    <div class="boxselector_header">
+                      <i class="fab fa-google" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Google
+                    </div>
+                    <p>Google OAuth provider</p>
+                  </label>
+                </div>
+                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
+                  <input type="radio" id="registry_auth" disabled />
+                  <label for="Github" style="cursor: pointer; border-color: #767676;">
+                    <div class="boxselector_header">
+                      <i class="fab fa-github" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Github
+                    </div>
+                    <p>Github OAuth provider</p>
+                  </label>
+                </div>
+                <div>
+                  <input type="radio" id="custom" ng-model="settings.AuthenticationMethod" ng-value="3" />
+                  <label for="custom">
+                    <div class="boxselector_header">
+                      <i class="fa fa-user-check" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Custom
+                    </div>
+                    <p>Custom OAuth provider</p>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <oauth-settings ng-if="isOauthEnabled()" settings="OAuthSettings" teams="teams"></oauth-settings>
 
           <!-- actions -->

app/portainer/views/sidebar/sidebar.html

@@ -120,11 +120,25 @@
             ($state.current.name === 'portainer.users' ||
               $state.current.name === 'portainer.users.user' ||
               $state.current.name === 'portainer.teams' ||
-              $state.current.name === 'portainer.teams.team')
+              $state.current.name === 'portainer.teams.team' ||
+              $state.current.name === 'portainer.roles')
           "
         >
           <a ui-sref="portainer.teams" ui-sref-active="active">Teams</a>
         </div>
+        <div
+          class="sidebar-sublist"
+          ng-if="
+            toggle &&
+            ($state.current.name === 'portainer.users' ||
+              $state.current.name === 'portainer.users.user' ||
+              $state.current.name === 'portainer.teams' ||
+              $state.current.name === 'portainer.teams.team' ||
+              $state.current.name === 'portainer.roles')
+          "
+        >
+          <a ui-sref="portainer.roles" ui-sref-active="active">Roles</a>
+        </div>
       </li>
       <li class="sidebar-list" ng-if="isAdmin">
         <a