Skip to content

Adds new design for test run page for statuses before "In progress" #1130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sofyakurilova merged 1 commit into from
Feb 18, 2025
Merged

Adds new design for test run page for statuses before "In progress" #1130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions modules/ui/src/app/components/spinner/spinner.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,24 @@
justify-content: center;
}

.loader {
width: 36px;
height: 36px;
border: 4px solid mat.get-theme-color($light-theme, primary, 40);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
::ng-deep {
.loader {
width: 36px;
height: 36px;
border: 4px solid mat.get-theme-color($light-theme, primary, 40);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
100% {
transform: rotate(360deg);

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
63 changes: 47 additions & 16 deletions ...i/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,28 @@
<ng-container *ngIf="systemStatus as data">
<div
class="progress-card"
[class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
[ngClass]="getClass(data.status, data.result)"
[class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
aria-live="assertive"
role="alert">
<div>
<p class="progress-card-status-title">Test status</p>
<p class="progress-card-status-text">
<span>{{ getTestStatus(data) }}</span>
<div class="progress-card-info progress-card-info-tests">
<p class="progress-card-info-title">Tests executed</p>
<p class="progress-card-info-text">
<span>{{ getTestsResult(data) }}</span>
</p>
</div>
<div *ngIf="!data.finished" [ngSwitch]="data.status">

<div class="progress-card-info progress-card-info-status">
<p class="progress-card-info-title">Status</p>
<p class="progress-card-info-text">
<span>{{ getTestStatus(data) }}</span>
</p>
</div>

<div
*ngIf="!data.finished"
class="progress-card-status"
[ngSwitch]="data.status">
<ng-container
*ngSwitchCase="StatusOfTestrun.Validating"
[ngTemplateOutlet]="Validating">
Expand Down Expand Up @@ -63,6 +73,7 @@
"></ng-container
></ng-container>
</div>

<ng-container *ngIf="data.finished">
<ng-container *ngIf="data.status !== StatusOfTestrun.InProgress">
<ng-container
Expand All @@ -85,6 +96,7 @@
</ng-container>
</div>
</ng-container>

<ng-template #InProgress let-data="data">
<mat-progress-bar
class="progress-bar"
Expand All @@ -103,23 +115,42 @@
</ng-template>

<ng-template #WaitingForDevice>
<div>
<p class="progress-card-result-title">
Please connect and power on your device
</p>
</div>
<ng-container
*ngTemplateOutlet="
Spinner;
context: {
text: 'Please connect and power on your device',
}
"></ng-container>
</ng-template>

<ng-template #Validating>
<div>
<p class="progress-card-result-title">Validating virtual network</p>
</div>
<ng-container
*ngTemplateOutlet="
Spinner;
context: {
text: 'Validating virtual network',
}
"></ng-container>
</ng-template>

<ng-template #Monitoring>
<div>
<ng-container
*ngTemplateOutlet="
Spinner;
context: {
text: 'Please wait, this could take a few minutes',
}
"></ng-container>
</ng-template>

<ng-template #Spinner let-text="text">
<div class="progress-card-result-loading">
<div class="spinner-container">
<span class="loader"></span>
</div>
<p class="progress-card-result-title">
Please wait, this could take a few minutes
{{ text }}
</p>
</div>
</ng-template>
Expand Down
123 changes: 84 additions & 39 deletions ...i/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,74 +16,119 @@
@use 'node_modules/@angular/material/index' as mat;
@use 'm3-theme' as *;
@use 'colors';
@use 'variables';

:host {
height: auto;
min-height: 152px;
}

.progress-card {
@mixin progress-card-info($background-color, $title-color, $text-color) {
border-radius: variables.$corner-extra-large;
padding: 32px 56px 32px 56px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 295px;
align-items: start;
background-color: $background-color;
box-sizing: border-box;

.progress-card-info-title {
font-family: variables.$font-text;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: $title-color;
}

.progress-card-info-text {
font-family: variables.$font-primary;
font-size: 28px;
line-height: 36px;
font-weight: 400;
color: $text-color;
}
}

.progress-card {
display: grid;
grid-template-areas:
'tests status'
'. .';
width: fit-content;
height: 100%;
min-height: 152px;
box-sizing: border-box;
padding: 16px 32px;
gap: 16px;
padding: 16px 0;

&-pilot {
gap: 6px;
p {
margin: 0;
}

.progress-bar {
padding-bottom: 28px;
}

&.progress {
background-color: mat.get-theme-color($light-theme, primary, 30);
&.progress .progress-card-info-status {
background-color: colors.$primary;
}

&.completed-success {
&.completed-success .progress-card-info-status {
background-color: #188038; /* TODO update with variable*/
}

&.completed-failed {
&.completed-failed .progress-card-info-status {
background-color: colors.$red-800;
}

&.canceled {
&.canceled .progress-card-info-status {
background-color: colors.$secondary;
}
}

p {
margin: 0;
}
.progress-card-info-tests {
grid-area: tests;
@include progress-card-info(
colors.$surface-variant,
colors.$on-surface-variant,
colors.$on-surface
);
justify-self: end;
width: 213px;
}

.progress-card-status-title,
.progress-card-result-title {
color: colors.$white;
font-size: 14px;
line-height: 20px;
white-space: normal;
}
.progress-card-info-status {
grid-area: status;
@include progress-card-info(
colors.$primary,
colors.$primary-container,
colors.$on-primary
);
justify-self: start;
width: 343px;

.progress-card-result-title {
width: 295px;
&-pilot {
gap: 6px;
}
}

.progress-card-status-text,
.progress-card-result-text {
display: flex;
justify-content: space-between;
color: colors.$white;
font-size: 24px;
font-weight: 400;
line-height: 32px;
}
.progress-card-status {
overflow: hidden;
grid-area: 2/1/2/3;
max-width: max-content;
white-space: normal;
}

.progress-card-status-text {
gap: 12px;
.progress-card-result-loading {
border-radius: variables.$corner-extra-extra-large;
padding: 32px 48px 32px 48px;
background-color: colors.$secondary-container;
color: colors.$on-secondary-container;
display: flex;
align-items: center;
.loader {
width: 40px;
height: 40px;
}

.progress-bar {
padding-bottom: 28px;
.progress-card-result-title {
margin-left: 32px;
}
}
12 changes: 6 additions & 6 deletions ...rc/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ describe('ProgressStatusCardComponent', () => {
});

it('should return empty string if no data', () => {
const expectedResult = '';
const expectedResult = '-/-';

const result = component.getTestsResult({} as TestrunStatus);

Expand Down Expand Up @@ -289,7 +289,7 @@ describe('ProgressStatusCardComponent', () => {

it('should have progress card status text as "Incomplete"', () => {
const progressCardStatusText = compiled.querySelector(
'.progress-card-status-text > span'
'.progress-card-info-status .progress-card-info-text > span'
);

expect(progressCardStatusText).not.toBeNull();
Expand Down Expand Up @@ -325,7 +325,7 @@ describe('ProgressStatusCardComponent', () => {

it('should have progress card status text as "In Progress"', () => {
const progressCardStatusText = compiled.querySelector(
'.progress-card-status-text > span'
'.progress-card-info-status .progress-card-info-text > span'
);

expect(progressCardStatusText).not.toBeNull();
Expand Down Expand Up @@ -382,7 +382,7 @@ describe('ProgressStatusCardComponent', () => {

it('should have progress card status text as "Waiting for Device"', () => {
const progressCardStatusText = compiled.querySelector(
'.progress-card-status-text > span'
'.progress-card-info-status .progress-card-info-text > span'
);

expect(progressCardStatusText).not.toBeNull();
Expand Down Expand Up @@ -421,9 +421,9 @@ describe('ProgressStatusCardComponent', () => {
);
});

it('should have progress card status text as "Waiting for Device"', () => {
it('should have progress card status text as "Monitoring"', () => {
const progressCardStatusText = compiled.querySelector(
'.progress-card-status-text > span'
'.progress-card-info-status .progress-card-info-text > span'
);

expect(progressCardStatusText).not.toBeNull();
Expand Down
2 changes: 1 addition & 1 deletion .../ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export class TestrunStatusCardComponent {
}`;
}
}
return '';
return '-/-';
}

public getTestStatus(data: TestrunStatus): string {
Expand Down
Loading
Loading