fix: reset filter counter when the filter is removed

vxcontrol · Dec 25, 2023 · 877eec5 · 877eec5
1 parent 41ab32f
commit 877eec5
Show file tree

Hide file tree

Showing 24 changed files with 180 additions and 194 deletions.
diff --git a/web/libs/features/agents/src/lib/routes/agents-page/agents-page.component.html b/web/libs/features/agents/src/lib/routes/agents-page/agents-page.component.html
@@ -6,17 +6,18 @@
         canBlockSelectedAgents: canBlockSelectedAgents$ | async,
         canUpgradeSelectedAgents: canUpgradeSelectedAgents$ | async,
         deleteError: deleteError$ | async,
+        gridFiltrationByField: gridFiltrationByField$ | async,
         isBlockingAgents: isBlockingAgents$ | async,
         isCancelUpgradingAgent: isCancelUpgradingAgent$ | async,
         isDeletingAgent: isDeletingAgent$ | async,
         isDeletingFromGroup: isDeletingFromGroup$ | async,
-        language: language$ | async,
-        latestAgentBinaryVersion: latestAgentBinaryVersion$ | async,
         isLoadingAgent: isLoadingAgent$ | async,
         isLoadingAllGroups: isLoadingAllGroups$ | async,
         isMovingAgents: isMovingAgents$ | async,
         isUpdatingAgent: isUpdatingAgent$ | async,
         isUpgradingAgents: isUpgradingAgents$ | async,
+        language: language$ | async,
+        latestAgentBinaryVersion: latestAgentBinaryVersion$ | async,
         moveToGroupError: moveToGroupError$ | async,
         page: page$ | async,
         selected: selected$ | async,
@@ -452,7 +453,7 @@
                                     e2e-id="grFilterConnection"
                                     [field]="'status'"
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Connection')"
-                                    [selectedValues]="(gridFiltrationByField$ | async).status?.value"
+                                    [selectedValues]="data.gridFiltrationByField.status?.value"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
                                         *ngFor="let item of gridColumnsFilters.status"
@@ -467,7 +468,7 @@
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Os')"
                                     [placeholder]="t('Agents.AgentsList.InputPlaceholder.FilterByOs')"
                                     [multiple]="true"
-                                    [selectedValues]="(gridFiltrationByField$ | async).os?.value"
+                                    [selectedValues]="data.gridFiltrationByField.os?.value"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
                                         *ngFor="let item of gridColumnsFilters?.os"
@@ -480,7 +481,7 @@
                                     e2e-id="grFilterAuthorization"
                                     [field]="'auth_status'"
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Authorization')"
-                                    [selectedValues]="(gridFiltrationByField$ | async).auth_status?.value"
+                                    [selectedValues]="data.gridFiltrationByField.auth_status?.value"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
                                         *ngFor="let item of gridColumnsFilters?.auth_status"
@@ -494,7 +495,7 @@
                                     [field]="'version'"
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Version')"
                                     [placeholder]="t('Agents.AgentsList.InputPlaceholder.FilterByVersion')"
-                                    [selectedValues]="(gridFiltrationByField$ | async).version?.value"
+                                    [selectedValues]="data.gridFiltrationByField.version?.value"
                                     [multiple]="true"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
@@ -510,7 +511,7 @@
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Modules')"
                                     [placeholder]="t('Agents.AgentsList.InputPlaceholder.FilterByModule')"
                                     [multiple]="true"
-                                    [selectedValues]="(gridFiltrationByField$ | async).module_name?.value"
+                                    [selectedValues]="data.gridFiltrationByField.module_name?.value"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
                                         *ngFor="let item of gridColumnsFilters?.modules"
@@ -524,7 +525,7 @@
                                     [field]="'group_id'"
                                     [title]="t('Agents.AgentsList.GridColumnsTitle.Group')"
                                     [placeholder]="t('Agents.AgentsList.InputPlaceholder.FilterByGroup')"
-                                    [selectedValues]="(gridFiltrationByField$ | async).group_id?.value"
+                                    [selectedValues]="data.gridFiltrationByField.group_id?.value"
                                     [multiple]="true"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item
@@ -539,7 +540,7 @@
                                     [field]="'tags'"
                                     [title]="tShared('Shared.Pseudo.GridColumnsTitle.Tags')"
                                     [placeholder]="t('Agents.AgentsList.InputPlaceholder.FilterByTag')"
-                                    [selectedValues]="(gridFiltrationByField$ | async).tags?.value"
+                                    [selectedValues]="data.gridFiltrationByField.tags?.value"
                                     [multiple]="true"
                                     (changeValue)="onGridFilter($event)">
                                     <soldr-filter-item

diff --git a/web/libs/features/groups/src/lib/routes/group-page/group-page.component.ts b/web/libs/features/groups/src/lib/routes/group-page/group-page.component.ts
@@ -236,17 +236,11 @@ export class GroupPageComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     onSetAgentsTag(tag: string) {
-        this.groupsFacade.setAgentsGridFiltration({
-            field: 'tags',
-            value: [tag]
-        });
+        this.groupsFacade.setAgentsGridFiltrationByTag(tag);
     }
 
     onSetPolicyTag(tag: string) {
-        this.groupsFacade.setPoliciesGridFiltration({
-            field: 'tags',
-            value: [tag]
-        });
+        this.groupsFacade.setPoliciesGridFiltrationByTag(tag);
     }
 
     onSelectTab() {

diff --git a/web/libs/features/groups/src/lib/routes/groups-page/groups-page.component.html b/web/libs/features/groups/src/lib/routes/groups-page/groups-page.component.html
@@ -1,16 +1,17 @@
 <ng-container
     *ngIf="({
-        language: language$ | async,
-        selected: selected$ | async,
-        isCreatingGroup: isCreatingGroup$ | async,
-        isUpdatingGroup: isUpdatingGroup$ | async,
+        gridFiltrationByField: gridFiltrationByField$ | async,
+        group: group$ | async,
+        groupModules: groupModules$ | async,
         isCopyingGroup: isCopyingGroup$ | async,
+        isCreatingGroup: isCreatingGroup$ | async,
         isDeletingGroup: isDeletingGroup$ | async,
-        page: page$ | async,
-        total: total$ | async,
-        group: group$ | async,
         isLoadingGroup: isLoadingGroup$ | async,
-        groupModules: groupModules$ | async
+        isUpdatingGroup: isUpdatingGroup$ | async,
+        language: language$ | async,
+        page: page$ | async,
+        selected: selected$ | async,
+        total: total$ | async
     }) as data">
     <ng-container *transloco="let tShared; read: 'shared'">
         <ng-container *transloco="let tCommon; read: 'common'">
@@ -329,7 +330,7 @@
                                 [title]="t('Groups.GroupsList.GridColumnsTitle.Policies')"
                                 [placeholder]="t('Groups.GroupsList.InputPlaceholder.FilterByPolicy')"
                                 [multiple]="true"
-                                [selectedValues]="(gridFiltrationByField$ | async).policy_id?.value"
+                                [selectedValues]="data.gridFiltrationByField.policy_id?.value"
                                 (changeValue)="onGridFilter($event)">
                                 <soldr-filter-item
                                     *ngFor="let item of gridColumnsFilters?.policies"
@@ -344,7 +345,7 @@
                                 [title]="t('Groups.GroupsList.GridColumnsTitle.Modules')"
                                 [placeholder]="t('Groups.GroupsList.InputPlaceholder.FilterByModule')"
                                 [multiple]="true"
-                                [selectedValues]="(gridFiltrationByField$ | async).module_name?.value"
+                                [selectedValues]="data.gridFiltrationByField.module_name?.value"
                                 (changeValue)="onGridFilter($event)">
                                 <soldr-filter-item
                                     *ngFor="let item of gridColumnsFilters?.modules"
@@ -358,7 +359,7 @@
                                 [field]="'tags'"
                                 [title]="tShared('Shared.Pseudo.GridColumnsTitle.Tags')"
                                 [placeholder]="t('Groups.GroupsList.InputPlaceholder.FilterByTag')"
-                                [selectedValues]="(gridFiltrationByField$ | async).tags?.value"
+                                [selectedValues]="data.gridFiltrationByField.tags?.value"
                                 [multiple]="true"
                                 (changeValue)="onGridFilter($event)">
                                 <soldr-filter-item

diff --git a/web/libs/features/policies/src/lib/routes/policies-page/policies-page.component.html b/web/libs/features/policies/src/lib/routes/policies-page/policies-page.component.html
@@ -1,11 +1,12 @@
 <ng-container
     *ngIf="({
+        gridFiltrationByField: gridFiltrationByField$ | async,
         language: language$ | async,
         page: page$ | async,
+        policyModules: policyModules$ | async,
         selected: selected$ | async,
         selectedGroupsTags: selectedGroupsTags$ | async,
-        total: total$ | async,
-        policyModules: policyModules$ | async
+        total: total$ | async
     }) as data">
     <ng-container *transloco="let tShared; read: 'shared'">
         <ng-container *transloco="let tCommon; read: 'common'">
@@ -412,7 +413,7 @@
                                         [title]="t('Policies.PoliciesList.GridColumnsTitle.Os')"
                                         [placeholder]="t('Policies.PoliciesList.InputPlaceholder.FilterByOs')"
                                         [multiple]="true"
-                                        [selectedValues]="(gridFiltrationByField$ | async).module_os?.value"
+                                        [selectedValues]="data.gridFiltrationByField.module_os?.value"
                                         (changeValue)="onGridFilter($event)">
                                         <soldr-filter-item
                                             *ngFor="let item of gridColumnsFilters?.os"
@@ -427,7 +428,7 @@
                                         [title]="t('Policies.PoliciesList.DropdownButtonText.Modules')"
                                         [placeholder]="t('Policies.PoliciesList.InputPlaceholder.FilterByModule')"
                                         [multiple]="true"
-                                        [selectedValues]="(gridFiltrationByField$ | async).module_name?.value"
+                                        [selectedValues]="data.gridFiltrationByField.module_name?.value"
                                         (changeValue)="onGridFilter($event)">
                                         <soldr-filter-item
                                             *ngFor="let item of gridColumnsFilters?.modules"
@@ -441,7 +442,7 @@
                                         [field]="'tags'"
                                         [title]="tShared('Shared.Pseudo.GridColumnsTitle.Tags')"
                                         [placeholder]="t('Policies.PoliciesList.InputPlaceholder.FilterByTag')"
-                                        [selectedValues]="(gridFiltrationByField$ | async).tags?.value"
+                                        [selectedValues]="data.gridFiltrationByField.tags?.value"
                                         [multiple]="true"
                                         (changeValue)="onGridFilter($event)">
                                         <soldr-filter-item
@@ -456,7 +457,7 @@
                                         [field]="'group_id'"
                                         [title]="t('Policies.PoliciesList.GridColumnsTitle.Groups')"
                                         [placeholder]="t('Policies.PoliciesList.InputPlaceholder.FilterByGroup')"
-                                        [selectedValues]="(gridFiltrationByField$ | async).group_id?.value"
+                                        [selectedValues]="data.gridFiltrationByField.group_id?.value"
                                         [multiple]="true"
                                         (changeValue)="onGridFilter($event)">
                                         <soldr-filter-item

diff --git a/web/libs/features/policies/src/lib/routes/policy-page/policy-page.component.ts b/web/libs/features/policies/src/lib/routes/policy-page/policy-page.component.ts
@@ -41,7 +41,6 @@ export class PolicyPageComponent implements OnInit, AfterViewInit, OnDestroy {
     agents$ = this.policiesFacade.policyAgents$.pipe(
         map((agents) => this.dateFormatterService.formatToRelativeDate(agents, 'connected_date'))
     );
-    agentsGridFiltration$ = this.policiesFacade.agentsGridFiltration$;
     agentsGridFiltrationByFields$ = this.policiesFacade.agentsGridFiltrationByFields$;
     agentsPage$ = this.policiesFacade.agentsPage$;
     agentsSearchValue$ = this.policiesFacade.agentsSearchValue$;
@@ -82,6 +81,7 @@ export class PolicyPageComponent implements OnInit, AfterViewInit, OnDestroy {
     policy$ = this.policiesFacade.policy$;
     selectedAgent$ = this.policiesFacade.selectedAgent$;
     selectedGroup$ = this.policiesFacade.selectedPolicyGroup$;
+
     selectedModuleName: string;
     sidebarPositions = SidebarPositions;
     subscription = new Subscription();
@@ -285,17 +285,11 @@ export class PolicyPageComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     onSetAgentsTag(tag: string) {
-        this.policiesFacade.setAgentsGridFiltration({
-            field: 'tags',
-            value: [tag]
-        });
+        this.policiesFacade.setAgentsGridFiltrationByTag(tag);
     }
 
     onSetGroupsTag(tag: string) {
-        this.policiesFacade.setGroupsGridFiltration({
-            field: 'tags',
-            value: [tag]
-        });
+        this.policiesFacade.setGroupsGridFiltrationByTag(tag);
     }
 
     onSelectModule(module: EntityModule) {

diff --git a/web/libs/shared/src/lib/components/events-grid/events-grid.component.ts b/web/libs/shared/src/lib/components/events-grid/events-grid.component.ts
@@ -20,7 +20,7 @@ import { Event } from '@soldr/models';
 
 import { STATE_STORAGE_TOKEN, StateStorage, WidthChangeEvent } from '../../directives';
 import { LanguageService } from '../../services';
-import { Filtration, ListItem, ProxyPermission, ViewMode } from '../../types';
+import { Filtration, ProxyPermission, ViewMode } from '../../types';
 import { GridColumnFilterItem, Sorting } from '../grid/grid.types';
 
 interface EventsGridState {

diff --git a/web/libs/shared/src/lib/components/grid/filter/filter.component.html b/web/libs/shared/src/lib/components/grid/filter/filter.component.html
@@ -21,8 +21,7 @@
             class="mc-button_transparent grid__filter-button"
             [mcDropdownTriggerFor]="statusDropdown">
             <span>{{ title }}</span>
-            <span *ngIf="data.labels?.length > 0">: {{ data.labels[0] }}
-        </span>
+            <span *ngIf="data.labels?.length > 0">: {{ data.labels[0] }}</span>
             <i mc-icon="soldr-icons-angle-down-S_16" class="soldr-icons"></i>
         </button>
 

diff --git a/web/libs/shared/src/lib/types/filtration.ts b/web/libs/shared/src/lib/types/filtration.ts
@@ -6,3 +6,5 @@ export interface Filtration {
     field: string;
     value: FiltrationValue;
 }
+
+export type GridFilters = { [key: string]: Filtration };
diff --git a/web/libs/shared/src/lib/utils/filtration-to-dictionary.ts b/web/libs/shared/src/lib/utils/filtration-to-dictionary.ts
@@ -1,6 +1,6 @@
-import { Filtration } from '@soldr/shared';
+import { Filtration, GridFilters } from '@soldr/shared';
 
-export function filtrationToDictionary(gridFiltration: Filtration[]) {
+export function filtrationToDictionary(gridFiltration: Filtration[]): GridFilters {
     return gridFiltration
         .filter((item) => (Array.isArray(item.value) ? !!item.value[0] : !!item.value))
         .reduce((acc, filter) => ({ ...acc, [filter.field]: filter }), {});

diff --git a/web/libs/shared/src/lib/utils/get-grid-filtration-by-tag.ts b/web/libs/shared/src/lib/utils/get-grid-filtration-by-tag.ts
@@ -0,0 +1,4 @@
+import { Filtration } from '../types';
+
+export const getGridFiltrationByTag = (gridFiltration: Filtration[], tag: string): Filtration[] =>
+    gridFiltration.filter((item: Filtration) => item.field !== 'tags').concat({ field: 'tags', value: [tag] });
diff --git a/web/libs/shared/src/lib/utils/get-grid-filtration.ts b/web/libs/shared/src/lib/utils/get-grid-filtration.ts
@@ -0,0 +1,8 @@
+import { Filtration } from '../types';
+
+export const getGridFiltration = (filtration: Filtration, gridFiltration: Filtration[]) => {
+    const needRemoveFiltration = Array.isArray(filtration.value) ? !filtration.value.length : !!filtration.value;
+    const updatedFiltration = gridFiltration.filter((item: Filtration) => item.field !== filtration.field);
+
+    return [...updatedFiltration, ...(needRemoveFiltration ? [] : [filtration])];
+};
diff --git a/web/libs/shared/src/lib/utils/index.ts b/web/libs/shared/src/lib/utils/index.ts
@@ -14,6 +14,8 @@ export * from './get-default-value-by-type';
 export * from './get-dependency-description-key';
 export * from './get-empty-schema';
 export * from './get-event-params-schema';
+export * from './get-grid-filtration';
+export * from './get-grid-filtration-by-tag';
 export * from './get-locale-description-by-value';
 export * from './get-name-for-new-item';
 export * from './http';

diff --git a/web/libs/store/agents/src/lib/card/agent-card.reducer.ts b/web/libs/store/agents/src/lib/card/agent-card.reducer.ts
@@ -9,7 +9,7 @@ import {
     privateEventsToModels,
     Event
 } from '@soldr/models';
-import { Filtration, Sorting } from '@soldr/shared';
+import { Filtration, getGridFiltration, Sorting } from '@soldr/shared';
 
 import * as AgentCardActions from './agent-card.actions';
 
@@ -96,18 +96,10 @@ export const reducer = createReducer(
     })),
     on(AgentCardActions.fetchEventFilterItemsFailure, (state) => ({ ...state, isLoadingEventFilterItems: false })),
 
-    on(AgentCardActions.setEventsGridFiltration, (state, { filtration }) => {
-        const needRemoveFiltration =
-            Array.isArray(filtration.value) && filtration.value.length === 1 && !filtration.value[0];
-        const updatedFiltration = state.eventsGridFiltration.filter(
-            (item: Filtration) => item.field !== filtration.field
-        );
-
-        return {
-            ...state,
-            eventsGridFiltration: [...updatedFiltration, ...(needRemoveFiltration ? [] : [filtration])]
-        };
-    }),
+    on(AgentCardActions.setEventsGridFiltration, (state, { filtration }) => ({
+        ...state,
+        eventsGridFiltration: getGridFiltration(filtration, state.eventsGridFiltration)
+    })),
     on(AgentCardActions.setEventsGridSearch, (state, { value }) => ({ ...state, eventsGridSearch: value })),
     on(AgentCardActions.resetEventsFiltration, (state) => ({ ...state, eventsGridFiltration: [] })),
     on(AgentCardActions.setEventsGridSorting, (state, { sorting }) => ({ ...state, eventsSorting: sorting })),