This repository has been archived by the owner on Jan 24, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #150 from SUSE/app-ssh
Add ability to SSH into an application instance
- Loading branch information
Showing
22 changed files
with
440 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 0 additions & 3 deletions
3
...atures/applications/application/application-tabs-base/tabs/ssh-tab/ssh-tab.component.html
This file was deleted.
Oops, something went wrong.
25 changes: 0 additions & 25 deletions
25
...res/applications/application/application-tabs-base/tabs/ssh-tab/ssh-tab.component.spec.ts
This file was deleted.
Oops, something went wrong.
15 changes: 0 additions & 15 deletions
15
...features/applications/application/application-tabs-base/tabs/ssh-tab/ssh-tab.component.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
src/app/features/applications/ssh-application/ssh-application.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <app-page-header> | ||
| <h1>Application SSH ({{ (applicationService.app$ | async)?.entity?.entity.name }} #{{ instanceId }})</h1> | ||
| <div class="page-header-right"> | ||
| <span> | ||
| <button mat-icon-button name="stop" *ngIf="sshViewer.isConnected" (click)="sshViewer.disconnect()" [disabled]="sshViewer.attemptingConnection"> | ||
| <mat-icon>stop</mat-icon> | ||
| </button> | ||
| <button mat-icon-button name="start" *ngIf="!sshViewer.isConnected" (click)="sshViewer.reconnect()" [disabled]="sshViewer.attemptingConnection"> | ||
| <mat-icon>play_arrow</mat-icon> | ||
| </button> | ||
| <button mat-icon-button [routerLink]="appInstanceLink"> | ||
| <mat-icon>close</mat-icon> | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </app-page-header> | ||
|
|
||
| <app-ssh-viewer #sshViewer [errorMessage]="errorMessage" [sshStream]="messages" [sshInput]="sshInput" [connectionStatus]="connectionStatus"></app-ssh-viewer> |
File renamed without changes.
40 changes: 40 additions & 0 deletions
40
src/app/features/applications/ssh-application/ssh-application.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { SshApplicationComponent } from './ssh-application.component'; | ||
| import { SharedModule } from '../../../shared/shared.module'; | ||
| import { CoreModule } from '../../../core/core.module'; | ||
| import { RouterTestingModule } from '@angular/router/testing'; | ||
| import { createBasicStoreModule } from '../../../test-framework/store-test-helper'; | ||
| import { ApplicationService } from '../application.service'; | ||
| import { ApplicationServiceMock } from '../../../test-framework/application-service-helper'; | ||
|
|
||
| describe('SshApplicationComponent', () => { | ||
| let component: SshApplicationComponent; | ||
| let fixture: ComponentFixture<SshApplicationComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ SshApplicationComponent ], | ||
| imports: [ | ||
| CoreModule, | ||
| SharedModule, | ||
| RouterTestingModule, | ||
| createBasicStoreModule() | ||
| ], | ||
| providers: [ | ||
| { provide: ApplicationService, useClass: ApplicationServiceMock }, | ||
| ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(SshApplicationComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
87 changes: 87 additions & 0 deletions
87
src/app/features/applications/ssh-application/ssh-application.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { Component, OnInit, ViewChild } from '@angular/core'; | ||
| import { ActivatedRoute, Router } from '@angular/router'; | ||
|
|
||
| import { Observable } from 'rxjs/Observable'; | ||
| import { Store } from '@ngrx/store'; | ||
| import { Subscription, Subject } from 'rxjs/Rx'; | ||
| import websocketConnect from 'rxjs-websockets'; | ||
|
|
||
| import { ApplicationService } from '../application.service'; | ||
| import { QueueingSubject } from 'queueing-subject'; | ||
| import { LoggerService } from '../../../core/logger.service'; | ||
| import { SshViewerComponent } from '../../../shared/components/ssh-viewer/ssh-viewer.component'; | ||
| import { ShowSnackBar } from '../../../store/actions/snackBar.actions'; | ||
| import { AppState } from '../../../store/app-state'; | ||
| import { EntityService } from '../../../core/entity-service'; | ||
| import { GetApplication, ApplicationSchema } from '../../../store/actions/application.actions'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-ssh-application', | ||
| templateUrl: './ssh-application.component.html', | ||
| styleUrls: ['./ssh-application.component.scss'], | ||
| }) | ||
| export class SshApplicationComponent implements OnInit { | ||
|
|
||
| public messages: Observable<string>; | ||
|
|
||
| public connectionStatus: Observable<number>; | ||
|
|
||
| public sshInput: QueueingSubject<string>; | ||
|
|
||
| public errorMessage: string; | ||
|
|
||
| public sshRoute: string; | ||
|
|
||
| public connected: boolean; | ||
|
|
||
| public appInstanceLink: string; | ||
|
|
||
| private connection: Subscription; | ||
|
|
||
| public instanceId: string; | ||
|
|
||
| @ViewChild('sshViewer') sshViewer: SshViewerComponent; | ||
|
|
||
| constructor( | ||
| private activatedRoute: ActivatedRoute, | ||
| private store: Store<AppState>, | ||
| private applicationService: ApplicationService, | ||
| ) { } | ||
|
|
||
| ngOnInit() { | ||
|
|
||
| const { cfGuid, appGuid } = this.applicationService; | ||
| const routeParams = this.activatedRoute.snapshot.params; | ||
| this.instanceId = routeParams.index; | ||
|
|
||
| this.appInstanceLink = ( | ||
| `/applications/${cfGuid}/${appGuid}/instances` | ||
| ); | ||
|
|
||
| if (!cfGuid || !appGuid || !this.instanceId) { | ||
| this.messages = Observable.never(); | ||
| this.connectionStatus = Observable.never(); | ||
| } else { | ||
| const host = window.location.host; | ||
| const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; | ||
| const streamUrl = ( | ||
| `${protocol}://${host}/pp/v1/${cfGuid}/apps/${appGuid}/ssh/${this.instanceId}` | ||
| ); | ||
| this.sshInput = new QueueingSubject<string>(); | ||
| const connection = websocketConnect( | ||
| streamUrl, | ||
| this.sshInput | ||
| ); | ||
|
|
||
| this.messages = connection.messages | ||
| .catch(e => { | ||
| if (e.type === 'error') { | ||
| this.errorMessage = 'Error connecting to web socket'; | ||
| } | ||
| return []; | ||
| }); | ||
|
|
||
| this.connectionStatus = connection.connectionStatus; | ||
| } | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
src/app/shared/components/ssh-viewer/ssh-viewer.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <div class="ssh-viewer"> | ||
| <div class="ssh-viewer__overlay" *ngIf="errorMessage || !isConnected"> | ||
| <div class="ssh-viewer__error" *ngIf="errorMessage"> | ||
| Error occurred establishing SSH connection | ||
| </div> | ||
| <div class="ssh-viewer__disconnected" *ngIf="!errorMessage && !isConnected && !isConnecting"> | ||
| Disconnected | ||
| </div> | ||
| </div> | ||
| <mat-progress-bar *ngIf="isConnecting" mode="indeterminate"></mat-progress-bar> | ||
| <div class="ssh-terminal" #container [ngClass]="{'ssh-terminal-disconnected': !isConnected}"> | ||
| <div id="terminal" #terminal></div> | ||
| </div> | ||
| </div> | ||
|
|
46 changes: 46 additions & 0 deletions
46
src/app/shared/components/ssh-viewer/ssh-viewer.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| .ssh-viewer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| position: relative; | ||
|
|
||
| .ssh-terminal { | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| opacity: 1; | ||
| transition: opacity .5s ease-in-out; | ||
|
|
||
| &.ssh-terminal-disconnected { | ||
| opacity: .4; | ||
| } | ||
|
|
||
| > div { | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| &__overlay { | ||
| align-items: flex-end; | ||
| display: flex; | ||
| height: 100%; | ||
| justify-content: center; | ||
| position: absolute; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| &__error { | ||
| padding: 8px; | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| &__disconnected { | ||
| padding: 8px; | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
| } |
Oops, something went wrong.