Feature/instance logs

.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

next.config.js

@@ -20,7 +20,8 @@ if (isGithubActions) {
 const nextConfig = {
   assetPrefix,
   basePath,
-  reactStrictMode: true,
+  // reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     unoptimized: true,
   },

package.json

@@ -3,15 +3,15 @@
   "version": "0.11.3",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "export": "next export",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/core": "^1.17.10",
+    "@aleph-front/core": "^1.19.1",
     "@aleph-sdk/account": "^1.0.3",
     "@aleph-sdk/avalanche": "^1.0.3",
     "@aleph-sdk/client": "^1.0.6",
@@ -64,4 +64,4 @@
       "preset": "styled-components"
     }
   }
-}
+}

src/components/common/AmountInformation/cmp.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react'
+import { AmountInformationProps } from './types'
+import { StyledAmountInformationContainer } from './styles'
+
+export const AmountInformation = ({
+  amount = 0,
+}: AmountInformationProps = {}) => {
+  if (amount === 0) return <></>
+
+  return (
+    <StyledAmountInformationContainer tw="px-3">
+      <p className="fs-18 text-base2 tp-body2">{amount}</p>
+    </StyledAmountInformationContainer>
+  )
+}
+AmountInformation.displayName = 'AmountInformation'
+
+export default memo(AmountInformation) as typeof AmountInformation

src/components/common/AmountInformation/styles.tsx

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components'
+
+export const StyledAmountInformationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ theme }) => css`
+    background: ${theme.color.base1};
+  `}
+`

src/components/common/AmountInformation/types.ts

@@ -0,0 +1,3 @@
+export type AmountInformationProps = {
+  amount?: number
+}

src/components/common/ButtonLink/types.ts

@@ -1,9 +1,9 @@
 import { ButtonProps } from '@aleph-front/core'
-import { AnchorHTMLAttributes, ReactElement } from 'react'
+import { AnchorHTMLAttributes, ReactNode } from 'react'
 
 export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
   Omit<ButtonProps, 'variant' | 'color' | 'kind' | 'size'> &
   Partial<Pick<ButtonProps, 'variant' | 'color' | 'kind' | 'size'>> & {
     href: string
-    children: ReactElement | string
+    children: ReactNode
   }

src/components/common/CRNList/cmp.tsx

@@ -291,7 +291,7 @@ export default function CRNList(props: CRNListProps) {
     <>
       <SpinnerOverlay show={!filteredNodes} />
 
-      <NoisyContainer tw="w-full">
+      <NoisyContainer tw="h-full w-full">
         <div tw="flex mb-8 gap-10 justify-between flex-wrap flex-col md:flex-row items-stretch md:items-center">
           <div tw="flex-1">
             <TextInput
@@ -311,7 +311,10 @@ export default function CRNList(props: CRNListProps) {
             />
           </div>
         </div>
-        <div tw="h-[30rem] overflow-auto" ref={infiniteScrollContainerRef}>
+        <div
+          tw="min-h-[20rem] h-full overflow-auto"
+          ref={infiniteScrollContainerRef}
+        >
           <NodesTable
             {...{
               columns,

src/components/common/ComputingEntityDataPill/cmp.tsx

@@ -0,0 +1,28 @@
+import React, { memo } from 'react'
+import { ComputingEntityDataPillProps } from './types'
+import { StyledComputingEntityDataPill } from './styles'
+import { Icon } from '@aleph-front/core'
+import { useTheme } from 'styled-components'
+
+export const ComputingEntityDataPill = ({
+  value = 0,
+  icon,
+}: ComputingEntityDataPillProps) => {
+  const theme = useTheme()
+
+  return (
+    <StyledComputingEntityDataPill>
+      <p
+        className="fs-12 tp-h7 text-base2"
+        tw="flex text-center items-center justify-center gap-1"
+      >
+        {value}
+        {icon && <Icon size="0.7em" name={icon} color={theme.color.base2} />}
+      </p>
+    </StyledComputingEntityDataPill>
+  )
+}
+
+ComputingEntityDataPill.displayName = 'ComputingEntityDataPill'
+
+export default memo(ComputingEntityDataPill) as typeof ComputingEntityDataPill

src/components/common/ComputingEntityDataPill/styles.tsx

@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components'
+
+export const StyledComputingEntityDataPill = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.75rem;
+
+  ${({ theme }) => css`
+    background: ${theme.color.base1};
+  `}
+`

src/components/common/ComputingEntityDataPill/types.ts

@@ -0,0 +1,6 @@
+import { IconName } from '@aleph-front/core'
+
+export type ComputingEntityDataPillProps = {
+  value?: number
+  icon?: IconName
+}

src/components/common/ComputingInformation/cmp.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from 'react'
+import { ComputingInformationProps } from './types'
+import ComputingEntityDataPill from '../ComputingEntityDataPill'
+
+export const ComputingInformation = ({
+  running = 0,
+  paused = 0,
+  booting = 0,
+}: ComputingInformationProps = {}) => (
+  <div tw="flex justify-end gap-x-2.5 rounded-xl">
+    <ComputingEntityDataPill value={running} icon="play" />
+    <ComputingEntityDataPill value={paused} icon="pause" />
+    <ComputingEntityDataPill value={booting} icon="loader" />
+  </div>
+)
+
+ComputingInformation.displayName = 'ComputingInformation'
+
+export default memo(ComputingInformation) as typeof ComputingInformation

src/components/common/ComputingInformation/index.tsx

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/ComputingInformation/styles.tsx

@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components'
+
+export const StyledInformationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.75rem;
+
+  ${({ theme }) => css`
+    background: ${theme.color.base1};
+  `}
+`

src/components/common/ComputingInformation/types.ts

@@ -0,0 +1,5 @@
+export type ComputingInformationProps = {
+  running?: number
+  paused?: number
+  booting?: number
+}

src/components/common/DashboardCardWithSideImage/cmp.tsx

@@ -0,0 +1,54 @@
+import { Container } from '@/components/pages/dashboard/common'
+import {
+  CardWithSideImage,
+  NoisyContainer,
+  TextGradient,
+} from '@aleph-front/core'
+import ButtonLink from '../ButtonLink'
+import ExternalLinkButton from '../ExternalLinkButton'
+import { DashboardCardWithSideImageProps } from './types'
+
+export const DashboardCardWithSideImage = ({
+  info,
+  title,
+  description,
+  imageSrc,
+  imageAlt,
+  withButton = true,
+  buttonUrl,
+  buttonText,
+  externalLinkUrl,
+}: DashboardCardWithSideImageProps) => (
+  <NoisyContainer type="grain-1" tw="py-20">
+    <Container $variant="xl">
+      <CardWithSideImage
+        imageSrc={imageSrc}
+        imageAlt={imageAlt}
+        cardBackgroundColor="bg-white"
+      >
+        <div tw="flex flex-col gap-16">
+          <div>
+            <div className="tp-info text-main0">{info}</div>
+            <TextGradient as="h2" type="h3">
+              {title}
+            </TextGradient>
+            {description}
+          </div>
+          <div tw="mt-6 flex flex-wrap items-center justify-between gap-6">
+            {withButton && (
+              <ButtonLink variant="primary" size="md" href={buttonUrl}>
+                {buttonText}
+              </ButtonLink>
+            )}
+
+            <ExternalLinkButton href={externalLinkUrl}>
+              Learn more
+            </ExternalLinkButton>
+          </div>
+        </div>
+      </CardWithSideImage>
+    </Container>
+  </NoisyContainer>
+)
+
+export default DashboardCardWithSideImage

src/components/common/DashboardCardWithSideImage/index.ts

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/DashboardCardWithSideImage/types.ts

@@ -0,0 +1,11 @@
+export type DashboardCardWithSideImageProps = {
+  info: string
+  title: string
+  description: string
+  imageSrc: string
+  imageAlt: string
+  withButton?: boolean
+  buttonUrl: string
+  buttonText: string
+  externalLinkUrl: string
+}