Bulk Install: Add filtering and paging to event log

DNN Platform/Modules/BulkInstall/App_LocalResources/BulkInstall.resx

@@ -303,4 +303,7 @@
   <data name="PlatformVersion" xml:space="preserve">
     <value>Platform Version</value>
   </data>
+  <data name="All" xml:space="preserve">
+    <value>All</value>
+  </data>
 </root>

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/clients/event-log-client.ts

@@ -1,6 +1,6 @@
 import { DnnServicesFramework } from '@dnncommunity/dnn-elements';
 import type { Event } from '../components/tabs/dnn-bi-logs/dnn-bi-logs.model';
-import { EventLogSeverityInfo, eventLogSeverity } from '../enums/EventLogSeverity';
+import { eventLogSeverity, EventLogSeverityInfo } from '../enums/EventLogSeverity';
 
 export class EventLogClient {
   private readonly sf: DnnServicesFramework;
@@ -11,17 +11,22 @@ export class EventLogClient {
     this.requestUrl = this.sf.getServiceRoot('BulkInstall') + 'EventLog/';
   }
 
-  public async browse(): Promise<BrowseResponse> {
-    const response = await fetch(`${this.requestUrl}Browse`, {
+  public async browse(pageIndex = 0, severity?: EventLogSeverityInfo, eventType?: string): Promise<BrowseResponse> {
+    const severityParam = severity ? `&severity=${severity.eventLogSeverityKey}` : '';
+    const eventTypeParam = eventType ? `&eventType=${eventType}` : '';
+    const response = await fetch(`${this.requestUrl}Browse?pageIndex=${pageIndex}${severityParam}${eventTypeParam}`, {
       headers: this.sf.getModuleHeaders(),
     });
     const responseBody = (await response.json()) as ResponseBody;
-    const browseResponse = {
-      Data: responseBody.Data.map(e => EventLogClient.toEvent(e)),
-      Pagination: responseBody.Pagination,
+    return {
+      data: responseBody.Data.map(e => EventLogClient.toEvent(e)),
+      pagination: EventLogClient.toPagination(responseBody.Pagination),
     };
+  }
 
-    return browseResponse;
+  public async getEventTypes(): Promise<string[]> {
+    const response = await fetch(`${this.requestUrl}EventTypes`, { headers: this.sf.getModuleHeaders() });
+    return (await response.json()) as string[];
   }
 
   private static toSeverity(severity: EventLogSeverityResponse): EventLogSeverityInfo {
@@ -47,26 +52,33 @@ export class EventLogClient {
       severity: EventLogClient.toSeverity(eventLog.Severity),
     };
   }
+
+  private static toPagination(pagination: PaginationResponse): Pagination {
+    return {
+      currentPage: pagination.CurrentPage,
+      pages: pagination.Pages,
+    };
+  }
 }
 
 export interface BrowseResponse {
-  Data: Event[];
-  Pagination: Pagination;
+  data: Event[];
+  pagination: Pagination;
 }
 
 export interface Pagination {
-  Records: number;
-  Pages: number;
-  CurrentPage: number;
-  Navigation: {
-    Previous?: string;
-    Next?: string;
-  };
+  pages: number;
+  currentPage: number;
 }
 
 interface ResponseBody {
   Data: EventLogResponse[];
-  Pagination: Pagination;
+  Pagination: PaginationResponse;
+}
+
+interface PaginationResponse {
+  Pages: number;
+  CurrentPage: number;
 }
 
 interface EventLogResponse {

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/clients/localization-client.ts

@@ -28,6 +28,7 @@ export class LocalizationClient {
 export interface BulkInstallLocalization {
   Action: string;
   Add: string;
+  All: string;
   ApiError: string;
   ApiAuthDisabled: string;
   ApiKey: string;

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components.d.ts

@@ -6,7 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { InstallJob, PackageJob, Session, UploadStatus } from "./components/tabs/dnn-bi-install/dnn-bi-install.model";
+import { Pagination } from "./clients/event-log-client";
 export { InstallJob, PackageJob, Session, UploadStatus } from "./components/tabs/dnn-bi-install/dnn-bi-install.model";
+export { Pagination } from "./clients/event-log-client";
 export namespace Components {
     interface DnnBiApiUsers {
     }
@@ -28,6 +30,12 @@ export namespace Components {
     }
     interface DnnBiIpSafelist {
     }
+    interface DnnBiLogPagination {
+        /**
+          * The pagination
+         */
+        "pagination": Pagination;
+    }
     interface DnnBiLogs {
     }
     interface DnnBiPackageJob {
@@ -61,6 +69,10 @@ export namespace Components {
         "moduleId": number;
     }
 }
+export interface DnnBiLogPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDnnBiLogPaginationElement;
+}
 export interface DnnBiQueuedFileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDnnBiQueuedFileElement;
@@ -114,6 +126,23 @@ declare global {
         prototype: HTMLDnnBiIpSafelistElement;
         new (): HTMLDnnBiIpSafelistElement;
     };
+    interface HTMLDnnBiLogPaginationElementEventMap {
+        "pageSelected": number;
+    }
+    interface HTMLDnnBiLogPaginationElement extends Components.DnnBiLogPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDnnBiLogPaginationElementEventMap>(type: K, listener: (this: HTMLDnnBiLogPaginationElement, ev: DnnBiLogPaginationCustomEvent<HTMLDnnBiLogPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDnnBiLogPaginationElementEventMap>(type: K, listener: (this: HTMLDnnBiLogPaginationElement, ev: DnnBiLogPaginationCustomEvent<HTMLDnnBiLogPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDnnBiLogPaginationElement: {
+        prototype: HTMLDnnBiLogPaginationElement;
+        new (): HTMLDnnBiLogPaginationElement;
+    };
     interface HTMLDnnBiLogsElement extends Components.DnnBiLogs, HTMLStencilElement {
     }
     var HTMLDnnBiLogsElement: {
@@ -158,6 +187,7 @@ declare global {
         "dnn-bi-install": HTMLDnnBiInstallElement;
         "dnn-bi-install-job": HTMLDnnBiInstallJobElement;
         "dnn-bi-ip-safelist": HTMLDnnBiIpSafelistElement;
+        "dnn-bi-log-pagination": HTMLDnnBiLogPaginationElement;
         "dnn-bi-logs": HTMLDnnBiLogsElement;
         "dnn-bi-package-job": HTMLDnnBiPackageJobElement;
         "dnn-bi-queued-file": HTMLDnnBiQueuedFileElement;
@@ -187,6 +217,13 @@ declare namespace LocalJSX {
     }
     interface DnnBiIpSafelist {
     }
+    interface DnnBiLogPagination {
+        "onPageSelected"?: (event: DnnBiLogPaginationCustomEvent<number>) => void;
+        /**
+          * The pagination
+         */
+        "pagination": Pagination;
+    }
     interface DnnBiLogs {
     }
     interface DnnBiPackageJob {
@@ -240,6 +277,7 @@ declare namespace LocalJSX {
         "dnn-bi-install": DnnBiInstall;
         "dnn-bi-install-job": DnnBiInstallJob;
         "dnn-bi-ip-safelist": DnnBiIpSafelist;
+        "dnn-bi-log-pagination": DnnBiLogPagination;
         "dnn-bi-logs": DnnBiLogs;
         "dnn-bi-package-job": Omit<DnnBiPackageJob, keyof DnnBiPackageJobAttributes> & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes]?: DnnBiPackageJob[K] } & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes as `attr:${K}`]?: DnnBiPackageJobAttributes[K] } & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes as `prop:${K}`]?: DnnBiPackageJob[K] } & OneOf<"attempted", DnnBiPackageJob["attempted"], DnnBiPackageJobAttributes["attempted"]>;
         "dnn-bi-queued-file": Omit<DnnBiQueuedFile, keyof DnnBiQueuedFileAttributes> & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes]?: DnnBiQueuedFile[K] } & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes as `attr:${K}`]?: DnnBiQueuedFileAttributes[K] } & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes as `prop:${K}`]?: DnnBiQueuedFile[K] } & OneOf<"maxUploadFileSize", DnnBiQueuedFile["maxUploadFileSize"], DnnBiQueuedFileAttributes["maxUploadFileSize"]>;
@@ -258,6 +296,7 @@ declare module "@stencil/core" {
             "dnn-bi-install": LocalJSX.IntrinsicElements["dnn-bi-install"] & JSXBase.HTMLAttributes<HTMLDnnBiInstallElement>;
             "dnn-bi-install-job": LocalJSX.IntrinsicElements["dnn-bi-install-job"] & JSXBase.HTMLAttributes<HTMLDnnBiInstallJobElement>;
             "dnn-bi-ip-safelist": LocalJSX.IntrinsicElements["dnn-bi-ip-safelist"] & JSXBase.HTMLAttributes<HTMLDnnBiIpSafelistElement>;
+            "dnn-bi-log-pagination": LocalJSX.IntrinsicElements["dnn-bi-log-pagination"] & JSXBase.HTMLAttributes<HTMLDnnBiLogPaginationElement>;
             "dnn-bi-logs": LocalJSX.IntrinsicElements["dnn-bi-logs"] & JSXBase.HTMLAttributes<HTMLDnnBiLogsElement>;
             "dnn-bi-package-job": LocalJSX.IntrinsicElements["dnn-bi-package-job"] & JSXBase.HTMLAttributes<HTMLDnnBiPackageJobElement>;
             "dnn-bi-queued-file": LocalJSX.IntrinsicElements["dnn-bi-queued-file"] & JSXBase.HTMLAttributes<HTMLDnnBiQueuedFileElement>;

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/dnn-bulk-install/dnn-bulk-install.tsx

@@ -1,6 +1,6 @@
 import { Component, Host, h, Prop } from '@stencil/core';
+import store from '../../stores/store';
 import { LocalizationClient } from '../../clients/localization-client';
-import state from '../../stores/store';
 
 @Component({
   tag: 'dnn-bulk-install',
@@ -18,9 +18,9 @@ export class DnnBulkInstall {
   }
 
   async componentWillLoad() {
-    state.moduleId = this.moduleId;
+    store.moduleId = this.moduleId;
     try {
-      state.resx = await this.localizationClient.getResources();
+      store.resx = await this.localizationClient.getResources();
     } catch (error) {
       console.error(error);
     }
@@ -31,22 +31,22 @@ export class DnnBulkInstall {
       <Host>
         <div class="container">
           <dnn-tabs>
-            <dnn-tab tabTitle={state.resx.Install}>
+            <dnn-tab tabTitle={store.resx.Install}>
               <div class="tab-content">
                 <dnn-bi-install></dnn-bi-install>
               </div>
             </dnn-tab>
-            <dnn-tab tabTitle={state.resx.Events}>
+            <dnn-tab tabTitle={store.resx.Events}>
               <div class="tab-content">
                 <dnn-bi-logs></dnn-bi-logs>
               </div>
             </dnn-tab>
-            <dnn-tab tabTitle={state.resx.ApiUsers}>
+            <dnn-tab tabTitle={store.resx.ApiUsers}>
               <div class="tab-content">
                 <dnn-bi-api-users></dnn-bi-api-users>
               </div>
             </dnn-tab>
-            <dnn-tab tabTitle={state.resx.IPSafeList}>
+            <dnn-tab tabTitle={store.resx.IPSafeList}>
               <div class="tab-content">
                 <dnn-bi-ip-safelist></dnn-bi-ip-safelist>
               </div>

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/dnn-bulk-install/readme.md

@@ -44,6 +44,9 @@ graph TD;
   dnn-bi-queued-file --> dnn-bi-checkmark-icon
   dnn-button --> dnn-modal
   dnn-button --> dnn-button
+  dnn-bi-logs --> dnn-select
+  dnn-bi-logs --> dnn-bi-log-pagination
+  dnn-select --> dnn-fieldset
   dnn-bi-api-users --> dnn-button
   dnn-bi-api-users --> dnn-modal
   dnn-bi-api-users --> dnn-input

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-api-users/dnn-bi-api-users.scss

@@ -82,13 +82,6 @@
     color: var(--dnn-color-neutral, #ededee);
   }
 
-  /* Utility */
-  .clearfix::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   form.create-user {
     margin: 1rem;
     display: flex;

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-api-users/dnn-bi-api-users.tsx

@@ -1,7 +1,7 @@
 import { Component, Host, h, State } from '@stencil/core';
-import { User } from './dnn-bi-api-users.model';
-import state from '../../../stores/store';
+import store from '../../../stores/store';
 import { ApiUserClient } from '../../../clients/api-user-client';
+import { User } from './dnn-bi-api-users.model';
 
 interface NewUser {
   name: string;
@@ -36,7 +36,7 @@ export class DnnBiApiUsers {
   private apiUserClient: ApiUserClient;
 
   constructor() {
-    this.apiUserClient = new ApiUserClient(state.moduleId);
+    this.apiUserClient = new ApiUserClient(store.moduleId);
   }
 
   async componentWillLoad() {
@@ -72,7 +72,7 @@ export class DnnBiApiUsers {
         {this.enabled === false && (
           <div class="row">
             <div class="col">
-              <h3 class="danger">{state.resx.ApiAuthDisabled}</h3>
+              <h3 class="danger">{store.resx.ApiAuthDisabled}</h3>
             </div>
           </div>
         )}
@@ -87,22 +87,22 @@ export class DnnBiApiUsers {
                   return;
                 }}
               >
-                {state.resx.NewApiUser}
+                {store.resx.NewApiUser}
               </dnn-button>
             </div>
             <div class="panel">
               <div class="panel-heading">
-                <h3 class="panel-title">{state.resx.ApiUsers}</h3>
+                <h3 class="panel-title">{store.resx.ApiUsers}</h3>
               </div>
               <div class="panel-body">
                 <table class="table">
                   <thead>
                     <tr>
-                      <th>{state.resx.Name}</th>
-                      <th>{state.resx.ApiKey}</th>
-                      <th>{state.resx.EncryptionKey}</th>
-                      <th>{state.resx.BypassIpAllowList}</th>
-                      <th>{state.resx.Action}</th>
+                      <th>{store.resx.Name}</th>
+                      <th>{store.resx.ApiKey}</th>
+                      <th>{store.resx.EncryptionKey}</th>
+                      <th>{store.resx.BypassIpAllowList}</th>
+                      <th>{store.resx.Action}</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -121,7 +121,7 @@ export class DnnBiApiUsers {
                               return;
                             }}
                           >
-                            {state.resx.Delete}
+                            {store.resx.Delete}
                           </dnn-button>
                         </td>
                       </tr>
@@ -141,19 +141,19 @@ export class DnnBiApiUsers {
               return;
             }}
           >
-            <h4>{state.resx.NewApiUser}</h4>
+            <h4>{store.resx.NewApiUser}</h4>
             <dnn-input
               type="text"
-              label={state.resx.ApiUserNameText}
-              helpText={state.resx.ApiUserNameHelp}
+              label={store.resx.ApiUserNameText}
+              helpText={store.resx.ApiUserNameHelp}
               required
               value={this.newUser.name}
               onValueInput={e => (this.newUser = { ...this.newUser, name: e.detail as string })}
             />
             <dnn-input
               type="date"
-              label={state.resx.ApiUserExpiresOnText}
-              helpText={state.resx.ApiUserExpiresOnHelp}
+              label={store.resx.ApiUserExpiresOnText}
+              helpText={store.resx.ApiUserExpiresOnHelp}
               required
               min={toISODate(new Date())}
               max={toISODate(addYear(addYear(new Date())))}
@@ -165,9 +165,9 @@ export class DnnBiApiUsers {
                 checked={this.newUser.bypassIPWhitelist ? 'checked' : 'unchecked'}
                 onCheckedchange={e => (this.newUser = { ...this.newUser, bypassIPWhitelist: e.detail === 'checked' })}
               />
-              {state.resx.BypassIpAllowList}
+              {store.resx.BypassIpAllowList}
             </label>
-            <dnn-button type="submit">{state.resx.Create}</dnn-button>
+            <dnn-button type="submit">{store.resx.Create}</dnn-button>
           </form>
         </dnn-modal>
       </Host>

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-install/dnn-bi-install-job/dnn-bi-install-job.tsx

@@ -1,5 +1,5 @@
 import { Component, h, Host, Prop } from '@stencil/core';
-import state from '../../../../stores/store';
+import store from '../../../../stores/store';
 import { InstallJob } from '../dnn-bi-install.model';
 
 @Component({
@@ -31,7 +31,7 @@ export class DnnBiInstallJob {
             {this.job.packages.length !== 1 && (
               <details>
                 <summary>
-                  {this.job.packages.length} {state.resx.Packages}
+                  {this.job.packages.length} {store.resx.Packages}
                 </summary>
                 <ul>
                   {this.job.packages.map(p => (

DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-install/dnn-bi-install.tsx

@@ -1,8 +1,8 @@
 import { Component, Fragment, h, Host, State } from '@stencil/core';
 import store from '../../../stores/store';
-import { InstallJob, Session, UploadStatus } from './dnn-bi-install.model';
 import { InstallClient } from '../../../clients/install-client';
 import { sessionStatus } from '../../../enums/SessionStatus';
+import { InstallJob, Session, UploadStatus } from './dnn-bi-install.model';
 
 type FileViewModel = { type: 'pending'; file: File } | { type: 'error'; file: File } | { type: 'uploaded'; job: InstallJob };