feat(web): link Dashboard stats to Releases page (#1281)

* feat(web): link stats to release table

- added Errored Pushes
- Made Recent Activity same color as Stats

* feat(releasetable): made links a separate row

https://i.imgur.com/ZoAOrXP.png

remove comment

* added LinkIcon to StatsItem

- Changed grid-cols to 2, as we now have 4 for narrow widths

* fix linting

* move some text modifier to parent element

* feat: add scale on hover with transition

deduplicated some classes

* adapt gap between StatsItems for mobile
remove border and title on stats divs

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

internal/database/release.go

@@ -551,7 +551,8 @@ FROM (
 CROSS JOIN (
 	SELECT
 	COUNT(CASE WHEN status = 'PUSH_APPROVED' THEN 0 END) AS push_approved_count,
-	COUNT(CASE WHEN status = 'PUSH_REJECTED' THEN 0 END) AS push_rejected_count
+	COUNT(CASE WHEN status = 'PUSH_REJECTED' THEN 0 END) AS push_rejected_count,
+	COUNT(CASE WHEN status = 'PUSH_ERROR' THEN 0 END) AS push_error_count
 	FROM release_action_status
 ) AS foo`
 
@@ -562,7 +563,7 @@ CROSS JOIN (
 
 	var rls domain.ReleaseStats
 
-	if err := row.Scan(&rls.TotalCount, &rls.FilteredCount, &rls.FilterRejectedCount, &rls.PushApprovedCount, &rls.PushRejectedCount); err != nil {
+	if err := row.Scan(&rls.TotalCount, &rls.FilteredCount, &rls.FilterRejectedCount, &rls.PushApprovedCount, &rls.PushRejectedCount, &rls.PushErrorCount); err != nil {
 		return nil, errors.Wrap(err, "error scanning row")
 	}
 

internal/domain/release.go

@@ -150,6 +150,7 @@ type ReleaseStats struct {
 	FilterRejectedCount int64 `json:"filter_rejected_count"`
 	PushApprovedCount   int64 `json:"push_approved_count"`
 	PushRejectedCount   int64 `json:"push_rejected_count"`
+	PushErrorCount      int64 `json:"push_error_count"`
 }
 
 type ReleasePushStatus string

web/src/components/data-table/Cells.tsx

@@ -8,6 +8,8 @@ import { toast } from "react-hot-toast";
 import { formatDistanceToNowStrict } from "date-fns";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ArrowPathIcon, CheckIcon } from "@heroicons/react/24/solid";
+import { ArrowDownTrayIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { ExternalLink } from "../ExternalLink";
 import { ClockIcon, XMarkIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
 
 import { APIClient } from "@api/APIClient";
@@ -21,6 +23,10 @@ interface CellProps {
     value: string;
 }
 
+interface LinksCellProps {
+  value: Release;
+}
+
 export const AgeCell = ({ value }: CellProps) => (
   <div className="text-sm text-gray-500" title={simplifyDate(value)}>
     {formatDistanceToNowStrict(new Date(value), { addSuffix: false })}
@@ -243,3 +249,20 @@ export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
     ))}
   </div>
 );
+
+export const LinksCell = ({ value }: LinksCellProps) => {
+  return (
+    <div className="flex space-x-2 text-blue-400 dark:text-blue-500">
+      {value.download_url && (
+        <ExternalLink href={value.download_url}>
+          <ArrowDownTrayIcon title="Download torrent file" className="h-5 w-5 hover:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
+        </ExternalLink>
+      )}
+      {value.info_url && (
+        <ExternalLink href={value.info_url}>
+          <ArrowTopRightOnSquareIcon title="Visit torrentinfo url" className="h-5 w-5 hover:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
+        </ExternalLink>
+      )}
+    </div>
+  );
+};

web/src/components/data-table/index.tsx

@@ -4,4 +4,4 @@
  */
 
 export { Button, PageButton } from "./Buttons";
-export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell } from "./Cells";
+export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell, LinksCell } from "./Cells";

web/src/screens/dashboard/Stats.tsx

@@ -6,33 +6,49 @@
 import { useQuery } from "@tanstack/react-query";
 import { APIClient } from "@api/APIClient";
 import { classNames } from "@utils";
+import { useNavigate } from "react-router-dom";
+import { LinkIcon } from "@heroicons/react/24/solid";
 
 interface StatsItemProps {
     name: string;
     value?: number;
     placeholder?: string;
+    onClick?: () => void;
 }
 
-const StatsItem = ({ name, placeholder, value }: StatsItemProps) => (
+const StatsItem = ({ name, placeholder, value, onClick }: StatsItemProps) => (
   <div
-    className="relative px-4 py-3 overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-150 dark:border-gray-775"
+    className="group relative px-4 py-3 cursor-pointer overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 hover:scale-110 hover:shadow-xl transition-all duration-200 ease-in-out"
-    title="All time"
+    onClick={onClick}
   >
     <dt>
-      <p className="pb-0.5 text-sm font-medium text-gray-500 truncate">{name}</p>
+      <div className="flex items-center text-sm font-medium text-gray-500 group-hover:dark:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
+        <p className="pb-0.5 truncate">{name}</p>
+        <LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" />
+      </div>
     </dt>
 
-    <dd className="flex items-baseline">
+    <div className="flex items-baseline text-3xl font-extrabold text-gray-900 dark:text-gray-200">
-      <p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{placeholder}</p>
+      <dd>
+        <p>{placeholder}</p>
       </dd>
-
+      <dd>
-    <dd className="flex items-baseline">
+        <p>{value}</p>
-      <p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{value}</p>
       </dd>
     </div>
+  </div>
 );
 
 export const Stats = () => {
+  const navigate = useNavigate();
+  const handleStatClick = (filterType: string) => {
+    if (filterType) {
+      navigate(`/releases?filter=${filterType}`);
+    } else {
+      navigate("/releases");
+    }
+  };
+
   const { isLoading, data } = useQuery({
     queryKey: ["dash_release_stats"],
     queryFn: APIClient.release.stats,
@@ -45,11 +61,12 @@ export const Stats = () => {
         Stats
       </h1>
 
-      <dl className={classNames("grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3", isLoading ? "animate-pulse" : "")}>
+      <dl className={classNames("grid grid-cols-2 gap-2 sm:gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-4", isLoading ? "animate-pulse" : "")}>
-        <StatsItem name="Filtered Releases" value={data?.filtered_count ?? 0} />
+        <StatsItem name="Filtered Releases" onClick={() => handleStatClick("")} value={data?.filtered_count ?? 0} />
         {/* <StatsItem name="Filter Rejected Releases" stat={data?.filter_rejected_count} /> */}
-        <StatsItem name="Rejected Pushes" value={data?.push_rejected_count ?? 0 } />
+        <StatsItem name="Approved Pushes" onClick={() => handleStatClick("PUSH_APPROVED")}  value={data?.push_approved_count ?? 0} />
-        <StatsItem name="Approved Pushes" value={data?.push_approved_count ?? 0} />
+        <StatsItem name="Rejected Pushes" onClick={() => handleStatClick("PUSH_REJECTED")}  value={data?.push_rejected_count ?? 0 } />
+        <StatsItem name="Errored Pushes" onClick={() => handleStatClick("PUSH_ERROR")}  value={data?.push_error_count ?? 0} />
       </dl>
     </div>
   );

web/src/screens/releases/Filters.tsx

@@ -124,8 +124,14 @@ const FilterOption = ({ label, value }: FilterOptionProps) => (
 );
 
 export const PushStatusSelectColumnFilter = ({
-  column: { filterValue, setFilter, id }
+  column: { filterValue, setFilter, id },
+  initialFilterValue
 }: FilterProps<object>) => {
+  React.useEffect(() => {
+    if (initialFilterValue) {
+      setFilter(initialFilterValue);
+    }
+  }, [initialFilterValue, setFilter]);
   const label = filterValue ? PushStatusOptions.find((o) => o.value === filterValue && o.value)?.label : "Push status";
   return (
     <div className="mr-3" key={id}>

web/src/screens/releases/ReleaseTable.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { CellProps, Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
 import {
@@ -23,9 +24,7 @@ import * as DataTable from "@components/data-table";
 
 import { IndexerSelectColumnFilter, PushStatusSelectColumnFilter, SearchColumnFilter } from "./Filters";
 import { classNames } from "@utils";
-import { ArrowTopRightOnSquareIcon, ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { Tooltip } from "@components/tooltips/Tooltip";
-import { ExternalLink } from "@components/ExternalLink";
 
 export const releaseKeys = {
   all: ["releases"] as const,
@@ -84,6 +83,9 @@ const TableReducer = (state: TableState, action: Actions): TableState => {
 };
 
 export const ReleaseTable = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const filterTypeFromUrl = queryParams.get("filter");
   const columns = React.useMemo(() => [
     {
       Header: "Age",
@@ -110,26 +112,17 @@ export const ReleaseTable = () => {
                 {String(props.cell.value)}
               </span>
             </Tooltip>
-            <div className="flex mr-0">
-              {props.row.original.download_url && (
-                <ExternalLink
-                  href={props.row.original.download_url}
-                  className="px-2"
-                >
-                  <ArrowDownTrayIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
-                </ExternalLink>
-              )}
-              {props.row.original.info_url && (
-                <ExternalLink href={props.row.original.info_url}>
-                  <ArrowTopRightOnSquareIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
-                </ExternalLink>
-              )}
-            </div>
           </div>
         );
       },
       Filter: SearchColumnFilter
     },
+    {
+      Header: "Links",
+      accessor: (row) => ({ download_url: row.download_url, info_url: row.info_url }),
+      id: "links",
+      Cell: DataTable.LinksCell
+    },
     {
       Header: "Actions",
       accessor: "action_status",
@@ -199,7 +192,7 @@ export const ReleaseTable = () => {
       initialState: {
         pageIndex: queryPageIndex,
         pageSize: queryPageSize,
-        filters: []
+        filters: filterTypeFromUrl ? [{ id: "action_status", value: filterTypeFromUrl }] : []
       },
       manualPagination: true,
       manualFilters: true,

web/src/types/Release.d.ts

@@ -45,6 +45,7 @@ interface ReleaseStats {
   filter_rejected_count: number;
   push_approved_count: number;
   push_rejected_count: number;
+  push_error_count: number;
 }
 
 interface ReleaseFilter {