Skip to content

Unified timeline-advanced-toolbar and timeline-toolbar #754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kyasbal merged 3 commits into from
Jun 12, 2026
Merged

Unified timeline-advanced-toolbar and timeline-toolbar #754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
947eec9
Unified timeline-advanced-toolbar and timeline-toolbar
kyasbal May 31, 2026
b44958b
defined dedicated error for cancellation
kyasbal Jun 12, 2026
3802f8e
fixed GCA's reviewed part
kyasbal Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions web/src/app/pages/main/main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,6 @@

<div class="container">
<khi-header-smart></khi-header-smart>
@if (isAdvancedMode()) {
<khi-timeline-toolbar-advanced-smart
(switchToStandard)="isAdvancedMode.set(false)"
></khi-timeline-toolbar-advanced-smart>
} @else {
<khi-timeline-toolbar-smart
(switchToAdvanced)="isAdvancedMode.set(true)"
></khi-timeline-toolbar-smart>
}
<khi-timeline-toolbar-smart></khi-timeline-toolbar-smart>
<div class="layout-container" #layoutContainer></div>
</div>
50 changes: 1 addition & 49 deletions web/src/app/pages/main/main.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import { TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
import { TestBed, fakeAsync, flush } from '@angular/core/testing';
import { AppComponent } from 'src/app/pages/main/main.component';
import { signal, Injector } from '@angular/core';
import { InspectionDataLoaderService } from 'src/app/services/data-loader.service';
Expand All @@ -37,7 +37,6 @@ import { of } from 'rxjs';
import { GetConfigResponse } from 'src/app/common/schema/api-types';
import { BACKEND_SYNC } from 'src/app/services/api/backend-sync.service';
import { MenuManager } from 'src/app/services/menu/menu-manager.service';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { PROGRESS_DIALOG_STATUS_UPDATOR } from 'src/app/services/progress/progress-interface';
import { BackendConnectionStatus } from 'src/app/services/api/backend-sync-interface';
Expand Down Expand Up @@ -111,51 +110,4 @@ describe('AppComponent', () => {
fixture.destroy();
flush();
}));

it('should switch between standard and advanced toolbars when events are emitted', fakeAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();

// By default, standard toolbar is displayed
let standardToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-smart'),
);
let advancedToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-advanced-smart'),
);
expect(standardToolbar).toBeTruthy();
expect(advancedToolbar).toBeFalsy();

// Switch to advanced mode by emitting switchToAdvanced event
standardToolbar.componentInstance.switchToAdvanced.emit();
fixture.detectChanges();
tick(200);

standardToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-smart'),
);
advancedToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-advanced-smart'),
);
expect(standardToolbar).toBeFalsy();
expect(advancedToolbar).toBeTruthy();

// Switch back to standard mode by emitting switchToStandard event
advancedToolbar.componentInstance.switchToStandard.emit();
fixture.detectChanges();
tick(200);

standardToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-smart'),
);
advancedToolbar = fixture.debugElement.query(
By.css('khi-timeline-toolbar-advanced-smart'),
);
expect(standardToolbar).toBeTruthy();
expect(advancedToolbar).toBeFalsy();

// Destroy fixture to clean up running subscriptions/timers inside components
fixture.destroy();
flush();
}));
});
18 changes: 3 additions & 15 deletions web/src/app/pages/main/main.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
viewChild,
ElementRef,
ViewContainerRef,
signal,
} from '@angular/core';
import { LayoutService } from 'src/app/services/layout/layout.service';
import { Subject, takeUntil } from 'rxjs';
Expand All @@ -40,17 +39,16 @@ import {
ExtensionStore,
} from 'src/app/extensions/extension-common/extension-store';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';

import { HeaderSmartComponent } from 'src/app/header/header-smart.component';
import { TimelineToolbarSmartComponent } from 'src/app/timeline-toolbar/timeline-toolbar-smart.component';
import { TimelineToolbarAdvancedSmartComponent } from 'src/app/timeline-toolbar-advanced/timeline-toolbar-advanced-smart.component';
import { openStartupDialog } from 'src/app/dialogs/startup/startup-smart.component';
import {
RequestUserActionPopupComponent,
RequestUserActionPopupRequest,
} from 'src/app/dialogs/request-user-action-popup/request-user-action-popup.component';
import { NilPopupFormRequest } from 'src/app/services/popup/popup-manager-impl';
import { KHIIconRegistrationModule } from 'src/app/shared/module/icon-registration.module';

import {
MenuManager,
MenuItemType,
Expand All @@ -63,20 +61,10 @@ import {
@Component({
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss'],
imports: [
CommonModule,
HeaderSmartComponent,
TimelineToolbarSmartComponent,
TimelineToolbarAdvancedSmartComponent,
MatIconModule,
KHIIconRegistrationModule,
],
imports: [CommonModule, HeaderSmartComponent, TimelineToolbarSmartComponent],
providers: [LayoutService, MenuManager],
})
export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
/** Whether the advanced toolbar mode is active. */
protected readonly isAdvancedMode = signal<boolean>(false);

/** Store for extension data. */
private readonly extensionStore = inject<ExtensionStore>(EXTENSION_STORE);

Expand Down
5 changes: 5 additions & 0 deletions web/src/app/services/view-state.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ export class ViewStateService {
*/
public static DEVICE_PIXEL_RATIO_SCALE = 1;

/**
* Whether the timeline toolbar is in advanced (CEL) mode.
*/
public readonly isAdvancedMode = signal<boolean>(false);

/**
* The persistent standard mode timeline filters.
*/
Expand Down
28 changes: 14 additions & 14 deletions web/src/app/store/domain/filter/cel-filter.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { ReadonlyDomainElement } from 'src/app/store/domain/types';
import { Timeline } from 'src/app/store/domain/timeline';

describe('CelTimelineFilter', () => {
it('should filter timelines based on configured CEL expression', () => {
it('should filter timelines based on configured CEL expression', async () => {
const timelines = [
{
id: 1,
Expand Down Expand Up @@ -62,12 +62,12 @@ describe('CelTimelineFilter', () => {
logIds: new Set(),
};

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result.timelineIds.size).toBe(1);
expect(result.timelineIds.has(1)).toBe(true);
});

it('should return original context if filter is not updated with an expression', () => {
it('should return original context if filter is not updated with an expression', async () => {
const filter = new CelTimelineFilter();
const context: LogTimelineFilterContext = {
timelineIds: new Set([1, 2]),
Expand All @@ -78,11 +78,11 @@ describe('CelTimelineFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});

it('should return error and not filter context when updateFilter is called with an invalid expression', () => {
it('should return error and not filter context when updateFilter is called with an invalid expression', async () => {
const filter = new CelTimelineFilter();
const res = filter.updateFilter("t.name == 'T1");
expect(res.success).toBe(false);
Expand All @@ -97,11 +97,11 @@ describe('CelTimelineFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});

it('should reset evaluator and return original context if an invalid expression is provided after a valid one', () => {
it('should reset evaluator and return original context if an invalid expression is provided after a valid one', async () => {
const filter = new CelTimelineFilter();
filter.updateFilter("t.name == 'T1'");

Expand All @@ -117,13 +117,13 @@ describe('CelTimelineFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});
});

describe('CelLogFilter', () => {
it('should return original context if filter is not updated with an expression', () => {
it('should return original context if filter is not updated with an expression', async () => {
const filter = new CelLogFilter();
const context: LogTimelineFilterContext = {
timelineIds: new Set(),
Expand All @@ -134,11 +134,11 @@ describe('CelLogFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});

it('should return error and not filter context when updateFilter is called with an invalid expression', () => {
it('should return error and not filter context when updateFilter is called with an invalid expression', async () => {
const filter = new CelLogFilter();
const res = filter.updateFilter("l.summary == 'L1");
expect(res.success).toBe(false);
Expand All @@ -153,11 +153,11 @@ describe('CelLogFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});

it('should reset evaluator and return original context if an invalid expression is provided after a valid one', () => {
it('should reset evaluator and return original context if an invalid expression is provided after a valid one', async () => {
const filter = new CelLogFilter();
filter.updateFilter("l.summary == 'L1'");

Expand All @@ -173,7 +173,7 @@ describe('CelLogFilter', () => {
['getTimeline'],
);

const result = filter.process(context, timelineStoreSpy);
const result = await filter.process(context, timelineStoreSpy);
expect(result).toBe(context);
});
});
Loading
Loading