Add basic support for date-range filtering

modules/portmaster/src/app/shared/netquery/netquery.component.html

@@ -124,6 +124,24 @@ <h3 class="flex items-center gap-2 px-3 py-0.5 mb-0 border-b border-gray-300 tex
 
   <div class="flex-grow"></div>
 
+  <nz-range-picker *ngIf="useHistory" [nzShowTime]="true" class="py-0" [nzRenderExtraFooter]="customTimeRange"
+    [(ngModel)]="dateFilter" [nzBorderless]="true">
+  </nz-range-picker>
+  <ng-template #customTimeRange>
+    <span class="py-2 uppercase text-xxs text-secondary">Quick Settings</span>
+    <ul class="grid grid-flow-row grid-cols-3 py-2 text-xs">
+      <li
+        class="cursor-pointer text-secondary hover:text-primary px-2 py-1.5 hover:bg-gray-500 hover:bg-opacity-50 rounded-md">
+        Last 24 Hours</li>
+      <li
+        class="cursor-pointer text-secondary hover:text-primary px-2 py-1.5 hover:bg-gray-500 hover:bg-opacity-50 rounded-md">
+        Last Week</li>
+      <li
+        class="cursor-pointer text-secondary hover:text-primary px-2 py-1.5 hover:bg-gray-500 hover:bg-opacity-50 rounded-md">
+        Last Month</li>
+    </ul>
+  </ng-template>
+
   <div class="flex flex-row items-center gap-3">
     <!--
       Group-By selection

modules/portmaster/src/app/shared/netquery/netquery.component.ts

@@ -132,6 +132,9 @@ export class SfngNetqueryViewer implements OnInit, OnDestroy, AfterViewInit {
   /** The value of the free-text search */
   textSearch: string = '';
 
+  /** The date filter */
+  dateFilter: Date[] = []
+
   /** a list of allowed group-by keys */
   readonly allowedGroupBy = groupByKeys;
 
@@ -402,11 +405,10 @@ export class SfngNetqueryViewer implements OnInit, OnDestroy, AfterViewInit {
               ),
 
             totalConnCount: this.netquery.query({
+              ...query,
               select: {
                 $count: { field: '*', as: 'totalConnCount' }
               },
-              query: this.mergeFilter || {},
-              databases: this.databases,
             })
           })
         }),
@@ -914,6 +916,7 @@ export class SfngNetqueryViewer implements OnInit, OnDestroy, AfterViewInit {
     }
 
     let normalizedQuery = mergeConditions(query, this.mergeFilter || {})
+    normalizedQuery = this.mergeDateFilter(normalizedQuery)
 
     let orderBy: string[] | OrderBy[] = this.orderByKeys;
     if (!orderBy || orderBy.length === 0) {
@@ -939,6 +942,19 @@ export class SfngNetqueryViewer implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  private mergeDateFilter(condition: Condition): Condition {
+    if (this.dateFilter?.length) {
+      condition = mergeConditions(condition, {
+        started: {
+          $ge: Math.floor(this.dateFilter[0].getTime() / 1000),
+          $le: Math.ceil(this.dateFilter[1].getTime() / 1000),
+        }
+      })
+    }
+
+    return condition
+  }
+
   /** @private Updates the current model form all values emited by the tag-bar. */
   onTagbarChange(tagKinds: SfngTagbarValue[]) {
     objKeys(this.models).forEach(key => {

modules/portmaster/src/app/shared/netquery/netquery.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { SfngAccordionModule, SfngDropDownModule, SfngPaginationModule, SfngSelectModule, SfngTipUpModule, SfngToggleSwitchModule, SfngTooltipModule } from "@safing/ui";
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { SfngAppIconModule } from "../app-icon";
 import { CountIndicatorModule } from "../count-indicator";
 import { CountryFlagModule } from "../country-flag";
@@ -47,6 +48,7 @@ import { SfngNetqueryTagbarComponent } from "./tag-bar";
     FontAwesomeModule,
     CommonPipesModule,
     SPNModule,
+    NzDatePickerModule,
   ],
   exports: [
     SfngNetqueryViewer,

modules/portmaster/src/theme.less

@@ -0,0 +1,4 @@
+
+// Custom Theming for NG-ZORRO
+// For more information: https://ng.ant.design/docs/customize-theme/en
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.dark.less";