Merge pull request #848 from acelaya-forks/visits-domain-filter

Allow tag, orphan and non-orphan visits to be filtered by domain

Author: acelaya

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * [#839](https://github.com/shlinkio/shlink-web-component/issues/839) Allow filtering short URLs by excluded tags when using Shlink >=4.6.0
+* [#838](https://github.com/shlinkio/shlink-web-component/issues/838) Allow filtering tag, orphan and non-orphan visits by domain, when using Shlink >=4.6.0
 
 ### Changed
 * [#519](https://github.com/shlinkio/shlink-web-component/issues/519) Redesign short URLs filtering bar for more clarity and consistency

src/utils/features.ts

@@ -9,6 +9,7 @@ const supportedFeatures = {
   advancedQueryRedirectConditions: { minVersion: '4.5.0' },
   desktopDeviceTypes: { minVersion: '4.5.0' },
   filterShortUrlsByExcludedTags: { minVersion: '4.6.0' },
+  filterVisitsByDomain: { minVersion: '4.6.0' },
 } as const satisfies Record<string, Versions>;
 
 Object.freeze(supportedFeatures);
@@ -27,6 +28,7 @@ const getFeaturesForVersion = (serverVersion: SemVerOrLatest): Record<Feature, b
   advancedQueryRedirectConditions: isFeatureEnabledForVersion('advancedQueryRedirectConditions', serverVersion),
   desktopDeviceTypes: isFeatureEnabledForVersion('advancedQueryRedirectConditions', serverVersion),
   filterShortUrlsByExcludedTags: isFeatureEnabledForVersion('filterShortUrlsByExcludedTags', serverVersion),
+  filterVisitsByDomain: isFeatureEnabledForVersion('filterVisitsByDomain', serverVersion),
 });
 
 const FeaturesContext = createContext(getFeaturesForVersion('0.0.0'));

src/visits/NonOrphanVisits.tsx

@@ -1,35 +1,41 @@
 import { useCallback } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
+import type { DomainsList } from '../domains/reducers/domainsList';
 import type { MercureBoundProps } from '../mercure/helpers/boundToMercureHub';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
 import type { ReportExporter } from '../utils/services/ReportExporter';
-import type { GetVisitsOptions, LoadVisits, VisitsInfo } from './reducers/types';
+import type { GetVisitsOptions, LoadWithDomainVisits, VisitsInfo } from './reducers/types';
 import type { NormalizedVisit, VisitsParams } from './types';
 import { VisitsHeader } from './VisitsHeader';
 import { VisitsStats } from './VisitsStats';
 
 export type NonOrphanVisitsProps = {
-  getNonOrphanVisits: (params: LoadVisits) => void;
+  getNonOrphanVisits: (params: LoadWithDomainVisits) => void;
   nonOrphanVisits: VisitsInfo;
   cancelGetNonOrphanVisits: () => void;
+  domainsList: DomainsList;
 };
 
 type NonOrphanVisitsDeps = {
   ReportExporter: ReportExporter;
 };
 
 const NonOrphanVisits: FCWithDeps<MercureBoundProps & NonOrphanVisitsProps, NonOrphanVisitsDeps> = boundToMercureHub((
-  { getNonOrphanVisits, nonOrphanVisits, cancelGetNonOrphanVisits },
+  { getNonOrphanVisits, nonOrphanVisits, cancelGetNonOrphanVisits, domainsList },
 ) => {
   const { ReportExporter: reportExporter } = useDependencies(NonOrphanVisits);
   const exportCsv = useCallback(
     (visits: NormalizedVisit[]) => reportExporter.exportVisits('non_orphan_visits.csv', visits),
     [reportExporter],
   );
   const loadVisits = useCallback(
-    (params: VisitsParams, options: GetVisitsOptions) => getNonOrphanVisits({ options, params }),
+    (params: VisitsParams, options: GetVisitsOptions) => getNonOrphanVisits({
+      options,
+      params,
+      domain: params.filter?.domain,
+    }),
     [getNonOrphanVisits],
   );
 
@@ -39,6 +45,7 @@ const NonOrphanVisits: FCWithDeps<MercureBoundProps & NonOrphanVisitsProps, NonO
       cancelGetVisits={cancelGetNonOrphanVisits}
       visitsInfo={nonOrphanVisits}
       exportCsv={exportCsv}
+      domains={domainsList.domains}
     >
       <VisitsHeader title="Non-orphan visits" visits={nonOrphanVisits.visits} />
     </VisitsStats>

src/visits/OrphanVisits.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
+import type { DomainsList } from '../domains/reducers/domainsList';
 import type { MercureBoundProps } from '../mercure/helpers/boundToMercureHub';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
@@ -18,14 +19,15 @@ export type OrphanVisitsProps = {
   orphanVisits: VisitsInfo;
   orphanVisitsDeletion: OrphanVisitsDeletion;
   cancelGetOrphanVisits: () => void;
+  domainsList: DomainsList;
 };
 
 type OrphanVisitsDeps = {
   ReportExporter: ReportExporter
 };
 
 const OrphanVisits: FCWithDeps<MercureBoundProps & OrphanVisitsProps, OrphanVisitsDeps> = boundToMercureHub((
-  { getOrphanVisits, orphanVisits, cancelGetOrphanVisits, deleteOrphanVisits, orphanVisitsDeletion },
+  { getOrphanVisits, orphanVisits, cancelGetOrphanVisits, deleteOrphanVisits, orphanVisitsDeletion, domainsList },
 ) => {
   const { ReportExporter: reportExporter } = useDependencies(OrphanVisits);
   const exportCsv = useCallback(
@@ -37,6 +39,7 @@ const OrphanVisits: FCWithDeps<MercureBoundProps & OrphanVisitsProps, OrphanVisi
       options,
       params,
       orphanVisitsType: params.filter?.orphanVisitsType,
+      domain: params.filter?.domain,
     }),
     [getOrphanVisits],
   );
@@ -53,6 +56,7 @@ const OrphanVisits: FCWithDeps<MercureBoundProps & OrphanVisitsProps, OrphanVisi
       exportCsv={exportCsv}
       deletion={deletion}
       isOrphanVisits
+      domains={domainsList.domains}
     >
       <VisitsHeader title="Orphan visits" visits={orphanVisits.visits} />
     </VisitsStats>

src/visits/TagVisits.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
+import type { DomainsList } from '../domains/reducers/domainsList';
 import type { MercureBoundProps } from '../mercure/helpers/boundToMercureHub';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
@@ -17,6 +18,7 @@ export type TagVisitsProps = {
   getTagVisits: (params: LoadTagVisits) => void;
   tagVisits: TagVisitsState;
   cancelGetTagVisits: () => void;
+  domainsList: DomainsList;
 };
 
 type TagVisitsDeps = {
@@ -25,12 +27,17 @@ type TagVisitsDeps = {
 };
 
 const TagVisits: FCWithDeps<MercureBoundProps & TagVisitsProps, TagVisitsDeps> = boundToMercureHub((
-  { getTagVisits, tagVisits, cancelGetTagVisits },
+  { getTagVisits, tagVisits, cancelGetTagVisits, domainsList },
 ) => {
   const { ColorGenerator: colorGenerator, ReportExporter: reportExporter } = useDependencies(TagVisits);
   const { tag = '' } = useParams();
   const loadVisits = useCallback(
-    (params: VisitsParams, options: GetVisitsOptions) => getTagVisits({ tag, params, options }),
+    (params: VisitsParams, options: GetVisitsOptions) => getTagVisits({
+      tag,
+      params,
+      options,
+      domain: params.filter?.domain,
+    }),
     [getTagVisits, tag],
   );
   const exportCsv = useCallback(
@@ -44,6 +51,7 @@ const TagVisits: FCWithDeps<MercureBoundProps & TagVisitsProps, TagVisitsDeps> =
       cancelGetVisits={cancelGetTagVisits}
       visitsInfo={tagVisits}
       exportCsv={exportCsv}
+      domains={domainsList.domains}
     >
       <TagVisitsHeader tagVisits={tagVisits} colorGenerator={colorGenerator} />
     </VisitsStats>

src/visits/VisitsStats.tsx

@@ -13,11 +13,14 @@ import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router';
+import type { Domain } from '../domains/data';
+import { DomainFilterDropdown } from '../domains/helpers/DomainFilterDropdown';
 import { useSetting } from '../settings';
 import { ExportBtn } from '../utils/components/ExportBtn';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import type { DateInterval, DateRange } from '../utils/dates/helpers/dateIntervals';
 import { toDateRange } from '../utils/dates/helpers/dateIntervals';
+import { useFeature } from '../utils/features';
 import { DoughnutChartCard } from './charts/DoughnutChartCard';
 import { LineChartCard } from './charts/LineChartCard';
 import { SortableBarChartCard } from './charts/SortableBarChartCard';
@@ -43,6 +46,8 @@ export type VisitsStatsProps = PropsWithChildren<{
   };
   exportCsv: (visits: NormalizedVisit[]) => void;
   isOrphanVisits?: boolean;
+  /** A domain filter dropdown will be displayed if provided */
+  domains?: Domain[];
 }>;
 
 type VisitsNavLinkOptions = {
@@ -82,9 +87,10 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
     deletion,
     exportCsv,
     isOrphanVisits = false,
+    domains,
   } = props;
   const { visits, prevVisits, loading, errorData, fallbackInterval } = visitsInfo;
-  const [{ dateRange, visitsFilter, loadPrevInterval }, updateQuery] = useVisitsQuery();
+  const [{ dateRange, visitsFilter, loadPrevInterval, domain }, updateQuery] = useVisitsQuery();
   const visitsSettings = useSetting('visits');
   const [activeInterval, setActiveInterval] = useState<DateInterval>();
   const setDates = useCallback(
@@ -131,7 +137,8 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
     ...visitsFilter,
     excludeBots: visitsFilter.excludeBots ?? visitsSettings?.excludeBots,
     loadPrevInterval: loadPrevInterval ?? visitsSettings?.loadPrevInterval,
-  }), [loadPrevInterval, visitsFilter, visitsSettings?.excludeBots, visitsSettings?.loadPrevInterval]);
+    domain,
+  }), [loadPrevInterval, visitsFilter, visitsSettings?.excludeBots, visitsSettings?.loadPrevInterval, domain]);
   const mapLocations = useMemo(() => Object.values(citiesForMap), [citiesForMap]);
 
   const selectedBarRef = useRef<string>(undefined);
@@ -153,6 +160,8 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
     }
   }, [normalizedVisits]);
 
+  const filterByDomainIsSupported = useFeature('filterVisitsByDomain');
+
   useEffect(() => cancelGetVisits, [cancelGetVisits]);
   useEffect(() => {
     const resolvedDateRange = dateRange ?? toDateRange(currentFallbackInterval);
@@ -179,7 +188,7 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
       {children}
 
       <section className="flex flex-col lg:flex-row-reverse gap-4">
-        <div className="lg:flex-3 flex flex-col md:flex-row gap-x-2 gap-y-4">
+        <div className="lg:w-1/2 flex flex-col md:flex-row gap-x-2 gap-y-4">
           <div className="grow">
             <DateRangeSelector
               disabled={loading}
@@ -188,6 +197,13 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
               onDatesChange={setDates}
             />
           </div>
+          {filterByDomainIsSupported && domains && (
+            <DomainFilterDropdown
+              domains={loading ? [] : domains}
+              value={domain}
+              onChange={(domain) => updateQuery({ domain })}
+            />
+          )}
           <VisitsDropdown
             disabled={loading}
             isOrphanVisits={isOrphanVisits}
@@ -199,7 +215,7 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
             })}
           />
         </div>
-        <div className="lg:flex-2 xl:flex-3 flex gap-2">
+        <div className="lg:w-1/2 xl:flex-3 flex gap-2">
           {visits.length > 0 && (
             <>
               <ExportBtn

src/visits/helpers/hooks.ts

@@ -17,12 +17,14 @@ type VisitsRawQuery = Record<string, unknown> & {
   orphanVisitsType?: ShlinkOrphanVisitType;
   excludeBots?: BooleanString;
   loadPrevInterval?: BooleanString;
+  domain?: string;
 };
 
 export type VisitsQuery = {
   dateRange?: DateRange;
   visitsFilter: VisitsFilter;
   loadPrevInterval?: boolean;
+  domain?: string;
 };
 
 type UpdateQuery = (extra: DeepPartial<VisitsQuery>) => void;
@@ -44,7 +46,7 @@ const dateFromRangeToQuery = (dateName: keyof DateRange, dateRange?: DateRange):
 export const useVisitsQuery = (): [VisitsQuery, UpdateQuery] => {
   const navigate = useNavigate();
   const rawQuery = useParsedQuery<VisitsRawQuery>();
-  const { startDate, endDate, orphanVisitsType, excludeBots, loadPrevInterval, ...rest } = rawQuery;
+  const { startDate, endDate, orphanVisitsType, excludeBots, loadPrevInterval, domain, ...rest } = rawQuery;
 
   const query = useMemo(
     (): VisitsQuery => ({
@@ -54,11 +56,15 @@ export const useVisitsQuery = (): [VisitsQuery, UpdateQuery] => {
         excludeBots: excludeBots !== undefined ? excludeBots === 'true' : undefined,
       },
       loadPrevInterval: loadPrevInterval !== undefined ? loadPrevInterval === 'true' : undefined,
+      domain,
     }),
-    [endDate, excludeBots, loadPrevInterval, orphanVisitsType, startDate],
+    [endDate, excludeBots, loadPrevInterval, orphanVisitsType, startDate, domain],
   );
   const updateQuery = useCallback((extra: DeepPartial<VisitsQuery>) => {
-    const { dateRange, visitsFilter = {}, loadPrevInterval: newLoadPrevInterval } = mergeDeepRight(query, extra);
+    const { dateRange, visitsFilter = {}, loadPrevInterval: newLoadPrevInterval, domain } = mergeDeepRight(
+      query,
+      extra,
+    );
     const { excludeBots: newExcludeBots, orphanVisitsType: newOrphanVisitsType } = visitsFilter;
     const newQuery: VisitsRawQuery = {
       ...rest, // Merge with rest of existing query so that unknown params are preserved
@@ -67,6 +73,7 @@ export const useVisitsQuery = (): [VisitsQuery, UpdateQuery] => {
       excludeBots: newExcludeBots === undefined ? undefined : parseBooleanToString(newExcludeBots),
       orphanVisitsType: newOrphanVisitsType,
       loadPrevInterval: newLoadPrevInterval === undefined ? undefined : parseBooleanToString(newLoadPrevInterval),
+      domain,
     };
     const stringifiedQuery = stringifyQueryParams(newQuery);
     const queryString = !stringifiedQuery ? '' : `?${stringifiedQuery}`;

src/visits/reducers/nonOrphanVisits.ts

@@ -2,7 +2,7 @@ import type { ShlinkVisitsParams } from '@shlinkio/shlink-js-sdk/api-contract';
 import type { ShlinkApiClient } from '../../api-contract';
 import { isBetween } from '../../utils/dates/helpers/date';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
-import type { VisitsInfo } from './types';
+import type { LoadWithDomainVisits, VisitsInfo } from './types';
 
 const REDUCER_PREFIX = 'shlink/orphanVisits';
 
@@ -16,11 +16,11 @@ const initialState: VisitsInfo = {
 
 export const getNonOrphanVisits = (apiClientFactory: () => ShlinkApiClient) => createVisitsAsyncThunk({
   typePrefix: `${REDUCER_PREFIX}/getNonOrphanVisits`,
-  createLoaders: ({ options }) => {
+  createLoaders: ({ options, domain }: LoadWithDomainVisits) => {
     const apiClient = apiClientFactory();
     const { doIntervalFallback = false } = options;
 
-    const visitsLoader = async (query: ShlinkVisitsParams) => apiClient.getNonOrphanVisits(query);
+    const visitsLoader = async (query: ShlinkVisitsParams) => apiClient.getNonOrphanVisits({ ...query, domain });
     const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, (q) => apiClient.getNonOrphanVisits(q));
 
     return { visitsLoader, lastVisitLoader };

src/visits/reducers/orphanVisits.ts

@@ -4,11 +4,11 @@ import { isBetween } from '../../utils/dates/helpers/date';
 import { isOrphanVisit } from '../helpers';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
 import type { deleteOrphanVisits } from './orphanVisitsDeletion';
-import type { LoadVisits, VisitsInfo } from './types';
+import type { LoadWithDomainVisits, VisitsInfo } from './types';
 
 const REDUCER_PREFIX = 'shlink/orphanVisits';
 
-export interface LoadOrphanVisits extends LoadVisits {
+export interface LoadOrphanVisits extends LoadWithDomainVisits {
   orphanVisitsType?: ShlinkOrphanVisitType;
 }
 
@@ -30,13 +30,14 @@ const filterOrphanVisitsByType = ({ data, ...rest }: ShlinkVisitsList, type?: Sh
 
 export const getOrphanVisits = (apiClientFactory: () => ShlinkApiClient) => createVisitsAsyncThunk({
   typePrefix: `${REDUCER_PREFIX}/getOrphanVisits`,
-  createLoaders: ({ orphanVisitsType, options }: LoadOrphanVisits) => {
+  createLoaders: ({ orphanVisitsType, domain, options }: LoadOrphanVisits) => {
     const apiClient = apiClientFactory();
     const { doIntervalFallback = false } = options;
 
     const visitsLoader = async (query: ShlinkVisitsParams) => apiClient.getOrphanVisits({
       ...query,
-      type: orphanVisitsType, // Send type to the server, in case it supports filtering by type
+      type: orphanVisitsType,
+      domain,
     }).then(
       // We still try to filter locally, for Shlink older than 4.0.0
       (resp) => filterOrphanVisitsByType(resp, orphanVisitsType),

src/visits/reducers/tagVisits.ts

@@ -2,7 +2,7 @@ import type { ShlinkVisitsParams } from '@shlinkio/shlink-js-sdk/api-contract';
 import type { ShlinkApiClient } from '../../api-contract';
 import { filterCreatedVisitsByTag } from '../helpers';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
-import type { LoadVisits, VisitsInfo } from './types';
+import type { LoadWithDomainVisits, VisitsInfo } from './types';
 
 const REDUCER_PREFIX = 'shlink/tagVisits';
 
@@ -21,15 +21,15 @@ const initialState: TagVisits = {
   progress: null,
 };
 
-export type LoadTagVisits = LoadVisits & WithTag;
+export type LoadTagVisits = LoadWithDomainVisits & WithTag;
 
 export const getTagVisits = (apiClientFactory: () => ShlinkApiClient) => createVisitsAsyncThunk({
   typePrefix: `${REDUCER_PREFIX}/getTagVisits`,
-  createLoaders: ({ tag, options }: LoadTagVisits) => {
+  createLoaders: ({ tag, options, domain }: LoadTagVisits) => {
     const apiClient = apiClientFactory();
     const { doIntervalFallback = false } = options;
 
-    const visitsLoader = (query: ShlinkVisitsParams) => apiClient.getTagVisits(tag, query);
+    const visitsLoader = (query: ShlinkVisitsParams) => apiClient.getTagVisits(tag, { ...query, domain });
     const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, async (q) => apiClient.getTagVisits(tag, q));
 
     return { visitsLoader, lastVisitLoader };