feat(ui): add the time range filter in the audit logs search (#259)

bucketeer-io · Mar 23, 2023 · f80c49d · f80c49d
1 parent 90244de
commit f80c49d
Show file tree

Hide file tree

Showing 28 changed files with 469 additions and 74 deletions.
diff --git a/ui/web-v2/apps/admin/src/assets/lang/en.json b/ui/web-v2/apps/admin/src/assets/lang/en.json
@@ -94,6 +94,9 @@
   "apiKey.search.placeholder": "Name",
   "apiKey.update.header.description": "The API key is required for the client SDK to access the server API.",
   "apiKey.update.header.title": "Update the API Key",
+  "auditLog.filter.apply": "Apply",
+  "auditLog.filter.cancel": "Cancel",
+  "auditLog.filter.clear": "Clear",
   "auditLog.filter.dates": "Dates",
   "auditLog.filter.type": "Type",
   "auditLog.list.header.description": "On this page, you can check all audit logs for this environment.",
@@ -308,6 +311,8 @@
   "noData.title": "There are no {title} yet.",
   "noResult.changeFilterSelection": "Change your filter selection",
   "noResult.checkTypos": "Check for typos",
+  "noResult.dateRange.description": "There are no entries for these dates. Please choose a different date and try again.",
+  "noResult.dateRange.title": "No entries",
   "noResult.searchByKeyword": "Search by {keyword}",
   "noResult.title": "No {title} match. You can try this:",
   "notFound.description": "Sorry, we couldn't find the page you're looking for.",

diff --git a/ui/web-v2/apps/admin/src/assets/lang/ja.json b/ui/web-v2/apps/admin/src/assets/lang/ja.json
@@ -94,7 +94,10 @@
   "apiKey.search.placeholder": "名前",
   "apiKey.update.header.description": "APIキーはクライアントSDKがサーバーAPIにアクセスするために必要です。",
   "apiKey.update.header.title": "APIキーの更新",
-  "auditLog.filter.dates": "表示期間",
+  "auditLog.filter.apply": "適用",
+  "auditLog.filter.cancel": "キャンセル",
+  "auditLog.filter.clear": "クリア",
+  "auditLog.filter.dates": "日付",
   "auditLog.filter.type": "タイプ",
   "auditLog.list.header.description": "このページでは、環境にあるすべての監視ログを確認できます。",
   "auditLog.list.header.title": "監視ログ",
@@ -308,6 +311,8 @@
   "noData.title": "まだ{title}がありません。",
   "noResult.changeFilterSelection": "フィルター選択を変更する",
   "noResult.checkTypos": "誤字脱字をチェックする",
+  "noResult.dateRange.description": "この期間にはログエントリがありません。別の期間を選択してもう一度お試しください。",
+  "noResult.dateRange.title": "ログエントリなし",
   "noResult.searchByKeyword": "{keyword}で検索する",
   "noResult.title": "{title}が一致しません。以下を試してください。",
   "notFound.description": "お探しのページが見つかりませんでした。",

diff --git a/ui/web-v2/apps/admin/src/components/APIKeySearch/index.tsx b/ui/web-v2/apps/admin/src/components/APIKeySearch/index.tsx
@@ -122,6 +122,7 @@ export const APIKeySearch: FC<APIKeySearchProps> = memo(
           <div className="flex-none w-72">
             <SearchInput
               placeholder={f(messages.apiKey.search.placeholder)}
+              value={options.q}
               onChange={(query: string) =>
                 handleUpdateOption({
                   q: query,

diff --git a/ui/web-v2/apps/admin/src/components/AccountSearch/index.tsx b/ui/web-v2/apps/admin/src/components/AccountSearch/index.tsx
@@ -150,6 +150,7 @@ export const AccountSearch: FC<AccountSearchProps> = memo(
           <div className="flex-none w-72">
             <SearchInput
               placeholder={f(messages.account.search.placeholder)}
+              value={options.q}
               onChange={(query: string) =>
                 handleUpdateOption({
                   q: query,

diff --git a/ui/web-v2/apps/admin/src/components/AdminAccountSearch/index.tsx b/ui/web-v2/apps/admin/src/components/AdminAccountSearch/index.tsx
@@ -122,6 +122,7 @@ export const AdminAccountSearch: FC<AdminAccountSearchProps> = memo(
           <div className="flex-none w-72">
             <SearchInput
               placeholder={f(messages.account.search.placeholder)}
+              value={options.q}
               onChange={(query: string) =>
                 handleUpdateOption({
                   q: query,

diff --git a/ui/web-v2/apps/admin/src/components/AuditLogList/index.tsx b/ui/web-v2/apps/admin/src/components/AuditLogList/index.tsx
@@ -22,7 +22,6 @@ export interface AuditLogListProps {
 
 export const AuditLogList: FC<AuditLogListProps> = memo(
   ({ searchOptions, onChangePage, onChangeSearchOptions }) => {
-    const { formatMessage: f } = useIntl();
     const auditLogs = useSelector<AppState, AuditLog.AsObject[]>(
       (state) => selectAll(state.auditLog),
       shallowEqual
@@ -35,6 +34,7 @@ export const AuditLogList: FC<AuditLogListProps> = memo(
       (state) => state.auditLog.totalCount,
       shallowEqual
     );
+
     return (
       <div className="min-w-max bg-white border border-gray-300 rounded-md">
         <div>
@@ -45,51 +45,8 @@ export const AuditLogList: FC<AuditLogListProps> = memo(
         </div>
         {isLoading ? (
           <ListSkeleton />
-        ) : auditLogs.length == 0 ? (
-          searchOptions.q || searchOptions.resource ? (
-            <div className="my-10 flex justify-center">
-              <div className="text-gray-700">
-                <h1 className="text-lg">
-                  {f(messages.noResult.title, {
-                    title: f(messages.auditLog.list.header.title),
-                  })}
-                </h1>
-                <div className="flex justify-center mt-4">
-                  <ul className="list-disc">
-                    <li>
-                      {f(messages.noResult.searchByKeyword, {
-                        keyword: f(
-                          messages.auditLog.list.noResult.searchKeyword
-                        ),
-                      })}
-                    </li>
-                    <li>{f(messages.noResult.checkTypos)}</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="my-10 flex justify-center">
-              <div className="w-[600px] text-gray-700 text-center">
-                <h1 className="text-lg">
-                  {f(messages.noData.title, {
-                    title: f(messages.auditLog.list.header.title),
-                  })}
-                </h1>
-                <p className="mt-5">
-                  {f(messages.auditLog.list.noData.description)}
-                </p>
-                <a
-                  href="https://bucketeer.io/docs#/audit-logs?id=environment-audit-logs"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="link"
-                >
-                  {f(messages.readMore)}
-                </a>
-              </div>
-            </div>
-          )
+        ) : auditLogs.length === 0 ? (
+          <NoData searchOptions={searchOptions} />
         ) : (
           <div>
             <table className="min-w-full table-auto leading-normal">
@@ -130,6 +87,66 @@ export const AuditLogList: FC<AuditLogListProps> = memo(
   }
 );
 
+interface NoDataProps {
+  searchOptions: AuditLogSearchOptions;
+}
+
+const NoData: FC<NoDataProps> = ({ searchOptions }) => {
+  const { formatMessage: f } = useIntl();
+
+  if (searchOptions.from) {
+    return (
+      <div className="my-10 text-center">
+        <h1 className="text-lg">{f(messages.noResult.dateRange.title)}</h1>
+        <p className="mt-2">{f(messages.noResult.dateRange.description)}</p>
+      </div>
+    );
+  } else if (searchOptions.q || searchOptions.resource) {
+    return (
+      <div className="my-10 flex justify-center">
+        <div className="text-gray-700">
+          <h1 className="text-lg">
+            {f(messages.noResult.title, {
+              title: f(messages.auditLog.list.header.title),
+            })}
+          </h1>
+          <div className="flex justify-center mt-4">
+            <ul className="list-disc">
+              <li>
+                {f(messages.noResult.searchByKeyword, {
+                  keyword: f(messages.auditLog.list.noResult.searchKeyword),
+                })}
+              </li>
+              <li>{f(messages.noResult.checkTypos)}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="my-10 flex justify-center">
+        <div className="w-[600px] text-gray-700 text-center">
+          <h1 className="text-lg">
+            {f(messages.noData.title, {
+              title: f(messages.auditLog.list.header.title),
+            })}
+          </h1>
+          <p className="mt-5">{f(messages.auditLog.list.noData.description)}</p>
+          <a
+            href="https://bucketeer.io/docs#/audit-logs?id=environment-audit-logs"
+            target="_blank"
+            rel="noreferrer"
+            className="link"
+          >
+            {f(messages.readMore)}
+          </a>
+        </div>
+      </div>
+    );
+  }
+};
+
 const nl2br = (text: string): Array<React.ReactNode> => {
   const regex = /(\n)/g;
   return text.split(regex).map((line, i) => {

diff --git a/ui/web-v2/apps/admin/src/components/AuditLogSearch/index.tsx b/ui/web-v2/apps/admin/src/components/AuditLogSearch/index.tsx
@@ -11,7 +11,7 @@ import {
   SORT_OPTIONS_CREATED_AT_DESC,
 } from '../../types/list';
 import { classNames } from '../../utils/css';
-import { Option } from '../FilterPopover';
+import { DateRangePopover } from '../DateRangePopover';
 import { SearchInput } from '../SearchInput';
 import { SortItem, SortSelect } from '../SortSelect';
 
@@ -26,22 +26,6 @@ const sortItems: SortItem[] = [
   },
 ];
 
-export enum FilterTypes {
-  DATES = 'dates',
-  TYPE = 'type',
-}
-
-export const filterOptions: Option[] = [
-  {
-    value: FilterTypes.DATES,
-    label: intl.formatMessage(messages.auditLog.filter.dates),
-  },
-  {
-    value: FilterTypes.TYPE,
-    label: intl.formatMessage(messages.auditLog.filter.type),
-  },
-];
-
 export interface AuditLogSearchProps {
   options: AuditLogSearchOptions;
   onChange: (options: AuditLogSearchOptions) => void;
@@ -72,13 +56,25 @@ export const AuditLogSearch: FC<AuditLogSearchProps> = memo(
           <div className="flex-none w-72">
             <SearchInput
               placeholder={f(messages.account.search.placeholder)}
+              value={options.q}
               onChange={(query: string) =>
                 handleUpdateOption({
                   q: query,
                 })
               }
             />
           </div>
+          <div className="flex-none mx-2 relative">
+            <DateRangePopover
+              options={options}
+              onChange={(from: number, to: number) =>
+                handleUpdateOption({
+                  from,
+                  to,
+                })
+              }
+            />
+          </div>
           <div className="flex-grow" />
           <div className="flex-none -mr-2">
             <SortSelect

diff --git a/ui/web-v2/apps/admin/src/components/DateRangePopover/dateRangeStyles.css b/ui/web-v2/apps/admin/src/components/DateRangePopover/dateRangeStyles.css
@@ -0,0 +1,24 @@
+.rdrDefinedRangesWrapper {
+  width: 140px !important;
+}
+.rdrStaticRanges button:last-child {
+  border-bottom: none;
+}
+
+.rdrDateDisplayWrapper .rdrDateDisplay {
+  margin: 0.5rem !important;
+}
+
+.rdrMonthAndYearWrapper {
+  height: 35px !important;
+  padding-top: 0px !important;
+}
+
+.rdrMonth {
+  width: 22em !important;
+  padding: 0 0.5rem 0 0.5rem !important;
+}
+
+.rdrMonthAndYearPickers select {
+  font-size: 0.9rem;
+}