Fix small logic errors in sorting and individual user page link

Some logic was wrong in the default sorting rules. Also, the day and month usage hashmap does not have userId stored, so this fix adds an optional property that can be used for the info icon link.
benzuzu · Aug 3, 2023 · 77f547b · 77f547b
1 parent ffdd393
commit 77f547b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 42 deletions.
diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -103,7 +103,7 @@ export const SHORTEN_TEXT_FROM_LIST_THRESHOLD = 5;
 export const TOKEN_ABOUT_2_EXPIRE_NOTICE_IN_DAYS = 14;
 export const USAGE_TOP_USERS_LIMIT = 10000;
 export const USAGE_ALL_TIME_KEY = 'All';
-export const USAGE_ALL_TIME_VALUE = 'This year';
+export const USAGE_ALL_TIME_VALUE = 'Past Year';
 export const USAGE_DETAIL_TIME_KEY = 'Detail';
 export const USAGE_DAY_DETAIL_TIME_KEY = 'Day Detail';
 

diff --git a/src/main/webapp/app/pages/usageAnalysisPage/UsageAnalysisPage.tsx b/src/main/webapp/app/pages/usageAnalysisPage/UsageAnalysisPage.tsx
@@ -44,6 +44,7 @@ export type UsageRecord = {
   resource: string;
   usage: number;
   time: string;
+  userId?: string;
 };
 
 enum UsageType {

diff --git a/src/main/webapp/app/pages/usageAnalysisPage/UsageAnalysisTable.tsx b/src/main/webapp/app/pages/usageAnalysisPage/UsageAnalysisTable.tsx
@@ -61,6 +61,12 @@ export default class UsageAnalysisTable extends React.Component<
     this.timeTypeToggleValue = value;
   }
 
+  @autobind
+  @action
+  handleFilterToggledChange(value: boolean) {
+    this.filterToggled = value;
+  }
+
   @computed get calculateData(): UserOverviewUsage[] | UsageRecord[] {
     if (this.timeTypeToggleValue === ToggleValue.RESULTS_IN_TOTAL) {
       return this.props.data;
@@ -74,7 +80,9 @@ export default class UsageAnalysisTable extends React.Component<
             data.push({
               resource: userOverviewUsage.userEmail,
               usage: userOverviewUsage.monthUsage[curMonth],
-              time: curMonth})
+              time: curMonth,
+              userId: userOverviewUsage.userId,
+            })
           }
         }
       });
@@ -85,7 +93,8 @@ export default class UsageAnalysisTable extends React.Component<
             data.push({
               resource: userOverviewUsage.userEmail,
               usage: userOverviewUsage.dayUsage[curDay],
-              time: curDay
+              time: curDay,
+              userId: userOverviewUsage.userId,
             })
           }
         }
@@ -120,53 +129,45 @@ export default class UsageAnalysisTable extends React.Component<
   }
 
   @computed get resetDefaultSort(): SortingRule[] {
-    if (this.timeTypeToggleValue === ToggleValue.RESULTS_IN_TOTAL) {
-      return [{
-        id: 'totalUsage',
-        desc: true,
-      }];
-    } else if (this.timeTypeToggleValue === ToggleValue.RESULTS_BY_MONTH) {
-      return [{
+    const sortingRules: SortingRule[] = [];
+    if (this.filterToggled) {
+      sortingRules.push({
         id: UsageTableColumnKey.TIME,
-        desc: true,
-      },
-      {
-        id: UsageTableColumnKey.USAGE,
-        desc: true,
-      },
-      {
-        id: 'monthResetPlaceholder',
-        desc: true,
-      }];
-    } else if (this.timeTypeToggleValue === ToggleValue.RESULTS_BY_DAY) {
-      return [{
+        desc: false,
+      });
+    } else {
+      sortingRules.push({
         id: UsageTableColumnKey.TIME,
         desc: true,
-      },
-      {
-        id: UsageTableColumnKey.USAGE,
+      });
+    }
+
+    if (this.timeTypeToggleValue === ToggleValue.RESULTS_IN_TOTAL) {
+      sortingRules.push({
+        id: 'totalUsage',
         desc: true,
-      },
-        {
-          id: 'dayResetPlaceholder',
+      });
+    } else if (this.timeTypeToggleValue === ToggleValue.RESULTS_BY_MONTH) {
+      sortingRules.push({
+          id: UsageTableColumnKey.USAGE,
           desc: true,
-        }];
-    } else if (this.filterToggled) {
-      return [{
-        id: UsageTableColumnKey.TIME,
-        desc: true,
-      },
+        },
         {
+          id: 'monthResetPlaceholder',
+          desc: true,
+      });
+    } else if (this.timeTypeToggleValue === ToggleValue.RESULTS_BY_DAY) {
+      sortingRules.push({
           id: UsageTableColumnKey.USAGE,
           desc: true,
         },
         {
-          id: 'calendarResetPlaceholder',
+          id: 'dayResetPlaceholder',
           desc: true,
-        }];
-    } else {
-      return [];
+        });
     }
+
+    return sortingRules;
   }
 
   render() {
@@ -253,7 +254,7 @@ export default class UsageAnalysisTable extends React.Component<
                   ),
                   sortable: false,
                   className: 'd-flex justify-content-center',
-                  Cell(props: { original: UserOverviewUsage }) {
+                  Cell(props: { original: UsageRecord }) {
                     return (
                       props.original.userId ? (
                         <Link
@@ -305,9 +306,7 @@ export default class UsageAnalysisTable extends React.Component<
                   toDate={(newDate: string) => {
                     this.toDate = newDate;
                   }}
-                  filterToggled={(filterActive: boolean) => {
-                    this.filterToggled = filterActive;
-                  }}
+                  filterToggled={this.handleFilterToggledChange}
                 />
               </Row>
             );