feat(ui): ui change for auth and activity logs EE-3798 (#7364)

* added style to authentication and activity logs

app/portainer/components/datatables/filter/datatable-filter.html

@@ -1,9 +1,10 @@
 <div uib-dropdown dropdown-append-to-body auto-close="outsideClick" is-open="$ctrl.isOpen">
   <span ng-transclude></span>
   <div class="filter-button">
-    <span uib-dropdown-toggle class="table-filter" ng-class="{ 'filter-active': $ctrl.isEnabled() }">
+    <span uib-dropdown-toggle class="table-filter vertical-center" ng-class="{ 'filter-active': $ctrl.isEnabled() }">
       Filter
-      <i class="fa" ng-class="[$ctrl.isEnabled() ? 'fa-check' : 'fa-filter']" aria-hidden="true"></i>
+      <pr-icon ng-if="$ctrl.isEnabled()" icon="'check'" feather="true"></pr-icon>
+      <pr-icon ng-if="!$ctrl.isEnabled()" icon="'filter'" feather="true"></pr-icon>
     </span>
   </div>
   <div class="dropdown-menu" style="min-width: 0" uib-dropdown-menu>

app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html

@@ -1,33 +1,67 @@
 <div class="datatable datatable-empty">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <datatable-titlebar title="Activity Logs" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar>
-      <datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
+      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          Activity Logs
+          <be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
+        </div>
+        <div class="vertical-center">
+          <datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
+        </div>
+      </div>
       <div class="table-responsive">
         <table class="table table-hover">
           <thead>
             <tr>
               <th class="small-column">
-                <a ng-click="$ctrl.changeSort('Timestamp')">
-                  Time
-                  <datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'Time'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Timestamp'"
+                    is-sorted-desc="$ctrl.sort.key === 'Timestamp' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Timestamp')"
+                  >
+                  </table-column-header>
+                </div>
               </th>
               <th class="small-column">
-                <a ng-click="$ctrl.changeSort('Username')">
-                  User
-                  <datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'User'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Username'"
+                    is-sorted-desc="$ctrl.sort.key === 'Username' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Username')"
+                  >
+                  </table-column-header>
+                </div>
               </th>
               <th class="small-column">
-                <a ng-click="$ctrl.changeSort('Context')">
-                  Environment
-                  <datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'Environment'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Context'"
+                    is-sorted-desc="$ctrl.sort.key === 'Context' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Context')"
+                  >
+                  </table-column-header>
+                </div>
               </th>
 
-              <th> Action </th>
-              <th> Payload </th>
+              <th>
+                <div class="vertical-center">
+                  <table-column-header col-title="'Action'" can-sort="false"> </table-column-header>
+                </div>
+              </th>
+              <th>
+                <div class="vertical-center">
+                  <table-column-header col-title="'Payload'" can-sort="false"> </table-column-header>
+                </div>
+              </th>
             </tr>
           </thead>
           <tbody>

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -11,33 +11,36 @@
           </div>
         </div>
       </div>
-
-      <p class="text-muted small">
-        <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+      <p class="text-muted small vertical-center">
+        <pr-icon icon="'info'" feather="true" class-name="'icon icon-sm icon-primary'"></pr-icon>
         Portainer user activity logs have a maximum retention of 7 days.
       </p>
-
       <div>
         <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
-          <i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV
+          <pr-icon icon="'download'" feather="true" icon-class="'icon icon-sm'"></pr-icon>
+          Export as CSV
         </button>
         <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
       </div>
     </rd-widget-body>
   </rd-widget>
-
-  <activity-logs-datatable
-    logs="$ctrl.state.logs"
-    keyword="$ctrl.state.keyword"
-    sort="$ctrl.state.sort"
-    limit="$ctrl.state.limit"
-    context-filter="$ctrl.state.contextFilter"
-    total-items="$ctrl.state.totalItems"
-    current-page="$ctrl.state.currentPage"
-    feature="{{:: $ctrl.limitedFeature}}"
-    on-change-keyword="($ctrl.onChangeKeyword)"
-    on-change-sort="($ctrl.onChangeSort)"
-    on-change-limit="($ctrl.onChangeLimit)"
-    on-change-page="($ctrl.onChangePage)"
-  ></activity-logs-datatable>
+</div>
+
+<div class="be-indicator-container">
+  <div class="row">
+    <activity-logs-datatable
+      logs="$ctrl.state.logs"
+      keyword="$ctrl.state.keyword"
+      sort="$ctrl.state.sort"
+      limit="$ctrl.state.limit"
+      context-filter="$ctrl.state.contextFilter"
+      total-items="$ctrl.state.totalItems"
+      current-page="$ctrl.state.currentPage"
+      feature="{{:: $ctrl.limitedFeature}}"
+      on-change-keyword="($ctrl.onChangeKeyword)"
+      on-change-sort="($ctrl.onChangeSort)"
+      on-change-limit="($ctrl.onChangeLimit)"
+      on-change-page="($ctrl.onChangePage)"
+    ></activity-logs-datatable>
+  </div>
 </div>

app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html

@@ -1,38 +1,76 @@
 <div class="datatable datatable-empty">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <datatable-titlebar title="Authentication Events" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar>
-      <datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
+      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          Authentication Events
+          <be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
+        </div>
+        <div class="vertical-center">
+          <datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
+        </div>
+      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a>
-                  Time
-                  <datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'Time'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Timestamp'"
+                    is-sorted-desc="$ctrl.sort.key === 'Timestamp' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Timestamp')"
+                  >
+                  </table-column-header>
+                </div>
               </th>
               <th>
-                <a>
-                  Origin
-                  <datatable-sort-icon key="Origin" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'Origin'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Origin'"
+                    is-sorted-desc="$ctrl.sort.key === 'Origin' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Origin')"
+                  >
+                  </table-column-header>
+                </div>
               </th>
               <th>
-                <a>
-                  Context
-                  <datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
-                <datatable-filter labels="$ctrl.contextFilterLabels" filter-key="context" state="$ctrl.contextFilter" on-change="($ctrl.onChangeContextFilter)"> </datatable-filter>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'Context'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Context'"
+                    is-sorted-desc="$ctrl.sort.key === 'Context' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Context')"
+                  >
+                  </table-column-header>
+                  <datatable-filter labels="$ctrl.contextFilterLabels" filter-key="context" state="$ctrl.contextFilter" on-change="($ctrl.onChangeContextFilter)">
+                  </datatable-filter>
+                </div>
               </th>
               <th>
-                <a>
-                  User
-                  <datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
-                </a>
+                <div class="vertical-center">
+                  <table-column-header
+                    col-title="'User'"
+                    can-sort="true"
+                    is-sorted="$ctrl.sort.key === 'Username'"
+                    is-sorted-desc="$ctrl.sort.key === 'Username' && $ctrl.sort.desc"
+                    ng-click="$ctrl.changeSort('Username')"
+                  >
+                  </table-column-header>
+                </div>
+              </th>
+              <th>
+                <div class="vertical-center">
+                  <table-column-header col-title="'Result'" can-sort="false"> </table-column-header>
+                  <datatable-filter labels="$ctrl.typeFilterLabels" filter-key="type" state="$ctrl.typeFilter" on-change="($ctrl.onChangeTypeFilter)"> </datatable-filter>
+                </div>
               </th>
-              <th> Result </th>
             </tr>
           </thead>
           <tbody>

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -11,36 +11,38 @@
           </div>
         </div>
       </div>
-
-      <p class="text-muted small">
-        <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+      <p class="text-muted small vertical-center">
+        <pr-icon icon="'info'" feather="true" class-name="'icon icon-sm icon-primary'"></pr-icon>
         Portainer user authentication activity logs have a maximum retention of 7 days.
       </p>
-
       <div>
         <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled
-          ><i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV
+          ><pr-icon icon="'download'" feather="true" icon-class="'icon icon-sm'"></pr-icon>Export as CSV
         </button>
         <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
       </div>
     </rd-widget-body>
   </rd-widget>
-
-  <auth-logs-datatable
-    logs="$ctrl.state.logs"
-    keyword="$ctrl.state.keyword"
-    sort="$ctrl.state.sort"
-    limit="$ctrl.state.limit"
-    context-filter="$ctrl.state.contextFilter"
-    type-filter="$ctrl.state.typeFilter"
-    total-items="$ctrl.state.totalItems"
-    current-page="$ctrl.state.currentPage"
-    feature="{{:: $ctrl.limitedFeature}}"
-    on-change-context-filter="($ctrl.onChangeContextFilter)"
-    on-change-type-filter="($ctrl.onChangeTypeFilter)"
-    on-change-keyword="($ctrl.onChangeKeyword)"
-    on-change-sort="($ctrl.onChangeSort)"
-    on-change-limit="($ctrl.onChangeLimit)"
-    on-change-page="($ctrl.onChangePage)"
-  ></auth-logs-datatable>
+</div>
+
+<div class="be-indicator-container">
+  <div class="row">
+    <auth-logs-datatable
+      logs="$ctrl.state.logs"
+      keyword="$ctrl.state.keyword"
+      sort="$ctrl.state.sort"
+      limit="$ctrl.state.limit"
+      context-filter="$ctrl.state.contextFilter"
+      type-filter="$ctrl.state.typeFilter"
+      total-items="$ctrl.state.totalItems"
+      current-page="$ctrl.state.currentPage"
+      feature="{{:: $ctrl.limitedFeature}}"
+      on-change-context-filter="($ctrl.onChangeContextFilter)"
+      on-change-type-filter="($ctrl.onChangeTypeFilter)"
+      on-change-keyword="($ctrl.onChangeKeyword)"
+      on-change-sort="($ctrl.onChangeSort)"
+      on-change-limit="($ctrl.onChangeLimit)"
+      on-change-page="($ctrl.onChangePage)"
+    ></auth-logs-datatable>
+  </div>
 </div>