feat: add encode operation details widget

PHILLIPS71 · May 11, 2024 · 3380b3a · 3380b3a
1 parent ac1b968
commit 3380b3a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 12 deletions.
diff --git a/app/src/app/(dashboard)/encode/[id]/page.tsx b/app/src/app/(dashboard)/encode/[id]/page.tsx
@@ -2,19 +2,27 @@
 
 import type { page_EncodedPage_Query } from '@/__generated__/page_EncodedPage_Query.graphql'
 
-import { Card, Typography } from '@giantnodes/react'
+import { Alert, Card, Typography } from '@giantnodes/react'
+import { IconAlertCircleFilled } from '@tabler/icons-react'
 import { notFound } from 'next/navigation'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
-import { EncodeCommandWidget, EncodeOutputWidget, EncodeSizeWidget } from '@/components/interfaces/encode'
+import {
+  EncodeCommandWidget,
+  EncodeOperationWidget,
+  EncodeOutputWidget,
+  EncodeSizeWidget,
+} from '@/components/interfaces/encode'
 import { FileSystemBreadcrumb } from '@/components/interfaces/file-system'
 
 const QUERY = graphql`
   query page_EncodedPage_Query($where: EncodeFilterInput) {
     encode(where: $where) {
+      failure_reason
       file {
         ...FileSystemBreadcrumbFragment
       }
+      ...EncodeOperationWidgetFragment
       ...EncodeCommandWidgetFragment
       ...EncodeOutputWidgetFragment
       ...EncodeSizeWidgetFragment
@@ -51,6 +59,18 @@ const EncodePage: React.FC<EncodePageProps> = ({ params }) => {
             </Card.Body>
           </Card>
 
+          {query.encode.failure_reason && (
+            <Alert color="danger">
+              <IconAlertCircleFilled size={16} />
+              <Alert.Body>
+                <Alert.Heading>The encode operation encountered an error</Alert.Heading>
+                <Alert.List>
+                  <Alert.Item>{query.encode.failure_reason}</Alert.Item>
+                </Alert.List>
+              </Alert.Body>
+            </Alert>
+          )}
+
           <Card>
             <Card.Header>
               <Typography.Text>Size</Typography.Text>
@@ -84,9 +104,7 @@ const EncodePage: React.FC<EncodePageProps> = ({ params }) => {
 
         <div className="flex flex-col gap-3 min-w-80">
           <Card>
-            <Card.Header>
-              <Typography.Text>Tbd</Typography.Text>
-            </Card.Header>
+            <EncodeOperationWidget $key={query.encode} />
           </Card>
         </div>
       </div>

diff --git a/app/src/components/interfaces/encode/dialog/panels/EncodeScriptPanel.tsx b/app/src/components/interfaces/encode/dialog/panels/EncodeScriptPanel.tsx
@@ -3,10 +3,11 @@ import type { EncodeScriptPanelFragment$key } from '@/__generated__/EncodeScript
 import { Card, Typography } from '@giantnodes/react'
 import { graphql, useFragment } from 'react-relay'
 
-import { EncodeCommandWidget, EncodeOutputWidget } from '@/components/interfaces/encode'
+import { EncodeCommandWidget, EncodeOperationWidget, EncodeOutputWidget } from '@/components/interfaces/encode'
 
 const FRAGMENT = graphql`
   fragment EncodeScriptPanelFragment on Encode {
+    ...EncodeOperationWidgetFragment
     ...EncodeCommandWidgetFragment
     ...EncodeOutputWidgetFragment
   }
@@ -21,6 +22,10 @@ const EncodeScriptPanel: React.FC<EncodeScriptPanelProps> = ({ $key }) => {
 
   return (
     <>
+      <Card className="flex-none">
+        <EncodeOperationWidget $key={data} />
+      </Card>
+
       <Card className="flex-none">
         <Card.Header>
           <Typography.Text>Command</Typography.Text>

diff --git a/app/src/components/interfaces/encode/index.ts b/app/src/components/interfaces/encode/index.ts
@@ -1,5 +1,6 @@
 export { default as EncodeDialog } from '@/components/interfaces/encode/dialog/EncodeDialog'
 
 export { default as EncodeCommandWidget } from '@/components/interfaces/encode/widgets/EncodeCommandWidget'
+export { default as EncodeOperationWidget } from '@/components/interfaces/encode/widgets/EncodeOperationWidget'
 export { default as EncodeOutputWidget } from '@/components/interfaces/encode/widgets/EncodeOutputWidget'
 export { default as EncodeSizeWidget } from '@/components/interfaces/encode/widgets/EncodeSizeWidget'
diff --git a/app/src/components/interfaces/encode/widgets/EncodeOperationWidget.tsx b/app/src/components/interfaces/encode/widgets/EncodeOperationWidget.tsx
@@ -0,0 +1,99 @@
+import type { EncodeOperationWidgetFragment$key } from '@/__generated__/EncodeOperationWidgetFragment.graphql'
+
+import { Chip, Table, Typography } from '@giantnodes/react'
+import dayjs from 'dayjs'
+import { filesize } from 'filesize'
+import { graphql, useFragment } from 'react-relay'
+
+import { percent } from '@/utilities/numbers'
+
+const FRAGMENT = graphql`
+  fragment EncodeOperationWidgetFragment on Encode {
+    percent
+    updated_at
+    machine {
+      name
+      user_name
+    }
+    speed {
+      bitrate
+      frames
+      scale
+    }
+  }
+`
+
+type EncodeOperationWidgetProps = {
+  $key: EncodeOperationWidgetFragment$key
+}
+
+const EncodeOperationWidget: React.FC<EncodeOperationWidgetProps> = ({ $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+
+  return (
+    <Table headingless size="sm">
+      <Table.Head>
+        <Table.Column key="name" isRowHeader>
+          name
+        </Table.Column>
+
+        <Table.Column key="name">value</Table.Column>
+      </Table.Head>
+
+      <Table.Body>
+        {data.percent != null && (
+          <Table.Row>
+            <Table.Cell>
+              <Typography.Text>Progress</Typography.Text>
+            </Table.Cell>
+            <Table.Cell className="text-right">
+              <Chip color="brand">{percent(data.percent)}</Chip>
+            </Table.Cell>
+          </Table.Row>
+        )}
+
+        <Table.Row>
+          <Table.Cell>
+            <Typography.Text>Machine</Typography.Text>
+          </Table.Cell>
+          <Table.Cell className="flex justify-end gap-1">
+            <Chip color="info">{data.machine?.name}</Chip>
+            <Chip color="info">{data.machine?.user_name}</Chip>
+          </Table.Cell>
+        </Table.Row>
+
+        {data.speed != null && (
+          <Table.Row>
+            <Table.Cell>
+              <Typography.Text>Speed</Typography.Text>
+            </Table.Cell>
+            <Table.Cell className="flex justify-end gap-1">
+              <Chip color="warning">{data.speed.frames} fps</Chip>
+
+              <Chip color="warning">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip>
+
+              <Chip color="warning">{data.speed.scale.toFixed(2)}x</Chip>
+            </Table.Cell>
+          </Table.Row>
+        )}
+
+        {data.updated_at != null && (
+          <Table.Row>
+            <Table.Cell>
+              <Typography.Text>Heartbeat</Typography.Text>
+            </Table.Cell>
+            <Table.Cell className="text-right">
+              <Typography.Text>
+                <Chip color="danger" title={dayjs(data.updated_at).format('L LT')}>
+                  {dayjs(data.updated_at).fromNow()}
+                </Chip>
+              </Typography.Text>
+            </Table.Cell>
+          </Table.Row>
+        )}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default EncodeOperationWidget
diff --git a/app/src/components/ui/encode-badges/EncodeBadges.tsx b/app/src/components/ui/encode-badges/EncodeBadges.tsx
@@ -9,6 +9,7 @@ import React from 'react'
 import { graphql, useFragment } from 'react-relay'
 
 import EncodeStatusBadge from '@/components/ui/encode-badges/EncodeStatusBadge'
+import { percent } from '@/utilities/numbers'
 
 type EncodeBadgesProps = Omit<ChipProps, 'color'> & {
   $key: EncodeBadgesFragment$key
@@ -40,12 +41,6 @@ const FRAGMENT = graphql`
 const EncodeBadges: React.FC<EncodeBadgesProps> = ({ $key, size }) => {
   const data = useFragment(FRAGMENT, $key)
 
-  const percent = (value: number): string =>
-    Intl.NumberFormat('en-US', {
-      style: 'percent',
-      maximumFractionDigits: 2,
-    }).format(value)
-
   const SizeChip = React.useCallback(() => {
     const difference = data.snapshots[data.snapshots.length - 1].size - data.snapshots[0].size
     const increase = Math.abs(difference / data.snapshots[0].size)

diff --git a/app/src/utilities/numbers.ts b/app/src/utilities/numbers.ts
@@ -0,0 +1,5 @@
+export const percent = (value: number): string =>
+  Intl.NumberFormat('en-US', {
+    style: 'percent',
+    maximumFractionDigits: 2,
+  }).format(value)