Add a retry mechanism for custom domains

src/components/common/StatusLabel/cmp.tsx

@@ -1,48 +1,15 @@
 import React, { useMemo } from 'react'
 import { StatusLabelProps } from './types'
 import Label from '../Label/cmp'
-import { LabelVariant } from '../Label/types'
-import { RotatingLines } from 'react-loader-spinner'
-import { Icon } from '@aleph-front/aleph-core'
 import { useTheme } from 'styled-components'
 
 export const StatusLabel = React.memo(
-  ({ variant, ...rest }: StatusLabelProps) => {
+  ({ variant, children, ...rest }: StatusLabelProps) => {
     const theme = useTheme()
 
-    const labelVariant: LabelVariant = useMemo(
-      () =>
-        variant === 'running' || variant === 'ready'
-          ? 'success'
-          : variant === 'confirming'
-          ? 'warning'
-          : 'error',
-      [variant],
-    )
-
-    const labelContent = useMemo(
-      () =>
-        variant === 'ready' ? (
-          <>READY</>
-        ) : variant === 'running' ? (
-          <>RUNNING</>
-        ) : variant === 'confirming' ? (
-          <div tw="flex items-center">
-            <div tw="mr-2">CONFIRMING</div>
-            <RotatingLines strokeColor={theme.color.base2} width=".8rem" />
-          </div>
-        ) : (
-          <div tw="flex items-center">
-            <Icon name="warning" tw="mr-2" size="xs" />
-            <div>INSTANCE UNRESPONSIVE</div>
-          </div>
-        ),
-      [theme, variant],
-    )
-
     return (
-      <Label {...rest} variant={labelVariant}>
-        {labelContent}
+      <Label {...rest} variant={variant}>
+        {children}
       </Label>
     )
   },

src/components/common/StatusLabel/types.ts

@@ -1,10 +1,6 @@
 import { HTMLAttributes } from 'react'
 
-export type StatusLabelVariant =
-  | 'ready'
-  | 'running'
-  | 'confirming'
-  | 'unresponsive'
+export type StatusLabelVariant = 'success' | 'warning' | 'error'
 
 export type StatusLabelProps = HTMLAttributes<HTMLSpanElement> & {
   variant?: StatusLabelVariant

src/components/pages/dashboard/manage/ManageDomain/cmp.tsx

@@ -20,8 +20,15 @@ import StatusLabel from '@/components/common/StatusLabel'
 import ButtonLink from '@/components/common/ButtonLink'
 
 export default function ManageDomain() {
-  const { domain, status, refEntity, account, handleDelete, handleCopyRef } =
-    useManageDomain()
+  const {
+    domain,
+    status,
+    refEntity,
+    account,
+    handleDelete,
+    handleCopyRef,
+    handleRetry,
+  } = useManageDomain()
 
   if (!domain) {
     return (
@@ -46,9 +53,11 @@ export default function ManageDomain() {
               <Icon name="input-text" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={domain.confirmed ? 'ready' : 'confirming'}
+                variant={status?.status ? 'success' : 'error'}
                 tw="ml-4"
-              />
+              >
+                DOMAIN RECORDS NOT CONFIGURED
+              </StatusLabel>
             </div>
             <div>
               <Button
@@ -214,13 +223,23 @@ export default function ManageDomain() {
                     </div>
 
                     <div tw="my-5">
-                      <div className="tp-info text-main0">ERROR</div>
-                      <GrayText>{status.err}</GrayText>
+                      <div className="tp-info text-main0">FINAL STEP</div>
+                      <GrayText>
+                        After configuring the domain records you can retry to
+                        link them again here
+                      </GrayText>
                     </div>
 
                     <div tw="my-5">
-                      <div className="tp-info text-main0">TIPS</div>
-                      <GrayText>{status.help}</GrayText>
+                      <Button
+                        onClick={handleRetry}
+                        size="regular"
+                        variant="secondary"
+                        color="main0"
+                        kind="neon"
+                      >
+                        Retry
+                      </Button>
                     </div>
                   </>
                 )}

src/components/pages/dashboard/manage/ManageFunction/cmp.tsx

@@ -9,11 +9,15 @@ import { ellipseAddress, ellipseText, humanReadableSize } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import VolumeList from '../VolumeList/cmp'
 import StatusLabel from '@/components/common/StatusLabel/cmp'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageFunction() {
   const { func, handleCopyHash, handleDelete, handleDownload, copyAndNotify } =
     useManageFunction()
 
+  const theme = useTheme()
+
   if (!func) {
     return (
       <>
@@ -38,9 +42,21 @@ export default function ManageFunction() {
               <Icon name="alien-8bit" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={func.confirmed ? 'running' : 'confirming'}
+                variant={func.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {func.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button

src/components/pages/dashboard/manage/ManageInstance/cmp.tsx

@@ -14,7 +14,7 @@ import {
 import { Container, GrayText, Separator } from '../common'
 import VolumeList from '../VolumeList'
 import StatusLabel from '@/components/common/StatusLabel'
-import { ThreeDots } from 'react-loader-spinner'
+import { RotatingLines, ThreeDots } from 'react-loader-spinner'
 import { useTheme } from 'styled-components'
 import Link from 'next/link'
 
@@ -58,12 +58,22 @@ export default function ManageInstance() {
               <div className="tp-body2">{name}</div>
               <StatusLabel
                 variant={
-                  instance.confirmed && status?.vm_ipv6
-                    ? 'running'
-                    : 'confirming'
+                  instance.confirmed && status?.vm_ipv6 ? 'success' : 'warning'
                 }
                 tw="ml-4"
-              />
+              >
+                {instance.confirmed && status?.vm_ipv6 ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button

src/components/pages/dashboard/manage/ManageSSHKey/cmp.tsx

@@ -8,11 +8,15 @@ import { useManageSSHKey } from '@/hooks/pages/dashboard/manage/useManageSSHKey'
 import { ellipseAddress, ellipseText } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import StatusLabel from '@/components/common/StatusLabel'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageSSHKey() {
   const { sshKey, handleCopyKey, handleCopyLabel, handleDelete } =
     useManageSSHKey()
 
+  const theme = useTheme()
+
   if (!sshKey) {
     return (
       <>
@@ -36,9 +40,21 @@ export default function ManageSSHKey() {
               <Icon name="key" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={sshKey.confirmed ? 'ready' : 'confirming'}
+                variant={sshKey.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {sshKey.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button

src/components/pages/dashboard/manage/ManageVolume/cmp.tsx

@@ -8,11 +8,15 @@ import { useManageVolume } from '@/hooks/pages/dashboard/manage/useManageVolume'
 import { ellipseAddress, ellipseText, humanReadableSize } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import StatusLabel from '@/components/common/StatusLabel'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageVolume() {
   const { volume, handleCopyHash, handleDelete, handleDownload } =
     useManageVolume()
 
+  const theme = useTheme()
+
   if (!volume) {
     return (
       <>
@@ -36,9 +40,21 @@ export default function ManageVolume() {
               <Icon name="floppy-disk" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={volume.confirmed ? 'ready' : 'confirming'}
+                variant={volume.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {volume.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button

src/domain/domain.ts

@@ -16,14 +16,15 @@ export type DomainAggregateItem = {
   type: AddDomainTarget
   message_id: string
   programType?: EntityType.Instance | EntityType.Program
+  updated_at: string
 }
 
 export type DomainAggregate = Record<string, DomainAggregateItem | null>
 
 export type AddDomain = {
   name: string
   target: AddDomainTarget
-  programType: EntityType.Instance | EntityType.Program
+  programType?: EntityType.Instance | EntityType.Program
   ref: string
 }
 
@@ -32,6 +33,7 @@ export type Domain = Omit<AddDomain, 'programType'> & {
   id: string
   confirmed?: boolean
   programType?: EntityType.Instance | EntityType.Program
+  updated_at: string
 }
 
 export type DomainStatus = {
@@ -73,6 +75,26 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
     return entities.find((entity) => entity.id === id)
   }
 
+  async retry(domain: Domain) {
+    const content = {
+      message_id: domain.ref,
+      type: domain.target,
+      programType: domain.programType,
+      updated_at: new Date().toISOString(),
+    }
+
+    try {
+      await aggregate.Publish({
+        account: this.account,
+        key: this.key,
+        channel: this.channel,
+        content,
+      })
+    } catch (err) {
+      throw E_.RequestFailed(err)
+    }
+  }
+
   async add(
     domains: AddDomain | AddDomain[],
     throwOnCollision?: boolean,
@@ -91,6 +113,7 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
           message_id: ref,
           programType,
           type: target,
+          updated_at: new Date().toISOString(),
         }
 
         // @note: legacy domains don't include programType (default to Instance)
@@ -201,6 +224,9 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
     content: DomainAggregateItem,
   ): Domain {
     const { message_id, type } = content
+    // @note: legacy domains don't have updated_at property
+    // Cast to string to avoid type errors
+    const updated_at = content?.updated_at || 'unknown'
 
     const domain: Domain = {
       type: EntityType.Domain,
@@ -209,6 +235,7 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
       target: type,
       ref: message_id,
       confirmed: true,
+      updated_at: updated_at,
     }
 
     // @note: legacy domains don't include programType (default to Instance)