2674 prop filter

frontend/src/pages/Runs/Details/Logs/index.tsx

@@ -37,7 +37,7 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
         } else {
             terminalInstance.current.options.theme = {
                 foreground: '#b6bec9',
-                background: '#0f1b2a',
+                background: '#161d26',
             };
         }
     }, [appliedTheme]);

frontend/src/pages/Runs/List/hooks/useFilters.ts

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { ToggleProps } from '@cloudscape-design/components';
 
 import type { PropertyFilterProps } from 'components';
 
@@ -14,26 +15,32 @@ type RequestParamsKeys = keyof Pick<TRunsRequestParams, 'only_active' | 'project
 const FilterKeys: Record<string, RequestParamsKeys> = {
     PROJECT_NAME: 'project_name',
     USER_NAME: 'username',
-    ACTIVE: 'only_active',
 };
 
 const EMPTY_QUERY: PropertyFilterProps.Query = {
     tokens: [],
     operation: 'and',
 };
 
-const tokensToRequestParams = (tokens: PropertyFilterProps.Query['tokens']) => {
-    return tokens.reduce((acc, token) => {
+const tokensToRequestParams = (tokens: PropertyFilterProps.Query['tokens'], onlyActive?: boolean) => {
+    const params = tokens.reduce((acc, token) => {
         if (token.propertyKey) {
             acc[token.propertyKey as RequestParamsKeys] = token.value;
         }
 
         return acc;
     }, {} as Record<RequestParamsKeys, string>);
+
+    if (onlyActive) {
+        params['only_active'] = 'true';
+    }
+
+    return params;
 };
 
 export const useFilters = ({ localStorePrefix }: Args) => {
     const [searchParams, setSearchParams] = useSearchParams();
+    const [onlyActive, setOnlyActive] = useState(() => searchParams.get('only_active') === 'true');
     const { projectOptions } = useProjectFilter({ localStorePrefix });
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() => {
@@ -59,6 +66,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
 
     const clearFilter = () => {
         setSearchParams({});
+        setOnlyActive(false);
         setPropertyFilterQuery(EMPTY_QUERY);
     };
 
@@ -73,11 +81,6 @@ export const useFilters = ({ localStorePrefix }: Args) => {
                 });
         });
 
-        options.push({
-            propertyKey: FilterKeys.ACTIVE,
-            value: 'True',
-        });
-
         return options;
     }, [projectOptions]);
 
@@ -93,12 +96,6 @@ export const useFilters = ({ localStorePrefix }: Args) => {
             operators: ['='],
             propertyLabel: 'User',
         },
-        {
-            key: FilterKeys.ACTIVE,
-            operators: ['='],
-            propertyLabel: 'Only active',
-            groupValuesLabel: 'Active values',
-        },
     ];
 
     const onChangePropertyFilter: PropertyFilterProps['onChange'] = ({ detail }) => {
@@ -108,20 +105,26 @@ export const useFilters = ({ localStorePrefix }: Args) => {
             return !tokens.some((item, index) => token.propertyKey === item.propertyKey && index > tokenIndex);
         });
 
-        setSearchParams(tokensToRequestParams(filteredTokens));
+        setSearchParams(tokensToRequestParams(filteredTokens, onlyActive));
 
         setPropertyFilterQuery({
             operation,
             tokens: filteredTokens,
         });
     };
 
+    const onChangeOnlyActive: ToggleProps['onChange'] = ({ detail }) => {
+        setOnlyActive(detail.checked);
+
+        setSearchParams(tokensToRequestParams(propertyFilterQuery.tokens, detail.checked));
+    };
+
     const filteringRequestParams = useMemo(() => {
         const params = tokensToRequestParams(propertyFilterQuery.tokens);
 
         return {
             ...params,
-            only_active: params.only_active === 'True',
+            only_active: onlyActive,
         };
     }, [propertyFilterQuery]);
 
@@ -132,5 +135,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
         onChangePropertyFilter,
         filteringOptions,
         filteringProperties,
+        onlyActive,
+        onChangeOnlyActive,
     } as const;
 };

frontend/src/pages/Runs/List/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Header, ListEmptyMessage, Loader, PropertyFilter, SpaceBetween, Table } from 'components';
+import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
 
 import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
@@ -40,6 +40,8 @@ export const RunList: React.FC = () => {
         filteringOptions,
         filteringProperties,
         filteringRequestParams,
+        onlyActive,
+        onChangeOnlyActive,
     } = useFilters({
         localStorePrefix: 'administration-run-list-page',
     });
@@ -163,6 +165,12 @@ export const RunList: React.FC = () => {
                             filteringProperties={filteringProperties}
                         />
                     </div>
+
+                    <div className={styles.activeOnly}>
+                        <Toggle onChange={onChangeOnlyActive} checked={onlyActive}>
+                            {t('projects.run.active_only')}
+                        </Toggle>
+                    </div>
                 </div>
             }
             footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}

frontend/src/pages/Runs/List/styles.module.scss

@@ -1,29 +1,19 @@
 .selectFilters {
-    --select-width: calc((688px - 3 * 20px) / 2);
     display: flex;
     flex-wrap: wrap;
     gap: 0 20px;
 
-    .select {
-        width: var(--select-width, 30%);
-    }
-
     .propertyFilter {
-        //width: 400px;
-        //max-width: 100%;
+        max-width: 640px;
         flex-grow: 1;
         min-width: 0;
     }
 
     .activeOnly {
         display: flex;
-        align-items: center;
-        padding-top: 26px;
+        padding-top: 7px;
     }
 
-    .clear {
-        padding-top: 26px;
-    }
 }
 
 .emptyMessage {