Add logic to dynamically exclude bots visits in tags table

This commit is contained in:
Alejandro Celaya 2023-03-19 10:32:11 +01:00
parent 8fa61a6301
commit 4ebe23e89f
10 changed files with 35 additions and 20 deletions

View file

@ -12,9 +12,10 @@
"lint:fix": "npm run lint:css:fix && npm run lint:js:fix", "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
"lint:css:fix": "npm run lint:css -- --fix", "lint:css:fix": "npm run lint:css -- --fix",
"lint:js:fix": "npm run lint:js -- --fix", "lint:js:fix": "npm run lint:js -- --fix",
"types": "tsc",
"start": "vite serve --host=0.0.0.0", "start": "vite serve --host=0.0.0.0",
"preview": "vite preview --host=0.0.0.0", "preview": "vite preview --host=0.0.0.0",
"build": "tsc --noEmit && vite build && node scripts/replace-version.mjs", "build": "npm run types && vite build && node scripts/replace-version.mjs",
"build:dist": "npm run build && node scripts/create-dist-file.mjs", "build:dist": "npm run build && node scripts/create-dist-file.mjs",
"test": "jest --env=jsdom --colors", "test": "jest --env=jsdom --colors",
"test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary", "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",

View file

@ -21,6 +21,9 @@ export interface ShlinkHealth {
interface ShlinkTagsStats { interface ShlinkTagsStats {
tag: string; tag: string;
shortUrlsCount: number; shortUrlsCount: number;
visitsSummary?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
/** @deprecated */
visitsCount: number; visitsCount: number;
} }

View file

@ -12,7 +12,7 @@ import { Message } from '../utils/Message';
import { OrderingDropdown } from '../utils/OrderingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { Result } from '../utils/Result'; import { Result } from '../utils/Result';
import { SearchField } from '../utils/SearchField'; import { SearchField } from '../utils/SearchField';
import type { NormalizedTag } from './data'; import type { SimplifiedTag } from './data';
import type { TagsOrder, TagsOrderableFields } from './data/TagsListChildrenProps'; import type { TagsOrder, TagsOrderableFields } from './data/TagsListChildrenProps';
import { TAGS_ORDERABLE_FIELDS } from './data/TagsListChildrenProps'; import { TAGS_ORDERABLE_FIELDS } from './data/TagsListChildrenProps';
import type { TagsList as TagsListState } from './reducers/tagsList'; import type { TagsList as TagsListState } from './reducers/tagsList';
@ -31,12 +31,19 @@ export const TagsList = (TagsTable: FC<TagsTableProps>) => boundToMercureHub((
) => { ) => {
const [order, setOrder] = useState<TagsOrder>(settings.tags?.defaultOrdering ?? {}); const [order, setOrder] = useState<TagsOrder>(settings.tags?.defaultOrdering ?? {});
const resolveSortedTags = pipe( const resolveSortedTags = pipe(
() => tagsList.filteredTags.map((tag): NormalizedTag => ({ () => tagsList.filteredTags.map((tag): SimplifiedTag => {
const theTag = tagsList.stats[tag];
const visits = (
settings.visits?.excludeBots ? theTag?.visitsSummary?.nonBots : theTag?.visitsSummary?.total
) ?? theTag?.visitsCount ?? 0;
return {
tag, tag,
shortUrls: tagsList.stats[tag]?.shortUrlsCount ?? 0, visits,
visits: tagsList.stats[tag]?.visitsCount ?? 0, shortUrls: theTag?.shortUrlsCount ?? 0,
})), };
(normalizedTags) => sortList<NormalizedTag>(normalizedTags, order), }),
(simplifiedTags) => sortList<SimplifiedTag>(simplifiedTags, order),
); );
useEffect(() => { useEffect(() => {

View file

@ -9,11 +9,11 @@ import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
import { useToggle } from '../utils/helpers/hooks'; import { useToggle } from '../utils/helpers/hooks';
import { prettify } from '../utils/helpers/numbers'; import { prettify } from '../utils/helpers/numbers';
import type { ColorGenerator } from '../utils/services/ColorGenerator'; import type { ColorGenerator } from '../utils/services/ColorGenerator';
import type { NormalizedTag, TagModalProps } from './data'; import type { SimplifiedTag, TagModalProps } from './data';
import { TagBullet } from './helpers/TagBullet'; import { TagBullet } from './helpers/TagBullet';
export interface TagsTableRowProps { export interface TagsTableRowProps {
tag: NormalizedTag; tag: SimplifiedTag;
selectedServer: SelectedServer; selectedServer: SelectedServer;
} }

View file

@ -1,6 +1,6 @@
import type { SelectedServer } from '../../servers/data'; import type { SelectedServer } from '../../servers/data';
import type { Order } from '../../utils/helpers/ordering'; import type { Order } from '../../utils/helpers/ordering';
import type { NormalizedTag } from './index'; import type { SimplifiedTag } from './index';
export const TAGS_ORDERABLE_FIELDS = { export const TAGS_ORDERABLE_FIELDS = {
tag: 'Tag', tag: 'Tag',
@ -13,6 +13,6 @@ export type TagsOrderableFields = keyof typeof TAGS_ORDERABLE_FIELDS;
export type TagsOrder = Order<TagsOrderableFields>; export type TagsOrder = Order<TagsOrderableFields>;
export interface TagsListChildrenProps { export interface TagsListChildrenProps {
sortedTags: NormalizedTag[]; sortedTags: SimplifiedTag[];
selectedServer: SelectedServer; selectedServer: SelectedServer;
} }

View file

@ -1,6 +1,9 @@
import type { ShlinkVisitsSummary } from '../../api/types';
export interface TagStats { export interface TagStats {
shortUrlsCount: number; shortUrlsCount: number;
visitsCount: number; visitsCount: number;
visitsSummary?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
} }
export interface TagModalProps { export interface TagModalProps {
@ -9,7 +12,7 @@ export interface TagModalProps {
toggle: () => void; toggle: () => void;
} }
export interface NormalizedTag { export interface SimplifiedTag {
tag: string; tag: string;
shortUrls: number; shortUrls: number;
visits: number; visits: number;

View file

@ -50,6 +50,7 @@ const increaseVisitsForTags = (tags: TagIncrease[], stats: TagsStatsMap) => tags
const tagStats = theStats[tag]; const tagStats = theStats[tag];
// TODO take into consideration bots, nonBots and total
return { return {
...theStats, ...theStats,
[tag]: { [tag]: {
@ -78,12 +79,11 @@ export const listTags = (buildShlinkApiClient: ShlinkApiClientBuilder, force = t
} }
const { listTags: shlinkListTags, tagsStats } = buildShlinkApiClient(getState); const { listTags: shlinkListTags, tagsStats } = buildShlinkApiClient(getState);
const { tags, stats = [] }: ShlinkTags = await ( const { tags, stats }: ShlinkTags = await (
supportedFeatures.tagsStats(selectedServer) ? tagsStats() : shlinkListTags() supportedFeatures.tagsStats(selectedServer) ? tagsStats() : shlinkListTags()
); );
const processedStats = stats.reduce<TagsStatsMap>((acc, { tag, shortUrlsCount, visitsCount }) => { const processedStats = stats.reduce<TagsStatsMap>((acc, { tag, ...rest }) => {
acc[tag] = { shortUrlsCount, visitsCount }; acc[tag] = rest;
return acc; return acc;
}, {}); }, {});

View file

@ -24,6 +24,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.decorator('EditTagModal', connect(['tagEdit'], ['editTag', 'tagEdited'])); bottle.decorator('EditTagModal', connect(['tagEdit'], ['editTag', 'tagEdited']));
bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator'); bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator');
bottle.decorator('TagsTableRow', connect(['settings']));
bottle.serviceFactory('TagsTable', TagsTable, 'TagsTableRow'); bottle.serviceFactory('TagsTable', TagsTable, 'TagsTableRow');

View file

@ -10,7 +10,7 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsList />', () => { describe('<TagsList />', () => {
const filterTags = jest.fn(); const filterTags = jest.fn();
const TagsListComp = createTagsList(() => <>TagsTable</>); const TagsListComp = createTagsList(({ sortedTags }) => <>TagsTable ({sortedTags.map((t) => t.visits).join(',')})</>);
const setUp = (tagsList: Partial<TagsList>) => renderWithEvents( const setUp = (tagsList: Partial<TagsList>) => renderWithEvents(
<TagsListComp <TagsListComp
{...Mock.all<TagsListProps>()} {...Mock.all<TagsListProps>()}

View file

@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import type { SelectedServer } from '../../src/servers/data'; import type { SelectedServer } from '../../src/servers/data';
import type { NormalizedTag } from '../../src/tags/data'; import type { SimplifiedTag } from '../../src/tags/data';
import { TagsTable as createTagsTable } from '../../src/tags/TagsTable'; import { TagsTable as createTagsTable } from '../../src/tags/TagsTable';
import { rangeOf } from '../../src/utils/utils'; import { rangeOf } from '../../src/utils/utils';
import { renderWithEvents } from '../__helpers__/setUpTest'; import { renderWithEvents } from '../__helpers__/setUpTest';
@ -17,7 +17,7 @@ describe('<TagsTable />', () => {
(useLocation as any).mockReturnValue({ search }); (useLocation as any).mockReturnValue({ search });
return renderWithEvents( return renderWithEvents(
<TagsTable <TagsTable
sortedTags={sortedTags.map((tag) => Mock.of<NormalizedTag>({ tag }))} sortedTags={sortedTags.map((tag) => Mock.of<SimplifiedTag>({ tag }))}
selectedServer={Mock.all<SelectedServer>()} selectedServer={Mock.all<SelectedServer>()}
currentOrder={{}} currentOrder={{}}
orderByColumn={() => orderByColumn} orderByColumn={() => orderByColumn}