wip

2026-08-17 06:46:05 +01:00 · 2021-07-11 16:13:18 +02:00
parent 29a3b34dd2
commit 74fb173d80
30 changed files with 559 additions and 161 deletions
--- a/src/api.ts
+++ b/src/api.ts
@@ -27,6 +27,12 @@ export interface InstanceInfo {
    login_enabled: boolean
 }

+export interface Gateway {
+    host: string
+    port: number
+    url: string
+}
+
@Injectable({ providedIn: 'root' })
 export class InstanceInfoResolver implements Resolve<Observable<InstanceInfo>> {
    constructor (private http: HttpClient) { }
--- a/src/components/configModal.component.pug
+++ b/src/components/configModal.component.pug
@@ -3,9 +3,11 @@
        .d-flex.align-items-center.py-2.px-4
            .me-auto
                label Active config
-                .title {{configService.activeConfig.modified_at}}
+                .title
+                    fa-icon([icon]='_configIcon')
+                    span.ms-2 {{configService.activeConfig.created_at|date:"medium"}}

-            button.btn.btn-semi.me-2((click)='configService.duplicateConfig()')
+            button.btn.btn-semi.me-2((click)='configService.duplicateActiveConfig()')
                fa-icon([icon]='_copyIcon', [fixedWidth]='true')

            button.btn.btn-semi((click)='deleteConfig()')
@@ -16,25 +18,26 @@
            div(ngbDropdown)
                button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
                div(ngbDropdownMenu)
-                    a(
-                        *ngFor='let version of versions',
+                    button(
+                        *ngFor='let version of configService.versions',
                        ngbDropdownItem,
                        [class.active]='version == configService.activeVersion',
                        (click)='selectVersion(version)'
                    ) {{version.version}}

-    div(*ngIf='configService.configs.length > 1')
-        .dropdown-header All configs
+    .px-4.pt-3(*ngIf='configService.configs.length > 1')
+        h5 Other configs

-        ng-container(*ngFor='let config of configService.configs')
-            a(
-                *ngIf='config !== configService.activeConfig',
-                ngbDropdownItem,
-                (click)='selectConfig(config)',
-                href='#'
-            ) Config modified at {{config.modified_at}}
+        .list-group.list-group-light
+            ng-container(*ngFor='let config of configService.configs')
+                button.list-group-item.list-group-item-action(
+                    *ngIf='config !== configService.activeConfig',
+                    (click)='selectConfig(config)'
+                )
+                    fa-icon([icon]='_configIcon')
+                    span Config created at {{config.created_at|date:"medium"}}

-    .p-3
-        button.btn.btn-semi.w-100((click)='configService.createNewConfig()')
+    .py-3.px-4
+        button.btn.btn-semi.w-100((click)='createNewConfig()')
            fa-icon([icon]='_addIcon', [fixedWidth]='true')
            span New config
--- a/src/components/configModal.component.ts
+++ b/src/components/configModal.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { AppConnectorService } from '../services/appConnector.service'
 import { ConfigService } from '../services/config.service'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from '../api'

@Component({
    selector: 'config-modal',
@@ -11,6 +12,9 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons'
 })
 export class ConfigModalComponent {
    _addIcon = faPlus
+    _copyIcon = faCopy
+    _deleteIcon = faTrash
+    _configIcon = faFile

    constructor (
        private modalInstance: NgbActiveModal,
@@ -26,4 +30,20 @@ export class ConfigModalComponent {
        this.modalInstance.dismiss()
    }

+    async createNewConfig () {
+        const config = await this.configService.createNewConfig()
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectConfig (config: Config) {
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectVersion (version: Version) {
+        await this.configService.selectVersion(version)
+        this.modalInstance.dismiss()
+    }
+
 }
--- a/src/components/home.component.pug
+++ b/src/components/home.component.pug
@@ -16,8 +16,8 @@
        .intro
            h1 Hey.
            div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
-            div Crossplatform, local, SSH, serial - it's all there.
-            div Go on, try it out 👇
+            div Crossplatform, local, SSH, serial, Telnet - it's all there.
+            div Here's a demo 👇

        iframe(#iframe)

--- a/src/components/home.component.ts
+++ b/src/components/home.component.ts
@@ -103,7 +103,7 @@ export class HomeComponent {

    async ngAfterViewInit () {
        const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => semverGT(a, b))
+        versions.sort((a, b) => semverGT(a.version, b.version))
        this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, versions[0])
        this.iframe.nativeElement.src = '/terminal'
    }
--- a/src/components/main.component.pug
+++ b/src/components/main.component.pug
@@ -1,13 +1,13 @@
 .sidebar
    img.logo(src='{{_logo}}')

-    button.btn((click)='openConfig()')
-        fa-icon([icon]='_cogIcon', [fixedWidth]='true')
+    button.btn.mt-auto((click)='openConfig()')
+        fa-icon([icon]='_configIcon', [fixedWidth]='true')

    button.btn((click)='openSettings()')
        fa-icon([icon]='_settingsIcon', [fixedWidth]='true')

-    button.btn.mt-auto((click)='logout()')
+    button.btn.mt-3((click)='logout()')
        fa-icon([icon]='_logoutIcon', [fixedWidth]='true')

 .terminal([hidden]='!showApp')
--- a/src/components/main.component.ts
+++ b/src/components/main.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { AppConnectorService } from '../services/appConnector.service'

-import { faCog, faCopy, faTrash, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { faCog, faFile, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { LoginService } from '../services/login.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsModalComponent } from './settingsModal.component'
@@ -19,12 +19,10 @@ import { Router } from '@angular/router'
 })
 export class MainComponent {
    _logo = require('../assets/logo.svg')
-    _cogIcon = faCog
    _settingsIcon = faCog
    _logoutIcon = faSignOutAlt
-    _copyIcon = faCopy
    _addIcon = faPlus
-    _deleteIcon = faTrash
+    _configIcon = faFile

    showApp = false

--- a/src/components/settingsModal.component.pug
+++ b/src/components/settingsModal.component.pug
@@ -1,5 +1,6 @@
 .modal-header
    h5.modal-title Settings
+
 .modal-body
    .mb-3
        .form-check.form-switch
@@ -27,6 +28,13 @@
            )
            label Gateway authentication token

+    div(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        .list-group.list-group-flush
+            .list-group-item(*ngFor='let socket of appConnector.sockets')
+                div {{socket.options.host}}:{{socket.options.port}}
+                .text-muted via {{socket.url}}
+
 .modal-footer
    button.btn.btn-primary((click)='apply()') Apply
    button.btn.btn-secondary((click)='cancel()') Cancel
--- a/src/components/settingsModal.component.ts
+++ b/src/components/settingsModal.component.ts
@@ -3,6 +3,7 @@ import { LoginService } from '../services/login.service'

 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { User } from '../api'
+import { AppConnectorService } from '../services/appConnector.service'

@Component({
    selector: 'settings-modal',
@@ -14,6 +15,7 @@ export class SettingsModalComponent {
    customGatewayEnabled = false

    constructor (
+        public appConnector: AppConnectorService,
        private modalInstance: NgbActiveModal,
        private loginService: LoginService,
    ) {
--- a/src/services/appConnector.service.ts
+++ b/src/services/appConnector.service.ts
@@ -4,13 +4,15 @@ import { debounceTime } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { LoginService } from '../services/login.service'
-import { Config, Version } from '../api'
+import { Config, Gateway, Version } from '../api'

 export class SocketProxy {
    connect$ = new Subject<void>()
    data$ = new Subject<Buffer>()
    error$ = new Subject<Buffer>()
+    close$ = new Subject<Buffer>()

+    url: string
    webSocket: WebSocket
    initialBuffer: Buffer
    options: {
@@ -22,12 +24,18 @@ export class SocketProxy {
        this.initialBuffer = Buffer.from('')
    }

-    connect (options) {
+    async connect (options) {
        this.options = options
-        this.webSocket = new WebSocket(
-            this.appConnector.loginService.user.custom_connection_gateway ||
-            `ws://${location.host}/api/1/gateway/tcp`
-        )
+        this.url = this.appConnector.loginService.user.custom_connection_gateway
+        if (!this.url) {
+            try {
+                this.url = (await this.appConnector.chooseConnectionGateway()).url
+            } catch (err) {
+                this.error$.next(err)
+                return
+            }
+        }
+        this.webSocket = new WebSocket(this.url)
        this.webSocket.onmessage = async event => {
            if (typeof(event.data) === 'string') {
                this.handleServiceMessage(JSON.parse(event.data))
@@ -35,6 +43,9 @@ export class SocketProxy {
                this.data$.next(Buffer.from(await event.data.arrayBuffer()))
            }
        }
+        this.webSocket.onclose = () => {
+            this.close()
+        }
    }

    handleServiceMessage (msg) {
@@ -68,20 +79,23 @@ export class SocketProxy {
    }

    write (chunk: Buffer): void {
-        if (!this.webSocket.readyState) {
+        if (!this.webSocket?.readyState) {
            this.initialBuffer = Buffer.concat([this.initialBuffer, chunk])
        } else {
            this.webSocket.send(chunk)
        }
    }

-    close (error: Error): void {
+    close (error?: Error): void {
+        this.webSocket.close()
        if (error) {
            this.error$.next(error)
        }
        this.connect$.complete()
        this.data$.complete()
        this.error$.complete()
+        this.close$.next()
+        this.close$.complete()
    }
 }

@@ -90,6 +104,7 @@ export class AppConnectorService {
    private configUpdate = new Subject<string>()
    private config: Config
    private version: Version
+    sockets: SocketProxy[] = []

    constructor (
        private http: HttpClient,
@@ -135,6 +150,15 @@ export class AppConnectorService {
    }

    createSocket () {
-        return new SocketProxy(this)
+        const socket = new SocketProxy(this)
+        this.sockets.push(socket)
+        socket.close$.subscribe(() => {
+            this.sockets = this.sockets.filter(x => x !== socket)
+        })
+        return socket
+    }
+
+    async chooseConnectionGateway (): Promise<Gateway> {
+        return await this.http.post('/api/1/gateways/choose', {}).toPromise()
    }
 }
--- a/src/services/config.service.ts
+++ b/src/services/config.service.ts
@@ -33,11 +33,17 @@ export class ConfigService {
        await this.http.put('/api/1/user', this.user).toPromise()
    }

-    async createNewConfig () {
-        this.configs.push(await this.http.post('/api/1/configs', {
+    async createNewConfig (): Promise<Config> {
+        const config = await this.http.post('/api/1/configs', {
            content: '{}',
-            last_used_with_version: this._activeVersion.version,
-        }).toPromise())
+            last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
+        }).toPromise()
+        this.configs.push(config)
+        return config
+    }
+
+    getLatestStableVersion () {
+        return this.versions[0]
    }

    async duplicateActiveConfig () {
@@ -60,6 +66,8 @@ export class ConfigService {
        this._activeConfig = config
        this.activeConfig$.next(config)
        this.selectVersion(matchingVersion)
+        this.loginService.user.active_config = config.id
+        await this.loginService.updateUser()
    }

    async selectDefaultConfig () {
@@ -71,7 +79,7 @@ export class ConfigService {
    private async init () {
        this.configs = await this.http.get('/api/1/configs').toPromise()
        this.versions = await this.http.get('/api/1/versions').toPromise()
-        this.versions.sort((a, b) => semverGT(a, b))
+        this.versions.sort((a, b) => semverGT(a.version, b.version))

        if (!this.configs.length) {
            await this.createNewConfig()
--- a/src/terminal.ts
+++ b/src/terminal.ts
@@ -27,16 +27,26 @@ async function start () {
        return window['module'].exports
    }

+    async function prefetchURL (url) {
+        await (await fetch(url)).text()
+    }
+
    const baseUrl = `${connector.getDistURL()}/${appVersion}`
-    await webRequire(`${baseUrl}/tabby-web-container/dist/preload.js`)
-    await webRequire(`${baseUrl}/tabby-web-container/dist/bundle.js`)
+    const coreURLs = [
+        `${baseUrl}/tabby-web-container/dist/preload.js`,
+        `${baseUrl}/tabby-web-container/dist/bundle.js`,
+    ]
+
+    await Promise.all(coreURLs.map(prefetchURL))
+
+    for (const url of coreURLs) {
+        await webRequire(url)
+    }

    const tabby = window['Tabby']

-    const pluginModules = []
-    for (const plugin of connector.getPluginsToLoad()) {
-        pluginModules.push(await tabby.loadPlugin(`${baseUrl}/${plugin}`))
-    }
+    const pluginURLs = connector.getPluginsToLoad().map(x => `${baseUrl}/${x}`)
+    const pluginModules = await tabby.loadPlugins(pluginURLs)

    document.querySelector('app-root')['style'].display = 'flex'

--- a/src/theme/vars.scss
+++ b/src/theme/vars.scss
@@ -52,8 +52,8 @@ $font-size-sm: .85rem;

 $line-height-base: 1.6;

-$border-radius:               .4rem;
-$border-radius-lg:            .6rem;
+$border-radius:               .35rem;
+$border-radius-lg:            .35rem;
 $border-radius-sm:            .2rem;

 $box-shadow: 0 .5rem 1rem rgba($black, .5) !default;
@@ -79,6 +79,7 @@ $link-hover-decoration: none;
 $component-active-color: $white;
 $component-active-bg: $blue;

+$list-group-color: $body-color;
 $list-group-bg: $table-bg;
 $list-group-border-color: $table-border-color;

@@ -145,6 +146,7 @@ $navbar-padding-x: 0;
 $dropdown-bg: $body-bg;
 $dropdown-color: $body-color;
 $dropdown-border-width: 1px;
+$dropdown-border-color: #ffffff24;
 $dropdown-header-color: $gray-500;

 $dropdown-link-color: $body-color;
@@ -182,7 +184,10 @@ $modal-content-bg:               $body-bg;
 $modal-content-border-color:     $body-bg;
 $modal-header-border-width:         0;
 $modal-footer-border-width:         0;
-$modal-content-border-width:        0;
+
+$modal-content-border-color:        #ffffff24;
+$modal-content-border-width:        1px;
+

 $progress-bg: $table-bg;
 $progress-height: 3px;