From a45ec9a7b4f19c482ccc79384c6fffae54cadc73 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Thu, 2 May 2024 14:23:56 +1200
Subject: [PATCH] fix(kube): fix text in activity and authentication logs
 teasers [EE-6742] (#11683)

Co-authored-by: testa113 <testa113>
---
 .../auth-logs-view.controller.js              |  2 +-
 .../auth-logs-view/auth-logs-view.html        | 85 ++++++++++---------
 .../ActivityLogsView/ActivityLogsTable.tsx    |  2 +-
 .../ActivityLogsView/ActivityLogsView.tsx     |  8 +-
 .../AuthenticationLogsTable.tsx               |  2 +-
 5 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js b/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
index 45c74c7bf..f46221ed0 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
@@ -85,7 +85,7 @@ export default class AuthLogsViewController {
     return this.$async(async () => {
       this.state.logs = null;
       try {
-        const { logs, totalCount } = { logs: [{}, {}, {}, {}, {}], totalCount: 5 };
+        const { logs, totalCount } = { logs: [], totalCount: 0 };
         this.state.logs = decorateLogs(logs);
         this.state.totalItems = totalCount;
       } catch (err) {
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
index 86c1de947..f59f27584 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
@@ -1,49 +1,52 @@
-<page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
+<page-header title="'User authentication logs'" breadcrumbs="['User authentication logs']" reload="true"> </page-header>
 
 <div class="be-indicator-container limited-be mx-4">
   <div>
-    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-    <div class="limited-be-content">
-      <rd-widget>
-        <rd-widget-body>
-          <div class="form-horizontal">
-            <div class="form-group">
-              <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
-              <div class="col-sm-6">
-                <input type="text" class="form-control" disabled />
+    <div class="limited-be-link vertical-center"><be-feature-indicator class="m-4" feature="$ctrl.limitedFeature"></be-feature-indicator></div>
+    <!-- 15px matches the padding for col-sm-12 for the widget and table -->
+    <div class="limited-be-content !p-0 !pt-[15px]">
+      <div class="row">
+        <div class="col-sm-12">
+          <rd-widget>
+            <rd-widget-body>
+              <div class="form-horizontal">
+                <div class="form-group">
+                  <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
+                  <div class="col-sm-6">
+                    <input type="text" class="form-control" disabled />
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <p class="text-muted small vertical-center">
-            <pr-icon icon="'info'" 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
-              ><pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>Export as CSV
-            </button>
-          </div>
-        </rd-widget-body>
-      </rd-widget>
-      <div class="row mt-5">
-        <authentication-logs-table
-          dataset="$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)"
-        ></authentication-logs-table>
+              <p class="text-muted small vertical-center">
+                <pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
+                Portainer user authentication 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
+                  ><pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>Export as CSV
+                </button>
+              </div>
+            </rd-widget-body>
+          </rd-widget>
+        </div>
       </div>
+      <authentication-logs-table
+        dataset="$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)"
+      ></authentication-logs-table>
     </div>
   </div>
 </div>
diff --git a/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx b/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
index 65a791da4..8d6aac160 100644
--- a/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
+++ b/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
@@ -75,7 +75,7 @@ export function ActivityLogsTable({
 }) {
   return (
     <ExpandableDatatable<ActivityLog>
-      title="Activity Logs"
+      title="Activity logs"
       titleIcon={History}
       columns={columns}
       dataset={dataset || []}
diff --git a/app/react/portainer/logs/ActivityLogsView/ActivityLogsView.tsx b/app/react/portainer/logs/ActivityLogsView/ActivityLogsView.tsx
index 59f18f7d0..9d3ff502e 100644
--- a/app/react/portainer/logs/ActivityLogsView/ActivityLogsView.tsx
+++ b/app/react/portainer/logs/ActivityLogsView/ActivityLogsView.tsx
@@ -38,10 +38,14 @@ export function ActivityLogsView() {
 
   return (
     <>
-      <PageHeader title="User Activity" breadcrumbs="Activity Logs" reload />
+      <PageHeader
+        title="User activity logs"
+        breadcrumbs="User activity logs"
+        reload
+      />
 
       <div className="mx-4">
-        <BEOverlay featureId={FeatureId.ACTIVITY_AUDIT}>
+        <BEOverlay className="m-2" featureId={FeatureId.ACTIVITY_AUDIT}>
           <FilterBar
             value={range}
             onChange={setRange}
diff --git a/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx b/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
index 5494759f5..0eb8871d4 100644
--- a/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
+++ b/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
@@ -30,7 +30,7 @@ export function AuthenticationLogsTable({
 }) {
   return (
     <Datatable<AuthLog>
-      title="Authentication Events"
+      title="Authentication events"
       titleIcon={History}
       columns={columns}
       dataset={dataset || []}