Skip to content

Commit

Permalink
Merge pull request #289 from us3r-network/F-nodeAsService-bufan
Browse files Browse the repository at this point in the history
F node as service bufan
  • Loading branch information
sin-bufan authored Jan 9, 2024
2 parents 17fa404 + 2a14067 commit 50badcb
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ export default function CreateNewModel ({
currCeramicNode.serviceUrl + '/',
// `http://${ceramicNodes[0].serviceK8sMetadata.ceramicLoadbalanceHost}:${ceramicNodes[0].serviceK8sMetadata.ceramicLoadbalancePort}`,
currCeramicNode.privateKey,
// '',
session
)
if (!result) return
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export default function DeleteCeramicNodeModal ({
signIn()
return
}
if (nodeName !== node.name) {
if (nodeName.trim() !== node.name.trim()) {
console.log('Node Name: ', nodeName, node.name)
alert('Node name is not correct!')
return
}
Expand Down
13 changes: 9 additions & 4 deletions packages/client/dashboard/src/components/FavoriteModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useSession } from '@us3r-network/auth-with-rainbowkit'
import { PersonalCollection, useAppCtx } from '../context/AppCtx'
import { Network } from './Selector/EnumSelect'
import { getStarModels, startIndexModel, updateDapp } from '../api'
import { ModelStream } from '../types'
import { CeramicStatus, ModelStream } from '../types.d'
import { shortPubKey } from '../utils/shortPubKey'
import dayjs from 'dayjs'
import { S3_SCAN_URL } from '../constants'
Expand Down Expand Up @@ -181,7 +181,12 @@ function ModelList() {
<OpsBtns
modelId={item.stream_id}
hasIndexed={!!item.isIndexed}
ceramicNodeId={currCeramicNode?.id}
ceramicNodeId={
currCeramicNode &&
currCeramicNode.status === CeramicStatus.RUNNING
? currCeramicNode?.id
: undefined
}
/>
</td>
</tr>
Expand Down Expand Up @@ -230,7 +235,7 @@ export function OpsBtns({
setAdding(false)
}
},
[hasIndexed, loadDapps, selectedDapp, session]
[ceramicNodeId, hasIndexed, loadDapps, selectedDapp, session]
)
return (
<div className="btns">
Expand Down Expand Up @@ -295,7 +300,7 @@ const ListBox = styled.div`
.btns {
display: flex;
align-items: center;
.loading {
width: 20px;
}
Expand Down
7 changes: 4 additions & 3 deletions packages/client/dashboard/src/components/ModelList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import PlusIcon from './Icons/PlusIcon'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import useSelectedDapp from '../hooks/useSelectedDapp'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { DappComposite, ModelStream } from '../types'
import { CeramicStatus, DappComposite, ModelStream } from '../types.d'
import { getStarModels, getDappComposites, deleteDappComposites } from '../api'
import { Network } from './Selector/EnumSelect'
import TrashIcon from './Icons/TrashIcon'
Expand Down Expand Up @@ -43,7 +43,7 @@ export default function ModelList ({
const session = useSession()
const { loadDapps, currDapp } = useAppCtx()
const { appId, selectedDapp } = useSelectedDapp()
const { ceramicNodes } = useCeramicNodeCtx()
const { currCeramicNode } = useCeramicNodeCtx()
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [dappModels, setDappModels] = useState<ModelStream[]>()
Expand Down Expand Up @@ -178,7 +178,8 @@ export default function ModelList ({
<CreateNew />
{editable &&
isOwner &&
(!ceramicNodes || ceramicNodes.length === 0 ? (
(!currCeramicNode ||
currCeramicNode.status !== CeramicStatus.RUNNING ? (
<DialogTrigger>
<Button>
<PlusIcon />
Expand Down
30 changes: 23 additions & 7 deletions packages/client/dashboard/src/components/NoCeramicNodeModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import styled from 'styled-components'
import CloseIcon from './Icons/CloseIcon'
import { Link } from 'react-router-dom'
import useSelectedDapp from '../hooks/useSelectedDapp'
import { useCeramicNodeCtx } from '../context/CeramicNodeCtx'
import { CeramicStatus } from '../types.d'

export default function NoCeramicNodeModal ({
closeModal
}: {
closeModal: () => void
}) {
const { selectedDapp } = useSelectedDapp()
const { currCeramicNode } = useCeramicNodeCtx()
return (
<Box>
<div className='title'>
Expand All @@ -17,24 +20,37 @@ export default function NoCeramicNodeModal ({
<CloseIcon />
</button>
</div>
<div>There is no available node now.</div>
{selectedDapp && (
<Link to={`/dapp/${selectedDapp?.id}/node`}>
<button className='ok-button'>Deploy Private Node</button>
</Link>
{currCeramicNode ? (
currCeramicNode.status !== CeramicStatus.RUNNING ? (
<div>
<p>Your Private Ceramic Node is {currCeramicNode.status} ......</p>
<p>Please wait while it is ready!</p>
</div>
) : (
<div>Your Private Ceramic Node is Ready to use.</div>
)
) : (
<div>
<div>There is no available node now.</div>
{selectedDapp && (
<Link to={`/dapp/${selectedDapp?.id}/node`}>
<button className='ok-button'>Deploy Private Node</button>
</Link>
)}
</div>
)}
</Box>
)
}
const Box = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
/* justify-content: space-between; */
padding: 30px;
gap: 20px;
position: relative;
width: 600px;
min-height: 200px;
min-height: 160px;
margin: 0 auto;
background: #1b1e23;
Expand Down
65 changes: 39 additions & 26 deletions packages/client/dashboard/src/container/CeramicNodes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,26 @@ import NodeTerminal from '../components/Terminal'
import CopyTint from '../components/CopyTint'
export default function CeramicNodes () {
const {
currCeramicNode,
loadingCeramicNodes: loading,
ceramicNodes,
loadCeramicNodes
} = useCeramicNodeCtx()
const { currDapp } = useAppCtx()
const [selectedNode, setSelectedNode] = useState<CeramicDto | undefined>(
undefined
)

useEffect(() => {
let timer: NodeJS.Timeout | undefined
// console.log('ceramicNodes changes: ', ceramicNodes)
if (ceramicNodes.length > 0) {
if (ceramicNodes[0].status === CeramicStatus.PREPARING) {
setTimeout(() => {
if (ceramicNodes[0].status !== CeramicStatus.RUNNING) {
timer = setTimeout(() => {
loadCeramicNodes()
}, 10000)
}, 5000)
}
setSelectedNode(ceramicNodes[0])
} else setSelectedNode(undefined)
}
return ()=>{
if (timer) clearTimeout(timer)
}
}, [ceramicNodes, loadCeramicNodes])

const [curentDappNetwork, setCurentDappNetwork] = useState<CeramicNetwork>(
Expand Down Expand Up @@ -83,15 +85,11 @@ export default function CeramicNodes () {
</div>
<NodesListBox>
{ceramicNodes?.map(item => {
const active = selectedNode?.id === item.id
const active = currCeramicNode?.id === item.id
return (
<div key={item.id} className={active ? 'active' : ''}>
<div
className='title'
onClick={() => {
if (active) return
setSelectedNode(item)
}}
>
<div>{item.name}</div>
</div>
Expand All @@ -108,7 +106,7 @@ export default function CeramicNodes () {
})}
</NodesListBox>
</ListBox>
{selectedNode && <CeramicNodeInfo node={selectedNode} />}
{currCeramicNode && <CeramicNodeInfo node={currCeramicNode} />}
</Container>
)
}
Expand Down Expand Up @@ -197,31 +195,44 @@ function CeramicNodeInfo ({ node }: { node: CeramicDto }) {
</div> */}
<div className='node-info'>
<div className='node-info-key'>DB Type: </div>
<div className='node-info-value'>{node.serviceK8sMetadata.ceramicDbType}</div>
<div className='node-info-value'>
{node.serviceK8sMetadata.ceramicDbType}
</div>
</div>
<div className='node-info'>
<div className='node-info-key'>Historical Sync: </div>
<div className='node-info-value'>{node.serviceK8sMetadata.ceramicEnableHistoricalSync.toString()}</div>
<div className='node-info-value'>
{node.serviceK8sMetadata.ceramicEnableHistoricalSync.toString()}
</div>
</div>
</div>
) : null}
</NodeInfoBox>
{node?.id && node.status === CeramicStatus.RUNNING && session?.did && (
<NodeTermnalBox>
<NodeTerminal ceramicId={node.id} didSession={session.serialize()} />
</NodeTermnalBox>
)}
{node?.id &&
(node.status === CeramicStatus.STARTING ||
node.status === CeramicStatus.RUNNING) &&
session?.did && (
<NodeTermnalBox>
<NodeTerminal
ceramicId={node.id}
didSession={session.serialize()}
/>
</NodeTermnalBox>
)}
</NodeInfoContainer>
)
}

const Container = styled.main`
height: 100%;
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 25px;
margin-bottom: 25px;
justify-content: stretch;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
`
const ListBox = styled.div`
background: #1b1e23;
Expand Down Expand Up @@ -331,6 +342,7 @@ const NodesListBox = styled.div`
`

const NodeInfoContainer = styled.div`
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
Expand All @@ -342,10 +354,11 @@ const NodeInfoBox = styled.div`
border-radius: 20px;
border: 1px solid #39424c;
background: #1b1e23;
width: calc(100%-280px);
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
flex-grow: 0;
.title {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -402,8 +415,8 @@ const NodeInfoBox = styled.div`
}
`
const NodeTermnalBox = styled.div`
width: calc(100%-280px);
height: 600px;
flex-shrink: 1;
flex-grow: 1;
padding: 20px;
background-color: black;
border-radius: 20px;
Expand Down
26 changes: 16 additions & 10 deletions packages/client/dashboard/src/container/ExploreModel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'
import styled from 'styled-components'
import InfiniteScroll from 'react-infinite-scroll-component'

import { ClientDApp, ModelStream } from '../types'
import { CeramicStatus, ClientDApp, ModelStream } from '../types.d'
import {
PageSize,
getModelStreamList,
Expand Down Expand Up @@ -273,7 +273,12 @@ export default function ExploreModel () {
hasIndexed={!!item.isIndexed}
hasStarItem={hasStarItem}
fetchPersonal={fetchPersonalCollections}
ceramicNodeId={currCeramicNode?.id}
ceramicNodeId={
currCeramicNode &&
currCeramicNode.status === CeramicStatus.RUNNING
? currCeramicNode?.id
: undefined
}
/>
</td>
</tr>
Expand All @@ -288,11 +293,7 @@ export default function ExploreModel () {
)
}

function Dapps({
dapps,
}: {
dapps: ClientDApp[]
}) {
function Dapps ({ dapps }: { dapps: ClientDApp[] }) {
const apps = useMemo(() => {
const data = [...dapps]
if (data.length > 3)
Expand All @@ -301,17 +302,22 @@ function Dapps({
}, [dapps])

return (
<DappBox className="cc">
<DappBox className='cc'>
{apps.data.length > 0
? apps.data.map((item, idx) => {
return (
<a target='_blank' href={`${S3_SCAN_URL}/dapps/${item.id}?network=${item.network}`} key={item.name} rel="noreferrer">
<a
target='_blank'
href={`${S3_SCAN_URL}/dapps/${item.id}?network=${item.network}`}
key={item.name}
rel='noreferrer'
>
<ImgOrName name={item.name} imgUrl={item.icon} />
</a>
)
})
: 'None'}
{apps.left > 0 && <span className="left">{apps.left}+</span>}
{apps.left > 0 && <span className='left'>{apps.left}+</span>}
</DappBox>
)
}
Expand Down
7 changes: 5 additions & 2 deletions packages/client/dashboard/src/context/CeramicNodeCtx.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
} from 'react'

import { useSession } from '@us3r-network/auth-with-rainbowkit'
import { CeramicDto } from '../types'
import { CeramicDto } from '../types.d'
import { getCeramicNodes } from '../api/ceramicNode'

export interface CeramicNodeContextData {
Expand Down Expand Up @@ -42,7 +42,10 @@ export default function CeramicNodeProvider ({
setCeramicNodes(resp.data.data)
}, [session])

const currCeramicNode = useMemo(() => ceramicNodes[0], [ceramicNodes])
const currCeramicNode = useMemo(
() => ceramicNodes[0],
[ceramicNodes]
)

useEffect(() => {
setLoadingCeramicNodes(true)
Expand Down
1 change: 1 addition & 0 deletions packages/client/dashboard/src/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ export enum CeramicNetwork {

export enum CeramicStatus {
PREPARING = 'Preparing',
STARTING = 'Starting',
RUNNING = 'Running',
// PAUSE = 'Pause',
// RESUMING = 'Resuming',
Expand Down

0 comments on commit 50badcb

Please sign in to comment.