add aws cloud solution ui implementation. (#102)

* add aws cloud solution ui implementation

* typo fix

solidportal/panel/package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.1",
     "rehype-sanitize": "^6.0.0",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

solidportal/panel/src/components/AWSLogin.js

@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import {Modal, Form, Input, Button} from 'antd';
+
+const AWSLogin = ({
+                      visible, setVisible, onLoginFinish, onLoginFail
+                  }) => {
+
+    const handleCancel = () => {
+        setVisible(false);
+        console.log('Close');
+        onLoginFail();
+    };
+
+    return (<>
+        <Modal
+            title="AWS Login"
+            open={visible}
+            onCancel={handleCancel}
+            footer={null}
+        >
+            <Form
+                name="login_form"
+                initialValues={{remember: true}}
+                onFinish={onLoginFinish}
+            >
+                <Form.Item
+                    name="username"
+                    rules={[{required: true, message: 'Please input your username!'}]}
+                >
+                    <Input placeholder="access key id"/>
+                </Form.Item>
+                <Form.Item
+                    name="password"
+                    rules={[{required: true, message: 'Please input your password!'}]}
+                >
+                    <Input.Password placeholder="secret access key"/>
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" style={{width: '100%'}}>
+                        Log in
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Modal>
+    </>);
+};
+
+export default AWSLogin;

solidportal/panel/src/components/UserInputView.js

@@ -7,9 +7,11 @@ import stringConstant from "../config/stringConstant";
 import GraphType from "../config/graphType";
 import {ApiHelper} from "../utils/ApiHelper";
 import endPoint from "../config/endPoint";
+import {v4} from "uuid";
 
 
 const UserInputView = ({   showView,
+                           setShowLeftPanel,
                            setCurrentRunningSubgraphName,
                            setTotalSubgraph,
                            getMdEditorValue,
@@ -80,14 +82,14 @@ const UserInputView = ({   showView,
                                 setGetStatusCall(true)
                                 setRecentOnboardId(data.graph_id)
                             } else {
-                                setSaveMdEditorValue(stringConstant.APIFail)   
+                                setSaveMdEditorValue(stringConstant.APIFail)
                             }
                             setUploadStatus(false)
                         }
                         // If response data status is other than 1, 2 or 3, then it is an internel error
                         else {
                             setSaveMdEditorValue(stringConstant.APIFail)
-                            setUploadStatus(false)                       
+                            setUploadStatus(false)
                         }
                     } else {
                         // If response status is other than 200, then it is an internel error
@@ -97,7 +99,7 @@ const UserInputView = ({   showView,
                 } catch(error) {
                     setSaveMdEditorValue(stringConstant.APIFail)
                     setUploadStatus(false)
-                } 
+                }
             }, pollingInterval);
             return () => clearInterval(intervalId);
         }
@@ -107,6 +109,7 @@ const UserInputView = ({   showView,
     const handleGraphTypeSelectChange = (e) => {
         setSelectedGraphType(e.target.value);
         setSaveSelectedGraphType(e.target.value);
+        setIsFinal(true);
         isReady(e.target.value)
     };
     const handleOpenAIKeyInputChange = (event) => {
@@ -186,6 +189,16 @@ const UserInputView = ({   showView,
                 disableStart.current = false
                 return true
             }
+        }else if(graphType === GraphType.CloudSolution){
+
+            if (openAIKeyRef.current === "" || userRequirementRef.current === "") {
+                disableStart.current = true
+                return false
+            } else {
+                disableStart.current = false
+                openAIKeyRef.current = null
+                return true
+            }
         }
     }
     const uploadFiles = async () => {
@@ -281,6 +294,15 @@ const UserInputView = ({   showView,
                 ])
                 setCurrentRunningSubgraphName("AutoGen Analysis(Beta)")
             }
+        }else if(selectedGraphType === GraphType.CloudSolution){
+            if(await httpSolutionV1()) {
+                setTotalSubgraph([
+                    "Step1: Cloud Solution",
+                    "Step2: Server Deploy",
+                ])
+                setCurrentRunningSubgraphName("Step1: Cloud Solution")
+            }
+            setShowLeftPanel(false)
         }
     }
 
@@ -413,6 +435,34 @@ const UserInputView = ({   showView,
         }
     }
 
+    const httpSolutionV1 = async () => {
+        disableStart.current = true
+        const requestBody = JSON.stringify({
+            openai_key: openAIKey,
+            graph_id: v4(),
+            requirement: userRequirement
+        })
+        try {
+            const response = await ApiHelper.postRequest(endPoint.HttpSolutionV1, requestBody, {
+                headers: config.CustomHeaders,
+            });
+            setSaveMdEditorValue(stringConstant.WaitHint)
+            if (response.status === 200) {
+                localStorage.setItem(config.CurrentGraphId, response.data.graph_id)
+                setGetStatusCall(true)
+                return true
+            } else {
+                setSaveMdEditorValue(stringConstant.APIFail)
+            }
+
+        } catch (error) {
+            setSaveMdEditorValue(error.message)
+            console.error('Error:', error);
+            window.alert(error);
+            return false
+        }
+    }
+
     const onboardRepo = async () => {
         if (openAIKey === null || openAIKey === '') {
             window.alert(stringConstant.OpenAIKeyAlert);
@@ -447,6 +497,8 @@ const UserInputView = ({   showView,
                 </option>
                 <option value={GraphType.TechSolution} style={{fontSize: '13px'}}>{GraphType.TechSolution}
                 </option>
+                <option value={GraphType.CloudSolution} style={{fontSize: '13px'}}>{GraphType.CloudSolution}
+                </option>
         </select>
         {selectedGraphType === GraphType.OnboardProject && <div className={styles.repofolderpath}>
                 <div style={{fontSize: '12px', fontWeight: 'bold'}}>{'Repository (<50mb:)'}</div>
@@ -462,7 +514,8 @@ const UserInputView = ({   showView,
                           autoSize={{minRows: 1, maxRows: 1}} placeholder="OpenAI API Key:"/>
         </div>
         {(selectedGraphType === GraphType.GeneratePRD ||
-                selectedGraphType === GraphType.TechSolution)
+                selectedGraphType === GraphType.TechSolution
+                || selectedGraphType === GraphType.CloudSolution)
             && <div>
                 <div>
                     <TextArea className={styles.requirement} bordered={false}

solidportal/panel/src/config/endPoint.js

@@ -7,7 +7,11 @@ const endPoint = {
     OnboardRepo: '/onboardrepo/',
     UploadRepo: '/uploadrepo/',
     AutoGenAnalysis: '/autogenanalysis',
-    StatusAutoGen: '/status/autogen'
+    StatusAutoGen: '/status/autogen',
+    HttpSolutionV1: '/httpsolution/v1',
+    ServerlessDeploy: '/serverless/deploy',
+    ServerlessDeployRemove: '/serverless/remove',
+    ServerlessStatus: '/status/serverless'
 };
 
 export default endPoint;

solidportal/panel/src/config/graphType.js

@@ -3,7 +3,8 @@ const GraphType = {
     GeneratePRD: "Generate Product Requirement Document",
     TechSolution: "Get Technical Solution",
     RepoChat: "Chat with Your Code Repo(Beta)",
-    AutoGenAnalysis: "AutoGen Analysis(Beta)"
+    AutoGenAnalysis: "AutoGen Analysis(Beta)",
+    CloudSolution: "Cloud Solution"
 }
 
-export default GraphType
+export default GraphType

solidportal/panel/src/config/stringConstant.js

@@ -105,7 +105,8 @@ export const stringConstant = {
         "If you have any questions or feedback about our project, please don't hesitate to reach out to us. We greatly appreciate your suggestions!\n" +
         "- Email: aict@ai-citi.com\n" +
         "- GitHub Issues: For more technical inquiries, you can also create a new issue in our [GitHub repository](https://github.com/AI-Citizen/SolidGPT/issues).\n" +
-        "We will respond to all questions within 2-3 business days."
+        "We will respond to all questions within 2-3 business days.",
+    AWSLoginHint: "Please provide AWS account and password."
 };
 
 export default stringConstant;