@firestitch/system 12.4.1 → 12.5.0

package/fesm2015/firestitch-system.js

@@ -1,13 +1,33 @@
-import * as i7 from '@angular/common';
+import * as i8 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Inject, ViewChild, Input, ChangeDetectionStrategy, Pipe, Injectable, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject, ViewChild, Input, NgModule, Pipe, Injectable, EventEmitter, Output, InjectionToken } from '@angular/core';
 import * as i16 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i2$1 from '@firestitch/clipboard';
+import { FsClipboardModule } from '@firestitch/clipboard';
+import * as i9 from '@firestitch/common';
+import { FsCommonModule } from '@firestitch/common';
+import * as i4$1 from '@firestitch/date';
+import { FsDateModule, parse } from '@firestitch/date';
+import * as i2 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import { FsFormModule } from '@firestitch/form';
+import * as i3 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import * as i2$2 from '@firestitch/list';
+import { FsListComponent, FsListModule } from '@firestitch/list';
+import * as i7 from '@firestitch/popover';
+import { FsPopoverModule } from '@firestitch/popover';
+import { ItemType } from '@firestitch/filter';
+import { map, tap, switchMap, takeUntil } from 'rxjs/operators';
 import * as i4$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i7$1 from '@angular/material/form-field';
@@ -16,43 +36,239 @@ import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i15 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/select';
+import * as i8$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i9 from '@angular/material/tooltip';
+import * as i9$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i11 from '@firestitch/colorpicker';
 import { FsColorPickerModule } from '@firestitch/colorpicker';
-import * as i4$1 from '@firestitch/date';
-import { parse, FsDateModule } from '@firestitch/date';
 import * as i10 from '@firestitch/datepicker';
 import { FsDatePickerModule } from '@firestitch/datepicker';
-import * as i2 from '@firestitch/dialog';
-import { FsDialogModule } from '@firestitch/dialog';
 import * as i12 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import { FsFileManagerModule } from '@firestitch/file-manager';
-import * as i3 from '@firestitch/label';
-import { FsLabelModule } from '@firestitch/label';
-import * as i2$1 from '@firestitch/list';
-import { FsListComponent, FsListModule } from '@firestitch/list';
 import * as i4$2 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
-import * as i5$1 from '@firestitch/popover';
-import { FsPopoverModule } from '@firestitch/popover';
 import * as i5 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import { ItemType } from '@firestitch/filter';
-import { map, tap, switchMap, takeUntil } from 'rxjs/operators';
 import * as i1$1 from '@firestitch/message';
 import { Subject } from 'rxjs';
 import { SelectionActionType } from '@firestitch/selection';
 import * as i3$2 from '@firestitch/prompt';
 import { differenceInSeconds, differenceInMinutes } from 'date-fns';
-import * as i2$2 from '@firestitch/build';
-import * as i2$3 from '@firestitch/clipboard';
-import * as i9$1 from '@angular/material/core';
+import * as i2$3 from '@firestitch/build';
+import * as i9$2 from '@angular/material/core';
+
+class ExplainComponent {
+    constructor(_data) {
+        this._data = _data;
+        this.explain = _data.explain;
+    }
+}
+ExplainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExplainComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ExplainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExplainComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Explain</h1>\n  <mat-dialog-content>\n    <div class=\"explain-popover\">{{explain | json}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".explain-popover{white-space:pre}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "json": i8.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExplainComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './explain.component.html',
+                    styleUrls: ['./explain.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class QueryLogComponent {
+    constructor(_data, _dialog) {
+        this._data = _data;
+        this._dialog = _dialog;
+        this.accessTypes = {
+            NULL: 'This access method means MySQL can resolve the query during the optimization phase and will not even access the table or index during the execution stage.',
+            system: 'The table is empty or has one row.',
+            const: 'The value of the column can be treated as a constant (there is one row matching the query). Note: Primary Key Lookup, Unique Index Lookup',
+            eq_ref: 'The index is clustered and is being used by the operation (either the index is a PRIMARY KEY or UNIQUE INDEX with all key columns defined as NOT NULL)',
+            ref: 'The indexed column was accessed using an equality operator Note: The ref_or_null access type is a variation on ref. It means MySQL must do a second lookup to find NULL entries after doing the initial lookup.',
+            fulltext: 'Operation (JOIN) is using the table’s fulltext index',
+            index: 'The entire index is scanned to find a match for the query. Note: The main advantage is that this avoids sorting. The biggest disadvantage is the cost of reading an entire table in index order. This usually means accessing the rows in random order, which is very expensive.',
+            index_merge: 'This join type indicates that the Index Merge optimization is used. In this case, the key column in the output row contains a list of indexes used. It indicates a query can make limited use of multiple indexes on a single table.',
+            range: 'This type replaces eq_ref for some IN subqueries of the following form: value IN (SELECT primary_key FROM single_table WHERE some_expr)',
+            unique_subquery: '',
+            ALL: 'MySQL scans the entire table to satisfy the query',
+        };
+        this.queryLog = _data.queryLog;
+    }
+    openExplain() {
+        this._dialog.open(ExplainComponent, {
+            data: { explain: this.explain },
+        });
+    }
+    get explain() {
+        return this.queryLog.explain;
+    }
+    get queryBlock() {
+        var _a;
+        return (_a = this.explain) === null || _a === void 0 ? void 0 : _a.queryBlock;
+    }
+    get orderingOperation() {
+        var _a;
+        return (_a = this.queryBlock) === null || _a === void 0 ? void 0 : _a.orderingOperation;
+    }
+}
+QueryLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryLogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+QueryLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueryLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Query Log</h1>\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-large\">\n      <fs-label-field>\n        <fs-label>Duration</fs-label>\n        {{queryLog.duration}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Optimized</fs-label>\n        {{queryLog.optimized ? 'Yes' : 'No'}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{queryLog.queryCost}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Raw Explain</fs-label>\n        <a (click)=\"openExplain()\">View</a>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>URL</fs-label>\n        {{queryLog.path | fsFormatTruncate: 50}}\n      </fs-label-field>\n    </div>\n\n    <mat-tab-group>\n      <mat-tab label=\"Query\">\n        <fs-clipboard-button\n          [content]=\"queryLog.prettyQuery\">\n        </fs-clipboard-button>\n        <div [innerHTML]=\"queryLog.prettyQuery\" class=\"query\"></div>\n      </mat-tab>\n      \n      <mat-tab label=\"Explain\">\n        <ng-container *ngIf=\"queryBlock?.nestedLoop\">\n          <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ data: queryBlock.nestedLoop }\"></ng-container>\n        </ng-container>\n    \n        <ng-container *ngIf=\"orderingOperation?.nestedLoop\">\n          <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ data: orderingOperation.nestedLoop }\"></ng-container>\n        </ng-container>\n      </mat-tab>\n    </mat-tab-group>\n\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n\n<ng-template #nestedLoop let-data=\"data\">\n  <table class=\"fs-list-table style-line\">\n    <thead>\n      <tr>\n        <th>Table</th>\n        <th>Type</th>\n        <th>Keys</th>\n        <th>Ref</th>\n        <th>Rows</th>\n        <th>Filtered</th>\n        <th>Extra</th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let item of data; let index = index\">\n        <tr>\n          <td>\n            {{item.table.tableName}}\n          </td>\n          <td>\n            <fs-popover [template]=\"accessTypePopover\" [data]=\"item.table.accessType\">\n              <span class=\"access-type\" [ngClass]=\"item.table.accessType\">{{item.table.accessType}}</span>\n            </fs-popover>            \n          </td>\n          <td>\n            <fs-popover          \n                [template]=\"keysPopover\"\n                [maxWidth]=\"null\"\n                [data]=\"{ possibleKeys: item.table.possibleKeys, key: item.table.key }\">\n              {{item.table.key}}\n            </fs-popover>\n          </td>\n          <td>\n            <div class=\"fs-delimit\">\n              <ng-container *ngFor=\"let ref of item.table.ref\">\n                <span>{{ref}}</span>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n             {{item.table.rowsExaminedPerScan}}\n          </td>\n          <td>\n            {{item.table.filtered}}\n          </td>\n          <td>\n            <div class=\"fs-delimit\">\n              <ng-container *ngIf=\"item.table.indexCondition\">\n                <span>\n                  <fs-popover \n                      [template]=\"usingIndexCondition\" \n                      [maxWidth]=\"null\"\n                      [data]=\"item.table.indexCondition\">\n                    Using Index Condition\n                  </fs-popover>\n                </span>\n              </ng-container>\n              <ng-container *ngIf=\"item.table.attachedCondition\">\n                <span>\n                  <fs-popover \n                      [template]=\"usingWhere\" \n                      [maxWidth]=\"null\"\n                      [data]=\"item.table.attachedCondition\">\n                    Using Where\n                  </fs-popover>\n                </span>\n              </ng-container>\n              <ng-container *ngIf=\"item.table.usingIndex\">\n                <span>Using Index</span>\n              </ng-container>\n              \n              <ng-container *ngIf=\"index === 0\">\n                <ng-container *ngIf=\"orderingOperation?.usingFilesort\">\n                  <span class=\"critical\">Using File Sort</span>\n                </ng-container>\n                \n                <ng-container *ngIf=\"orderingOperation?.usingTemporaryTable\">\n                  <span class=\"critical\">Temporary Table</span>\n                </ng-container>\n              </ng-container>\n            </div>\n          </td>\n        </tr>\n      </ng-container>\n    </tbody>\n  </table>\n</ng-template>\n\n<ng-template #keysPopover let-data=\"data\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngFor=\"let possibleKey of data.possibleKeys\">\n      <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #usingWhere let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #usingIndexCondition let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #accessTypePopover let-data=\"data\">\n  {{accessTypes[data]}}\n</ng-template>\n", styles: ["::ng-deep .query-log-used-key{font-weight:bold}::ng-deep .explain-popover{white-space:pre}.critical{color:red}fs-clipboard-button{float:right}.query{white-space:break-spaces}.access-type{color:green}.access-type.fulltext,.access-type.index,.access-type.range{color:orange}.access-type.ALL{color:red}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i2$1.FsClipboardButtonComponent, selector: "fs-clipboard-button", inputs: ["content"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i7.FsPopoverComponent, selector: "fs-popover" }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsFormatTruncate": i9.FsFormatTruncatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryLogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './query-log.component.html',
+                    styleUrls: ['./query-log.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialog }]; } });
+
+class QueryLogsComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+    }
+    openQueryLog(queryLog) {
+        this._dialog.open(QueryLogComponent, {
+            data: { queryLog },
+            width: '100%',
+        });
+    }
+    ngOnInit() {
+        this.listConfig = {
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+                {
+                    name: 'optimized',
+                    type: ItemType.Select,
+                    label: 'Optimization',
+                    values: [
+                        { name: 'Any', value: undefined },
+                        { name: 'Yes', value: 'true' },
+                        { name: 'No', value: 'false' },
+                    ],
+                },
+                {
+                    name: 'createDate',
+                    type: ItemType.DateTimeRange,
+                    label: ['From Date', 'To Date'],
+                },
+                {
+                    name: 'duration',
+                    type: ItemType.Range,
+                    label: ['Min Duration', 'Max Duration'],
+                },
+            ],
+            actions: [
+                {
+                    label: 'Purge',
+                    primary: false,
+                    click: () => {
+                        this.purgeQueryLogs()
+                            .subscribe(() => {
+                            this.list.reload();
+                        });
+                    },
+                },
+            ],
+            fetch: (query) => {
+                return this.loadQueryLogs(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            },
+        };
+    }
+}
+QueryLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+QueryLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueryLogsComponent, selector: "ng-component", inputs: { loadQueryLogs: "loadQueryLogs", purgeQueryLogs: "purgeQueryLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column title=\"Optimized\" name=\"optimized\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <span [ngClass]=\"{ optimized: row.optimized, 'not-optimized': !row.optimized }\">\n        {{row.optimized ? 'Yes' : 'No'}}\n      </span>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Duration\" name=\"duration\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.duration}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Cost\" name=\"query_cost\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.queryCost}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Query\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openQueryLog(row)\">{{ row.query | fsFormatTruncate: 500 }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Created\" name=\"query_log_id\" [sortable]=\"true\" [direction]=\"'desc'\" [sortableDefault]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .optimized{color:green}:host ::ng-deep .not-optimized{color:red}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsFormatTruncate": i9.FsFormatTruncatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryLogsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './query-logs.component.html',
+                    styleUrls: ['./query-logs.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }], loadQueryLogs: [{
+                type: Input
+            }], purgeQueryLogs: [{
+                type: Input
+            }] } });
+
+class FsSystemQueryLogsModule {
+}
+FsSystemQueryLogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemQueryLogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsSystemQueryLogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemQueryLogsModule, declarations: [QueryLogsComponent,
+        QueryLogComponent,
+        ExplainComponent], imports: [CommonModule,
+        RouterModule,
+        CommonModule,
+        FormsModule,
+        MatTabsModule,
+        MatButtonModule,
+        MatDialogModule,
+        FsFormModule,
+        FsLabelModule,
+        FsPopoverModule,
+        FsCommonModule,
+        FsDateModule,
+        FsDialogModule,
+        FsListModule,
+        FsClipboardModule] });
+FsSystemQueryLogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemQueryLogsModule, imports: [[
+            CommonModule,
+            RouterModule,
+            CommonModule,
+            FormsModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatDialogModule,
+            FsFormModule,
+            FsLabelModule,
+            FsPopoverModule,
+            FsCommonModule,
+            FsDateModule,
+            FsDialogModule,
+            FsListModule,
+            FsClipboardModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemQueryLogsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        CommonModule,
+                        FormsModule,
+                        MatTabsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        FsFormModule,
+                        FsLabelModule,
+                        FsPopoverModule,
+                        FsCommonModule,
+                        FsDateModule,
+                        FsDialogModule,
+                        FsListModule,
+                        FsClipboardModule,
+                    ],
+                    declarations: [
+                        QueryLogsComponent,
+                        QueryLogComponent,
+                        ExplainComponent,
+                    ],
+                }]
+        }] });
 
 var CronState;
 (function (CronState) {
@@ -160,7 +376,7 @@ class ApiLogComponent {
     }
 }
 ApiLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\n\n  <div mat-dialog-title>API Log</div>\n\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-large.wrap\">\n      <div>\n        <fs-label-field>\n          <fs-label>\n            Type\n          </fs-label>\n          {{apiLog.type}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          {{apiLogStates[apiLog.state]}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.code\">\n          <fs-label>\n            Code\n          </fs-label>\n          {{apiLog.code}}\n        </fs-label-field>\n\n      </div>\n      <div>\n        <fs-label-field>\n          <fs-label>\n            Date\n          </fs-label>\n          {{apiLog.createDate|fsDateFormat: 'full-date-time'}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.direction\">\n          <fs-label>\n            Direction\n          </fs-label>\n          {{apiLog.direction}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.length\">\n          <fs-label>\n            Duration\n          </fs-label>\n          {{ apiLog.length | fsDateDuration }}\n        </fs-label-field>\n      </div>\n    </div>\n\n    <div>\n      <fs-label-field *ngIf=\"apiLog.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{apiLog.message}}\n      </fs-label-field>\n    </div>\n\n\n    <div class=\"fs-row.gap-large.wrap\">\n      <div>\n        <fs-label-field *ngIf=\"apiLog.method\">\n          <fs-label>\n            Method\n          </fs-label>\n          {{apiLog.method}}\n        </fs-label-field>\n      </div>\n      <div>\n        <fs-label-field *ngIf=\"apiLog.url\">\n          <fs-label>\n            URL\n          </fs-label>\n          {{apiLog.url}}\n        </fs-label-field>\n      </div>\n    </div>\n\n    <div>\n      <fs-label-field *ngIf=\"apiLog.request\">\n        <fs-label>\n          Request\n        </fs-label>\n        <pre>{{apiLog.request|json}}</pre>\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.response\">\n        <fs-label>\n          Response\n        </fs-label>\n        <pre>{{apiLog.response|json}}</pre>\n      </fs-label-field>\n    </div>\n  </mat-dialog-content>\n\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "fsDateDuration": i4$1.FsDateDurationPipe, "json": i7.JsonPipe } });
+ApiLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\n\n  <div mat-dialog-title>API Log</div>\n\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-large.wrap\">\n      <div>\n        <fs-label-field>\n          <fs-label>\n            Type\n          </fs-label>\n          {{apiLog.type}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          {{apiLogStates[apiLog.state]}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.code\">\n          <fs-label>\n            Code\n          </fs-label>\n          {{apiLog.code}}\n        </fs-label-field>\n\n      </div>\n      <div>\n        <fs-label-field>\n          <fs-label>\n            Date\n          </fs-label>\n          {{apiLog.createDate|fsDateFormat: 'full-date-time'}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.direction\">\n          <fs-label>\n            Direction\n          </fs-label>\n          {{apiLog.direction}}\n        </fs-label-field>\n\n\n        <fs-label-field *ngIf=\"apiLog.length\">\n          <fs-label>\n            Duration\n          </fs-label>\n          {{ apiLog.length | fsDateDuration }}\n        </fs-label-field>\n      </div>\n    </div>\n\n    <div>\n      <fs-label-field *ngIf=\"apiLog.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{apiLog.message}}\n      </fs-label-field>\n    </div>\n\n\n    <div class=\"fs-row.gap-large.wrap\">\n      <div>\n        <fs-label-field *ngIf=\"apiLog.method\">\n          <fs-label>\n            Method\n          </fs-label>\n          {{apiLog.method}}\n        </fs-label-field>\n      </div>\n      <div>\n        <fs-label-field *ngIf=\"apiLog.url\">\n          <fs-label>\n            URL\n          </fs-label>\n          {{apiLog.url}}\n        </fs-label-field>\n      </div>\n    </div>\n\n    <div>\n      <fs-label-field *ngIf=\"apiLog.request\">\n        <fs-label>\n          Request\n        </fs-label>\n        <pre>{{apiLog.request|json}}</pre>\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.response\">\n        <fs-label>\n          Response\n        </fs-label>\n        <pre>{{apiLog.response|json}}</pre>\n      </fs-label-field>\n    </div>\n  </mat-dialog-content>\n\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "fsDateDuration": i4$1.FsDateDurationPipe, "json": i8.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, decorators: [{
             type: Component,
             args: [{
@@ -187,42 +403,42 @@ class ApiLogsComponent {
                 {
                     type: ItemType.Keyword,
                     name: 'keyword',
-                    label: 'Search'
+                    label: 'Search',
                 },
                 {
                     type: ItemType.Select,
                     name: 'state',
                     label: 'Status',
-                    values: ApiLogStates
+                    values: ApiLogStates,
                 },
                 {
                     name: 'createDate',
                     type: ItemType.DateRange,
                     label: ['From Date', 'To Date'],
-                }
+                },
             ],
-            fetch: query => {
+            fetch: (query) => {
                 Object.assign(query, {});
                 return this.loadApiLogs(query)
                     .pipe(map((response) => ({ data: response.data, paging: response.paging })));
-            }
+            },
         };
     }
     open(apiLog) {
         this._dialog.open(ApiLogComponent, {
-            data: { apiLog: apiLog },
-            width: '85%'
+            data: { apiLog },
+            width: '85%',
         });
     }
 }
 ApiLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n    <fs-list-column>\n      <ng-template fs-list-header>Name</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <a href=\"javascript:;\" (click)=\"open(row)\">\n          {{row.type || 'Unknown'}}\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n        </a>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Status</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        {{apiLogStates[row.state]}}\n        <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n        <ng-template fs-list-header>Message</ng-template>\n        <ng-template fs-list-cell let-row=\"row\">\n          {{row.message}}\n        </ng-template>\n      </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Date</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n", styles: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe } });
+ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n    <fs-list-column>\n      <ng-template fs-list-header>Name</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <a href=\"javascript:;\" (click)=\"open(row)\">\n          {{row.type || 'Unknown'}}\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n        </a>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Status</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        {{apiLogStates[row.state]}}\n        <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n        <ng-template fs-list-header>Message</ng-template>\n        <ng-template fs-list-cell let-row=\"row\">\n          {{row.message}}\n        </ng-template>\n      </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Date</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n", styles: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fs-system-api-logs',
                     templateUrl: './api-logs.component.html',
-                    styleUrls: ['./api-logs.component.scss']
+                    styleUrls: ['./api-logs.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { list: [{
                 type: ViewChild,
@@ -262,7 +478,7 @@ class CronLogComponent {
     }
 }
 CronLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CronLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\r\n  <div mat-dialog-title>Cron Log</div>\r\n  <mat-dialog-content>\r\n    <div class=\"row\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Status\r\n        </fs-label>\r\n        <div [ngStyle]=\"{ color: CronLogStateColors[cronLog.state]}\">\r\n          {{CronLogStates[cronLog.state] || cronLog.state}}\r\n        </div>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        <fs-date-ago [date]=\"cronLog.createDate\"></fs-date-ago>\r\n      </fs-label-field>\r\n    </div>\r\n  \r\n    <fs-label-field *ngIf=\"cronLog.message\">\r\n      <fs-label>\r\n        Message\r\n      </fs-label>\r\n      <div class=\"message\">\r\n        {{cronLog.message}}\r\n      </div>\r\n    </fs-label-field>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+CronLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\r\n  <div mat-dialog-title>Cron Log</div>\r\n  <mat-dialog-content>\r\n    <div class=\"row\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Status\r\n        </fs-label>\r\n        <div [ngStyle]=\"{ color: CronLogStateColors[cronLog.state]}\">\r\n          {{CronLogStates[cronLog.state] || cronLog.state}}\r\n        </div>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        <fs-date-ago [date]=\"cronLog.createDate\"></fs-date-ago>\r\n      </fs-label-field>\r\n    </div>\r\n  \r\n    <fs-label-field *ngIf=\"cronLog.message\">\r\n      <fs-label>\r\n        Message\r\n      </fs-label>\r\n      <div class=\"message\">\r\n        {{cronLog.message}}\r\n      </div>\r\n    </fs-label-field>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, decorators: [{
             type: Component,
             args: [{
@@ -346,7 +562,7 @@ class CronComponent {
     }
 }
 CronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n  <h1 mat-dialog-title>\r\n    Cron\r\n    <div class=\"small\">{{cron.name}}</div>\r\n  </h1>\r\n  <mat-dialog-content>\r\n    <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n      <mat-tab label=\"Overview\">\r\n        <div class=\"row\">\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Status\r\n            </fs-label>\r\n            {{CronStates[cron.state]}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field *ngIf=\"cron.cronSetting\">\r\n            <fs-label>\r\n              Run Frequency\r\n            </fs-label>\r\n            {{cron.cronSetting.summary}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Last Ran\r\n            </fs-label>\r\n            <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n              Never\r\n            </ng-container>\r\n            <ng-template #lastRan>\r\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n              <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n            </ng-template>\r\n          </fs-label-field>\r\n        </div>\r\n\r\n        <fs-label-field *ngIf=\"cron.message\">\r\n          <fs-label>\r\n            Last Message\r\n          </fs-label>\r\n          <div class=\"message\">{{cron.message}}</div>\r\n        </fs-label-field>\r\n      </mat-tab>\r\n      <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n        <ng-template matTabContent>\r\n          <fs-list [config]=\"config\">\r\n            <fs-list-column name=\"state\" title=\"Status\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <a \r\n                    (click)=\"cronLogOpen(row)\"\r\n                    [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n                  {{CronLogStates[row.state] || row.state}}\r\n                </a>\r\n              </ng-template>\r\n            </fs-list-column>\r\n            \r\n            <fs-list-column title=\"Message\" class=\"col-message\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <div class=\"message\">{{row.message}}</div>\r\n              </ng-template>\r\n            </fs-list-column>\r\n            \r\n            <fs-list-column title=\"Duration\" class=\"col-message\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <ng-container *ngIf=\"row.duration\">\r\n                  {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n                </ng-container>\r\n              </ng-template>\r\n            </fs-list-column>\r\n\r\n            <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n              </ng-template>\r\n            </fs-list-column>\r\n          </fs-list> \r\n        </ng-template>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>   \r\n    <button \r\n        mat-button \r\n        [mat-dialog-close]=\"true\" \r\n        color=\"primary\">\r\n      Done\r\n    </button>\r\n    <ng-container *ngIf=\"tabIndex === 0\">\r\n      <button   \r\n          *ngFor=\"let cronAction of cronActions\"\r\n          mat-button \r\n          (click)=\"cronActionClick(cronAction)\">\r\n        {{cronAction.label}}\r\n      </button>  \r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTabContent, selector: "[matTabContent]" }, { type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n  <h1 mat-dialog-title>\r\n    Cron\r\n    <div class=\"small\">{{cron.name}}</div>\r\n  </h1>\r\n  <mat-dialog-content>\r\n    <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n      <mat-tab label=\"Overview\">\r\n        <div class=\"row\">\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Status\r\n            </fs-label>\r\n            {{CronStates[cron.state]}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field *ngIf=\"cron.cronSetting\">\r\n            <fs-label>\r\n              Run Frequency\r\n            </fs-label>\r\n            {{cron.cronSetting.summary}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Last Ran\r\n            </fs-label>\r\n            <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n              Never\r\n            </ng-container>\r\n            <ng-template #lastRan>\r\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n              <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n            </ng-template>\r\n          </fs-label-field>\r\n        </div>\r\n\r\n        <fs-label-field *ngIf=\"cron.message\">\r\n          <fs-label>\r\n            Last Message\r\n          </fs-label>\r\n          <div class=\"message\">{{cron.message}}</div>\r\n        </fs-label-field>\r\n      </mat-tab>\r\n      <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n        <ng-template matTabContent>\r\n          <fs-list [config]=\"config\">\r\n            <fs-list-column name=\"state\" title=\"Status\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <a \r\n                    (click)=\"cronLogOpen(row)\"\r\n                    [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n                  {{CronLogStates[row.state] || row.state}}\r\n                </a>\r\n              </ng-template>\r\n            </fs-list-column>\r\n            \r\n            <fs-list-column title=\"Message\" class=\"col-message\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <div class=\"message\">{{row.message}}</div>\r\n              </ng-template>\r\n            </fs-list-column>\r\n            \r\n            <fs-list-column title=\"Duration\" class=\"col-message\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <ng-container *ngIf=\"row.duration\">\r\n                  {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n                </ng-container>\r\n              </ng-template>\r\n            </fs-list-column>\r\n\r\n            <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n              </ng-template>\r\n            </fs-list-column>\r\n          </fs-list> \r\n        </ng-template>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>   \r\n    <button \r\n        mat-button \r\n        [mat-dialog-close]=\"true\" \r\n        color=\"primary\">\r\n      Done\r\n    </button>\r\n    <ng-container *ngIf=\"tabIndex === 0\">\r\n      <button   \r\n          *ngFor=\"let cronAction of cronActions\"\r\n          mat-button \r\n          (click)=\"cronActionClick(cronAction)\">\r\n        {{cronAction.label}}\r\n      </button>  \r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTabContent, selector: "[matTabContent]" }, { type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, decorators: [{
             type: Component,
             args: [{
@@ -534,7 +750,7 @@ class CronsComponent {
     }
 }
 CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, deps: [{ token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.name}}</a>\r\n      <div *ngIf=\"row.cronSetting\">\r\n        <small>{{row.cronSetting.summary}}</small>\r\n      </div>\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column align=\"center\">\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n        <fs-popover \r\n            [maxWidth]=\"null\"\r\n            [template]=\"statusPopover\" \r\n            size=\"small\">\r\n          <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n        </fs-popover>\r\n        <ng-template #statusPopover>\r\n          <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n          <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #status>\r\n        {{cronStates[row.state]}}\r\n      </ng-template>\r\n      <ng-container *ngIf=\"row.state === CronState.Running\">\r\n        <div class=\"small\">\r\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n        </div>\r\n      </ng-container>      \r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Last Ran</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n        Never\r\n      </ng-container>\r\n      <ng-template #lastRan>\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n        <div class=\"small\" *ngIf=\"row.duration\">\r\n          Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n        </div>\r\n      </ng-template>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$1.FsPopoverComponent, selector: "fs-popover" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe } });
+CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.name}}</a>\r\n      <div *ngIf=\"row.cronSetting\">\r\n        <small>{{row.cronSetting.summary}}</small>\r\n      </div>\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column align=\"center\">\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n        <fs-popover \r\n            [maxWidth]=\"null\"\r\n            [template]=\"statusPopover\" \r\n            size=\"small\">\r\n          <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n        </fs-popover>\r\n        <ng-template #statusPopover>\r\n          <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n          <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #status>\r\n        {{cronStates[row.state]}}\r\n      </ng-template>\r\n      <ng-container *ngIf=\"row.state === CronState.Running\">\r\n        <div class=\"small\">\r\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n        </div>\r\n      </ng-container>      \r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Last Ran</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n        Never\r\n      </ng-container>\r\n      <ng-template #lastRan>\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n        <div class=\"small\" *ngIf=\"row.duration\">\r\n          Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n        </div>\r\n      </ng-template>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i7.FsPopoverComponent, selector: "fs-popover" }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, decorators: [{
             type: Component,
             args: [{
@@ -617,8 +833,8 @@ class DashboardComponent {
         });
     }
 }
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$2.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\r\n\r\n  <div class=\"h2-container\">\r\n\r\n    <div class=\"actions\">\r\n        <h2>Actions</h2>\r\n        <div class=\"fs-row.gap-tiny.wrap\">\r\n          <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n          <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n\r\n          <button\r\n            *ngFor=\"let action of buttonActions\"\r\n            mat-raised-button\r\n            (click)=\"actionClick(action)\">\r\n            {{action.label}}\r\n          </button>\r\n\r\n          <ng-container *ngIf=\"menuActions.length\">\r\n            <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n              <ng-template\r\n                  *ngFor=\"let action of menuActions\"\r\n                  fs-menu-item\r\n                  (click)=\"actionClick(action)\">\r\n                {{action.label}}\r\n              </ng-template>\r\n            </fs-menu>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fs-row.gap-large.wrap\">\r\n      <div>\r\n        <h2>Server</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.serverTimezone}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Hostname</fs-label>\r\n          {{dashboard.serverHostname}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Directory</fs-label>\r\n          {{dashboard.appDirectory}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>System</h2>\r\n        <fs-label-field>\r\n          <fs-label>Mode</fs-label>\r\n          {{dashboard.appMode}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Notification Recipients</fs-label>\r\n          {{dashboard.notifyRecipients.join(', ')}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Database</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Name</fs-label>\r\n          {{dashboard.databaseName}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.databaseTimezone}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div *ngIf=\"build || dashboard.upgrades.length\">\r\n        <h2>Build</h2>\r\n\r\n        <ng-container *ngIf=\"build\">\r\n          <fs-label-field>\r\n            <fs-label>Version</fs-label>\r\n            {{build.version}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>Date</fs-label>\r\n            {{ build.date | fsDateFormat: 'date-time' }}\r\n          </fs-label-field>\r\n        </ng-container>\r\n\r\n        <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n          <fs-label>Pending Upgrades</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n            {{dashboard.upgrades.length}}\r\n            <mat-icon\r\n                [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n                matTooltipClass=\"tooltip-pending-upgrades\"\r\n                >\r\n              warning\r\n            </mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Cron</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Last Ran</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n            <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n            <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n            <mat-icon>warning</mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$3.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\r\n\r\n  <div class=\"h2-container\">\r\n\r\n    <div class=\"actions\">\r\n        <h2>Actions</h2>\r\n        <div class=\"fs-row.gap-tiny.wrap\">\r\n          <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n          <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n\r\n          <button\r\n            *ngFor=\"let action of buttonActions\"\r\n            mat-raised-button\r\n            (click)=\"actionClick(action)\">\r\n            {{action.label}}\r\n          </button>\r\n\r\n          <ng-container *ngIf=\"menuActions.length\">\r\n            <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n              <ng-template\r\n                  *ngFor=\"let action of menuActions\"\r\n                  fs-menu-item\r\n                  (click)=\"actionClick(action)\">\r\n                {{action.label}}\r\n              </ng-template>\r\n            </fs-menu>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fs-row.gap-large.wrap\">\r\n      <div>\r\n        <h2>Server</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.serverTimezone}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Hostname</fs-label>\r\n          {{dashboard.serverHostname}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Directory</fs-label>\r\n          {{dashboard.appDirectory}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>System</h2>\r\n        <fs-label-field>\r\n          <fs-label>Mode</fs-label>\r\n          {{dashboard.appMode}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Notification Recipients</fs-label>\r\n          {{dashboard.notifyRecipients.join(', ')}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Database</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Name</fs-label>\r\n          {{dashboard.databaseName}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.databaseTimezone}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div *ngIf=\"build || dashboard.upgrades.length\">\r\n        <h2>Build</h2>\r\n\r\n        <ng-container *ngIf=\"build\">\r\n          <fs-label-field>\r\n            <fs-label>Version</fs-label>\r\n            {{build.version}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>Date</fs-label>\r\n            {{ build.date | fsDateFormat: 'date-time' }}\r\n          </fs-label-field>\r\n        </ng-container>\r\n\r\n        <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n          <fs-label>Pending Upgrades</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n            {{dashboard.upgrades.length}}\r\n            <mat-icon\r\n                [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n                matTooltipClass=\"tooltip-pending-upgrades\"\r\n                >\r\n              warning\r\n            </mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Cron</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Last Ran</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n            <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n            <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n            <mat-icon>warning</mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{
@@ -627,7 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['dashboard.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$2.FsBuildService }]; }, propDecorators: { init: [{
+        }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$3.FsBuildService }]; }, propDecorators: { init: [{
                 type: Input
             }], upgrade: [{
                 type: Input
@@ -709,7 +925,7 @@ class ProcessComponent {
     }
 }
 ProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\r\n  <div mat-dialog-title>Process</div>\r\n  <mat-dialog-content>\r\n    <div class=\"column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Name\r\n        </fs-label>\r\n        {{process.prettyName}}\r\n      </fs-label-field>\r\n\r\n      <div class=\"fs-row.gap-large.wrap\">\r\n        <fs-label-field>\r\n          <fs-label>\r\n            Status\r\n          </fs-label>\r\n          {{ProcessStates[process.state]}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.notify\">\r\n          <fs-label>\r\n            Notification Email\r\n          </fs-label>\r\n          {{process.notify}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.pid\">\r\n          <fs-label>\r\n            PID\r\n          </fs-label>\r\n          {{process.pid}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div class=\"fs-row.gap-large.wrap\">\r\n        <fs-label-field *ngIf=\"process.createDate\">\r\n          <fs-label>\r\n            Create Date\r\n          </fs-label>\r\n          {{ process.createDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.startDate\">\r\n          <fs-label>\r\n            Start Date\r\n          </fs-label>\r\n          {{ process.startDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.endDate\">\r\n          <fs-label>\r\n            Complete Date\r\n          </fs-label>\r\n          {{ process.endDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.duration\">\r\n          <fs-label>\r\n            Duration\r\n          </fs-label>\r\n          {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <fs-label-field *ngIf=\"process.message\">\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{process.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"process.log\" class=\"log\">\r\n        <fs-label>\r\n          Log\r\n        </fs-label>{{process.log}}\r\n      </fs-label-field>\r\n\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button \r\n        mat-button \r\n        [mat-dialog-close]=\"true\" \r\n        color=\"primary\">\r\n      Close\r\n    </button>\r\n    <button\r\n        *ngIf=\"process.state === ProcessState.Running && data.loadProcess\"\r\n        mat-button\r\n        (click)=\"load()\">\r\n      Refresh\r\n    </button>\r\n    <button \r\n        *ngIf=\"process.state !== ProcessState.Running && data.run\" \r\n        mat-button \r\n        (click)=\"run()\">\r\n      Run\r\n    </button>\r\n    <button\r\n        *ngIf=\"process.filename\"\r\n        mat-button\r\n        (click)=\"download()\">\r\n      Download\r\n    </button>    \r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .log .field-content{white-space:pre-wrap;font-family:monospace;font-size:14px}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\r\n  <div mat-dialog-title>Process</div>\r\n  <mat-dialog-content>\r\n    <div class=\"column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Name\r\n        </fs-label>\r\n        {{process.prettyName}}\r\n      </fs-label-field>\r\n\r\n      <div class=\"fs-row.gap-large.wrap\">\r\n        <fs-label-field>\r\n          <fs-label>\r\n            Status\r\n          </fs-label>\r\n          {{ProcessStates[process.state]}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.notify\">\r\n          <fs-label>\r\n            Notification Email\r\n          </fs-label>\r\n          {{process.notify}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.pid\">\r\n          <fs-label>\r\n            PID\r\n          </fs-label>\r\n          {{process.pid}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div class=\"fs-row.gap-large.wrap\">\r\n        <fs-label-field *ngIf=\"process.createDate\">\r\n          <fs-label>\r\n            Create Date\r\n          </fs-label>\r\n          {{ process.createDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.startDate\">\r\n          <fs-label>\r\n            Start Date\r\n          </fs-label>\r\n          {{ process.startDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.endDate\">\r\n          <fs-label>\r\n            Complete Date\r\n          </fs-label>\r\n          {{ process.endDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.duration\">\r\n          <fs-label>\r\n            Duration\r\n          </fs-label>\r\n          {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <fs-label-field *ngIf=\"process.message\">\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{process.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"process.log\" class=\"log\">\r\n        <fs-label>\r\n          Log\r\n        </fs-label>{{process.log}}\r\n      </fs-label-field>\r\n\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button \r\n        mat-button \r\n        [mat-dialog-close]=\"true\" \r\n        color=\"primary\">\r\n      Close\r\n    </button>\r\n    <button\r\n        *ngIf=\"process.state === ProcessState.Running && data.loadProcess\"\r\n        mat-button\r\n        (click)=\"load()\">\r\n      Refresh\r\n    </button>\r\n    <button \r\n        *ngIf=\"process.state !== ProcessState.Running && data.run\" \r\n        mat-button \r\n        (click)=\"run()\">\r\n      Run\r\n    </button>\r\n    <button\r\n        *ngIf=\"process.filename\"\r\n        mat-button\r\n        (click)=\"download()\">\r\n      Download\r\n    </button>    \r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .log .field-content{white-space:pre-wrap;font-family:monospace;font-size:14px}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, decorators: [{
             type: Component,
             args: [{
@@ -856,7 +1072,7 @@ class ProcessesComponent {
     }
 }
 ProcessesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-ProcessesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", actions: "actions" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.prettyName}}</a>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ProcessStates[row.state]}}\r\n      <small>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">Complete: {{ row.percent }}%</div>\r\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">Download: <a href=\"javascript:;\" (click)=\"download(row)\">{{ row.filename }}</a></div>\r\n        <div *ngIf=\"row.pid\">PID: {{ row.pid }}</div>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">Notify: {{ row.notify }}</div>\r\n      </small>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Duration</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Message</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.message}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Completed</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProcessesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", actions: "actions" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.prettyName}}</a>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ProcessStates[row.state]}}\r\n      <small>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">Complete: {{ row.percent }}%</div>\r\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">Download: <a href=\"javascript:;\" (click)=\"download(row)\">{{ row.filename }}</a></div>\r\n        <div *ngIf=\"row.pid\">PID: {{ row.pid }}</div>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">Notify: {{ row.notify }}</div>\r\n      </small>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Duration</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Message</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.message}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Completed</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i4$1.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, decorators: [{
             type: Component,
             args: [{
@@ -903,7 +1119,7 @@ class ServerLogComponent {
     }
 }
 ServerLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\r\n  <div mat-dialog-title>Log</div>\r\n  <mat-dialog-content>\r\n    <div class=\"fs-column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Error Type\r\n        </fs-label>\r\n        {{log.type}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{log.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          URL\r\n        </fs-label>\r\n        {{log.url}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        {{log.createDate|fsDateFormat: 'full-date-time'}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          File\r\n        </fs-label>\r\n        {{log.file}} @ {{log.line}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Backtrace\r\n        </fs-label>\r\n        <pre>{{log.backtrace|json}}</pre>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          $_SERVER\r\n        </fs-label>\r\n        <pre>{{log.server|json}}</pre>\r\n      </fs-label-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [""], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "json": i7.JsonPipe } });
+ServerLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\r\n  <div mat-dialog-title>Log</div>\r\n  <mat-dialog-content>\r\n    <div class=\"fs-column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Error Type\r\n        </fs-label>\r\n        {{log.type}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{log.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          URL\r\n        </fs-label>\r\n        {{log.url}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        {{log.createDate|fsDateFormat: 'full-date-time'}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          File\r\n        </fs-label>\r\n        {{log.file}} @ {{log.line}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Backtrace\r\n        </fs-label>\r\n        <pre>{{log.backtrace|json}}</pre>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          $_SERVER\r\n        </fs-label>\r\n        <pre>{{log.server|json}}</pre>\r\n      </fs-label-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [""], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$1.FsDateFormatPipe, "json": i8.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, decorators: [{
             type: Component,
             args: [{
@@ -947,7 +1163,7 @@ class ServerLogsComponent {
     }
 }
 ServerLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogsComponent, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Message</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.message}}</a>\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Type</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{row.type}}\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Date</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n", styles: [""], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+ServerLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogsComponent, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Message</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.message}}</a>\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Type</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{row.type}}\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Date</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, decorators: [{
             type: Component,
             args: [{
@@ -975,7 +1191,7 @@ KeyNameValuePipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", ver
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'keyNameValue'
+                    name: 'keyNameValue',
                 }]
         }, {
             type: Injectable
@@ -1074,8 +1290,8 @@ class SettingsComponent {
         });
     }
 }
-SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$3.FsClipboard }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\r\n<mat-accordion>\r\n  <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <div class=\"title-row\">\r\n          <div class=\"title\">{{group || 'General'}}</div>\r\n          <div class=\"actions\">\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"export($event, groupedSettings[group])\">\r\n              <mat-icon>cloud_download</mat-icon>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"import($event, group)\">\r\n              <mat-icon>cloud_upload</mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div \r\n        hideToggle \r\n        *ngFor=\"let setting of groupedSettings[group]\" \r\n        class=\"setting\"\r\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n        <input\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n        <textarea\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        </textarea>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n        <mat-select\r\n            [placeholder]=\"setting.label\"\r\n            [(ngModel)]=\"setting.value\"\r\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\r\n            [name]=\"'setting' + setting.id\">\r\n          <mat-option *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n            {{item.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n        <input\r\n          matInput\r\n          fsDatePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n        <input\r\n          matInput\r\n          fsColorPicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n        <input\r\n          matInput\r\n          fsTimePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <fs-file-picker\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n          [allowRemove]=\"true\"\r\n          [allowDownload]=\"true\"\r\n          (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n          (remove)=\"fileRemove.emit(setting)\"\r\n          [url]=\"setting.value\">\r\n        <div fsFileLabel>{{setting.label}}</div>\r\n        <div fsFileHint>{{setting.instruction}}</div>\r\n      </fs-file-picker>\r\n    </div>\r\n\r\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n  </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], components: [{ type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { type: i11.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { type: i10.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["minWidth", "minHeight", "imageWidth", "imageHeight", "imageQuality", "label", "showFilename", "allowDownload", "allowReupload", "multiple", "allowRemove", "url", "file", "accept", "disabled", "previewWidth", "previewHeight"], outputs: ["select", "remove", "download"] }], directives: [{ type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i12.FsFileLabelDirective, selector: "[fsFileLabel]" }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$1.FsClipboard }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\r\n<mat-accordion>\r\n  <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <div class=\"title-row\">\r\n          <div class=\"title\">{{group || 'General'}}</div>\r\n          <div class=\"actions\">\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"export($event, groupedSettings[group])\">\r\n              <mat-icon>cloud_download</mat-icon>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"import($event, group)\">\r\n              <mat-icon>cloud_upload</mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div \r\n        hideToggle \r\n        *ngFor=\"let setting of groupedSettings[group]\" \r\n        class=\"setting\"\r\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n        <input\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n        <textarea\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        </textarea>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n        <mat-select\r\n            [placeholder]=\"setting.label\"\r\n            [(ngModel)]=\"setting.value\"\r\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\r\n            [name]=\"'setting' + setting.id\">\r\n          <mat-option *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n            {{item.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n        <input\r\n          matInput\r\n          fsDatePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n        <input\r\n          matInput\r\n          fsColorPicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n        <input\r\n          matInput\r\n          fsTimePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <fs-file-picker\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n          [allowRemove]=\"true\"\r\n          [allowDownload]=\"true\"\r\n          (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n          (remove)=\"fileRemove.emit(setting)\"\r\n          [url]=\"setting.value\">\r\n        <div fsFileLabel>{{setting.label}}</div>\r\n        <div fsFileHint>{{setting.instruction}}</div>\r\n      </fs-file-picker>\r\n    </div>\r\n\r\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n  </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], components: [{ type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { type: i11.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { type: i10.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["minWidth", "minHeight", "imageWidth", "imageHeight", "imageQuality", "label", "showFilename", "allowDownload", "allowReupload", "multiple", "allowRemove", "url", "file", "accept", "disabled", "previewWidth", "previewHeight"], outputs: ["select", "remove", "download"] }], directives: [{ type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i12.FsFileLabelDirective, selector: "[fsFileLabel]" }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1084,7 +1300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./settings.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i2$3.FsClipboard }, { type: i3$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
+        }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i2$1.FsClipboard }, { type: i3$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
                 type: Input
             }], save: [{
                 type: Input
@@ -1120,7 +1336,7 @@ class UpgradeLogsComponent {
     }
 }
 UpgradeLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UpgradeLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UpgradeLogsComponent, selector: "fs-system-upgrade-logs", inputs: { loadUpgradeLogs: "loadUpgradeLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.name}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Function</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.function}}()\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Date</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+UpgradeLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UpgradeLogsComponent, selector: "fs-system-upgrade-logs", inputs: { loadUpgradeLogs: "loadUpgradeLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.name}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Function</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.function}}()\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Date</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1274,5 +1490,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, ServerLogComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
+export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, FsSystemQueryLogsModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, ServerLogComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
 //# sourceMappingURL=firestitch-system.js.map