diff --git a/README.md b/README.md index 93e3934a..b5df9762 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,34 @@ # terminusdb-dashboard Dashboard for TerminusDB +How to use the terminusdb dashboard source code with your local terminusdb instance. + +**Clone the repository** +```sh +git clone https://github.com/terminusdb/terminusdb-dashboard.git +``` + +**Install all the dependency** +```sh +cd terminusdb-dashboard +npm install +``` + +**Build the dashboard** +Rename ENV.local to .env +```sh +cd terminusdb-dashboard/packages/tdb-dashboard +cp ENV.local .env + +npm run build +``` +You can find the builded version into terminusdb-dashboard/packages/tdb-dashboard/dist + + + + + + + + + + diff --git a/packages/tdb-dashboard/ENV.local b/packages/tdb-dashboard/ENV.local new file mode 100644 index 00000000..e8a5f040 --- /dev/null +++ b/packages/tdb-dashboard/ENV.local @@ -0,0 +1,4 @@ +TERMINUSDB_SERVER=http://127.0.0.1:6363/ +CONNECTION_TYPE=LOCAL +FEEDBACK_URL=https://cloud-dev.terminusdb.com/ +BASE_URL=dashboard \ No newline at end of file diff --git a/packages/tdb-dashboard/localSettings.js b/packages/tdb-dashboard/localSettings.js index ef4041f3..8acceb13 100644 --- a/packages/tdb-dashboard/localSettings.js +++ b/packages/tdb-dashboard/localSettings.js @@ -1,15 +1,17 @@ const server = localStorage.getItem("terminusdb-server-override") || process.env.TERMINUSDB_SERVER -let key= localStorage.getItem("terminusdb-key-override") || process.env.TERMINUSDB_KEY +//there is no default key +//let key= localStorage.getItem("terminusdb-key-override") || process.env.TERMINUSDB_KEY -const userName= localStorage.getItem("terminusdb-user-override") || process.env.TERMINUSDB_USER +//const userName= localStorage.getItem("terminusdb-user-override") || process.env.TERMINUSDB_USER const connection_type = process.env.CONNECTION_TYPE -export const localSettings = {server : server, - key : key, - user: userName, +export const localSettings = { + server : server, + //key : key, + //user: userName, connection_type :connection_type } diff --git a/packages/tdb-dashboard/src/App.js b/packages/tdb-dashboard/src/App.js index 7c35cf4e..bee05e79 100644 --- a/packages/tdb-dashboard/src/App.js +++ b/packages/tdb-dashboard/src/App.js @@ -34,7 +34,7 @@ export function App (props){ } if(connectionError) { - return {connectionError} + return } if(loading || loadingServer) { diff --git a/packages/tdb-dashboard/src/clientUtils.js b/packages/tdb-dashboard/src/clientUtils.js index 1593cd82..32331086 100644 --- a/packages/tdb-dashboard/src/clientUtils.js +++ b/packages/tdb-dashboard/src/clientUtils.js @@ -14,7 +14,7 @@ export function createClientUser(useAuth0,params){ clientUser.user = clientUser.agentName clientUser.serverType = "TerminusX" }catch(err){ - const lastuser = localStorage.getItem("User") || params.user + const lastuser = localStorage.getItem("Terminusdb-USER") //|| params.user clientUser = {email: lastuser } clientUser.user = lastuser clientUser.serverType = "TerminusDB" diff --git a/packages/tdb-dashboard/src/components/ChangeUser.js b/packages/tdb-dashboard/src/components/ChangeUser.js index d425f41d..d70f986a 100644 --- a/packages/tdb-dashboard/src/components/ChangeUser.js +++ b/packages/tdb-dashboard/src/components/ChangeUser.js @@ -3,8 +3,8 @@ import {Button} from "react-bootstrap" import {RiUser3Fill} from "react-icons/ri" import { LoginModal } from "./LoginModal"; -export const ChangeUser = ({css, label}) => { - const [showModal, setShowModal] = useState(false) +export const ChangeUser = ({css, label, showModalDefault, isClosable=true}) => { + const [showModal, setShowModal] = useState(showModalDefault || false) function handleNew (evt) { setShowModal(true) @@ -15,9 +15,9 @@ export const ChangeUser = ({css, label}) => { const labelStr = label || "Change User" return - - - + } + + } \ No newline at end of file diff --git a/packages/tdb-dashboard/src/components/LoginModal.js b/packages/tdb-dashboard/src/components/LoginModal.js index 8ac41eb7..dab323b7 100644 --- a/packages/tdb-dashboard/src/components/LoginModal.js +++ b/packages/tdb-dashboard/src/components/LoginModal.js @@ -1,44 +1,66 @@ -import React, {useRef} from "react" +import React, {useRef,useState} from "react" import {Modal, Button, Form} from "react-bootstrap" +import { WOQLClient } from "@terminusdb/terminusdb-client"; +import {localSettings} from "../../localSettings" +import {formatErrorMessage } from '../hooks/hookUtils' +import { Alert } from "react-bootstrap"; -export const LoginModal = ({showModal, setShowModal }) => { +export const LoginModal = ({showModal, setShowModal, isCloseble }) => { + const [errorMessage,setErrorMessage] = useState(false) const nameRef = useRef(null); const passwordRef = useRef(null); - const orgRef = useRef(null); + // const orgRef = useRef(null); // to be review const loading = false - const handleClose = () => setShowModal(false); + const handleClose = () => { + if(setShowModal)setShowModal(false); + } const changeLoggeduser = async () => { const name = nameRef.current.value const password = passwordRef.current.value - const organization = orgRef.current.value + //const organization = orgRef.current.value if(!name || name === "" || !password || password === "") { setError("Team name and password are mandatory") return }else{ - localStorage.setItem("User",name) - localStorage.setItem("Key",password) - localStorage.setItem("Org",organization) - // to be review using routing - const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "" - window.location.replace(`${base}/${organization}`) + const client = new WOQLClient(localSettings.server,{user:name,key:password}) + client.info().then(response=>{ + if(response["api:info"] && response["api:info"]['authority'] === "anonymous"){ + setErrorMessage("Incorrect authentication information, please enter your username and password again") + }else{ + localStorage.setItem("Terminusdb-USER",name) + localStorage.setItem("Terminusdb-KEY",password) + //localStorage.setItem("Org",organization) + // to be review using routing + const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "" + window.location.replace(`${base}`) + } + }).catch(err=>{ + const message = formatErrorMessage(err) + setErrorMessage(message) + }) + + } } + const onHide = isCloseble ? {onHide:handleClose} : {} + //} - return + return - Login - diff --git a/packages/tdb-dashboard/src/components/NewTeamModal.js b/packages/tdb-dashboard/src/components/NewTeamModal.js index 3e41cf66..773fa499 100644 --- a/packages/tdb-dashboard/src/components/NewTeamModal.js +++ b/packages/tdb-dashboard/src/components/NewTeamModal.js @@ -22,8 +22,8 @@ export const NewTeamModal = ({show, setShow}) => { createNewTeam().then(done=>{ if(done === true){ setTeamCreated(true) - const basename = process.env.BASE_URL - window.location.replace(`${window.location.origin}/${basename}/${teamName}`) + const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "" + window.location.replace(`${window.location.origin}${base}/${teamName}`) } }) } diff --git a/packages/tdb-dashboard/src/components/QueryPane.js b/packages/tdb-dashboard/src/components/QueryPane.js index 63886238..19a74b68 100644 --- a/packages/tdb-dashboard/src/components/QueryPane.js +++ b/packages/tdb-dashboard/src/components/QueryPane.js @@ -96,7 +96,7 @@ export const QueryPane = ({queryObj}) => {
- {queryError && setShowAlert(false)} dismissible>{queryError}} + {queryError && setShowAlert(false)} dismissible>{queryError}} {/*

diff --git a/packages/tdb-dashboard/src/components/ServerError.js b/packages/tdb-dashboard/src/components/ServerError.js index 6e9b926e..61ba1146 100644 --- a/packages/tdb-dashboard/src/components/ServerError.js +++ b/packages/tdb-dashboard/src/components/ServerError.js @@ -1,5 +1,5 @@ import React from "react" -import {Col} from "react-bootstrap" +import {Col,Button} from "react-bootstrap" import {NoDataProductSelectedStyle} from "./constants" import {WOQLClientObj} from '../init-woql-client' import { ChangeUser } from "./ChangeUser" @@ -8,25 +8,34 @@ export const ServerError = (props) => { const {clientUser } = WOQLClientObj() const serverType = clientUser ? clientUser.serverType : "TerminusX" + const gotoMainPage= ()=>{ + const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "/" + window.location.replace(`${base}`) + } + + let returnToMainPage = false + if(props.message.startsWith("There is no organization with the name")){ + returnToMainPage=true + } + return
-

-

Connection Server Error

-

{props.children}

- - {`Please contact the ${serverType} Team`} - +

+

{props.message}

+ {} + {clientUser.connection_type !=="LOCAL" && + + {`Please contact the ${serverType} Team`} + + }

{clientUser && clientUser.logout && } - {clientUser && clientUser.connection_type ==="LOCAL" && -
- -
- }
diff --git a/packages/tdb-dashboard/src/components/UserMenu.js b/packages/tdb-dashboard/src/components/UserMenu.js index 81596c5f..50ea2a6c 100644 --- a/packages/tdb-dashboard/src/components/UserMenu.js +++ b/packages/tdb-dashboard/src/components/UserMenu.js @@ -5,16 +5,16 @@ import {NavLink as RouterNavLink} from "react-router-dom" import {AiOutlineUser, AiOutlinePoweroff,AiOutlineUsergroupAdd} from "react-icons/ai" import {FaExchangeAlt} from "react-icons/fa" import {WOQLClientObj} from '../init-woql-client' -import { LoginModal } from "./LoginModal"; export const UserMenu = ({organization}) => { const { clientUser,accessControlDashboard} = WOQLClientObj() const redirect_uri=`${window.location.origin}/` - const [showModal, setShowModal] = useState(false) - - function handleNew (evt) { - setShowModal(true) + function logoutLocalUser (evt) { + localStorage.removeItem("Terminusdb-USER") + localStorage.removeItem("Terminusdb-KEY") + const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "/" + window.location.replace(`${base}`) } const logoutWithRedirect = () => @@ -42,7 +42,6 @@ export const UserMenu = ({organization}) => { if(clientUser.connection_type==="LOCAL"){ return - {showModal && }