Skip to content

Commit

Permalink
fixed notebook loading and some page paddings
Browse files Browse the repository at this point in the history
  • Loading branch information
@datomo
datomo committed Mar 25, 2024
1 parent ff5a3e4 commit 2425fa8
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 122 deletions.
4 changes: 2 additions & 2 deletions src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<c-container class="mt-3 pt-1">
<c-container class="mt-3 pt-1 px-3">
<c-row class="no-gutters nb-toolbar">
<c-col md="9">
<c-button-toolbar role="group" aria-label="Toolbar with button groups">
Expand Down Expand Up @@ -162,7 +162,7 @@
</c-row>
</c-container>

<div class="nb-scroll" *ngIf="session; else elseNoSession" tabindex="-1" id="notebook" (keydown)="keyDown($event)">
<div class="nb-scroll px-3" *ngIf="session; else elseNoSession" tabindex="-1" id="notebook" (keydown)="keyDown($event)">
<h1 class="nb-title">{{name}}</h1>
<div class="nb-background mt-4 pt-4">
<ng-container *ngIf="nb">
Expand Down
39 changes: 23 additions & 16 deletions src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {delay, mergeMap, take, tap} from 'rxjs/operators';
import {LoadingScreenService} from '../../../../components/loading-screen/loading-screen.service';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {ToasterService} from '../../../../components/toast-exposer/toaster.service';
import {WebuiSettingsService} from "../../../../services/webui-settings.service";

@Component({
selector: 'app-edit-notebook',
Expand All @@ -39,11 +40,14 @@ export class EditNotebookComponent implements OnInit, OnChanges, OnDestroy {
private readonly _notebooks = inject(NotebooksService);
public readonly _sidebar = inject(NotebooksSidebarService);
private readonly _content = inject(NotebooksContentService);

private readonly _toast = inject(ToasterService);
private readonly _router = inject(Router);
private readonly _route = inject(ActivatedRoute);
private readonly _loading = inject(LoadingScreenService);

private readonly _settings = inject(WebuiSettingsService);

@Input() sessionId: string;
@Output() openChangeSessionModal = new EventEmitter<{ name: string, path: string }>();
path: string;
Expand Down Expand Up @@ -91,22 +95,24 @@ export class EditNotebookComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges(changes: SimpleChanges): void {
if (changes.sessionId) {
// Handle changes to sessionId
this._notebooks.getSession(this.sessionId).subscribe(session => {
this.session = session;
this.path = this._notebooks.getPathFromSession(session);
this.name = this._notebooks.getNameFromSession(session);
const urlPath = 'notebooks/' + this._route.snapshot.url.map(segment => decodeURIComponent(segment.toString())).join('/');
if (this.path !== urlPath) {
this.closeEdit(true);
return;
}
if (!this.renameNotebookModal.isShown) {
this.renameNotebookForm.patchValue({name: this.name});
this._notebooks.getSession(this.sessionId).subscribe({
next: session => {
this.session = session;
this.path = this._notebooks.getPathFromSession(session);
this.name = this._notebooks.getNameFromSession(session);
const urlPath = 'notebooks/' + this._route.snapshot.url.map(segment => decodeURIComponent(segment.toString())).join('/');
if (this.path !== urlPath) {
this.closeEdit(true);
return;
}
if (!this.renameNotebookModal.isShown) {
this.renameNotebookForm.patchValue({name: this.name});
}
this._content.setPreferredSessionId(this.path, this.sessionId);
this.loadNotebook();
}, error: () => {
this.closeEdit();
}
this._content.setPreferredSessionId(this.path, this.sessionId);
this.loadNotebook();
}, () => {
this.closeEdit();
});
}
}
Expand Down Expand Up @@ -165,9 +171,10 @@ export class EditNotebookComponent implements OnInit, OnChanges, OnDestroy {
this.nb = null;
}
this._content.getNotebookContent(this.path, this.nb == null).subscribe(res => {

if (res) {
this.nb = new NotebookWrapper(res, this.busyCellIds,
new NotebooksWebSocket(this.session.kernel.id),
new NotebooksWebSocket(this.session.kernel.id, this._settings),
id => this.getCellComponent(id)?.renderMd(),
(id, output) => this.getCellComponent(id)?.renderError(output),
(id, output) => this.getCellComponent(id)?.renderStream(output),
Expand Down
189 changes: 98 additions & 91 deletions src/app/plugins/notebooks/components/notebooks-dashboard/notebooks-dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,92 @@
<h1>Notebooks</h1>
<br>
<c-row *ngIf="pluginLoaded; else pluginOffline">
<div class="col-lg-4 fixed-width">
<c-card>
<c-card-header>
<span class="mb-0">Jupyter Server</span>
</c-card-header>
<c-card-body>
<h5>{{serverStatus ? 'Online' : 'Offline'}}</h5>
<ng-container *ngIf="serverStatus">
<p>Started: {{serverStatus.started | date: 'yyyy-MM-dd HH:mm:SS'}}</p>
<p>Last Activity: {{serverStatus.last_activity | date: 'yyyy-MM-dd HH:mm:SS'}}</p>
</ng-container>
</c-card-body>

<c-card-footer class="bg-transparent">
<button cButton color="danger" *ngIf="serverStatus" class="pull-right"
(click)="destroyContainerModal.show()">
<svg [cIcon]="icons.cilTrash" title="List Icon"></svg>
Destroy
</button>
<button cButton color="danger" *ngIf="serverStatus" class="pull-right me-2"
(click)="restartContainerModal.show()">
<svg [cIcon]="icons.cilReload" title="List Icon"></svg>
Restart
</button>
<button cButton color="success" *ngIf="!serverStatus" class="pull-right me-2"
(click)="startContainerModal.show()">
<svg [cIcon]="icons.cilMediaPlay" title="List Icon"></svg>
Start
</button>
</c-card-footer>
</c-card>
</div>
<div class="col-lg-auto fixed-width" *ngIf="serverStatus">
<c-card>
<c-card-header>
<span class="mb-0">Kernels</span>
</c-card-header>
<c-card-body>
<h5 *ngIf="sessions.length === 0; else hasRunningKernels">No Kernel Running</h5>
<ng-template #hasRunningKernels>
<h5>Running Kernels ({{sessions.length}})</h5>

<table class="table table-hover table-striped">

<thead>
<tr>
<th>Notebook</th>
<th>Kernel</th>
<th>Last Activity</th>
<th>Status</th>
<th>Connections</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let session of sessions; index as i">
<td>{{notebookPaths[i]}}</td>
<td>{{session.kernel.name}}</td>
<td>{{session.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS'}}</td>
<td>{{session.kernel.execution_state}}</td>
<td>{{session.kernel.connections}}</td>
<th></th>
</tr>
</tbody>

</table>
</ng-template>
</c-card-body>

<c-card-footer class="bg-transparent">
<div class="pull-right">
<button cButton color="danger" variant="outline" class="me-2" *ngIf="hasUnusedSessions"
(click)="terminateUnusedSessionsModal.show()">
Shut Down Unused
<div class="px-3 pb-3">
<h1>Notebooks</h1>
<br>
<c-row *ngIf="pluginLoaded; else pluginOffline" [gutter]="4">
<div class="col-lg-4 fixed-width">
<c-card>
<c-card-header>
<span class="mb-0">Jupyter Server</span>
</c-card-header>
<c-card-body>
<h5>{{ serverStatus ? 'Online' : 'Offline' }}</h5>
<ng-container *ngIf="serverStatus">
<p>Started: {{ serverStatus.started | date: 'yyyy-MM-dd HH:mm:SS' }}</p>
<p>Last Activity: {{ serverStatus.last_activity | date: 'yyyy-MM-dd HH:mm:SS' }}</p>
</ng-container>
</c-card-body>

<c-card-footer class="bg-transparent">
<button cButton color="danger" *ngIf="serverStatus" class="pull-right"
(click)="destroyContainerModal.show()">
<svg [cIcon]="icons.cilTrash" title="List Icon"></svg>
Destroy
</button>
<button cButton color="danger" [disabled]="sessions.length === 0"
(click)="terminateSessionsModal.show()">
Shut Down All
<button cButton color="danger" *ngIf="serverStatus" class="pull-right me-2"
(click)="restartContainerModal.show()">
<svg [cIcon]="icons.cilReload" title="List Icon"></svg>
Restart
</button>
</div>
</c-card-footer>
</c-card>
</div>
</c-row>
<button cButton color="success" *ngIf="!serverStatus" class="pull-right me-2"
(click)="startContainerModal.show()">
<svg [cIcon]="icons.cilMediaPlay" title="List Icon"></svg>
Start
</button>
</c-card-footer>
</c-card>
</div>
<div class="col-lg-auto fixed-width" *ngIf="serverStatus">
<c-card>
<c-card-header>
<span class="mb-0">Kernels</span>
</c-card-header>
<c-card-body>
<h5 *ngIf="sessions.length === 0; else hasRunningKernels">No Kernel Running</h5>
<ng-template #hasRunningKernels>
<h5>Running Kernels ({{ sessions.length }})</h5>

<table class="table table-hover table-striped">

<thead>
<tr>
<th>Notebook</th>
<th>Kernel</th>
<th>Last Activity</th>
<th>Status</th>
<th>Connections</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let session of sessions; index as i">
<td>{{ notebookPaths[i] }}</td>
<td>{{ session.kernel.name }}</td>
<td>{{ session.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS' }}</td>
<td>{{ session.kernel.execution_state }}</td>
<td>{{ session.kernel.connections }}</td>
<th></th>
</tr>
</tbody>

</table>
</ng-template>
</c-card-body>

<c-card-footer class="bg-transparent">
<div class="pull-right">
<button cButton color="danger" variant="outline" class="me-2" *ngIf="hasUnusedSessions"
(click)="terminateUnusedSessionsModal.show()">
Shut Down Unused
</button>
<button cButton color="danger" [disabled]="sessions.length === 0"
(click)="terminateSessionsModal.show()">
Shut Down All
</button>
</div>
</c-card-footer>
</c-card>
</div>
</c-row>
</div>

<ng-template #pluginOffline>
<p>The Jupyter Plugin is not loaded. Refresh the page to try again.</p>
Expand Down Expand Up @@ -112,11 +114,13 @@ <h4 cModalTitle>Shut Down All Kernels</h4>
</c-modal-content>
</c-modal>

<c-modal bsModal #terminateUnusedSessionsModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="terminateSessionsModal" aria-hidden="true">
<c-modal bsModal #terminateUnusedSessionsModal="bs-modal" tabindex="-1" role="dialog"
aria-labelledby="terminateSessionsModal" aria-hidden="true">
<c-modal-content>
<c-modal-header>
<h4 cModalTitle>Shut Down Unused Kernels</h4>
<button cButtonClose type="button" class="close" (click)="terminateUnusedSessionsModal.hide()" aria-label="Close"></button>
<button cButtonClose type="button" class="close" (click)="terminateUnusedSessionsModal.hide()"
aria-label="Close"></button>
</c-modal-header>

<c-modal-body>
Expand Down Expand Up @@ -187,9 +191,10 @@ <h4 cModalTitle>Deploy Jupyter Server Container</h4>

<c-modal-body>
Select the Docker instance to use:
<select cSelect name="instanceId" #selectedInstance class="form-control" [disabled]="instances.length === 0">
<select cSelect name="instanceId" #selectedInstance class="form-control"
[disabled]="instances.length === 0">
<option *ngIf="instances.length === 0">No instances available</option>
<option *ngFor="let instance of instances" [value]="instance.id">{{instance.alias}}</option>
<option *ngFor="let instance of instances" [value]="instance.id">{{ instance.alias }}</option>
</select>
<div *ngIf="instances.length === 0" class="alert alert-info mt-3">
To add a Docker instance go to Config &gt; Docker.
Expand All @@ -200,8 +205,10 @@ <h4 cModalTitle>Deploy Jupyter Server Container</h4>
</c-modal-body>
<c-modal-footer>
<button cButton color="secondary" type="button" (click)="startContainerModal.hide()">Cancel</button>
<button cButton color="success" type="button" (click)="createContainer(+(selectedInstance.value))" [disabled]="creating || instances.length === 0">
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" *ngIf="creating"></span>
<button cButton color="success" type="button" (click)="createContainer(+(selectedInstance.value))"
[disabled]="creating || instances.length === 0">
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"
*ngIf="creating"></span>
<span>Start</span>
</button>
</c-modal-footer>
Expand Down
3 changes: 2 additions & 1 deletion src/app/plugins/notebooks/notebooks.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
ContainerComponent,
FormControlDirective,
FormSelectDirective,
GutterDirective,
InputGroupComponent,
InputGroupTextDirective,
ModalBodyComponent,
Expand Down Expand Up @@ -69,7 +70,7 @@ import {IconDirective} from '@coreui/icons-angular';
}
}),
TreeModule,
NgxJsonViewerModule, ModalHeaderComponent, ModalContentComponent, ModalDialogComponent, ModalComponent, InputGroupComponent, CardBodyComponent, ModalFooterComponent, ButtonDirective, InputGroupTextDirective, FormSelectDirective, FormControlDirective, ModalTitleDirective, ButtonCloseDirective, ModalBodyComponent, CardFooterComponent, CardHeaderComponent, RowComponent, CardComponent, IconDirective, ButtonGroupComponent, ColComponent, BadgeComponent, ContainerComponent, BgColorDirective, ButtonToolbarComponent, TooltipDirective
NgxJsonViewerModule, ModalHeaderComponent, ModalContentComponent, ModalDialogComponent, ModalComponent, InputGroupComponent, CardBodyComponent, ModalFooterComponent, ButtonDirective, InputGroupTextDirective, FormSelectDirective, FormControlDirective, ModalTitleDirective, ButtonCloseDirective, ModalBodyComponent, CardFooterComponent, CardHeaderComponent, RowComponent, CardComponent, IconDirective, ButtonGroupComponent, ColComponent, BadgeComponent, ContainerComponent, BgColorDirective, ButtonToolbarComponent, TooltipDirective, GutterDirective
],
declarations: [
NotebooksComponent,
Expand Down
8 changes: 4 additions & 4 deletions src/app/plugins/notebooks/services/notebooks-webSocket.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import {webSocket} from 'rxjs/webSocket';
import {WebuiSettingsService} from '../../../services/webui-settings.service';
import * as uuid from 'uuid';
import {KernelMsg} from '../models/kernel-response.model';
import {inject} from '@angular/core';

export class NotebooksWebSocket {

public readonly _settings = inject(WebuiSettingsService);
private readonly _settings;

private socket;
connected = false;
private msgSubject = new Subject<KernelMsg>();

constructor(kernelId: string) {
this.initWebSocket(kernelId);
constructor(kernelId: string, settings: WebuiSettingsService) {
this._settings = settings;
this.initWebSocket(kernelId,);
}

private initWebSocket(kernelId: string) {
Expand Down
16 changes: 8 additions & 8 deletions src/app/views/forms/form-generator/form-generator.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--<a href="https://juristr.com/blog/2017/10/demystify-dynamic-angular-forms/">tutorial1</a>,
<a href="http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example">tutorial2</a>-->
<ng-container *ngIf="formObj && form && !pageNotFound" xmlns="http://www.w3.org/1999/html">
<c-container *ngIf="formObj && form && !pageNotFound" xmlns="http://www.w3.org/1999/html">
<form (ngSubmit)="onSubmit(form.value, $event)" [formGroup]="form" #formElement cForm>
<c-row id="form-generator-main">
<c-col md="12">
Expand Down Expand Up @@ -226,12 +226,12 @@ <h1 *ngIf="formObj.title">{{ formObj.title }}</h1>

</c-row>
</form>
</ng-container>
</c-container>

<ng-container *ngIf="pageNotFound">
<c-container *ngIf="pageNotFound">
<p class="text-danger">Page with id "{{ pageId }}" does not exist or could not be loaded.</p>
</ng-container>
<ng-container *ngIf="!formObj && !form && pageList">
</c-container>
<c-container *ngIf="!formObj && !form && pageList">
Choose a page to display configs:<br><br>
<c-row>
<c-col>
Expand All @@ -240,13 +240,13 @@ <h1 *ngIf="formObj.title">{{ formObj.title }}</h1>
</button>
</c-col>
</c-row>
</ng-container>
<ng-container *ngIf="serverError">
</c-container>
<c-container *ngIf="serverError">
<p class="text-danger">
Server not responding:<br>
{{ serverError.name }}: {{ serverError.message }}
</p>
</ng-container>
</c-container>


<!--<div class="row" *ngIf="formObj && form">
Expand Down

0 comments on commit 2425fa8

Please sign in to comment.