feat(orb-ui): New active filters list (#2789)

orb-community · Nov 6, 2023 · 22b27d5 · 22b27d5
1 parent 104e663
commit 22b27d5
Show file tree

Hide file tree

Showing 14 changed files with 229 additions and 77 deletions.
diff --git a/ui/src/app/@theme/styles/_overrides.scss b/ui/src/app/@theme/styles/_overrides.scss
@@ -293,10 +293,14 @@
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   text-transform: none !important;
-  width: 110px;
+  width: 105px;
   background-color: #df316f !important;
   opacity: 0;
   animation: appear 0.3s forwards;
+  height: 27px;
+  font-size: 14px;
+  align-self: flex-end;
+  margin-bottom: 5px;
 }
 
 @keyframes appear {

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -41,7 +41,6 @@ import { ProfileComponent } from 'app/pages/profile/profile.component';
 import { GoogleAnalyticsService } from './common/services/analytics/google-service-analytics.service';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { OrbService } from './common/services/orb.service';
-import { CodeEditorService } from 'app/common/services/code.editor.service';
 
 
 @NgModule({

diff --git a/ui/src/app/common/services/filter.service.ts b/ui/src/app/common/services/filter.service.ts
@@ -67,7 +67,8 @@ export class FilterService {
   }
 
   cleanFilters() {
-    this.commitFilter([]);
+    const filters = this._filters.filter((f) => f.name === 'Name');
+    this.commitFilter(filters);
   }
 
   private commitFilter(filters: FilterOption[]) {

diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.scss
@@ -215,9 +215,8 @@ mat-chip-list {
 }
 .options {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: 160px;
 }
 input[type=checkbox] {
   margin-left: 10px;

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.html b/ui/src/app/pages/fleet/agents/list/agent.list.component.html
@@ -17,24 +17,24 @@ <h4>All Agents</h4>
 <div #tableWrapper class="tableWrapper" (click)="handleContextClick()">
   <div class="options">
     <ngx-filter [availableFilters]="filterOptions"></ngx-filter>
-    <button (click)="onOpenDeleteSelected()"
-      *ngIf="selected.length > 0"
-      class="delete-selected"
-      nbButton
-      shape="round">
-      <nb-icon icon="trash-2-outline"></nb-icon>
-      Delete
-    </button>
-    <button (click)="onOpenResetAgents()"      
-      class="agent-reset"
-      data-orb-qa-id="button#reset"
-      nbButton
-      shape="round"
-      *ngIf="selected.length > 0"
-      [disabled]="canResetAgents || isResetting">
-      <nb-icon icon="refresh-outline"></nb-icon>
-      Reset Agent
-    </button>
+    <div *ngIf="selected.length > 0" class="selected-buttons">
+      <button (click)="onOpenDeleteSelected()"
+        class="delete-selected"
+        nbButton
+        shape="round">
+        <nb-icon icon="trash-2-outline"></nb-icon>
+        Delete
+      </button>
+      <button (click)="onOpenResetAgents()"      
+        class="agent-reset"
+        data-orb-qa-id="button#reset"
+        nbButton
+        shape="round"
+        [disabled]="canResetAgents || isResetting">
+        <nb-icon icon="refresh-outline"></nb-icon>
+        Reset Agent
+      </button>
+    </div>
   </div>
 
   <div class="add-agent-container">

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.scss b/ui/src/app/pages/fleet/agents/list/agent.list.component.scss
@@ -181,15 +181,22 @@ tr div p {
 input[type=checkbox] {
   margin-left: 10px;
 }
+.selected-buttons {
+  width: 270px; 
+  display: flex; 
+  align-self: flex-end; 
+  gap: 5px; 
+}
 .agent-reset {
   color: #fff !important;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   text-transform: none !important;
-  width: 160px;
+  width: 150px;
   opacity: 0;
   animation: appear 0.3s forwards;
-
+  height: 27px;
+  font-size: 14px;
   &.btn-disabled {
     background: #2b3148;
   }
@@ -200,7 +207,6 @@ input[type=checkbox] {
 }
 .options {
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 10px;
 }
diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.scss b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.scss
@@ -166,9 +166,8 @@ mat-chip-list {
 }
 .options {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: 160px;
 }
 input[type=checkbox] {
   margin-left: 10px;

diff --git a/ui/src/app/pages/pages.module.ts b/ui/src/app/pages/pages.module.ts
@@ -74,7 +74,7 @@ import { PagesComponent } from './pages.component';
 import { SinkViewComponent } from './sinks/view/sink.view.component';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
 import { PolicyDuplicateComponent } from './datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation';
-import { TableContextMenuComponent } from 'app/shared/components/tableContexMenu/table-context-menu-component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   imports: [
@@ -111,6 +111,7 @@ import { TableContextMenuComponent } from 'app/shared/components/tableContexMenu
     NbAutocompleteModule,
     SharedModule,
     NbContextMenuModule,
+    DragDropModule,
   ],
   exports: [
     SharedModule,

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.scss b/ui/src/app/pages/sinks/list/sink.list.component.scss
@@ -213,9 +213,8 @@ mat-chip-list {
 }
 .options {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: 160px;
 }
 input[type=checkbox] {
   margin-left: 10px;

diff --git a/ui/src/app/shared/components/filter/filter.component.html b/ui/src/app/shared/components/filter/filter.component.html
@@ -90,15 +90,29 @@
     class="search-input"
     (ngModelChange)="onSearchTextChange()">
 </div>
-
-<mat-chip-list>
-  <ng-container *ngFor="let filter of activeFilters$ | async; let index = index">
-    <mat-chip *ngIf="filter.name !== 'Name'" class="filter-chip">
-      {{ filter?.exact ? filter.name + ": '" + filter?.param + "'" : filter.name + ': ' + filter?.param }}
-      <button class="remove-tag-button" (click)="removeFilter(index, filter)" nbButton shape="round" id="remove-button">
-        <i class="fa fa-window-close" style="color: #3089fc;">&nbsp;</i>
-      </button>
-    </mat-chip>
-  </ng-container>
-</mat-chip-list>
-
+<div *ngIf="(hasActiveFilters() | async)" class="list-div">
+  <div #filterList class="filters-list">
+    <div class="boundary-div" [style.padding-left.px]="boundryWidth" [style.transform]="'translateX(-' + boundryWidth + 'px)'">
+      <div #filtersDisplay cdkDrag cdkDragLockAxis="x" cdkDragBoundary=".boundary-div" [cdkDragFreeDragPosition]="dragPosition" class="filter-list-display" [style.cursor]="displayCursor">
+        <ng-container *ngFor="let filter of activeFilters$ | async; let index = index" >
+          <div class="filter-item" *ngIf="filter.name !== 'Name'">
+            <div class="filter-name">
+              <span>{{ filter?.name }}</span>
+            </div>
+            <div class="filter-param">
+              <span>{{ filter?.param | paramformatter}}</span>
+            </div>
+            <div class="filter-remove" id="remove-button">
+              <button class="remove-tag-button" (click)="removeFilter(index, filter)">
+                <nb-icon icon="close-outline"></nb-icon>
+              </button>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+  <button class="clear-filters-button" (click)="clearAllFilters()">
+    <span>Clear filters</span>
+  </button>
+</div>
diff --git a/ui/src/app/shared/components/filter/filter.component.scss b/ui/src/app/shared/components/filter/filter.component.scss
@@ -1,6 +1,6 @@
 :host {
   display: flex !important;
-  width: 100% !important;
+  width: calc(100% - 270px) !important;
   min-height: 32px !important;
   max-height: 100% !important;
   gap: 0px !important;
@@ -38,20 +38,73 @@
   padding-right: 4px;
   color: #8f9bb3;
 }
-
-mat-chip-list {
-  width: 50%;
-  align-self: center;
+.list-div {
+  display: flex;
+  width: 100%; 
+  gap: 5px; 
+  height: fit-content; 
+  align-items: center; 
+  margin-top: 8px;
+}
+.filters-list {
+  width: fit-content;
+  max-width: calc(100% - 100px);
+  white-space: nowrap;
+  overflow: hidden;
+  box-sizing: content-box;
 }
 
-.filter-chip {
+.boundary-div {
+  max-width: none !important;
+  height: 22px;
+  width: fit-content;
+}
+.filter-list-display {
+  position: relative !important;
+  display: flex;
+  width: fit-content !important;
+  gap: 7px;
+}
+.filter-item {
+  display: flex;
+  height: 22px;
+  color: #969fb9;
+  font-weight: 500;
+  font-size: 12px;
+  span {
+    padding: 8px 5px 5px 5px;
+  }
+}
+.filter-name {
+  margin-right: 1px;
+  background-color: #262c46;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
   color: #3089fc;
-  border: solid;
-  border-width: 1px;
+  span {
+    padding-left: 6px !important;
+  }
+}
+.filter-param {
+  margin-right: 1px;
+  background-color: #262c46;
+}
+.filter-remove {
+  background-color: #262c46;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.clear-filters-button {
   background-color: transparent;
-  //padding-left: 2px;
+  color: #969FB9;
+  outline: none;
+  height: 22px;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 12px;
+  border: none !important;
+  align-self: center;
 }
-
 .not-applied {
   color: #8f9bb3 !important;
 }
@@ -61,21 +114,17 @@ mat-chip-list {
 }
 
 .remove-tag-button {
-  background: none !important;
-  margin: 0 0 0 10px !important;
-  padding: 0 6px 0 10px !important;
-  align-self: end;
-  width: 0;
-}
-
-.clear-all {
-  color: #8f9bb3 !important;
-  margin-left: auto;
+  background-color: transparent;
+  color: #969fb9;
+  outline: none;
+  border: none;
+  align-content: center;
+  nb-icon {
+    font-size: 16px;
+    margin-top: 2px;
+  }
 }
 
-.clear-filter {
-  margin-left: 1rem;
-}
 .search-input {
   width: 280px !important;
   height: 32px !important;