Add domains filter control to tags, orphan and non-orphan visits

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,6 +1,7 @@
 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';
@@ -14,14 +15,15 @@ export type NonOrphanVisitsProps = {
   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(
@@ -43,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(
@@ -54,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,7 +27,7 @@ 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();
@@ -49,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/services/provideServices.ts

@@ -57,7 +57,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   ]));
 
   bottle.factory('TagVisits', TagVisitsFactory);
-  bottle.decorator('TagVisits', connectWithMercure(['tagVisits'], ['getTagVisits', 'cancelGetTagVisits']));
+  bottle.decorator('TagVisits', connectWithMercure(['tagVisits', 'domainsList'], ['getTagVisits', 'cancelGetTagVisits']));
 
   bottle.factory('TagVisitsComparison', TagVisitsComparisonFactory);
   bottle.decorator('TagVisitsComparison', connectWithMercure(
@@ -86,13 +86,13 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.factory('OrphanVisits', OrphanVisitsFactory);
   bottle.decorator('OrphanVisits', connectWithMercure(
-    ['orphanVisits', 'orphanVisitsDeletion'],
+    ['orphanVisits', 'orphanVisitsDeletion', 'domainsList'],
     ['getOrphanVisits', 'cancelGetOrphanVisits', 'deleteOrphanVisits'],
   ));
 
   bottle.factory('NonOrphanVisits', NonOrphanVisitsFactory);
   bottle.decorator('NonOrphanVisits', connectWithMercure(
-    ['nonOrphanVisits'],
+    ['nonOrphanVisits', 'domainsList'],
     ['getNonOrphanVisits', 'cancelGetNonOrphanVisits'],
   ));