added highlighting in single value widget & usability fixes; fix #SNR…

…GY-3172

src/app/widgets/single-value/dialog/add-threshold/add-threshold.component.html

@@ -0,0 +1,27 @@
+<mat-dialog-content>
+    <div [formGroup]="form" fxLayout="column" >
+        <mat-form-field color="accent">
+            <mat-label>Threshold</mat-label>
+            <input matInput placeholder="Threshold" type="text" formControlName="threshold">
+        </mat-form-field>
+
+        <mat-form-field color="accent">
+            <mat-label>Direction</mat-label>
+            <mat-select formControlName="direction">
+                <mat-option value="<="><=</mat-option>
+                <mat-option value=">=">>=</mat-option>
+            </mat-select>        
+        </mat-form-field>
+
+        <mat-form-field color="accent">
+            <mat-label>Color</mat-label>
+            <input matInput placeholder="Color" type="text" formControlName="color">
+        </mat-form-field>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="accent" type="submit" (click)="cancel()">Cancel</button>
+    <button mat-raised-button color="accent" type="submit" [disabled]="!form.valid" (click)="add()">{{submitButtonText}}</button>
+
+</mat-dialog-actions>

src/app/widgets/single-value/dialog/add-threshold/add-threshold.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+import { AddThresholdComponent } from './add-threshold.component';
+
+describe('AddThresholdComponent', () => {
+  let component: AddThresholdComponent;
+  let fixture: ComponentFixture<AddThresholdComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddThresholdComponent ],
+      providers: [
+        {provide: MatDialogRef, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: []},
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddThresholdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widgets/single-value/dialog/add-threshold/add-threshold.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ValueHighlightConfig } from '../../shared/single-value.model';
+
+@Component({
+    selector: 'single-value-add-threshold',
+    templateUrl: './add-threshold.component.html',
+    styleUrls: ['./add-threshold.component.css']
+})
+export class AddThresholdComponent {
+    form = new FormGroup({
+        threshold: new FormControl<number|null>(null, {validators: Validators.required}),
+        color: new FormControl('', {nonNullable: true, validators: Validators.required}),
+        direction: new FormControl('', {nonNullable: true, validators: Validators.required}),
+    });
+    submitButtonText = 'Add';
+
+    constructor(
+      private dialogRef: MatDialogRef<AddThresholdComponent>,
+      @Inject(MAT_DIALOG_DATA) public config?: ValueHighlightConfig,
+    ) {
+        if(config != null) {
+            this.form.controls.threshold.patchValue(config.threshold);
+            this.form.controls.color.patchValue(config.color);
+            this.form.controls.direction.patchValue(config.direction);
+            this.submitButtonText = 'Update';
+        }
+    }
+
+    cancel() {
+        this.dialogRef.close();
+    }
+
+    add() {
+        this.dialogRef.close(this.form.value);
+    }
+}

src/app/widgets/single-value/dialog/single-value-edit-dialog.component.css

@@ -14,10 +14,22 @@
  * limitations under the License.
  */
 
-table {
-    width: 100%;
-}
 
 mat-radio-group mat-radio-button:not(:first-child) {
     padding-left: 8px;
 }
+
+mat-form-field {
+    width: 100%;
+}
+
+.one-line-form-container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+.one-line-form-container > div {
+    flex: 1;
+    margin-right: 10px
+}