From 3f72d485ff5b6f1b0ab170047778b95a139d9784 Mon Sep 17 00:00:00 2001 From: DLHTX <949729789@qq.com> Date: Mon, 5 Jun 2023 15:10:41 +0800 Subject: [PATCH 1/2] perf(api): split all project interface --- src/components/IDE/CurrentProject/index.tsx | 44 +++- src/components/IDE/Projects/index.tsx | 9 +- src/components/IDE/ToolBar/index.tsx | 70 +++--- src/components/IDE/index.tsx | 7 +- src/server/routers/w3bstream.ts | 253 ++++++++++++++------ src/store/lib/w3bstream/index.ts | 35 +-- src/store/lib/w3bstream/schema/project.ts | 34 ++- 7 files changed, 313 insertions(+), 139 deletions(-) diff --git a/src/components/IDE/CurrentProject/index.tsx b/src/components/IDE/CurrentProject/index.tsx index 7fbc952f..48d64fd7 100644 --- a/src/components/IDE/CurrentProject/index.tsx +++ b/src/components/IDE/CurrentProject/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box } from '@chakra-ui/react'; +import { Flex, Box, Spinner } from '@chakra-ui/react'; import { observer } from 'mobx-react-lite'; import { useStore } from '@/store/index'; import dynamic from 'next/dynamic'; @@ -31,21 +31,39 @@ const DynamicSettings = dynamic(() => import('../Settings'), { const CurrentProject = observer(() => { const { - w3s: { showContent } + w3s, + w3s: { showContent }, + lang: { t } } = useStore(); + const { projectDetail } = w3s.project; return ( - - - - {showContent === 'METRICS' && } - {showContent === 'CURRENT_PUBLISHERS' && } - {(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && } - {showContent === 'DB_TABLE' && } - {showContent === 'CURRENT_EVENT_LOGS' && } - {showContent === 'SETTINGS' && } - - + <> + {/* {projectDetail.loading.value ? ( + + + + ) : ( */} + + + + {!projectDetail.value ? ( + + + + ) : ( + <> + {showContent === 'METRICS' && } + {showContent === 'CURRENT_PUBLISHERS' && } + {(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && } + {showContent === 'DB_TABLE' && } + {showContent === 'CURRENT_EVENT_LOGS' && } + {showContent === 'SETTINGS' && } + + )} + + + ); }); diff --git a/src/components/IDE/Projects/index.tsx b/src/components/IDE/Projects/index.tsx index 3ef45033..0f5d7b9f 100644 --- a/src/components/IDE/Projects/index.tsx +++ b/src/components/IDE/Projects/index.tsx @@ -19,7 +19,7 @@ const Projects = observer(() => { base: { confirm }, lang: { t } } = useStore(); - const { allProjects, selectedNames } = w3s.project; + const { allProjects, selectedNames, projectDetail } = w3s.project; if (allProjects.value.length) { return ( @@ -145,8 +145,9 @@ const Projects = observer(() => { onClick={async (e) => { e.stopPropagation(); if (instance) { - allProjects.onSelect(index); w3s.showContent = 'METRICS'; + allProjects.onSelect(index); + projectDetail.call(); } else { await w3s.applet.uploadWASM({ projectName: project.name, @@ -251,7 +252,7 @@ const Projects = observer(() => { }); eventBus.emit('instance.handle'); toast.success(t('success.suspended.msg')); - } catch (error) { } + } catch (error) {} }} > @@ -271,7 +272,7 @@ const Projects = observer(() => { }); eventBus.emit('instance.handle'); toast.success(t('success.started.msg')); - } catch (error) { } + } catch (error) {} }} > diff --git a/src/components/IDE/ToolBar/index.tsx b/src/components/IDE/ToolBar/index.tsx index 4a5aee3a..8468528a 100644 --- a/src/components/IDE/ToolBar/index.tsx +++ b/src/components/IDE/ToolBar/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, BoxProps, Box, Icon, Text, Popover, PopoverTrigger, PopoverContent, useDisclosure } from '@chakra-ui/react'; +import { Flex, BoxProps, Box, Icon, Text, Popover, PopoverTrigger, PopoverContent, useDisclosure, Spinner } from '@chakra-ui/react'; import { observer } from 'mobx-react-lite'; import { useStore } from '@/store/index'; import { BiBarChartSquare } from 'react-icons/bi'; @@ -10,20 +10,18 @@ import { ChevronDownIcon } from '@chakra-ui/icons'; import { INSTANCE_STATUS } from '@/components/JSONTable/FieldRender'; import toast from 'react-hot-toast'; -interface ToolBar extends BoxProps { } +interface ToolBar extends BoxProps {} const ToolBar = (props: ToolBar) => { const { w3s, w3s: { - project: { - curProject, - allProjects - }, + project: { curProject, allProjects }, metrics, - instances, + instances }, - lang: { t } } = useStore(); + lang: { t } + } = useStore(); const { onOpen, onClose, isOpen } = useDisclosure(); const curProjectStatus = INSTANCE_STATUS[instances.curInstance?.f_state || 0]; @@ -32,14 +30,18 @@ const ToolBar = (props: ToolBar) => { - - - - - {curProject?.name} - - - + + {curProject ? ( + + + + {curProject?.name} + + + + ) : ( + <> + )} { now.setMinutes(0); now.setSeconds(0); now.setMilliseconds(0); - const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) + const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); metrics.activeDevices.call(yesterday, now); metrics.dataMessages.call(yesterday, now); metrics.blockchainTransaction.call(yesterday, now); @@ -88,7 +90,7 @@ const ToolBar = (props: ToolBar) => { justifyContent="flex-start" > - {item.name} + {item.name} ); })} @@ -209,29 +211,29 @@ const ToolBar = (props: ToolBar) => { export function getSelectedStyles(selected: boolean) { return selected ? { - sx: { - background: 'rgba(148, 111, 255, 0.1)', - '& > svg': { - color: '#946FFF' - }, - '& > div': { - color: '#946FFF' - } - } - } - : { - sx: { - ':hover': { + sx: { + background: 'rgba(148, 111, 255, 0.1)', '& > svg': { color: '#946FFF' }, '& > div': { color: '#946FFF' - }, - background: 'rgba(148, 111, 255, 0.1)' + } } } - }; + : { + sx: { + ':hover': { + '& > svg': { + color: '#946FFF' + }, + '& > div': { + color: '#946FFF' + }, + background: 'rgba(148, 111, 255, 0.1)' + } + } + }; } export default observer(ToolBar); diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 902f6062..c67d155a 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -18,7 +18,7 @@ const DynamicProjects = dynamic(() => import('./Projects'), { const DynamicLabs = dynamic(() => import('./Labs'), { ssr: false, - loading: () =>

Loading

, + loading: () =>

Loading

}); const DynamicFlow = dynamic(() => import('./Flow'), { @@ -29,7 +29,6 @@ const DynamicSupport = dynamic(() => import('./Support'), { ssr: false }); - const IDE = observer(() => { const { w3s, @@ -40,8 +39,8 @@ const IDE = observer(() => {
- {w3s.currentHeaderTab === 'PROJECTS' && <>{w3s.project.curProject ? : }} - {w3s.currentHeaderTab === 'LABS' && ()} + {w3s.currentHeaderTab === 'PROJECTS' && <>{w3s.project.allProjects.currentIndex != -1 ? : }} + {w3s.currentHeaderTab === 'LABS' && } {w3s.currentHeaderTab === 'FLOW' && } {w3s.currentHeaderTab === 'SUPPORT' && } diff --git a/src/server/routers/w3bstream.ts b/src/server/routers/w3bstream.ts index 3f364891..a50c6638 100644 --- a/src/server/routers/w3bstream.ts +++ b/src/server/routers/w3bstream.ts @@ -18,31 +18,31 @@ export const w3bstreamRouter = t.router({ f_project_id: true, f_name: true, f_description: true, - publishers: { - select: { - f_project_id: true, - f_publisher_id: true, - f_name: true, - f_key: true, - f_created_at: true, - f_token: true - } - }, + // publishers: { + // select: { + // f_project_id: true, + // f_publisher_id: true, + // f_name: true, + // f_key: true, + // f_created_at: true, + // f_token: true + // } + // }, applets: { select: { f_name: true, f_applet_id: true, f_project_id: true, f_resource_id: true, - strategies: { - select: { - f_strategy_id: true, - f_applet_id: true, - f_project_id: true, - f_event_type: true, - f_handler: true - } - }, + // strategies: { + // select: { + // f_strategy_id: true, + // f_applet_id: true, + // f_project_id: true, + // f_event_type: true, + // f_handler: true + // } + // }, instances: { select: { f_instance_id: true, @@ -56,60 +56,176 @@ export const w3bstreamRouter = t.router({ f_value: true, f_type: true } - }, - cronJobs: { - select: { - f_cron_job_id: true, - f_project_id: true, - f_cron_expressions: true, - f_event_type: true, - f_created_at: true - } - }, - contractLogs: { - select: { - f_contractlog_id: true, - f_project_name: true, - f_event_type: true, - f_chain_id: true, - f_contract_address: true, - f_block_start: true, - f_block_current: true, - f_block_end: true, - f_topic0: true, - f_created_at: true, - f_updated_at: true - } - }, - chainHeights: { - select: { - f_chain_height_id: true, - f_project_name: true, - f_finished: true, - f_event_type: true, - f_chain_id: true, - f_height: true, - f_created_at: true, - f_updated_at: true - } - }, - chainTxs: { - select: { - f_chaintx_id: true, - f_project_name: true, - f_finished: true, - f_event_type: true, - f_chain_id: true, - f_tx_address: true, - f_created_at: true, - f_updated_at: true - } } + // cronJobs: { + // select: { + // f_cron_job_id: true, + // f_project_id: true, + // f_cron_expressions: true, + // f_event_type: true, + // f_created_at: true + // } + // }, + // contractLogs: { + // select: { + // f_contractlog_id: true, + // f_project_name: true, + // f_event_type: true, + // f_chain_id: true, + // f_contract_address: true, + // f_block_start: true, + // f_block_current: true, + // f_block_end: true, + // f_topic0: true, + // f_created_at: true, + // f_updated_at: true + // } + // }, + // chainHeights: { + // select: { + // f_chain_height_id: true, + // f_project_name: true, + // f_finished: true, + // f_event_type: true, + // f_chain_id: true, + // f_height: true, + // f_created_at: true, + // f_updated_at: true + // } + // }, + // chainTxs: { + // select: { + // f_chaintx_id: true, + // f_project_name: true, + // f_finished: true, + // f_event_type: true, + // f_chain_id: true, + // f_tx_address: true, + // f_created_at: true, + // f_updated_at: true + // } + // } } }); return projects; }), + projectDetail: authProcedure + .input( + z.object({ + projectID: z.string() + }) + ) + .query(async ({ ctx, input }) => { + const accountID = BigInt(ctx.user.Payload); + const projects = await ctx.prisma.t_project.findMany({ + where: { + f_account_id: { + equals: accountID + }, + f_project_id: { + equals: BigInt(input.projectID) + } + }, + orderBy: { + f_created_at: 'desc' + }, + select: { + f_project_id: true, + f_name: true, + f_description: true, + publishers: { + select: { + f_project_id: true, + f_publisher_id: true, + f_name: true, + f_key: true, + f_created_at: true, + f_token: true + } + }, + applets: { + select: { + f_name: true, + f_applet_id: true, + f_project_id: true, + f_resource_id: true, + strategies: { + select: { + f_strategy_id: true, + f_applet_id: true, + f_project_id: true, + f_event_type: true, + f_handler: true + } + }, + instances: { + select: { + f_instance_id: true, + f_state: true + } + } + } + }, + configs: { + select: { + f_value: true, + f_type: true + } + }, + cronJobs: { + select: { + f_cron_job_id: true, + f_project_id: true, + f_cron_expressions: true, + f_event_type: true, + f_created_at: true + } + }, + contractLogs: { + select: { + f_contractlog_id: true, + f_project_name: true, + f_event_type: true, + f_chain_id: true, + f_contract_address: true, + f_block_start: true, + f_block_current: true, + f_block_end: true, + f_topic0: true, + f_created_at: true, + f_updated_at: true + } + }, + chainHeights: { + select: { + f_chain_height_id: true, + f_project_name: true, + f_finished: true, + f_event_type: true, + f_chain_id: true, + f_height: true, + f_created_at: true, + f_updated_at: true + } + }, + chainTxs: { + select: { + f_chaintx_id: true, + f_project_name: true, + f_finished: true, + f_event_type: true, + f_chain_id: true, + f_tx_address: true, + f_created_at: true, + f_updated_at: true + } + } + } + }); + + return projects; + }), wasmLogs: authProcedure .input( z.object({ @@ -174,13 +290,14 @@ export const w3bstreamRouter = t.router({ }); export type W3bstreamRouter = typeof w3bstreamRouter; -export type ProjectOriginalType = inferProcedureOutput[0]; +export type ProjectOriginalType = inferProcedureOutput[0]; export type AppletType = ProjectOriginalType['applets'][0] & { project_name: string }; export type StrategyType = AppletType['strategies'][0]; export type InstanceType = AppletType['instances'][0] & { project_name: string; applet_name: string }; export type PublisherType = ProjectOriginalType['publishers'][0] & { project_id: string; project_name: string }; export type ProjectType = ProjectOriginalType & { name: string; + envs: Record; }; export type ContractLogType = ProjectOriginalType['contractLogs'][0]; export type ChainTxType = ProjectOriginalType['chainTxs'][0]; diff --git a/src/store/lib/w3bstream/index.ts b/src/store/lib/w3bstream/index.ts index bbea779d..47283aae 100644 --- a/src/store/lib/w3bstream/index.ts +++ b/src/store/lib/w3bstream/index.ts @@ -68,6 +68,7 @@ export class W3bStream { goHome: () => { this.currentHeaderTab = 'PROJECTS'; this.project.allProjects.onSelect(-1); + this.project.projectDetail.value = null; } }; @@ -105,6 +106,7 @@ export class W3bStream { }) .on('project.update', async () => { await this.project.allProjects.call(); + await this.project.projectDetail.call(); this.projectManager.sync(); }) .on('project.delete', async () => { @@ -116,15 +118,18 @@ export class W3bStream { }) .on('applet.update', async () => { await this.project.allProjects.call(); + await this.project.projectDetail.call(); this.projectManager.sync(); }) .on('applet.delete', async () => { await this.project.allProjects.call(); + await this.project.projectDetail.call(); this.projectManager.sync(); }) .on('applet.publish-event', () => {}) .on('instance.deploy', async () => { await this.project.allProjects.call(); + await this.project.projectDetail.call(); this.projectManager.sync(); }) .on('instance.handle', async () => { @@ -136,50 +141,50 @@ export class W3bStream { this.projectManager.sync(); }) .on('publisher.create', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); this.projectManager.sync(); }) .on('postman.request', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('publisher.update', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('publisher.delete', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('strategy.create', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('strategy.update', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('strategy.delete', async () => { - await this.project.allProjects.call(); + await this.project.projectDetail.call(); }) .on('contractlog.create', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('contractlog.delete', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('chainTx.create', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('chainTx.delete', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('chainHeight.create', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('chainHeight.delete', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('cronJob.create', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }) .on('cronJob.delete', async () => { - this.project.allProjects.call(); + this.project.projectDetail.call(); }); } diff --git a/src/store/lib/w3bstream/schema/project.ts b/src/store/lib/w3bstream/schema/project.ts index 02101498..72888fd3 100644 --- a/src/store/lib/w3bstream/schema/project.ts +++ b/src/store/lib/w3bstream/schema/project.ts @@ -130,6 +130,38 @@ export default class ProjectModule { } }); + projectDetail = new PromiseState<() => Promise, ProjectType>({ + // defaultValue: [], + function: async () => { + const projects = await trpc.api.projectDetail.query({ + projectID: String(this.allProjects.current.f_project_id) + }); + if (projects) { + const regex = /(?:[^_]*_){2}(.*)/; + projects.forEach((p: ProjectType) => { + const matchArray = p.f_name.match(regex); + p.name = matchArray ? matchArray[1] : p.f_name; + p.configs.forEach((config) => { + // buffer to string cause by prisma client parse error + config.f_value && (config.f_value = JSON.parse(config.f_value.toString())); + switch (config.f_type) { + case ProjectConfigType.PROJECT_DATABASE: + // @ts-ignore + // p.database = config.f_value; + break; + case ProjectConfigType.PROJECT_ENV: + // @ts-ignore + p.envs = config.f_value; + break; + } + }); + }); + return projects[0]; + } + return null; + } + }); + form = new JSONSchemaFormState({ //@ts-ignore schema: defaultSchema, @@ -399,7 +431,7 @@ export default class ProjectModule { selectedNames = []; get curProject() { - return this.allProjects.current; + return this.projectDetail.value; } constructor() { From 27356f0299dca24b76b293b2c0db16a104b91ded Mon Sep 17 00:00:00 2001 From: koray <949729789@qq.com> Date: Mon, 5 Jun 2023 19:35:04 +0800 Subject: [PATCH 2/2] fix build error --- src/server/routers/w3bstream.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/server/routers/w3bstream.ts b/src/server/routers/w3bstream.ts index a50c6638..50c43200 100644 --- a/src/server/routers/w3bstream.ts +++ b/src/server/routers/w3bstream.ts @@ -297,7 +297,9 @@ export type InstanceType = AppletType['instances'][0] & { project_name: string; export type PublisherType = ProjectOriginalType['publishers'][0] & { project_id: string; project_name: string }; export type ProjectType = ProjectOriginalType & { name: string; - envs: Record; + envs: { + env: [string,any][]; + }; }; export type ContractLogType = ProjectOriginalType['contractLogs'][0]; export type ChainTxType = ProjectOriginalType['chainTxs'][0];