Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-7204: Show License Information depending on license features

Browse Source
This commit is contained in:
Adina Țeudan 2023-08-16 02:18:51 +03:00
parent bd2f37c5c2
commit ac238d0f5f
10 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html
View File

@ -3,31 +3,31 @@
<div class="row">
<div translate="license-info-screen.capacity.active-documents"></div>
<div>{{ licenseService.currentLicenseReport.activeFilesUploadedBytes | size }}</div>
<div>{{ licenseService.selectedLicenseReport.activeFilesUploadedBytes | size }}</div>
</div>
<div class="row">
<div translate="license-info-screen.capacity.archived-documents"></div>
<div>{{ licenseService.currentLicenseReport.archivedFilesUploadedBytes | size }}</div>
<div>{{ licenseService.selectedLicenseReport.archivedFilesUploadedBytes | size }}</div>
</div>
<div class="row">
<div translate="license-info-screen.capacity.trash-documents"></div>
<div>{{ licenseService.currentLicenseReport.trashFilesUploadedBytes | size }}</div>
<div>{{ licenseService.selectedLicenseReport.trashFilesUploadedBytes | size }}</div>
</div>
<div class="row">
<div translate="license-info-screen.capacity.all-documents"></div>
<div>
{{ licenseService.currentLicenseReport.totalFilesUploadedBytes | size }}
<ng-container *ngIf="licenseService.uploadedFilesBytesForCurrentLicensePercentage >= 0">
({{ licenseService.uploadedFilesBytesForCurrentLicensePercentage | number : '1.0-2' }}%)
{{ licenseService.selectedLicenseReport.totalFilesUploadedBytes | size }}
<ng-container *ngIf="licenseService.uploadedFilesBytesForSelectedLicensePercentage >= 0">
({{ licenseService.uploadedFilesBytesForSelectedLicensePercentage | number : '1.0-2' }}%)
</ng-container>
</div>
</div>
<div class="donut-chart-wrapper pl-20">
<redaction-donut-chart
*ngIf="licenseService.uploadedFilesBytesForCurrentLicensePercentage !== -1"
*ngIf="licenseService.uploadedFilesBytesForSelectedLicensePercentage !== -1"
[config]="donutChartConfig"
[direction]="'row'"
[radius]="80"
@ -50,7 +50,7 @@
</div>
<ng-template #capacitySubtitles>
<span *ngIf="licenseService.uploadedFilesBytesForCurrentLicensePercentage <= 100; else exceeded">
<span *ngIf="licenseService.uploadedFilesBytesForSelectedLicensePercentage <= 100; else exceeded">
{{ 'license-info-screen.capacity.storage-capacity' | translate }}
</span>

2
apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.ts
View File

@ -18,7 +18,7 @@ export class LicenseCapacityComponent {
readonly formatSize = size;
donutChartConfig: DonutChartConfig[] = [];
readonly data$ = this.licenseService.selectedLicense$.pipe(
map(() => this.licenseService.currentLicenseReport),
map(() => this.licenseService.selectedLicenseReport),
tap(license => {
this.donutChartConfig = this.#getDonutChartConfig(license);
}),

14
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html
View File

@ -4,9 +4,9 @@
<div class="row">
<div translate="license-info-screen.current-volume-analyzed"></div>
<div>
{{ licenseService.currentLicenseReport.analysedFilesBytes | size }}
<ng-container *ngIf="licenseService.analyzedFilesBytesForCurrentLicensePercentage >= 0">
({{ licenseService.analyzedFilesBytesForCurrentLicensePercentage | number : '1.0-2' }}%)
{{ licenseService.selectedLicenseReport.analysedFilesBytes | size }}
<ng-container *ngIf="licenseService.analyzedFilesBytesForSelectedLicensePercentage >= 0">
({{ licenseService.analyzedFilesBytesForSelectedLicensePercentage | number : '1.0-2' }}%)
</ng-container>
</div>
</div>
@ -21,16 +21,16 @@
<div class="row">
<div translate="license-info-screen.current-analyzed-pages"></div>
<div>
{{ licenseService.currentLicenseReport.numberOfAnalyzedPages }}
<ng-container *ngIf="licenseService.analyzedPagesPercentageForCurrentLicensePercentage >= 0">
({{ licenseService.analyzedPagesPercentageForCurrentLicensePercentage | number : '1.0-2' }}%)
{{ licenseService.selectedLicenseReport.numberOfAnalyzedPages }}
<ng-container *ngIf="licenseService.analyzedPagesPercentageForSelectedLicensePercentage >= 0">
({{ licenseService.analyzedPagesPercentageForSelectedLicensePercentage | number : '1.0-2' }}%)
</ng-container>
</div>
</div>
<div class="row">
<div translate="license-info-screen.ocr-analyzed-pages"></div>
<div>{{ licenseService.currentLicenseReport.numberOfOcrPages }}</div>
<div>{{ licenseService.selectedLicenseReport.numberOfOcrPages }}</div>
</div>
<div *ngIf="!!licenseService.unlicensedPages" class="row">

32
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { LicenseService } from '@services/license.service';
import { map } from 'rxjs/operators';
import { ChartDataset } from 'chart.js';
import { ChartBlue, ChartGreen, ChartRed } from '../../utils/constants';
import { ChartBlue, ChartGreen, ChartRed, LicenseFeatures } from '../../utils/constants';
import { getLabelsFromLicense, getLineConfig } from '../../utils/functions';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { size } from '@iqser/common-ui/lib/utils';
@ -19,13 +19,25 @@ enum ViewMode {
templateUrl: './license-usage.component.html',
styleUrls: ['./license-usage.component.scss'],
})
export class LicenseUsageComponent {
export class LicenseUsageComponent implements OnDestroy {
readonly viewModes = ViewMode;
activeViewMode$ = new BehaviorSubject<ViewMode>(ViewMode.VOLUME);
readonly activeViewMode$ = new BehaviorSubject<ViewMode>(
this.licenseService.getFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY) ? ViewMode.VOLUME : ViewMode.PAGES,
);
readonly data$ = combineLatest([this.licenseService.selectedLicense$, this.activeViewMode$]).pipe(map(() => this.#getData()));
private _subscription: Subscription;
constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {}
constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {
this._subscription = this.licenseService.selectedLicense$
.pipe(map(() => this.licenseService.getFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY) !== undefined))
.subscribe(hasCapacity => {
this.switchView(hasCapacity ? ViewMode.VOLUME : ViewMode.PAGES);
});
}
ngOnDestroy() {
this._subscription.unsubscribe();
}
switchView(mode: ViewMode): void {
this.activeViewMode$.next(mode);
@ -44,7 +56,7 @@ export class LicenseUsageComponent {
return {
datasets: isVolume ? this.#getVolumeDatasets() : this.#getPagesDatasets(),
labels: getLabelsFromLicense(this.licenseService.currentLicenseReport),
labels: getLabelsFromLicense(this.licenseService.selectedLicenseReport),
yAxisLabel: this._translateService.instant(yAxisLabel),
yAxisLabelRight: this._translateService.instant(yAxisLabelRight),
valueFormatter: isVolume ? value => size(value) : undefined,
@ -52,7 +64,7 @@ export class LicenseUsageComponent {
}
#getPagesDatasets(): ChartDataset[] {
const monthlyData = this.licenseService.currentLicenseReport.monthlyData;
const monthlyData = this.licenseService.selectedLicenseReport.monthlyData;
return [
{
@ -85,7 +97,7 @@ export class LicenseUsageComponent {
}
#getVolumeDatasets(): ChartDataset[] {
const monthlyData = this.licenseService.currentLicenseReport.monthlyData;
const monthlyData = this.licenseService.selectedLicenseReport.monthlyData;
const datasets: ChartDataset[] = [
{

2
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
View File

@ -68,7 +68,7 @@
</div>
<red-license-usage></red-license-usage>
<red-license-capacity></red-license-capacity>
<red-license-capacity *ngIf="showCapacity"></red-license-capacity>
</div>
</div>
</div>

7
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
View File

@ -8,6 +8,7 @@ import { LicenseService } from '@services/license.service';
import { Roles } from '@users/roles';
import type { User } from '@red/domain';
import { getCurrentUser } from '@iqser/common-ui/lib/users';
import { LicenseFeatures } from '../utils/constants';
@Component({
templateUrl: './license-screen.component.html',
@ -27,6 +28,10 @@ export class LicenseScreenComponent {
},
];
get showCapacity(): boolean {
return this.licenseService.getFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY) !== undefined;
}
constructor(
readonly configService: ConfigService,
readonly licenseService: LicenseService,
@ -43,7 +48,7 @@ export class LicenseScreenComponent {
const lineBreak = '%0D%0A';
const body = [
this._translateService.instant('license-info-screen.email.body.analyzed', {
pages: this.licenseService.currentLicenseReport.numberOfAnalyzedPages,
pages: this.licenseService.selectedLicenseReport.numberOfAnalyzedPages,
}),
this._translateService.instant('license-info-screen.email.body.licensed', {
pages: this.licenseService.totalLicensedNumberOfPages,

6
apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts
View File

@ -3,3 +3,9 @@ export const ChartGreen = '#5ce594';
export const ChartBlue = '#0389ec';
export const ChartGrey = '#ccced3'; // grey-5
export const ChartBlack = '#283241'; // grey-1
export enum LicenseFeatures {
PROCESSING_PAGES = 'processingPages',
PDFTRON = 'pdftron',
UPLOADED_BYTES_CAPACITY = 'uploadedBytesCapacity',
}

42
apps/red-ui/src/app/services/license.service.ts
View File

@ -1,11 +1,12 @@
import { inject, Injectable } from '@angular/core';
import { GenericService, Toaster } from '@iqser/common-ui';
import { ILicense, ILicenseReport, ILicenseReportRequest, ILicenses } from '@red/domain';
import { ILicense, ILicenseFeature, ILicenseReport, ILicenseReportRequest, ILicenses } from '@red/domain';
import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs';
import { catchError, filter } from 'rxjs/operators';
import dayjs from 'dayjs';
import { NGXLogger } from 'ngx-logger';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { LicenseFeatures } from '../modules/admin/screens/license/utils/constants';
const defaultOnError: ILicenses = {
activeLicense: 'err',
@ -20,12 +21,12 @@ const defaultOnError: ILicenses = {
validUntil: '01-01-2023',
features: [
{
name: 'processingPages',
name: LicenseFeatures.PROCESSING_PAGES,
type: 'NUMBER',
value: '2000000',
},
{
name: 'pdftron',
name: LicenseFeatures.PDFTRON,
type: 'STRING',
value:
'S25lY29uIEFHKGVuLmtuZWNvbi5zd2lzcyk6T0VNOkREQS1SOjpCKzpBTVMoMj' +
@ -42,7 +43,7 @@ const defaultOnError: ILicenses = {
export class LicenseService extends GenericService<ILicenseReport> {
readonly licenseData$: Observable<ILicenses>;
readonly selectedLicense$: Observable<ILicense>;
currentLicenseReport: ILicenseReport = {};
selectedLicenseReport: ILicenseReport = {};
allLicensesReport: ILicenseReport = {};
protected readonly _defaultModelPath = 'report';
readonly #licenseData$ = new BehaviorSubject<ILicenses | undefined>(undefined);
@ -54,11 +55,6 @@ export class LicenseService extends GenericService<ILicenseReport> {
return this.#selectedLicense$.value;
}
get uploadedBytesCapacity(): number {
const uploadedBytesCapacity = this.selectedLicense.features.find(f => f.name === 'uploadedBytesCapacity')?.value || '0';
return parseInt(uploadedBytesCapacity, 10);
}
get activeLicense() {
if (!this.#licenseData$.value) {
return undefined;
@ -74,35 +70,35 @@ export class LicenseService extends GenericService<ILicenseReport> {
return '';
}
return activeLicense.features.find(f => f.name === 'pdftron').value;
return activeLicense.features.find(f => f.name === LicenseFeatures.PDFTRON).value;
}
get totalLicensedNumberOfPages(): number {
const processingPagesFeature = this.selectedLicense.features?.find(f => f.name === 'processingPages');
const processingPagesFeature = this.getFeature(LicenseFeatures.PROCESSING_PAGES);
return Number(processingPagesFeature?.value ?? '0');
}
get analyzedPagesPercentageForCurrentLicensePercentage(): number {
get analyzedPagesPercentageForSelectedLicensePercentage(): number {
return this.totalLicensedNumberOfPages
? (this.currentLicenseReport.numberOfAnalyzedPages / this.totalLicensedNumberOfPages) * 100
? (this.selectedLicenseReport.numberOfAnalyzedPages / this.totalLicensedNumberOfPages) * 100
: -1;
}
get totalBytesCapacity(): number {
const capacityFeature = this.selectedLicense.features?.find(f => f.name === 'uploadedBytesCapacity');
get uploadedBytesCapacity(): number {
const capacityFeature = this.getFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY);
return Number(capacityFeature?.value ?? '0');
}
get analyzedFilesBytesForCurrentLicensePercentage(): number {
return this.totalBytesCapacity ? (this.currentLicenseReport.analysedFilesBytes / this.totalBytesCapacity) * 100 : -1;
get analyzedFilesBytesForSelectedLicensePercentage(): number {
return this.uploadedBytesCapacity ? (this.selectedLicenseReport.analysedFilesBytes / this.uploadedBytesCapacity) * 100 : -1;
}
get uploadedFilesBytesForCurrentLicensePercentage(): number {
return this.totalBytesCapacity ? (this.currentLicenseReport.totalFilesUploadedBytes / this.totalBytesCapacity) * 100 : -1;
get uploadedFilesBytesForSelectedLicensePercentage(): number {
return this.uploadedBytesCapacity ? (this.selectedLicenseReport.totalFilesUploadedBytes / this.uploadedBytesCapacity) * 100 : -1;
}
get unlicensedPages(): number {
return Math.max(0, this.currentLicenseReport.numberOfAnalyzedPages - this.totalLicensedNumberOfPages);
return Math.max(0, this.selectedLicenseReport.numberOfAnalyzedPages - this.totalLicensedNumberOfPages);
}
constructor() {
@ -111,11 +107,15 @@ export class LicenseService extends GenericService<ILicenseReport> {
this.licenseData$ = this.#licenseData$.pipe(filter(licenses => !!licenses));
}
getFeature(name: string): ILicenseFeature | undefined {
return this.selectedLicense.features?.find(f => f.name === name);
}
async loadLicenseData(license: ILicense = this.selectedLicense) {
const startDate = dayjs(license.validFrom);
const endDate = dayjs(license.validUntil);
this.currentLicenseReport = await this.getReport({
this.selectedLicenseReport = await this.getReport({
startDate: startDate.toDate(),
endDate: endDate.toDate(),
});

2
apps/red-ui/src/assets/i18n/redact/en.json
View File

@ -1773,7 +1773,7 @@
"total-ocr-analyzed": "Total OCR Processed Pages",
"total-volume-analyzed": "Total Data Volume Analyzed",
"unlicensed-analyzed": "Unlicensed Analyzed Pages",
"usage-details": "Page Usage Details"
"usage-details": "Usage Details"
},
"license-information": "License Information",
"load-all-annotations-success": "All annotations were loaded and are now visible in the document thumbnails",

2
apps/red-ui/src/assets/i18n/scm/en.json
View File

@ -1773,7 +1773,7 @@
"total-ocr-analyzed": "Total OCR Processed Pages Since {date}",
"total-volume-analyzed": "Total Data Volume Analyzed",
"unlicensed-analyzed": "Unlicensed Analyzed Pages",
"usage-details": "Page Usage Details"
"usage-details": "Usage Details"
},
"license-information": "License Information",
"load-all-annotations-success": "All annotations were loaded and are now visible in the document thumbnails",