Skip to content

Commit

Permalink
Fix concat tab UI (close esrlabs#1980)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DmitryAstafyev
DmitryAstafyev committed Feb 6, 2024
1 parent 470ee01 commit e84663b
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 66 deletions.
15 changes: 12 additions & 3 deletions application/client/src/app/ui/tabs/multiplefiles/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import {
OnDestroy,
AfterViewInit,
ViewChild,
ChangeDetectorRef,
} from '@angular/core';
import { Ilc, IlcInterface } from '@env/decorators/component';
import { Initial } from '@env/decorators/initial';
import { File } from '@platform/types/files';
import { State } from './state';
import { TabControls } from '@service/session';
import { HiddenFilter } from '@elements/filter.hidden/component';
import { ChangesDetector } from '@ui/env/extentions/changes';

@Component({
selector: 'app-tabs-source-multiple-files',
Expand All @@ -20,22 +22,29 @@ import { HiddenFilter } from '@elements/filter.hidden/component';
})
@Initial()
@Ilc()
export class TabSourceMultipleFiles implements AfterContentInit, OnDestroy, AfterViewInit {
export class TabSourceMultipleFiles
extends ChangesDetector
implements AfterContentInit, OnDestroy, AfterViewInit
{
@Input() files!: File[];
@Input() tab!: TabControls;

@ViewChild('filter') filter!: HiddenFilter;

public state!: State;

constructor(cdRef: ChangeDetectorRef) {
super(cdRef);
}

public ngAfterContentInit() {
const state: State | undefined = this.tab.storage<State>().get();
if (state) {
this.state = state;
this.state.restore(this.ilc());
this.state.restore(this);
} else {
this.state = new State();
this.state.init(this.ilc(), this.tab, this.files);
this.state.init(this, this.tab, this.files);
}
}

Expand Down
124 changes: 72 additions & 52 deletions application/client/src/app/ui/tabs/multiplefiles/state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import { Subject } from '@platform/env/subscription';
import { EEventType, IEvent } from './structure/component';
import { Holder } from '@module/matcher';
import { TabControls } from '@service/session';
import { InternalAPI } from '@service/ilc';
import { IlcInterface } from '@service/ilc';
import { Level, Locker } from '@ui/service/lockers';
import { getUniqueColorTo } from '@ui/styles/colors';
import { Sort } from '@angular/material/sort';
import { ChangesDetector } from '@ui/env/extentions/changes';

import * as Factory from '@platform/types/observe/factory';

Expand All @@ -20,7 +21,7 @@ export interface IMultifile {

export class State extends Holder {
private readonly _filesUpdate: Subject<FileHolder[]> = new Subject();
private _ilc!: InternalAPI;
private _ref!: IlcInterface & ChangesDetector;
private _tab!: TabControls;
private _files: FileHolder[] = [];
private _usedColors: string[] = [];
Expand All @@ -45,8 +46,8 @@ export class State extends Holder {
super();
}

public init(ilc: InternalAPI, tab: TabControls, files: File[]): void {
this._ilc = ilc;
public init(ref: IlcInterface & ChangesDetector, tab: TabControls, files: File[]): void {
this._ref = ref;
this._tab = tab;
if (files.length > 0) {
this.path = files[0].path;
Expand All @@ -59,11 +60,11 @@ export class State extends Holder {
this.path = undefined;
}
});
this._updateSummary();
this.update();
}

public restore(ilc: InternalAPI) {
this._ilc = ilc;
public restore(ref: IlcInterface & ChangesDetector) {
this._ref = ref;
}

public set sortConfig(config: Sort) {
Expand Down Expand Up @@ -111,7 +112,7 @@ export class State extends Holder {
file.unselect();
}
});
this._updateSummary();
this.update();
}

public isConcatable(): boolean {
Expand Down Expand Up @@ -143,8 +144,9 @@ export class State extends Holder {
(() => {
switch (fileType) {
case FileType.Text:
return this._ilc.services.system.session
.initialize()
return this._ref
.ilc()
.services.system.session.initialize()
.observe(
new Factory.Concat()
.asText()
Expand All @@ -153,8 +155,9 @@ export class State extends Holder {
.get(),
);
case FileType.PcapNG:
return this._ilc.services.system.session
.initialize()
return this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.Concat()
.asDlt()
Expand All @@ -163,8 +166,9 @@ export class State extends Holder {
.get(),
);
case FileType.PcapLegacy:
return this._ilc.services.system.session
.initialize()
return this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.Concat()
.asDlt()
Expand All @@ -173,8 +177,9 @@ export class State extends Holder {
.get(),
);
case FileType.Binary:
return this._ilc.services.system.session
.initialize()
return this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.Concat()
.asDlt()
Expand All @@ -192,25 +197,28 @@ export class State extends Holder {
this._tab.close();
})
.catch((err: Error) => {
this._ilc.services.ui.lockers.lock(
new Locker(true, err.message)
.set()
.message(err.message)
.type(Level.error)
.spinner(false)
.end(),
{
closable: true,
},
);
this._ref
.ilc()
.services.ui.lockers.lock(
new Locker(true, err.message)
.set()
.message(err.message)
.type(Level.error)
.spinner(false)
.end(),
{
closable: true,
},
);
});
},
openEach: (files?: FileHolder[]) => {
(files === undefined ? this._selected.files : files).forEach((file: FileHolder) => {
switch (file.type) {
case FileType.Text:
this._ilc.services.system.session
.initialize()
this._ref
.ilc()
.services.system.session.initialize()
.observe(
new Factory.File()
.asText()
Expand All @@ -219,14 +227,17 @@ export class State extends Holder {
.get(),
)
.catch((err: Error) => {
this._ilc.logger.error(
`Fail to open text file; error: ${err.message}`,
);
this._ref
.ilc()
.logger.error(
`Fail to open text file; error: ${err.message}`,
);
});
break;
case FileType.Binary:
this._ilc.services.system.session
.initialize()
this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.File()
.asDlt()
Expand All @@ -235,14 +246,17 @@ export class State extends Holder {
.get(),
)
.catch((err: Error) => {
this._ilc.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
this._ref
.ilc()
.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
});
break;
case FileType.PcapNG:
this._ilc.services.system.session
.initialize()
this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.File()
.asDlt()
Expand All @@ -251,14 +265,17 @@ export class State extends Holder {
.get(),
)
.catch((err: Error) => {
this._ilc.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
this._ref
.ilc()
.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
});
break;
case FileType.PcapLegacy:
this._ilc.services.system.session
.initialize()
this._ref
.ilc()
.services.system.session.initialize()
.configure(
new Factory.File()
.asDlt()
Expand All @@ -267,9 +284,11 @@ export class State extends Holder {
.get(),
)
.catch((err: Error) => {
this._ilc.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
this._ref
.ilc()
.logger.error(
`Fail to open dlt file; error: ${err.message}`,
);
});
break;
default:
Expand All @@ -293,7 +312,7 @@ export class State extends Holder {
this._usedColors.push(color);
this._files.push(new FileHolder(this.matcher, result, color));
this.filesUpdate.emit(this._files);
this._updateSummary();
this.update();
});
}

Expand All @@ -303,20 +322,21 @@ export class State extends Holder {
this.action().openEach(event.files);
break;
case EEventType.select:
this._updateSummary();
this.update();
break;
case EEventType.sort:
this._files = event.files;
this._updateSummary();
this.update();
break;
case EEventType.update:
this._files =
event.files.length === 0
? []
: this._files.filter((f: FileHolder) => !event.files.includes(f));
this._updateSummary();
this.update();
break;
}
this._ref !== undefined && this._ref.detectChanges();
}

public filter(value: string) {
Expand All @@ -332,7 +352,7 @@ export class State extends Holder {
return (size / this._selected.totalSize) * 100;
}

private _updateSummary() {
protected update() {
this._selected = {
count: 0,
files: [],
Expand Down
15 changes: 4 additions & 11 deletions application/client/src/app/ui/tabs/multiplefiles/structure/component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import {
Component,
ViewChild,
ChangeDetectorRef,
AfterContentInit,
Input,
ViewEncapsulation,
AfterViewInit,
OnDestroy,
} from '@angular/core';
import { Ilc, IlcInterface } from '@env/decorators/component';
import { ChangesDetector } from '@ui/env/extentions/changes';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { FileHolder } from '../file.holder';
Expand All @@ -18,6 +16,8 @@ import { Subscription } from 'rxjs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { State } from '../state';

import * as dom from '@ui/env/dom';

export interface IEvent {
type: EEventType;
files: FileHolder[];
Expand Down Expand Up @@ -46,10 +46,7 @@ export const COLUMNS = {
encapsulation: ViewEncapsulation.None,
})
@Ilc()
export class TabSourceMultipleFilesStructure
extends ChangesDetector
implements AfterContentInit, AfterViewInit, OnDestroy
{
export class TabSourceMultipleFilesStructure implements AfterContentInit, AfterViewInit, OnDestroy {
@Input() state!: State;

@ViewChild(MatSort) sort!: MatSort;
Expand All @@ -68,10 +65,6 @@ export class TabSourceMultipleFilesStructure
private _dataConnect!: Subscription;
private _sortChange!: Subscription;

constructor(cdRef: ChangeDetectorRef) {
super(cdRef);
}

public ngAfterContentInit() {
this.data = new MatTableDataSource<FileHolder>(this.state.files);
this.env().subscriber.register(
Expand Down Expand Up @@ -114,7 +107,7 @@ export class TabSourceMultipleFilesStructure
}

public ngContextMenu(event: MouseEvent, file?: FileHolder) {
event.stopImmediatePropagation();
dom.stop(event);
const items = [];
if (file !== undefined) {
items.push({
Expand Down

0 comments on commit e84663b

Please sign in to comment.