feat: save Explorer queries to localStorage

projects/assets-library/src/icons/icon-type.ts

@@ -98,6 +98,7 @@ export const enum IconType {
   Remove = 'remove',
   RemoveCircle = 'remove_circle',
   Restore = 'restore',
+  Save = 'save',
   Search = 'svg:search',
   Settings = 'settings',
   Share = 'share',

projects/common/src/constants/application-constants.ts

@@ -1,3 +1,4 @@
 export const enum ApplicationFeature {
-  PageTimeRange = 'ui.page-time-range'
+  PageTimeRange = 'ui.page-time-range',
+  SavedQueries = 'ui.saved-queries'
 }

projects/observability/src/pages/explorer/explorer.component.scss

@@ -53,4 +53,14 @@
       @include body-1-medium;
     }
   }
+
+  .explorer-save-button {
+    align-self: flex-end;
+    margin: 24px 24px 16px;
+  }
+
+  .explorer-toggle-container {
+    display: flex;
+    justify-content: space-between;
+  }
 }

projects/observability/src/pages/explorer/explorer.component.test.ts

@@ -6,6 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
 import {
   DEFAULT_COLOR_PALETTE,
+  FeatureState,
   FeatureStateResolver,
   LayoutChangeService,
   NavigationService,
@@ -20,6 +21,7 @@ import {
   FilterBarComponent,
   FilterBuilderLookupService,
   FilterOperator,
+  NotificationService,
   ToggleGroupComponent
 } from '@hypertrace/components';
 import { GraphQlRequestService } from '@hypertrace/graphql-client';
@@ -87,7 +89,7 @@ describe('Explorer component', () => {
         query: jest.fn().mockReturnValueOnce(of(mockAttributes)).mockReturnValue(EMPTY)
       }),
       mockProvider(FeatureStateResolver, {
-        getFeatureState: jest.fn().mockReturnValue(of(true))
+        getFeatureState: jest.fn().mockReturnValue(of(FeatureState.Enabled))
       }),
       mockProvider(TimeRangeService, {
         getCurrentTimeRange: () => testTimeRange,
@@ -108,7 +110,10 @@ describe('Explorer component', () => {
         }
       },
       mockProvider(PreferenceService, {
-        get: jest.fn().mockReturnValue(of(true))
+        get: jest.fn().mockReturnValue(of([]))
+      }),
+      mockProvider(NotificationService, {
+        createSuccessToast: jest.fn()
       }),
       ...getMockFlexLayoutProviders()
     ]
@@ -412,4 +417,15 @@ describe('Explorer component', () => {
       new TimeDuration(30, TimeUnit.Second)
     );
   }));
+
+  test('shows notification when a query is saved successfully', fakeAsync(() => {
+    init();
+    const notificationServiceSpy = spyOn(spectator.inject(NotificationService), 'createSuccessToast');
+
+    const saveQueryButton = spectator.query('.explorer-save-button');
+    expect(saveQueryButton).toExist();
+
+    spectator.click(saveQueryButton as HTMLElement);
+    expect(notificationServiceSpy).toHaveBeenCalledWith('Query Saved Successfully!');
+  }));
 });

projects/observability/src/pages/explorer/explorer.component.ts

@@ -1,14 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
+import { IconType } from '@hypertrace/assets-library';
 import {
+  ApplicationFeature,
   assertUnreachable,
+  FeatureState,
+  FeatureStateResolver,
   NavigationService,
   PreferenceService,
   QueryParamObject,
   TimeDuration,
   TimeDurationService
 } from '@hypertrace/common';
-import { Filter, ToggleItem } from '@hypertrace/components';
+import { ButtonSize, Filter, NotificationService, ToggleItem } from '@hypertrace/components';
 import { isEmpty, isNil } from 'lodash-es';
 import { concat, EMPTY, Observable, Subject } from 'rxjs';
 import { map, take } from 'rxjs/operators';
@@ -41,19 +45,34 @@ import {
   template: `
     <div class="explorer" *htLetAsync="this.initialState$ as initialState">
       <ht-page-header class="explorer-header"></ht-page-header>
-      <ht-toggle-group
-        class="explorer-data-toggle"
-        [items]="this.contextItems"
-        [activeItem]="initialState.contextToggle"
-        (activeItemChange)="this.onContextUpdated($event.value)"
-      ></ht-toggle-group>
+
+      <div class="explorer-toggle-container">
+        <ht-toggle-group
+          class="explorer-data-toggle"
+          [items]="this.contextItems"
+          [activeItem]="initialState.contextToggle"
+          (activeItemChange)="this.onContextUpdated($event.value)"
+        ></ht-toggle-group>
+
+        <ht-button
+          class="explorer-save-button"
+          icon="${IconType.Save}"
+          label="Save Query"
+          role="tertiary"
+          size="${ButtonSize.Small}"
+          [disabled]="filters.length < 1"
+          (click)="onClickSaveQuery()"
+          *ngIf="enableSavedQueries"
+        ></ht-button>
+      </div>
 
       <ht-filter-bar
         class="explorer-filter-bar"
         [attributes]="this.attributes$ | async"
         [syncWithUrl]="true"
         (filtersChange)="this.onFiltersUpdated($event)"
       ></ht-filter-bar>
+
       <div class="explorer-content">
         <ht-panel
           *htLetAsync="this.visualizationExpanded$ as visualizationExpanded"
@@ -118,11 +137,14 @@ export class ExplorerComponent {
   private static readonly VISUALIZATION_EXPANDED_PREFERENCE: string = 'explorer.visualizationExpanded';
   private static readonly RESULTS_EXPANDED_PREFERENCE: string = 'explorer.resultsExpanded';
   private readonly explorerDashboardBuilder: ExplorerDashboardBuilder;
+  private savedQueries: SavedQuery[] = [];
+  private currentContext: ExplorerGeneratedDashboardContext = ObservabilityTraceType.Api;
   public readonly resultsDashboard$: Observable<ExplorerGeneratedDashboard>;
   public readonly vizDashboard$: Observable<ExplorerGeneratedDashboard>;
   public readonly initialState$: Observable<InitialExplorerState>;
   public readonly currentContext$: Observable<ExplorerGeneratedDashboardContext>;
   public attributes$: Observable<AttributeMetadata[]> = EMPTY;
+  public enableSavedQueries: boolean = false;
 
   public readonly contextItems: ContextToggleItem[] = [
     {
@@ -148,8 +170,10 @@ export class ExplorerComponent {
   private readonly contextChangeSubject: Subject<ExplorerGeneratedDashboardContext> = new Subject();
 
   public constructor(
+    private readonly featureStateResolver: FeatureStateResolver,
     private readonly metadataService: MetadataService,
     private readonly navigationService: NavigationService,
+    private readonly notificationService: NotificationService,
     private readonly timeDurationService: TimeDurationService,
     private readonly preferenceService: PreferenceService,
     @Inject(EXPLORER_DASHBOARD_BUILDER_FACTORY) explorerDashboardBuilderFactory: ExplorerDashboardBuilderFactory,
@@ -168,6 +192,22 @@ export class ExplorerComponent {
       this.initialState$.pipe(map(value => value.contextToggle.value.dashboardContext)),
       this.contextChangeSubject
     );
+    this.featureStateResolver.getFeatureState(ApplicationFeature.SavedQueries).subscribe(featureState => {
+      this.enableSavedQueries = featureState === FeatureState.Enabled ? true : false;
+    });
+    this.preferenceService.get('savedQueries', []).subscribe(queries => {
+      this.savedQueries = queries as SavedQuery[];
+    });
+    this.currentContext$.subscribe(value => (this.currentContext = value));
+  }
+
+  public onClickSaveQuery(): void {
+    const currentScope = this.getQueryParamFromContext(this.currentContext);
+    const currentFilterUrlStrings = this.filters.map(filter => filter.urlString);
+
+    const newSavedQueries = [...this.savedQueries, { scope: currentScope, filterUrlStrings: currentFilterUrlStrings }];
+    this.preferenceService.set('savedQueries', newSavedQueries);
+    this.notificationService.createSuccessToast('Query Saved Successfully!');
   }
 
   public onVisualizationRequestUpdated(newRequest: ExploreVisualizationRequest): void {
@@ -187,7 +227,7 @@ export class ExplorerComponent {
     switch (context) {
       case ObservabilityTraceType.Api:
         return ScopeQueryParam.EndpointTraces;
-      case 'SPAN':
+      case SPAN_SCOPE:
         return ScopeQueryParam.Spans;
       default:
         return assertUnreachable(context);
@@ -339,3 +379,8 @@ const enum ExplorerQueryParam {
   GroupLimit = 'limit',
   Series = 'series'
 }
+
+export interface SavedQuery {
+  scope: ScopeQueryParam;
+  filterUrlStrings: string[];
+}

projects/observability/src/pages/explorer/explorer.module.ts

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { FactorySansProvider, ModuleWithProviders, NgModule } from '@angular/core';
 import {
+  ButtonModule,
   FilterBarModule,
   LetAsyncModule,
+  NotificationModule,
   PageHeaderModule,
   PanelModule,
   ToggleGroupModule
@@ -14,7 +16,9 @@ import { ExplorerComponent } from './explorer.component';
 
 @NgModule({
   imports: [
+    ButtonModule,
     CommonModule,
+    NotificationModule,
     ObservabilityDashboardModule,
     FilterBarModule,
     ExploreQueryEditorModule,

src/app/shared/feature-resolver/feature-resolver.service.ts

@@ -8,6 +8,8 @@ export class FeatureResolverService extends FeatureStateResolver {
     switch (flag) {
       case ApplicationFeature.PageTimeRange:
         return of(FeatureState.Disabled);
+      case ApplicationFeature.SavedQueries:
+        return of(FeatureState.Disabled);
       default:
         return of(FeatureState.Enabled);
     }