Added new card in overview to display orphan visits

src/api/types/index.ts

@@ -46,6 +46,7 @@ export interface ShlinkVisits {
 
 export interface ShlinkVisitsOverview {
   visitsCount: number;
+  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
 }
 
 export interface ShlinkVisitsParams {

src/servers/Overview.tsx

@@ -38,7 +38,7 @@ export const Overview = (
 }: OverviewConnectProps) => {
   const { loading, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
-  const { loading: loadingVisits, visitsCount } = visitsOverview;
+  const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
   const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
   const history = useHistory();
 
@@ -51,7 +51,7 @@ export const Overview = (
   return (
     <>
       <div className="row mb-3">
-        <div className="col-md-6 col-lg-4">
+        <div className="col-md-6 col-xl-3">
           <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
             <CardText tag="h2">
@@ -64,7 +64,20 @@ export const Overview = (
             </CardText>
           </Card>
         </div>
-        <div className="col-md-6 col-lg-4">
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Orphan visits</CardTitle>
+            <CardText tag="h2">
+              <ForServerVersion minVersion="2.6.0">
+                {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
+              </ForServerVersion>
+              <ForServerVersion maxVersion="2.5.*">
+                <small className="text-muted"><i>Shlink 2.6 is needed</i></small>
+              </ForServerVersion>
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-md-6 col-xl-3">
           <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
@@ -72,7 +85,7 @@ export const Overview = (
             </CardText>
           </Card>
         </div>
-        <div className="col-md-12 col-lg-4">
+        <div className="col-md-6 col-xl-3">
           <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
             <CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>

src/visits/reducers/visitsOverview.ts

@@ -13,6 +13,7 @@ export const GET_OVERVIEW = 'shlink/visitsOverview/GET_OVERVIEW';
 
 export interface VisitsOverview {
   visitsCount: number;
+  orphanVisitsCount?: number;
   loading: boolean;
   error: boolean;
 }
@@ -21,6 +22,7 @@ export type GetVisitsOverviewAction = ShlinkVisitsOverview & Action<string>;
 
 const initialState: VisitsOverview = {
   visitsCount: 0,
+  orphanVisitsCount: 0,
   loading: false,
   error: false,
 };
@@ -28,7 +30,7 @@ const initialState: VisitsOverview = {
 export default buildReducer<VisitsOverview, GetVisitsOverviewAction & CreateVisitsAction>({
   [GET_OVERVIEW_START]: () => ({ ...initialState, loading: true }),
   [GET_OVERVIEW_ERROR]: () => ({ ...initialState, error: true }),
-  [GET_OVERVIEW]: (_, { visitsCount }) => ({ ...initialState, visitsCount }),
+  [GET_OVERVIEW]: (_, { visitsCount, orphanVisitsCount }) => ({ ...initialState, visitsCount, orphanVisitsCount }),
   [CREATE_VISITS]: ({ visitsCount, ...rest }, { createdVisits }) => ({
     ...rest,
     visitsCount: visitsCount + createdVisits.length,

test/servers/Overview.test.tsx

@@ -32,7 +32,7 @@ describe('<Overview />', () => {
         loadVisitsOverview={loadVisitsOverview}
         shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })}
         tagsList={Mock.of<TagsList>({ loading, tags: [ 'foo', 'bar', 'baz' ] })}
-        visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456 })}
+        visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })}
         selectedServer={Mock.of<ReachableServer>({ id: serverId })}
         createNewVisits={jest.fn()}
         loadMercureInfo={jest.fn()}
@@ -49,7 +49,7 @@ describe('<Overview />', () => {
     const wrapper = createWrapper(true);
     const cards = wrapper.find(CardText);
 
-    expect(cards).toHaveLength(3);
+    expect(cards).toHaveLength(4);
     cards.forEach((card) => expect(card.html()).toContain('Loading...'));
   });
 
@@ -57,10 +57,11 @@ describe('<Overview />', () => {
     const wrapper = createWrapper();
     const cards = wrapper.find(CardText);
 
-    expect(cards).toHaveLength(3);
+    expect(cards).toHaveLength(4);
     expect(cards.at(0).html()).toContain(prettify(3456));
-    expect(cards.at(1).html()).toContain(prettify(83710));
+    expect(cards.at(1).html()).toContain(prettify(28));
-    expect(cards.at(2).html()).toContain(prettify(3));
+    expect(cards.at(2).html()).toContain(prettify(83710));
+    expect(cards.at(3).html()).toContain(prettify(3));
   });
 
   test('first card displays warning for old shlink versions', () => {