feat(setting): support update flow v1.4.3-poc-rc2

src/components/IDE/Settings/index.tsx

@@ -9,10 +9,12 @@ import { eventBus } from '@/lib/event';
 import { FaFileExport, FaRegQuestionCircle } from 'react-icons/fa';
 import { PromiseState } from '@/store/standard/PromiseState';
 import { MdEditDocument } from 'react-icons/md';
+import { hooks } from '@/lib/hooks';
+import toast from 'react-hot-toast';
 
 const Settings = () => {
   const {
-    w3s: { project, applet },
+    w3s: { project, applet, setting },
     base: { confirm }
   } = useStore();
 
@@ -53,7 +55,11 @@ const Settings = () => {
   const datas = [
     { title: 'Project Name', value: project.curProject?.f_name },
     { title: 'Project ID', value: project.curProject?.f_project_id },
-    { title: 'Operator Address', value: store.operateAddress.value, tips: 'The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction is that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are se nding your transactions.' },
+    {
+      title: 'Operator Address',
+      value: store.operateAddress.value,
+      tips: 'The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction is that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are se nding your transactions.'
+    },
     {
       title: 'WASM file name',
       value: applet.wasmName.value,
@@ -79,6 +85,36 @@ const Settings = () => {
     }
   ];
 
+  const streamComputingDatas = [
+    {
+      title: 'Project Flow',
+      value: '',
+      extra: (
+        <Button
+          size="sm"
+          {...defaultOutlineButtonStyle}
+          onClick={async () => {
+            const { code } = await hooks.getFormData({
+              title: 'Update Flow',
+              size: 'lg',
+              formList: [
+                {
+                  form: setting.updateFlowForm
+                }
+              ]
+            });
+            await axios.post(`/api/w3bapp/project_config/x/${project.curProject?.name}/PROJECT_FLOW`, {
+              ...JSON.parse(code)
+            });
+            toast.success('Update flow success');
+          }}
+        >
+          Update Flow
+        </Button>
+      )
+    }
+  ];
+
   return (
     <Box w="100%" minH={'calc(100vh - 158px)'}>
       <Flex justifyContent="space-between">
@@ -121,11 +157,42 @@ const Settings = () => {
             <Flex key={item.title} alignItems={'center'} mb="20px">
               <Flex fontWeight={'500'} fontSize="14px" alignItems={'center'} color="blackAlpha.900" minWidth={150} textAlign={'left'}>
                 <Text>{item.title}</Text>
-                {item.tips && <Tooltip label='The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are sending your transactions.' placement='right'>
-                  <Box cursor={'pointer'}><FaRegQuestionCircle color='#797878' fontSize={14} style={{ margin: 5 }} /></Box>
-                </Tooltip>}:
+                {item.tips && (
+                  <Tooltip
+                    label="The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are sending your transactions."
+                    placement="right"
+                  >
+                    <Box cursor={'pointer'}>
+                      <FaRegQuestionCircle color="#797878" fontSize={14} style={{ margin: 5 }} />
+                    </Box>
+                  </Tooltip>
+                )}
+                :
               </Flex>
-              <Text ml="10px" fontSize={'14px'} color="blackAlpha.700" >
+              <Text ml="10px" fontSize={'14px'} color="blackAlpha.700">
+                {item.value}
+              </Text>
+              {item.extra}
+            </Flex>
+          );
+        })}
+      </Box>
+
+      <Box mt="10px" p="20px" border="1px solid #eee" borderRadius="8px">
+        <Text fontSize={'18px'} fontWeight={600}>
+          Stream computing beta
+        </Text>
+        <Text fontSize="14px" color="#7a7a7a">
+          If you want to experience the streaming computation feature.please click "update flow"to upload the configuration and update wasm
+        </Text>
+        <Divider my="10px" mb="10px"/>
+        {streamComputingDatas.map((item) => {
+          return (
+            <Flex key={item.title} alignItems={'center'} mb="20px">
+              <Flex fontWeight={'500'} fontSize="14px" alignItems={'center'} color="blackAlpha.900" minWidth={150} textAlign={'left'}>
+                <Text>{item.title}</Text>
+              </Flex>
+              <Text ml="10px" fontSize={'14px'} color="blackAlpha.700">
                 {item.value}
               </Text>
               {item.extra}
@@ -138,21 +205,19 @@ const Settings = () => {
         <ProjectEnvs />
       </Box>
 
-
-
-      <Box mt="60px" fontSize="16px" fontWeight={700}>
-      </Box>
+      <Box mt="60px" fontSize="16px" fontWeight={700}></Box>
       <Stack mt="10px" p="20px" border="1px solid #F9CFCE" borderRadius="8px">
         <Flex justifyContent="space-between" alignItems="center">
           <Stack>
             <Text fontWeight={600}>Delete this project</Text>
-            <Text fontWeight={400} color="#7a7a7a" fontSize={"14px"}>Deleting a project is permanent and will erase all database data, triggers, and events routing. Please proceed with caution.</Text>
+            <Text fontWeight={400} color="#7a7a7a" fontSize={'14px'}>
+              Deleting a project is permanent and will erase all database data, triggers, and events routing. Please proceed with caution.
+            </Text>
           </Stack>
           <Button
             ml="20px"
             size="sm"
-
-            colorScheme='red'
+            colorScheme="red"
             onClick={async (e) => {
               confirm.show({
                 title: 'Warning',
@@ -168,7 +233,7 @@ const Settings = () => {
                       eventBus.emit('project.delete');
                       project.allProjects.onSelect(-1);
                       project.resetSelectedNames();
-                    } catch (error) { }
+                    } catch (error) {}
                   }
                 }
               });

src/store/lib/w3bstream/index.ts

@@ -23,6 +23,7 @@ import LabModule from './schema/lab';
 import CronJobModule from './schema/cronJob';
 import ENVModule from './schema/envs';
 import ApiKeysModule from './schema/apiKeys';
+import SettingModule from './schema/setting';
 
 configure({
   enforceActions: 'never'
@@ -49,6 +50,7 @@ export class W3bStream {
   lab = new LabModule();
   cronJob = new CronJobModule();
   env = new ENVModule();
+  setting = new SettingModule();
 
   showContent: 'METRICS' | 'CURRENT_PUBLISHERS' | 'CURRENT_EVENT_LOGS' | 'EDITOR' | 'DOCKER_LOGS' | 'CONTRACT_LOGS' | 'CHAIN_TX' | 'CHAIN_HEIGHT' | 'SETTINGS' | 'DB_TABLE' = 'METRICS';
 

src/store/lib/w3bstream/schema/setting.ts

@@ -0,0 +1,71 @@
+import EditorWidget from '@/components/JSONFormWidgets/EditorWidget';
+import { eventBus } from '@/lib/event';
+import { JSONSchemaFormState, JSONValue } from '@/store/standard/JSONSchemaState';
+import { FromSchema } from 'json-schema-to-ts';
+
+export const updateFlowSchema = {
+  definitions: {
+    projects: {
+      type: 'string'
+    }
+  },
+  type: 'object',
+  properties: {
+    code: { type: 'string', title: 'Flow code' }
+  },
+  required: ['code']
+} as const;
+
+type UpdateFlowSchemaType = FromSchema<typeof updateFlowSchema>;
+
+export default class SettingModule {
+  updateFlowForm = new JSONSchemaFormState<UpdateFlowSchemaType>({
+    //@ts-ignore
+    schema: updateFlowSchema,
+    uiSchema: {
+      'ui:submitButtonOptions': {
+        norender: false,
+        submitText: 'Submit'
+      },
+      code: {
+        'ui:widget': EditorWidget,
+        'ui:options': {
+          language: 'json',
+          editorHeight: '400px'
+        }
+      }
+    },
+    afterSubmit: async (e) => {
+      eventBus.emit('base.formModal.afterSubmit', e.formData);
+      this.updateFlowForm.reset();
+    },
+    value: new JSONValue<UpdateFlowSchemaType>({
+      default: {
+        code: JSON.stringify(
+          {
+            source: { strategies: ['flow_poc'] },
+            operators: [
+              { opType: 'FILTER', wasmFunc: 'filterAge' },
+              { opType: 'MAP', wasmFunc: 'mapTax' },
+              { opType: 'WINDOW', wasmFunc: 'groupByAge' },
+              { opType: 'REDUCE', wasmFunc: 'reduce' }
+            ],
+            sink: {
+              sinkType: 'RMDB',
+              sinkInfo: {
+                DBInfo: {
+                  endpoint: 'postgres://test_user:test_passwd@127.0.0.1:5432/test?sslmode=disable',
+                  DBType: 'postgres',
+                  table: 'customer',
+                  columns: ['id', 'firstName', 'lastName', 'age', 'taxNumber', 'city']
+                }
+              }
+            }
+          },
+          null,
+          2
+        )
+      }
+    })
+  });
+}