feat: raise event on encode outputs and subscribe via encode dialog

app/src/components/interfaces/dashboard/EncodeDialog.tsx

@@ -2,10 +2,12 @@ import type { EncodeDialogFragment$key } from '@/__generated__/EncodeDialogFragm
 
 import { Button, Card, Chip, Dialog, Typography } from '@giantnodes/react'
 import { IconX } from '@tabler/icons-react'
-import { graphql, useFragment } from 'react-relay'
+import React from 'react'
+import { graphql, useFragment, useSubscription } from 'react-relay'
 
 import CodeBlock from '@/components/ui/code-block/CodeBlock'
 import EncodeStatusBadge from '@/components/ui/encode-badges/EncodeStatusBadge'
+import ScrollAnchor from '@/components/ui/ScrollAnchor'
 
 const FRAGMENT = graphql`
   fragment EncodeDialogFragment on Encode {
@@ -23,13 +25,26 @@ const FRAGMENT = graphql`
   }
 `
 
+const OUTPUTTED_SUBSCRIPTION = graphql`
+  subscription EncodeDialogOutputtedSubscription {
+    encode_outputted {
+      output
+    }
+  }
+`
+
 type EncodeDialogProps = React.PropsWithChildren & {
   $key: EncodeDialogFragment$key
 }
 
 const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
   const data = useFragment(FRAGMENT, $key)
 
+  useSubscription({
+    subscription: OUTPUTTED_SUBSCRIPTION,
+    variables: {},
+  })
+
   return (
     <Dialog placement="right">
       {children}
@@ -72,7 +87,9 @@ const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
                     <Card.Header>Logs</Card.Header>
 
                     <Card.Body className="overflow-y-auto">
-                      <CodeBlock language="excel">{data.output}</CodeBlock>
+                      <ScrollAnchor>
+                        <CodeBlock language="powershell">{data.output}</CodeBlock>
+                      </ScrollAnchor>
                     </Card.Body>
                   </Card>
                 )}

app/src/components/tables/encoding/EncodingTable.tsx

@@ -5,11 +5,12 @@ import type {
 } from '@/__generated__/EncodingTableFragment.graphql'
 import type { EncodingTableRefetchQuery } from '@/__generated__/EncodingTableRefetchQuery.graphql'
 
-import { Button, Table, Typography } from '@giantnodes/react'
+import { Button, Link, Table } from '@giantnodes/react'
 import { IconProgressX } from '@tabler/icons-react'
 import React from 'react'
 import { graphql, useMutation, usePaginationFragment, useSubscription } from 'react-relay'
 
+import EncodeDialog from '@/components/interfaces/dashboard/EncodeDialog'
 import { EncodeBadges } from '@/components/ui'
 
 const FRAGMENT = graphql`
@@ -32,6 +33,7 @@ const FRAGMENT = graphql`
             }
           }
           ...EncodeBadgesFragment
+          ...EncodeDialogFragment
         }
       }
       pageInfo {
@@ -130,7 +132,11 @@ const EncodingTable: React.FC<EncodingTableProps> = ({ $key }) => {
           {(item) => (
             <Table.Row id={item.node.id}>
               <Table.Cell>
-                <Typography.Paragraph>{item.node.file.path_info.name}</Typography.Paragraph>
+                <EncodeDialog $key={item.node}>
+                  <Button as={Link} color="transparent">
+                    {item.node.file.path_info.name}
+                  </Button>
+                </EncodeDialog>
               </Table.Cell>
               <Table.Cell>
                 <div className="flex flex-row justify-end gap-2">

app/src/components/ui/ScrollAnchor.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+type ScrollAnchorProps = React.PropsWithChildren
+
+const ScrollAnchor: React.FC<ScrollAnchorProps> = ({ children }) => {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => ref.current?.scrollIntoView({ behavior: 'smooth' }))
+
+  return (
+    <>
+      {children}
+      <div ref={ref} id="anchor" />
+    </>
+  )
+}
+
+export default ScrollAnchor

src/Service.Dashboard/src/Application.Components/Encodes/Events/RaiseEncodeOutputtedTopic.cs

@@ -0,0 +1,25 @@
+using Giantnodes.Service.Dashboard.Application.Contracts.Encodes.Events;
+using Giantnodes.Service.Dashboard.Domain.Aggregates.Encodes.Repositories;
+using HotChocolate.Subscriptions;
+using MassTransit;
+
+namespace Giantnodes.Service.Dashboard.Application.Components.Encodes.Events;
+
+public class RaiseEncodeOutputtedTopic : IConsumer<EncodeProgressedEvent>
+{
+    private readonly IEncodeRepository _repository;
+    private readonly ITopicEventSender _sender;
+
+    public RaiseEncodeOutputtedTopic(IEncodeRepository repository, ITopicEventSender sender)
+    {
+        _repository = repository;
+        _sender = sender;
+    }
+
+    public async Task Consume(ConsumeContext<EncodeProgressedEvent> context)
+    {
+        var encode = await _repository.SingleAsync(x => x.Id == context.Message.EncodeId);
+
+        await _sender.SendAsync(nameof(EncodeOutputtedEvent), encode, context.CancellationToken);
+    }
+}

src/Service.Dashboard/src/Application.Contracts/Encodes/Events/EncodeOutputtedEvent.cs

@@ -0,0 +1,12 @@
+using Giantnodes.Infrastructure.Domain.Events;
+
+namespace Giantnodes.Service.Dashboard.Application.Contracts.Encodes.Events;
+
+public sealed record EncodeOutputtedEvent : DomainEvent
+{
+    public required Guid EncodeId { get; init; }
+
+    public required string Output { get; init; }
+
+    public required string FullOutput { get; init; }
+}

src/Service.Dashboard/src/Domain/Aggregates/Encodes/Encode.cs

@@ -224,6 +224,13 @@ public void AppendOutputLog(string output)
         Guard.Against.NullOrWhiteSpace(output);
 
         Output = string.Join(Environment.NewLine, Output, output);
+
+        DomainEvents.Add(new EncodeOutputtedEvent
+        {
+            EncodeId = Id,
+            Output = output,
+            FullOutput = Output
+        });
     }
 
     /// <summary>

src/Service.Dashboard/src/HttpApi/Resolvers/Encodes/Subscriptions/EncodeOutputtedSubscription.cs

@@ -0,0 +1,23 @@
+using Giantnodes.Service.Dashboard.Application.Contracts.Encodes.Events;
+using Giantnodes.Service.Dashboard.Domain.Aggregates.Encodes;
+using Giantnodes.Service.Dashboard.Persistence.DbContexts;
+using Microsoft.EntityFrameworkCore;
+
+namespace Giantnodes.Service.Dashboard.HttpApi.Resolvers.Encodes.Subscriptions;
+
+[ExtendObjectType(OperationTypeNames.Subscription)]
+public class EncodeOutputtedSubscription
+{
+    [Subscribe]
+    [Topic(nameof(EncodeOutputtedEvent))]
+    [UseSingleOrDefault]
+    [UseProjection]
+    [UseFiltering]
+    [UseSorting]
+    public IQueryable<Encode> EncodeOutputted(
+        [Service] ApplicationDbContext database,
+        [EventMessage] Encode encode)
+    {
+        return database.Encodes.Where(x => x.Id == encode.Id).AsNoTracking();
+    }
+}