Additional features for configuring skysocks-client in the manager

static/skywire-manager-src/proxy.config.json

@@ -12,6 +12,14 @@
       "^/http-api" : "/api"
     }
   },
+  "/discovery-api": {
+    "target": "http://127.0.0.1:8001",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/discovery-api" : "/api"
+    }
+  },
   "/wss-api": {
     "target": "wss://127.0.0.1:8000",
     "secure": false,

static/skywire-manager-src/src/app/app.datatypes.ts

@@ -53,3 +53,12 @@ export interface HealthInfo {
   route_finder?: number;
   setup_node?: number;
 }
+
+export class ProxyDiscoveryEntry {
+  address: string;
+  pk: string;
+  port: string;
+  country?: string;
+  region?: string;
+  location?: string;
+}

static/skywire-manager-src/src/app/app.module.ts

@@ -70,6 +70,12 @@ import { SkysocksSettingsComponent } from './components/pages/node/apps/node-app
 import {
   SkysocksClientSettingsComponent
 } from './components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component';
+import {
+  EditSkysocksClientNoteComponent
+} from './components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component';
+import {
+  SkysocksClientFilterComponent
+} from './components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component';
 import { FiltersSelectionComponent } from './components/layout/filters-selection/filters-selection.component';
 import { LabeledElementTextComponent } from './components/layout/labeled-element-text/labeled-element-text.component';
 import { AllLabelsComponent } from './components/pages/settings/all-labels/all-labels.component';
@@ -132,6 +138,8 @@ const globalRippleConfig: RippleGlobalOptions = {
     AllLabelsComponent,
     LabelListComponent,
     UpdateComponent,
+    EditSkysocksClientNoteComponent,
+    SkysocksClientFilterComponent,
   ],
   imports: [
     BrowserModule,

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html

@@ -0,0 +1,8 @@
+<app-dialog [headline]="'apps.skysocks-client-settings.change-note-dialog.title' | translate">
+  <form [formGroup]="form">
+    <mat-form-field>
+      <input #firstInput [placeholder]="'apps.skysocks-client-settings.change-note-dialog.note' | translate" formControlName="note" maxlength="100" matInput>
+    </mat-form-field>
+    <app-button class="float-right" color="primary" type="mat-raised-button" (action)="finish()">{{ 'common.save' | translate }}</app-button>
+  </form>
+</app-dialog>

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditSkysocksClientNoteComponent } from './edit-skysocks-client-note.component';
+
+describe('EditSkysocksClientNoteComponent', () => {
+  let component: EditSkysocksClientNoteComponent;
+  let fixture: ComponentFixture<EditSkysocksClientNoteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditSkysocksClientNoteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditSkysocksClientNoteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts

@@ -0,0 +1,54 @@
+import { Component, ViewChild, ElementRef, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+import { AppConfig } from 'src/app/app.config';
+
+/**
+ * Modal window for changing the note of an entry shown on SkysocksClientSettingsComponent.
+ * If the user selects the option for saving the note, the modal window is closed and the new
+ * note is returned in the "afterClosed" envent, but with an hyphen "-" added to the begining,
+ * to help avoiding problems while checking empty strings.
+ */
+@Component({
+  selector: 'app-edit-skysocks-client-note',
+  templateUrl: './edit-skysocks-client-note.component.html',
+  styleUrls: ['./edit-skysocks-client-note.component.scss']
+})
+export class EditSkysocksClientNoteComponent implements OnInit {
+  @ViewChild('firstInput', { static: false }) firstInput: ElementRef;
+
+  form: FormGroup;
+
+  /**
+   * Opens the modal window. Please use this function instead of opening the window "by hand".
+   */
+  public static openDialog(dialog: MatDialog, currentNote: string): MatDialogRef<EditSkysocksClientNoteComponent, any> {
+    const config = new MatDialogConfig();
+    config.data = currentNote ? currentNote : '';
+    config.autoFocus = false;
+    config.width = AppConfig.smallModalWidth;
+
+    return dialog.open(EditSkysocksClientNoteComponent, config);
+  }
+
+  constructor(
+    private dialogRef: MatDialogRef<EditSkysocksClientNoteComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: string,
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      'note': [this.data],
+    });
+
+    setTimeout(() => (this.firstInput.nativeElement as HTMLElement).focus());
+  }
+
+  // Closes the modal window and returns the note.
+  finish() {
+    const note = this.form.get('note').value.trim();
+    this.dialogRef.close('-' + note);
+  }
+}

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html

@@ -0,0 +1,33 @@
+<app-dialog [headline]="'apps.skysocks-client-settings.filter-dialog.title' | translate">
+  <form [formGroup]="form">
+    <!-- Location. -->
+    <mat-form-field>
+      <input
+        formControlName="location-text"
+        maxlength="100"
+        [placeholder]="'apps.skysocks-client-settings.filter-dialog.location' | translate"
+        matInput
+      >
+    </mat-form-field>
+    <!-- Key. -->
+    <mat-form-field>
+      <input
+        formControlName="key-text"
+        maxlength="66"
+        [placeholder]="'apps.skysocks-client-settings.filter-dialog.pub-key' | translate"
+        matInput
+      >
+    </mat-form-field>
+
+    <!-- button. -->
+    <app-button
+      #button
+      (action)="apply()"
+      type="mat-raised-button"
+      color="primary"
+      class="float-right"
+    >
+      {{ 'apps.skysocks-client-settings.filter-dialog.apply' | translate }}
+    </app-button>
+  </form>
+</app-dialog>

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkysocksClientFilterComponent } from './skysocks-client-filter.component';
+
+describe('SkysocksClientFilterComponent', () => {
+  let component: SkysocksClientFilterComponent;
+  let fixture: ComponentFixture<SkysocksClientFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SkysocksClientFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkysocksClientFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
+
+import { AppConfig } from 'src/app/app.config';
+
+/**
+ * Filters the user selected using SkysocksClientFilterComponent. It is prepopulated with default
+ * data which indicates that no filter has been selected.
+ */
+export class SkysocksClientFilters {
+  location = '';
+  key = '';
+}
+
+/**
+ * Modal window for selecting the filters for the proxy list shown by
+ * SkysocksClientSettingsComponent. If the user accepts the changes, the modal window is closed
+ * and an instance of SkysocksClientFilters is returned in the "afterClosed" envent, with the
+ * selected filters.
+ */
+@Component({
+  selector: 'app-skysocks-client-filter',
+  templateUrl: './skysocks-client-filter.component.html',
+  styleUrls: ['./skysocks-client-filter.component.scss']
+})
+export class SkysocksClientFilterComponent implements OnInit {
+  form: FormGroup;
+
+  /**
+   * Opens the modal window. Please use this function instead of opening the window "by hand".
+   */
+  public static openDialog(dialog: MatDialog, currentFilters: SkysocksClientFilters): MatDialogRef<SkysocksClientFilterComponent, any> {
+    const config = new MatDialogConfig();
+    config.data = currentFilters;
+    config.autoFocus = false;
+    config.width = AppConfig.smallModalWidth;
+
+    return dialog.open(SkysocksClientFilterComponent, config);
+  }
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) private data: SkysocksClientFilters,
+    private dialogRef: MatDialogRef<SkysocksClientFilterComponent>,
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      'location-text': [this.data.location],
+      'key-text': [this.data.key],
+    });
+  }
+
+  // Closes the modal window and returns the selected filters.
+  apply() {
+    const response = new SkysocksClientFilters();
+
+    response.location = (this.form.get('location-text').value as string).trim();
+    response.key = (this.form.get('key-text').value as string).trim();
+
+    this.dialogRef.close(response);
+  }
+}