mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
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>
This commit is contained in:
soup
GitHub
parent
937d62fb82
commit
3b60365483
8 changed files with 79 additions and 37 deletions
|
|
@ -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")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@
|
|||
*/
|
||||
|
||||
export { Button, PageButton } from "./Buttons";
|
||||
export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell } from "./Cells";
|
||||
export { AgeCell, IndexerCell, TitleCell, ReleaseStatusCell, LinksCell } from "./Cells";
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
title="All time"
|
||||
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"
|
||||
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">
|
||||
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{placeholder}</p>
|
||||
<div className="flex items-baseline text-3xl font-extrabold text-gray-900 dark:text-gray-200">
|
||||
<dd>
|
||||
<p>{placeholder}</p>
|
||||
</dd>
|
||||
|
||||
<dd className="flex items-baseline">
|
||||
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{value}</p>
|
||||
<dd>
|
||||
<p>{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" : "")}>
|
||||
<StatsItem name="Filtered Releases" value={data?.filtered_count ?? 0} />
|
||||
<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" 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" value={data?.push_approved_count ?? 0} />
|
||||
<StatsItem name="Approved Pushes" onClick={() => handleStatClick("PUSH_APPROVED")} 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
1
web/src/types/Release.d.ts
vendored
1
web/src/types/Release.d.ts
vendored
|
|
@ -45,6 +45,7 @@ interface ReleaseStats {
|
|||
filter_rejected_count: number;
|
||||
push_approved_count: number;
|
||||
push_rejected_count: number;
|
||||
push_error_count: number;
|
||||
}
|
||||
|
||||
interface ReleaseFilter {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue