3 |
4 |
{{ isAvailable() ? value : "n/a"}}
5 |
{{ determineUnit(metric?.unit) }}
6 |
{{ 'frontend.de.iteratec.osm.performance-aspect.' + metric?.name + '.user-centric-question' | translate }}
7 |
8 |
9 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../../styles/colors";
2 |
3 | .metric {
4 | margin: 10px 0;
5 | }
6 |
7 | .metric-icon {
8 | display: inline-block;
9 | width: 25px;
10 | text-align: left;
11 | font-size: 18px;
12 | color: $color-text-medium;
13 | }
14 |
15 | .metric-value {
16 | display: inline-block;
17 | min-width: 45px;
18 | text-align: right;
19 | font: {
20 | size: 18px;
21 | weight: bold;
22 | }
23 | color: $color-text-medium;
24 | }
25 |
26 | .metric-unit {
27 | display: inline-block;
28 | margin-left: 3px;
29 | font-size: 14px;
30 | color: $color-text-medium;
31 | }
32 |
33 | .metric-description {
34 | min-width: 120px;
35 | font-size: 12px;
36 | color: $color-text-light;
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {Unit} from "../../../../enums/unit.enum";
3 | import {PerformanceAspectType} from "../../../../models/perfomance-aspect.model";
4 |
5 | @Component({
6 | selector: 'osm-page-metric',
7 | templateUrl: './page-metric.component.html',
8 | styleUrls: ['./page-metric.component.scss']
9 | })
10 |
11 | export class PageMetricComponent {
12 | @Input() metric: PerformanceAspectType;
13 | @Input() value: string;
14 |
15 | Unit: typeof Unit = Unit;
16 |
17 | public isAvailable(): boolean {
18 | return this.value !== '';
19 | }
20 |
21 | determineUnit(unit: string): string {
22 | if (unit === 'ms') {
23 | return Unit.SECONDS
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/components/page/page.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../../styles/colors";
2 |
3 | .page-metrics {
4 | display: flex;
5 | }
6 |
7 | i.icon-right {
8 | float: right;
9 | }
10 |
11 | osm-csi-value-medium {
12 | flex: 1 1 0;
13 | padding-right: 20px;
14 | }
15 |
16 | .metric-list {
17 | flex: 1 1 0;
18 | }
19 |
20 | .aspect-management {
21 | float: right;
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/models/failing-job-statistic.model.ts:
--------------------------------------------------------------------------------
1 | export interface FailingJobStatisticDTO {
2 | minimumFailedJobSuccessRate: number;
3 | numberOfFailingJobs: number;
4 | }
5 |
6 | export class FailingJobStatistic implements FailingJobStatisticDTO {
7 | minimumFailedJobSuccessRate: number;
8 | numberOfFailingJobs: number;
9 |
10 | constructor(dto: FailingJobStatisticDTO) {
11 | this.minimumFailedJobSuccessRate = dto.minimumFailedJobSuccessRate;
12 | this.numberOfFailingJobs = dto.numberOfFailingJobs;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/models/graphite-server.model.ts:
--------------------------------------------------------------------------------
1 | export interface GraphiteServerDTO {
2 | id: number;
3 | address: string;
4 | port: number;
5 | protocol: string;
6 | webAppAddress: string;
7 | prefix: string;
8 | }
9 |
10 | export class GraphiteServer implements GraphiteServerDTO {
11 | id: number;
12 | address: string;
13 | port: number;
14 | protocol: string;
15 | webAppAddress: string;
16 | prefix: string;
17 |
18 | constructor(dto: GraphiteServerDTO) {
19 | this.id = dto.id;
20 | this.address = dto.address;
21 | this.port = dto.port;
22 | this.protocol = dto.protocol;
23 | this.webAppAddress = dto.webAppAddress;
24 | this.prefix = dto.prefix;
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/models/location.model.ts:
--------------------------------------------------------------------------------
1 | export interface BrowserDto {
2 | id: number
3 | name: string
4 | }
5 | export interface LocationDto {
6 | id: Number
7 | name: string
8 | parent: BrowserDto
9 | }
10 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/models/page-csi.model.ts:
--------------------------------------------------------------------------------
1 | export interface PageCsiDto {
2 | pageId: number,
3 | date: string,
4 | csiDocComplete: number
5 | }
6 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/application-dashboard/models/page-metrics.model.ts:
--------------------------------------------------------------------------------
1 | export interface PageMetricsDto {
2 | pageId: number;
3 | pageName: string;
4 | PAGE_CONSTRUCTION_STARTED: number;
5 | PAGE_IS_USABLE: number;
6 | PAGE_SHOWS_USEFUL_CONTENT: number;
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.scss:
--------------------------------------------------------------------------------
1 | a {
2 | margin: 0 10px 20px 0;
3 | }
4 |
5 | .grid-container {
6 | display: grid;
7 | grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
8 | margin: 10px 0 0 0;
9 |
10 | osm-aspect-metrics {
11 | margin: 10px 0 20px 10px;
12 | }
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.scss:
--------------------------------------------------------------------------------
1 | a {
2 | margin: 0 10px 20px 0;
3 | }
4 |
5 | .grid-container {
6 | display: grid;
7 | grid-template-columns: 1fr minmax(300px, 3fr);
8 | margin: 10px 0 0 0;
9 | }
10 |
11 | .btn-aspect-config {
12 | margin: 15px 0 0 0;
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/distribution/distribution.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iteratec/OpenSpeedMonitor/c80ddc2c7491b82a6261e3b2ddc5ea06f90bf823/frontend/src/app/modules/distribution/distribution.component.scss
--------------------------------------------------------------------------------
/frontend/src/app/modules/distribution/models/distribution.model.ts:
--------------------------------------------------------------------------------
1 | export interface DistributionDTO {
2 | identifier: string;
3 | label: string;
4 | jobGroup: string;
5 | measurand: string;
6 | page: string;
7 | data: number[];
8 | median: number;
9 | }
10 |
11 | export class Distribution implements DistributionDTO {
12 | identifier: string;
13 | label: string;
14 | jobGroup: string;
15 | measurand: string;
16 | page: string;
17 | data: number[];
18 | median: number;
19 |
20 | constructor(dto: DistributionDTO) {
21 | this.identifier = dto.identifier;
22 | this.label = dto.label;
23 | this.jobGroup = dto.jobGroup;
24 | this.measurand = dto.measurand;
25 | this.page = dto.page;
26 | this.data = dto.data;
27 | this.median = dto.median;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/distribution/services/violinchart-data.service.spec.ts:
--------------------------------------------------------------------------------
1 | import {TestBed} from '@angular/core/testing';
2 | import {HttpClientTestingModule} from '@angular/common/http/testing';
3 | import {ViolinchartDataService} from './violinchart-data.service';
4 |
5 | describe('ViolinchartDataService', () => {
6 | beforeEach(() =>
7 | TestBed.configureTestingModule({
8 | providers: [
9 | ViolinchartDataService,
10 | ],
11 | imports: [
12 | HttpClientTestingModule
13 | ]
14 | }));
15 |
16 | it('should be created', () => {
17 | const service: ViolinchartDataService = TestBed.get(ViolinchartDataService);
18 | expect(service).toBeTruthy();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/job-threshold/components/threshold-group/threshold-group.component.scss:
--------------------------------------------------------------------------------
1 | osm-threshold {
2 | display: block;
3 | margin-bottom: 20px;
4 | }
5 |
6 | .threshold-group {
7 | display: flex;
8 | justify-content: flex-start;
9 | flex-flow: row wrap;
10 | }
11 |
12 | .measured-event-name {
13 | flex: 0 1 20%;
14 | margin-right: 20px;
15 | }
16 |
17 | label.measured-event-name {
18 | font-size: 1em;
19 | font-weight: bold;
20 | word-break: break-all;
21 | margin-bottom: 20px;
22 | }
23 |
24 | .flex-column-right {
25 | flex-basis: 700px;
26 | flex-grow: 1;
27 | button {
28 | width: auto;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/job-threshold/components/threshold-row/threshold-row.component.scss:
--------------------------------------------------------------------------------
1 | .threshold-row {
2 | display: flex;
3 | justify-content: flex-start;
4 | align-content: center;
5 | line-height: 2;
6 |
7 | > * {
8 | margin-right: 5px;
9 | }
10 |
11 | span {
12 | font-weight: bold;
13 | text-align: center;
14 | font-size: 1.15em;
15 | }
16 | }
17 |
18 | .input-group {
19 | max-width: 9.4em;
20 | margin-right: 5px;
21 | flex-shrink: 0;
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/app/modules/job-threshold/components/threshold/threshold.component.html:
--------------------------------------------------------------------------------
1 |