andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

replace legacy component

Browse Source
This commit is contained in:
Andreas Huber
2023-03-08 19:09:30 +01:00
parent 62cb88e505
commit 6474b5e3c6
12 changed files with 85 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pdb-js/src/app/app.module.ts
View File

@@ -11,17 +11,17 @@ import { HelpPageComponent } from './help-page/help-page.component';
import { UploadPageComponent } from './upload-page/upload-page.component';
import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete';
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar';
import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
import {MatLegacyRadioModule as MatRadioModule} from '@angular/material/legacy-radio';
import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSelectModule} from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip';
import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
import { LimitByComponent } from './limit-by/limit-by.component';

2
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
View File

@@ -2,7 +2,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
import { HttpErrorResponse } from '@angular/common/http';
import { Component, ElementRef, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';

2
pdb-js/src/app/gallery-view/gallery-view.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service';
import { UtilService } from '../utils.service';

6
pdb-js/src/app/limit-by/limit-by.component.html
View File

@@ -1,3 +1,9 @@
<style>
:host {
display: flex;
}
</style>
<mat-form-field class="pdb-form-mid">
<mat-label>Limit By:</mat-label>
<mat-select [(value)]="limitBy">

2
pdb-js/src/app/plot-view/plot-view.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions } from '../plot.service';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import * as moment from 'moment';
import { WidgetDimensions } from '../dashboard.service';

1
pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss
View File

@@ -4,5 +4,6 @@
border-radius: 5px;
box-sizing: border-box;
padding: 5px;
width: 100%;
}

2
pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core';
import {UntypedFormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
import {MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service';
@Component({

10
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -4,7 +4,7 @@
</div>
<div id="date-box">
<mat-form-field>
<mat-form-field class="pdb-form-full-width">
<mat-label>Date Range:</mat-label>
<input matInput id="search-date-range" value="dateRange" name="dates" />
</mat-form-field>
@@ -14,16 +14,16 @@
<div id="filterpanel">
<mat-form-field>
<mat-form-field class="pdb-form-full-width">
<mat-label>Type:</mat-label>
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-form-field class="pdb-form-full-width">
<mat-label>Group By:</mat-label>
<mat-select multiple [(value)]="groupBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
@@ -54,7 +54,7 @@
<mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
<mat-form-field *ngIf="enableGallery">
<mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
<mat-label>Split By:</mat-label>
<mat-select [(value)]="splitBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>

7
pdb-js/src/app/visualization-page/visualization-page.component.scss
View File

@@ -15,7 +15,7 @@
grid:
"query-box query-box date-box" auto
"filters results results" 1fr
/ 17.7em 3fr 21em;
/ 25.5em 3fr 24em;
}
}
@@ -43,9 +43,12 @@
#date-box{
grid-area: date-box;
margin-right: 1em;
}
#filters {
grid-area: filters;
overflow: auto;

2
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap } from '../plot.service';
import { UntypedFormControl, Validators } from '@angular/forms';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import { LimitByComponent } from '../limit-by/limit-by.component';
import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';

52
pdb-js/src/app/y-axis-definition/y-axis-definition.component.html
View File

@@ -1,5 +1,5 @@
<div>
<mat-form-field>
<mat-form-field >
<mat-label>Y{{yIndex}}-Axis Scale:</mat-label>
<mat-select [(value)]="yAxisScale">
<mat-option value="LOG10">Logarithm</mat-option>
@@ -7,27 +7,31 @@
</mat-select>
</mat-form-field>
<mat-form-field class="pdb-form-mid">
<mat-label>Y{{yIndex}}-Axis Unit:</mat-label>
<mat-select [(value)]="yAxisUnit">
<mat-optgroup label="⸺numbers⸺">
<mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option>
<mat-option value="NO_UNIT">no unit</mat-option>
</mat-optgroup>
<mat-optgroup label="⸺time⸺">
<mat-option value="AUTOMATIC_TIME">auto (time)</mat-option>
<mat-option value="MILLISECONDS">millis</mat-option>
<mat-option value="SECONDS">seconds</mat-option>
<mat-option value="MINUTES">minutes</mat-option>
<mat-option value="HOURS">hours</mat-option>
<mat-option value="DAYS">days</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
<input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
</mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
<input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
</mat-form-field>
<div>
<mat-form-field class="pdb-form-mid">
<mat-label>Y{{yIndex}}-Axis Unit:</mat-label>
<mat-select [(value)]="yAxisUnit">
<mat-optgroup label="⸺numbers⸺">
<mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option>
<mat-option value="NO_UNIT">no unit</mat-option>
</mat-optgroup>
<mat-optgroup label="⸺time⸺">
<mat-option value="AUTOMATIC_TIME">auto (time)</mat-option>
<mat-option value="MILLISECONDS">millis</mat-option>
<mat-option value="SECONDS">seconds</mat-option>
<mat-option value="MINUTES">minutes</mat-option>
<mat-option value="HOURS">hours</mat-option>
<mat-option value="DAYS">days</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
<mat-label>Min:</mat-label>
<input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
</mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
<mat-label>Max:</mat-label>
<input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
</mat-form-field>
</div>
</div>