@oasisomniverse/react 1.0.0

package/src/components/popups/provider/components/MongoDb.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class MongoDb extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'mongoDb')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'mongoDb')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default MongoDb;

package/src/components/popups/provider/components/Neo4j.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Neo4j extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'neo4j')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'neo4j')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Neo4j;

package/src/components/popups/provider/components/SearchProviders.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class SearchProviders extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "provider",
+                headerName: "Provider",
+            },
+            {
+                fieldName: "installed",
+                headerName: "Installed",
+            },
+            {
+                fieldName: "view",
+                headerName: "View",
+            },
+            {
+                fieldName: "running",
+                headerName: "Running",
+            },
+            {
+                fieldName: "vpTime",
+                headerName: "VPTime"
+            }
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+        loading: true,
+        loggedIn: true,
+    };
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="xl"
+                    show={show}
+                    dialogClassName=""
+                    className="custom-modal custom-popup-component"
+                    onHide={() => hide('providers', 'searchProviders')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <span className="form-cross-icon" onClick={() => hide('providers', 'searchProviders')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+                        {/* <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'searchProviders')}>OK</button> */}
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchProviders;

package/src/components/popups/provider/components/Seeds.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Seeds extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'seeds')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'seeds')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Seeds;

package/src/components/popups/provider/components/Solid.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Solid extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'solid')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon.</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'solid')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Solid;

package/src/components/popups/provider/components/SqlLite.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SqlLite extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'sqlLite')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'sqlLite')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SqlLite;

package/src/components/popups/provider/components/ThreeFold.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ThreeFold extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'threeFold')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'threeFold')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ThreeFold;

package/src/components/popups/provider/components/ViewProviderStats.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class ViewProviderStats extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "provider",
+                headerName: "Provider",
+            },
+            {
+                fieldName: "installed",
+                headerName: "Installed",
+            },
+            {
+                fieldName: "view",
+                headerName: "View",
+            },
+            {
+                fieldName: "running",
+                headerName: "Running",
+            },
+            {
+                fieldName: "vpTime",
+                headerName: "VPTime"
+            }
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+        loading: true,
+        loggedIn: true,
+    };
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="xl"
+                    show={show}
+                    dialogClassName=""
+                    className="custom-modal custom-popup-component"
+                    onHide={() => hide('providers', 'viewProviderStats')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('providers', 'viewProviderStats')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        {/* <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'viewProviderStats')}>OK</button> */}
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewProviderStats;

package/src/components/popups/provider/components/ViewProviders.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class ViewProviders extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "provider",
+                headerName: "Provider",
+            },
+            {
+                fieldName: "installed",
+                headerName: "Installed",
+            },
+            {
+                fieldName: "view",
+                headerName: "View",
+            },
+            {
+                fieldName: "running",
+                headerName: "Running",
+            },
+            {
+                fieldName: "vpTime",
+                headerName: "VPTime"
+            }
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+        loading: true,
+        loggedIn: true,
+    };
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="xl"
+                    show={show}
+                    dialogClassName=""
+                    className="custom-modal custom-popup-component"
+                    onHide={() => hide('providers', 'viewProviders')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <span className="form-cross-icon" onClick={() => hide('providers', 'viewProviders')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+                        {/* <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'viewProviders')}>OK</button> */}
+                        
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewProviders;

package/src/components/popups/provider/index.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import ActivityPub from './components/ActivityPub';
+import CompareProviderSpeeds from './components/CompareProviderSpeeds';
+import Eosio from './components/Eosio';
+import Ethereum from './components/Ethereum';
+import Holochain from './components/Holochain';
+import Ipfs from './components/Ipfs';
+import ManageAutoFailOver from './components/ManageAutoFailOver';
+import ManageAutoReplicaton from './components/ManageAutoReplicaton';
+import ManageLoadBalancing from './components/ManageLoadBalancing';
+import ManageProviders from './components/ManageProviders';
+import MongoDb from './components/MongoDb';
+import Neo4j from './components/Neo4j';
+import SearchProviders from './components/SearchProviders';
+import Seeds from './components/Seeds';
+import Solid from './components/Solid';
+import SqlLite from './components/SqlLite';
+import ThreeFold from './components/ThreeFold';
+import ViewProviders from './components/ViewProviders';
+import ViewProviderStats from './components/ViewProviderStats';
+
+class Provider extends React.Component {
+
+    render() {
+        const props = this.props;
+        const { viewProviders } = this.props.providers;
+        console.log(viewProviders)
+        return(
+            <>
+                
+                <ViewProviders
+                    show={viewProviders}
+                    hide={props.toggleScreenPopup}
+                />
+                <ManageProviders
+                    show={props.providers.manageProviders}
+                    hide={props.toggleScreenPopup}
+                />
+                <ManageAutoReplicaton
+                    show={props.providers.manageAutoReplicaton}
+                    hide={props.toggleScreenPopup}
+                />
+                <ManageAutoFailOver
+                    show={props.providers.manageAutoFailOver}
+                    hide={props.toggleScreenPopup}
+                />
+                <ManageLoadBalancing
+                    show={props.providers.manageLoadBalancing}
+                    hide={props.toggleScreenPopup}
+                />
+                <ViewProviderStats
+                    show={props.providers.viewProviderStats}
+                    hide={props.toggleScreenPopup}
+                />
+                <CompareProviderSpeeds 
+                    show={props.providers.compareProviderSpeeds}
+                    hide={props.toggleScreenPopup}
+                />
+                <SearchProviders
+                    show={props.providers.searchProviders}
+                    hide={props.toggleScreenPopup}
+                />
+                <Holochain
+                    show={props.providers.holochain}
+                    hide={props.toggleScreenPopup}
+                />
+                <Seeds
+                    show={props.providers.seeds}
+                    hide={props.toggleScreenPopup}
+                />
+                <Eosio
+                    show={props.providers.eosio}
+                    hide={props.toggleScreenPopup}
+                />
+                <Ethereum
+                    show={props.providers.ethereum}
+                    hide={props.toggleScreenPopup}
+                />
+                <Ipfs
+                    show={props.providers.ipfs}
+                    hide={props.toggleScreenPopup}
+                />
+                <ThreeFold
+                    show={props.providers.threeFold}
+                    hide={props.toggleScreenPopup}
+                />
+                <Solid
+                    show={props.providers.solid}
+                    hide={props.toggleScreenPopup}
+                />
+                <ActivityPub
+                    show={props.providers.activityPub}
+                    hide={props.toggleScreenPopup}
+                />
+                <MongoDb
+                    show={props.providers.mongoDb}
+                    hide={props.toggleScreenPopup}
+                />
+                <SqlLite
+                    show={props.providers.sqlLite}
+                    hide={props.toggleScreenPopup}
+                />
+                <Neo4j
+                    show={props.providers.neo4j}
+                    hide={props.toggleScreenPopup}
+                />
+                
+            </>
+        )
+    }
+}
+
+export default Provider;