diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index 3b0e76f1..0682187b 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -1,5 +1,5 @@
import React, { Fragment } from "react"
-import { Timeline, Icon, Span, Card, Tabs, SkeletonCircle, SkeletonText, HTMLChakraProps } from '@chakra-ui/react';
+import { Timeline, Icon, Span, Card, Tabs, SkeletonCircle, Collapsible, SkeletonText, HTMLChakraProps } from '@chakra-ui/react';
import { CLIENT_DEAD_QUEUE, CLIENT_INGRESS_QUEUE, ComponentType, JsonPlayObject, LifecycleStep, PlayMatchResult, QUEUE_STATUS_COMPLETED, QUEUE_STATUS_FAILED, QUEUE_STATUS_QUEUED, ScrobbleResult } from "../../core/Atomic";
import { PlayData } from "./PlayData";
import { ErrorAlert } from "./ErrorAlert";
@@ -7,7 +7,7 @@ import { IoMdCodeDownload } from "react-icons/io";
import { BiWrench } from "react-icons/bi";
import { HiMiniMagnifyingGlass } from "react-icons/hi2";
import { TbDatabaseEdit } from "react-icons/tb";
-import { capitalize } from "../../core/StringUtils";
+import { capitalize, capitalizeWords } from "../../core/StringUtils";
import { shortTodayAwareFormat } from "../../core/TimeUtils";
import dayjs, { Dayjs } from "dayjs";
import { ChakraCodeBlockShort } from "./CodeBlock";
@@ -30,6 +30,10 @@ export interface ActivityDetailProps {
componentType?: ComponentType
}
+const ItemSummaryText = (props: HTMLChakraProps<"span"> & {children: React.ReactNode}) => {props.children}
+
+const timelineCollapsibleProps: Collapsible.TriggerProps = {alignItems: "flex-end"};
+
const TimelineLoading = () => (
@@ -60,8 +64,8 @@ const QueuedCreatedItem = (props: { dead?: boolean, datetime: string }) => (
-
- {props.dead ? 'Dead ' : ''}Queued at {shortTodayAwareFormat(dayjs(props.datetime))}
+
+ {props.dead ? 'Dead ' : ''}Queued at {shortTodayAwareFormat(dayjs(props.datetime))}
@@ -100,9 +104,10 @@ const NewItem = (props: Pick
- {componentType === 'source' ? 'Discovered' : 'Recieved'} new Play from {capitalize(source)} at {shortTodayAwareFormat(dayjs(seenAt))}
- }
+ triggerProps={timelineCollapsibleProps}
+ indicator={
+ {componentType === 'source' ? 'Discovered' : 'Recieved'} new Play from {capitalizeWords(source)} at {shortTodayAwareFormat(dayjs(seenAt))}
+ }
defaultOpen={collapsibleOpen}
timeline
disableUntil="md">
@@ -158,7 +163,8 @@ const TransformsItem = (props: Pick
{transformVerb} using configured Rules for {steps[0].hook} {transformResult}}
+ triggerProps={timelineCollapsibleProps}
+ indicator={{transformVerb} using configured Rules for {steps[0].hook} {transformResult}}
defaultOpen={collapsibleOpen}
timeline>
@@ -184,8 +190,8 @@ const NoTransformsItem = () => (
-
- Play was not transformed because no Transform Rules were used/configured.
+
+ Play was not transformed because no Transform Rules were used/configured.
@@ -210,7 +216,8 @@ const ScrobbleMatchItem = (props: Pick &
Found {match.match ? a duplicate Scrobble : 'no duplicate Scrobbles'}}
+ triggerProps={timelineCollapsibleProps}
+ indicator={Found {match.match ? a duplicate Scrobble : 'no duplicate Scrobbles'}}
defaultOpen={collapsibleOpen}
disableUntil="md"
timeline>
@@ -244,12 +251,12 @@ const ScrobbleResponseItem = (props: PickScrobble attempt to Client resulted in an error.
+ scrobbleSummary = Scrobble attempt to Client resulted in an error.
} else if (warnings.length > 0) {
- scrobbleSummary = Scrobbled to Client but response has warnings.;
+ scrobbleSummary = Scrobbled to Client but response has warnings.;
scrobbleIconProps.orange = 'orange.focusRing';
} else {
- scrobbleSummary = Scrobbled to Client successfully.;
+ scrobbleSummary = Scrobbled to Client successfully.;
}
}
@@ -268,6 +275,7 @@ const ScrobbleResponseItem = (props: Pick
-
- {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queued at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}
+
+ {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queued at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}
@@ -317,8 +325,8 @@ const QueueTimelineItem = (props: {queueState: QueueStateApi, collapsibleOpen: b
-
- {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue finished processing at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}
+
+ {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue finished processing at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}
@@ -327,12 +335,13 @@ const QueueTimelineItem = (props: {queueState: QueueStateApi, collapsibleOpen: b
if(queueState.queueStatus === QUEUE_STATUS_FAILED) {
let titleContent: React.JSX.Element;
- const titleProps: HTMLChakraProps<"span"> = queueState.error === undefined ? timelineTextFormatting : {};
if(queueState.error === undefined) {
- titleContent = <>{queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue failed at {shortTodayAwareFormat(dayjs(queueState.updatedAt))};
+ titleContent = {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue failed at {shortTodayAwareFormat(dayjs(queueState.updatedAt))};
} else {
titleContent = (
- {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue failed at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}}
+ {queueState.queueName === CLIENT_DEAD_QUEUE ? 'Dead ' : ''}Queue failed at {shortTodayAwareFormat(dayjs(queueState.updatedAt))}}
defaultOpen={collapsibleOpen}
disableUntil="md"
timeline>
@@ -349,7 +358,7 @@ const QueueTimelineItem = (props: {queueState: QueueStateApi, collapsibleOpen: b
-
+
{titleContent}
diff --git a/src/client/utils/ComponentUtils.tsx b/src/client/utils/ComponentUtils.tsx
index 6a67334f..33dc18b5 100644
--- a/src/client/utils/ComponentUtils.tsx
+++ b/src/client/utils/ComponentUtils.tsx
@@ -8,7 +8,7 @@ export const cardHeaderSeparator: Card.HeaderProps = {
};
export const timelineTextFormatting: HTMLChakraProps<"span"> = {
- textAlign: "left",
+ //textAlign: "left",
textWrap: "balance"
}