@@ -28,5 +30,39 @@
{{ device.mac_addr }}
-
+
+
+
+
+
{{ device.manufacturer }}
+
+ edit_square
+
+ {{ device.model }}
+
+
+ {{ device.mac_addr }}
+
+
+
+
+ play_arrow
+
+
diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss
index b7025ff76..d636b4727 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.scss
+++ b/modules/ui/src/app/components/device-item/device-item.component.scss
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@use '@angular/material' as mat;
@import '../../../theming/colors';
@import '../../../theming/variables';
@@ -22,39 +23,103 @@ $border-radius: 12px;
.device-item {
display: grid;
width: $device-item-width;
+ height: 80px;
border-radius: $border-radius;
border: 1px solid #c4c7c5;
background: $white;
box-sizing: border-box;
- grid-template-columns: 1fr 1fr $icon-width;
+ grid-template-columns: 1fr 1fr;
padding: 0;
grid-column-gap: 8px;
grid-row-gap: 4px;
font-family: 'Open Sans', sans-serif;
grid-template-areas:
- 'manufacturer manufacturer icon'
- 'name address icon';
+ 'manufacturer manufacturer'
+ 'name address';
&:hover {
cursor: pointer;
}
+
+ &.non-interective {
+ &:hover {
+ cursor: default;
+ }
+ }
+}
+
+.device-item-with-actions {
+ display: grid;
+ width: $device-item-width;
+ border-radius: $border-radius;
+ border: 1px solid #c4c7c5;
+ background: $white;
+ box-sizing: border-box;
+ grid-template-columns: 1fr $icon-width;
+ grid-column-gap: 1px;
+ padding: 0;
+ font-family: 'Open Sans', sans-serif;
+ grid-template-areas: 'edit start';
+}
+
+.button-edit {
+ display: grid;
+ grid-area: edit;
+ background: $white;
+ box-sizing: border-box;
+ grid-template-columns: 1fr 1fr;
+ padding: 0 6px 0 0;
+ grid-column-gap: 8px;
+ grid-row-gap: 4px;
+ font-family: 'Open Sans', sans-serif;
+ grid-template-areas:
+ 'manufacturer manufacturer'
+ 'name address';
+ border-radius: $border-radius 0 0 $border-radius;
+ border: none;
+
+ &:hover {
+ cursor: pointer;
+
+ .item-manufacturer-text {
+ max-width: 206px;
+ }
+
+ .item-manufacturer-icon {
+ visibility: visible;
+ }
+ }
}
.item-manufacturer {
+ display: flex;
padding: 0 16px;
grid-area: manufacturer;
justify-self: start;
align-self: end;
color: #1f1f1f;
- justify-content: start;
+ justify-content: flex-start;
font-size: 16px;
font-weight: 500;
line-height: 24px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 230px;
text-align: start;
+ gap: 4px;
+
+ .item-manufacturer-text {
+ margin: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 230px;
+ }
+
+ .item-manufacturer-icon {
+ display: flex;
+ visibility: hidden;
+ font-size: 20px;
+ align-items: center;
+ justify-content: center;
+ }
}
.item-name {
@@ -83,13 +148,27 @@ $border-radius: 12px;
line-height: 20px;
}
-.item-icon {
- grid-area: icon;
+.button-start {
+ grid-area: start;
width: $icon-width;
height: calc($icon-width - 2px);
- background-color: #e8f0fe;
+ background-color: mat.get-color-from-palette($color-primary, 50);
justify-self: end;
- border-top-right-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
- background-image: url(/assets/icons/devices_add.svg);
+ border-radius: 0 $border-radius $border-radius 0;
+
+ &:hover,
+ &:focus-visible {
+ background-color: mat.get-color-from-palette($color-primary, 600);
+
+ .button-start-icon {
+ color: $white;
+ }
+ }
+}
+
+.button-start-icon {
+ margin: 0;
+ width: 24px;
+ height: 24px;
+ font-size: 24px;
}
diff --git a/modules/ui/src/app/components/device-item/device-item.component.spec.ts b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
index 2105fd66e..e94188040 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.spec.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Device } from '../../model/device';
+import { Device, DeviceView } from '../../model/device';
import { DeviceItemComponent } from './device-item.component';
import { DeviceRepositoryModule } from '../../device-repository/device-repository.module';
@@ -48,29 +48,59 @@ describe('DeviceItemComponent', () => {
expect(component).toBeTruthy();
});
- it('should display information about device', () => {
- const name = compiled.querySelector('.item-name');
- const manufacturer = compiled.querySelector('.item-manufacturer');
- const mac = compiled.querySelector('.item-mac-address');
+ describe('with device view as Basic', () => {
+ beforeEach(() => {
+ component.deviceView = DeviceView.Basic;
+ fixture.detectChanges();
+ });
- expect(name?.textContent?.trim()).toEqual('O3-DIN-CPU');
- expect(manufacturer?.textContent?.trim()).toEqual('Delta');
- expect(mac?.textContent?.trim()).toEqual('00:1e:42:35:73:c4');
- });
+ it('should display information about device', () => {
+ const name = compiled.querySelector('.item-name');
+ const manufacturer = compiled.querySelector('.item-manufacturer');
+ const mac = compiled.querySelector('.item-mac-address');
+
+ expect(name?.textContent?.trim()).toEqual('O3-DIN-CPU');
+ expect(manufacturer?.textContent?.trim()).toEqual('Delta');
+ expect(mac?.textContent?.trim()).toEqual('00:1e:42:35:73:c4');
+ });
- it('should emit mac address', () => {
- const clickSpy = spyOn(component.itemClicked, 'emit');
- const item = compiled.querySelector('.device-item') as HTMLElement;
- item.click();
+ it('should emit mac address', () => {
+ const clickSpy = spyOn(component.itemClicked, 'emit');
+ const item = compiled.querySelector('.device-item') as HTMLElement;
+ item.click();
- expect(clickSpy).toHaveBeenCalledWith(component.device);
+ expect(clickSpy).toHaveBeenCalledWith(component.device);
+ });
+
+ it('should have tabindex', () => {
+ component.tabIndex = -2;
+ fixture.detectChanges();
+ const item = compiled.querySelector('.device-item') as HTMLElement;
+
+ expect(item.tabIndex).toBe(-2);
+ });
});
- it('should have tabindex', () => {
- component.tabIndex = -2;
- fixture.detectChanges();
- const item = compiled.querySelector('.device-item') as HTMLElement;
+ describe('with device view as WithActions', () => {
+ beforeEach(() => {
+ component.deviceView = DeviceView.WithActions;
+ fixture.detectChanges();
+ });
- expect(item.tabIndex).toBe(-2);
+ it('should emit device on click edit button', () => {
+ const clickSpy = spyOn(component.itemClicked, 'emit');
+ const editBtn = compiled.querySelector('.button-edit') as HTMLElement;
+ editBtn.click();
+
+ expect(clickSpy).toHaveBeenCalledWith(component.device);
+ });
+
+ it('should emit device on click start button', () => {
+ const clickSpy = spyOn(component.startTestrunClicked, 'emit');
+ const editBtn = compiled.querySelector('.button-start') as HTMLElement;
+ editBtn.click();
+
+ expect(clickSpy).toHaveBeenCalledWith(component.device);
+ });
});
});
diff --git a/modules/ui/src/app/components/device-item/device-item.component.ts b/modules/ui/src/app/components/device-item/device-item.component.ts
index a72d2516d..2b1c44e0f 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.ts
@@ -14,24 +14,34 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Device } from '../../model/device';
+import { Device, DeviceView } from '../../model/device';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-device-item',
templateUrl: './device-item.component.html',
styleUrls: ['./device-item.component.scss'],
standalone: true,
+ imports: [CommonModule, MatButtonModule, MatIconModule],
})
export class DeviceItemComponent {
@Input() device!: Device;
@Input() tabIndex = 0;
+ @Input() deviceView!: string;
@Output() itemClicked = new EventEmitter
();
+ @Output() startTestrunClicked = new EventEmitter();
+ readonly DeviceView = DeviceView;
itemClick(): void {
this.itemClicked.emit(this.device);
}
+ startTestrunClick(): void {
+ this.startTestrunClicked.emit(this.device);
+ }
get label() {
- return `${this.device.model} ${this.device.manufacturer} ${this.device.mac_addr}`;
+ return `${this.device.manufacturer} ${this.device.model} ${this.device.mac_addr}`;
}
}
diff --git a/modules/ui/src/app/components/general-settings/general-settings.component.html b/modules/ui/src/app/components/general-settings/general-settings.component.html
index 60d66f116..c698e167f 100644
--- a/modules/ui/src/app/components/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/components/general-settings/general-settings.component.html
@@ -16,8 +16,7 @@
-
- If a port is missing from this list, you can
-
- Refresh
-
- the Connection settings
-
-
- Both interfaces must have different values
-
-
;
- let testRunServiceMock: jasmine.SpyObj;
+ let testRunServiceMock: SpyObj;
+ let mockLiveAnnouncer: SpyObj;
let compiled: HTMLElement;
beforeEach(async () => {
@@ -54,6 +68,7 @@ describe('GeneralSettingsComponent', () => {
'createSystemConfig',
'hasConnectionSetting$',
'setHasConnectionSetting',
+ 'systemConfig$',
]);
testRunServiceMock.getSystemInterfaces.and.returnValue(of({}));
testRunServiceMock.getSystemConfig.and.returnValue(
@@ -62,8 +77,11 @@ describe('GeneralSettingsComponent', () => {
testRunServiceMock.createSystemConfig.and.returnValue(
of(MOCK_SYSTEM_CONFIG_WITH_DATA)
);
+ testRunServiceMock.systemConfig$ = of(MOCK_SYSTEM_CONFIG_EMPTY);
testRunServiceMock.hasConnectionSetting$ = of(true);
+ mockLiveAnnouncer = jasmine.createSpyObj(['announce']);
+
await TestBed.configureTestingModule({
declarations: [
GeneralSettingsComponent,
@@ -71,13 +89,19 @@ describe('GeneralSettingsComponent', () => {
FakeSpinnerComponent,
FakeCalloutComponent,
],
- providers: [{ provide: TestRunService, useValue: testRunServiceMock }],
+ providers: [
+ { provide: TestRunService, useValue: testRunServiceMock },
+ { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
+ ],
imports: [
+ BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatRadioModule,
ReactiveFormsModule,
MatIconTestingModule,
+ MatInputModule,
+ MatSelectModule,
],
}).compileComponents();
@@ -95,14 +119,15 @@ describe('GeneralSettingsComponent', () => {
testRunServiceMock.getSystemConfig.and.returnValue(
of(MOCK_SYSTEM_CONFIG_WITH_DATA)
);
+ component.interfaces = { mockDeviceKey: 'mockDeviceValue' };
+
+ const expectedDevice = { key: 'mockDeviceKey', value: 'mockDeviceValue' };
component.ngOnInit();
- expect(component.deviceControl.value).toBe(
- MOCK_SYSTEM_CONFIG_WITH_DATA?.network?.device_intf
- );
- expect(component.internetControl.value).toBe(
- MOCK_SYSTEM_CONFIG_WITH_DATA?.network?.internet_intf
+ expect(component.deviceControl.value).toEqual(expectedDevice);
+ expect(component.internetControl.value).toEqual(
+ component.defaultInternetOption
);
});
@@ -117,29 +142,48 @@ describe('GeneralSettingsComponent', () => {
describe('#closeSetting', () => {
beforeEach(() => {
testRunServiceMock.systemConfig$ = of(MOCK_SYSTEM_CONFIG_WITH_DATA);
+ component.interfaces = MOCK_INTERFACES;
});
it('should emit closeSettingEvent', () => {
spyOn(component.closeSettingEvent, 'emit');
- component.closeSetting();
+ component.closeSetting('Message');
expect(component.closeSettingEvent.emit).toHaveBeenCalled();
});
+ it('should call liveAnnouncer with provided message', () => {
+ const mockMessage = 'mock event';
+
+ component.closeSetting(mockMessage);
+
+ expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
+ `The ${mockMessage} finished. The connection setting panel is closed.`
+ );
+ });
+
it('should call reset settingForm', () => {
spyOn(component.settingForm, 'reset');
- component.closeSetting();
+ component.closeSetting('Message');
expect(component.settingForm.reset).toHaveBeenCalled();
});
it('should set value of settingForm on setSystemSetting', () => {
- component.closeSetting();
+ component.closeSetting('Message');
- expect(component.settingForm.value).toEqual(
- MOCK_SYSTEM_CONFIG_WITH_DATA.network
+ const expectedDevice = { key: 'mockDeviceKey', value: 'mockDeviceValue' };
+ const expectedInternet = {
+ key: 'mockInternetKey',
+ value: 'mockInternetValue',
+ };
+
+ expect(component.settingForm.value.device_intf).toEqual(expectedDevice);
+
+ expect(component.settingForm.value.internet_intf).toEqual(
+ expectedInternet
);
});
});
@@ -162,18 +206,24 @@ describe('GeneralSettingsComponent', () => {
});
it('should call createSystemConfig when setting form valid', () => {
- component.deviceControl.setValue(
- MOCK_SYSTEM_CONFIG_WITH_DATA?.network?.device_intf
- );
- component.internetControl.setValue(
- MOCK_SYSTEM_CONFIG_WITH_DATA?.network?.internet_intf
- );
+ const expectedResult = {
+ network: {
+ device_intf: 'mockDeviceKey',
+ internet_intf: '',
+ },
+ };
+
+ component.deviceControl.setValue({
+ key: 'mockDeviceKey',
+ value: 'mockDeviceValue',
+ });
+ component.internetControl.setValue(component.defaultInternetOption);
component.saveSetting();
expect(component.settingForm.invalid).toBeFalse();
expect(testRunServiceMock.createSystemConfig).toHaveBeenCalledWith(
- MOCK_SYSTEM_CONFIG_WITH_DATA
+ expectedResult
);
});
});
diff --git a/modules/ui/src/app/components/general-settings/general-settings.component.ts b/modules/ui/src/app/components/general-settings/general-settings.component.ts
index 14a02c6b1..c26c535da 100644
--- a/modules/ui/src/app/components/general-settings/general-settings.component.ts
+++ b/modules/ui/src/app/components/general-settings/general-settings.component.ts
@@ -21,12 +21,7 @@ import {
OnInit,
Output,
} from '@angular/core';
-import {
- FormBuilder,
- FormControl,
- FormGroup,
- Validators,
-} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Subject, takeUntil, tap } from 'rxjs';
import {
SystemInterfaces,
@@ -36,6 +31,9 @@ import { OnlyDifferentValuesValidator } from './only-different-values.validator'
import { CalloutType } from '../../model/callout-type';
import { Observable } from 'rxjs/internal/Observable';
import { shareReplay } from 'rxjs/internal/operators/shareReplay';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { EventType } from '../../model/event-type';
+import { SettingOption } from '../../model/setting';
@Component({
selector: 'app-general-settings',
@@ -43,12 +41,25 @@ import { shareReplay } from 'rxjs/internal/operators/shareReplay';
styleUrls: ['./general-settings.component.scss'],
})
export class GeneralSettingsComponent implements OnInit, OnDestroy {
- @Input() interfaces: SystemInterfaces = {};
+ private _interfaces: SystemInterfaces = {};
+ @Input()
+ get interfaces(): SystemInterfaces {
+ return this._interfaces;
+ }
+ set interfaces(value: SystemInterfaces) {
+ this._interfaces = value;
+ this.setSystemSetting();
+ }
@Output() closeSettingEvent = new EventEmitter();
@Output() reloadInterfacesEvent = new EventEmitter();
public readonly CalloutType = CalloutType;
+ public readonly EventType = EventType;
public settingForm!: FormGroup;
public isSubmitting = false;
+ public defaultInternetOption = {
+ key: '',
+ value: 'Not specified',
+ };
hasConnectionSetting$!: Observable;
private destroy$: Subject = new Subject();
@@ -75,6 +86,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
constructor(
private readonly testRunService: TestRunService,
private readonly fb: FormBuilder,
+ private liveAnnouncer: LiveAnnouncer,
private readonly onlyDifferentValuesValidator: OnlyDifferentValuesValidator
) {}
@@ -92,9 +104,12 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
this.reloadInterfacesEvent.emit();
}
- closeSetting(): void {
+ closeSetting(message: string): void {
this.resetForm();
this.closeSettingEvent.emit();
+ this.liveAnnouncer.announce(
+ `The ${message} finished. The connection setting panel is closed.`
+ );
this.setSystemSetting();
}
@@ -110,8 +125,8 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
private createSettingForm(): FormGroup {
return (this.settingForm = this.fb.group(
{
- device_intf: ['', Validators.required],
- internet_intf: ['', Validators.required],
+ device_intf: [''],
+ internet_intf: [this.defaultInternetOption],
},
{
validators: [this.onlyDifferentValuesValidator.onlyDifferentSetting()],
@@ -140,12 +155,31 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
});
}
+ compare(c1: SettingOption, c2: SettingOption): boolean {
+ return c1 && c2 && c1.key === c2.key && c1.value === c2.value;
+ }
+
private setDefaultFormValues(
device: string | undefined,
internet: string | undefined
): void {
- this.deviceControl.setValue(device);
- this.internetControl.setValue(internet);
+ if (device && this.interfaces[device]) {
+ const deviceData = this.transformValueToObj(device);
+ this.deviceControl.setValue(deviceData);
+ }
+ if (internet && this.interfaces[internet]) {
+ const interneData = this.transformValueToObj(internet);
+ this.internetControl.setValue(interneData);
+ } else {
+ this.internetControl.setValue(this.defaultInternetOption);
+ }
+ }
+
+ private transformValueToObj(value: string): SettingOption {
+ return {
+ key: value,
+ value: this.interfaces[value],
+ };
}
private cleanFormErrorMessage(): void {
@@ -161,8 +195,8 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
const { device_intf, internet_intf } = this.settingForm.value;
const data = {
network: {
- device_intf,
- internet_intf,
+ device_intf: device_intf.key,
+ internet_intf: internet_intf.key,
},
};
@@ -170,7 +204,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
.createSystemConfig(data)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
- this.closeSetting();
+ this.closeSetting(EventType.Save);
this.testRunService.setSystemConfig(data);
this.testRunService.setHasConnectionSetting(true);
});
@@ -182,9 +216,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
.subscribe(config => {
if (config?.network) {
const { device_intf, internet_intf } = config.network;
- if (device_intf && internet_intf) {
- this.setDefaultFormValues(device_intf, internet_intf);
- }
+ this.setDefaultFormValues(device_intf, internet_intf);
}
});
}
diff --git a/modules/ui/src/app/components/general-settings/only-different-values.validator.ts b/modules/ui/src/app/components/general-settings/only-different-values.validator.ts
index dea0c50dc..351e2bc06 100644
--- a/modules/ui/src/app/components/general-settings/only-different-values.validator.ts
+++ b/modules/ui/src/app/components/general-settings/only-different-values.validator.ts
@@ -39,7 +39,7 @@ export class OnlyDifferentValuesValidator {
return null;
}
- if (deviceControlValue === internetControlValue) {
+ if (deviceControlValue.key === internetControlValue.key) {
return { hasSameValues: true };
}
return null;
diff --git a/modules/ui/src/app/components/version/version.component.ts b/modules/ui/src/app/components/version/version.component.ts
index bd2174623..5adb12bd1 100644
--- a/modules/ui/src/app/components/version/version.component.ts
+++ b/modules/ui/src/app/components/version/version.component.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestRunService } from '../../services/test-run.service';
import { Version } from '../../model/version';
@@ -23,6 +23,8 @@ import { UpdateDialogComponent } from './update-dialog/update-dialog.component';
import { tap } from 'rxjs/internal/operators/tap';
import { Observable } from 'rxjs/internal/Observable';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/internal/operators/takeUntil';
@Component({
selector: 'app-version',
@@ -31,8 +33,11 @@ import { Observable } from 'rxjs/internal/Observable';
templateUrl: './version.component.html',
styleUrls: ['./version.component.scss'],
})
-export class VersionComponent implements OnInit {
+export class VersionComponent implements OnInit, OnDestroy {
version$!: Observable;
+ private destroy$: Subject = new Subject();
+
+ private isDialogClosed = false;
constructor(
private testRunService: TestRunService,
@@ -44,7 +49,7 @@ export class VersionComponent implements OnInit {
this.version$ = this.testRunService.getVersion().pipe(
tap(version => {
- if (version?.update_available) {
+ if (version?.update_available && !this.isDialogClosed) {
this.openUpdateWindow(version);
}
})
@@ -52,7 +57,7 @@ export class VersionComponent implements OnInit {
}
openUpdateWindow(version: Version) {
- this.dialog.open(UpdateDialogComponent, {
+ const dialogRef = this.dialog.open(UpdateDialogComponent, {
ariaLabel: 'Update version',
data: version,
autoFocus: true,
@@ -60,5 +65,15 @@ export class VersionComponent implements OnInit {
disableClose: true,
panelClass: 'version-update-dialog',
});
+
+ dialogRef
+ ?.afterClosed()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => (this.isDialogClosed = true));
+ }
+
+ ngOnDestroy() {
+ this.destroy$.next(true);
+ this.destroy$.unsubscribe();
}
}
diff --git a/modules/ui/src/app/device-repository/device-form/device-form.component.html b/modules/ui/src/app/device-repository/device-form/device-form.component.html
index be653726f..e8ce4ac98 100644
--- a/modules/ui/src/app/device-repository/device-form/device-form.component.html
+++ b/modules/ui/src/app/device-repository/device-form/device-form.component.html
@@ -13,7 +13,11 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-