fix(error-page): add error page and loading screen (#49)

* doc(docker-network): Add details on how to connect Vispana to a local Vespa

* fix(error-page): add error page and loading screen

---------

Co-authored-by: Broknloop <[email protected]>

README.md

@@ -19,13 +19,35 @@ Vispana is packaged in docker and available in [DockerHub](https://hub.docker.co
 
 To run, execute:
 ```shell
-docker run -p 4000:4000 vispana/vispana
+docker run --pull always -p 4000:4000 vispana/vispana
 ```
 
 Access on: [http://localhost:4000](http://localhost:4000)
 
 It will ask for the uri of a config-server in your cluster.
 
+### Running Vespa locally on a Docker
+
+If you are running Vespa locally in a Docker container, alongside Vispana, you need to make sure
+that Vispana can access Vespa.
+
+In a few steps, here's how to do it:
+
+1. Create a docker network
+    ```shell
+      docker network create --driver bridge vespanet
+    ```
+2. Run Vespa within `vespanet` network and `vespa-container` hostname :
+   ```shell
+      docker run --detach --name vespa --network vespanet --hostname vespa-container --publish 8080:8080 --publish 19071:19071 vespaengine/vespa
+    ```
+3. Run Vispana within `vespanet` network:
+    ```shell
+      docker run -p 4000:4000 --network vespanet vispana/vispana:latest
+    ```
+4. Access Vispana in your browser via [http://localhost:4000](http://localhost:4000) and specify
+   the config node as `http://vespa-container:19071`
+
 ## Running Locally
 
 Set up your system using the [prerequisites](https://github.com/vispana/vispana/blob/main/CONTRIBUTING.md#prerequisites) section of `CONTRIBUTING.md`.

src/main/js/app.js

@@ -12,10 +12,11 @@ import Config from "./routes/config/config"
 import Container from "./routes/container/container";
 import Content from "./routes/content/content";
 import AppPackage from "./routes/apppackage/app-package";
+import VispanaError from "./routes/error/vispana-error";
 
 const router = createBrowserRouter(
     createRoutesFromElements(
-        <Route path="/">
+        <Route path="/" errorElement={<VispanaError/>}>
             <Route index={true} element={<Index />} action={indexAction}></Route>
             <Route path="app" element={<Layout />} loader={layoutLoader}>
                 <Route path="config" element={<Config />} />

src/main/js/routes/apppackage/app-package.js

@@ -5,10 +5,9 @@ import {useOutletContext} from "react-router-dom";
 import TabView from "../../components/tabs/tab-view";
 
 function AppPackage() {
-    const {vespaState} = useOutletContext();
+    const vespaState = useOutletContext();
 
     const schemas = vespaState
-        .state
         .content
         .clusters
         .flatMap(cluster => {
@@ -27,12 +26,12 @@ function AppPackage() {
     // initialize tabs with services.xml
     const tabsContent = [{
         "tabName": "services.xml",
-        "payload": vespaState.state.applicationPackage.servicesContent,
+        "payload": vespaState.applicationPackage.servicesContent,
         "contentType": "xml"
     }]
 
     // possibly add hosts.xml
-    let hostsContent = vespaState.state.applicationPackage.hostsContent;
+    let hostsContent = vespaState.applicationPackage.hostsContent;
     if (hostsContent) {
         tabsContent.push({
             "tabName": "hosts.xml",
@@ -63,7 +62,7 @@ function AppPackage() {
         "content":
             <div className="mt-8 mb-3">
                 <p><span
-                    className="text-yellow-400">Generation:</span> {vespaState.state.applicationPackage.appPackageGeneration}
+                    className="text-yellow-400">Generation:</span> {vespaState.applicationPackage.appPackageGeneration}
                 </p>
             </div>
     })

src/main/js/routes/config/config.js

@@ -6,10 +6,8 @@ import SimpleGrid from "../../components/simple-grid/simple-grid";
 import SimpleGridRow from "../../components/simple-grid/simple-grid-row";
 
 function Config() {
-    const {vespaState} = useOutletContext();
-
+    const vespaState = useOutletContext();
     const tabs = vespaState
-        .state
         .config
         .clusters
         .map(cluster => {

src/main/js/routes/container/container.js

@@ -6,10 +6,9 @@ import SimpleGrid from "../../components/simple-grid/simple-grid";
 import SimpleGridRow from "../../components/simple-grid/simple-grid-row";
 
 function Container() {
-    const {vespaState} = useOutletContext();
+    const vespaState = useOutletContext();
 
     const tabs = vespaState
-        .state
         .container
         .clusters
         .map(cluster => {

src/main/js/routes/content/content.js

@@ -7,10 +7,9 @@ import SimpleGridRow from "../../components/simple-grid/simple-grid-row";
 import TabView from "../../components/tabs/tab-view";
 
 function Content() {
-    const {vespaState} = useOutletContext();
+    const vespaState = useOutletContext();
 
     const tabs = vespaState
-        .state
         .content
         .clusters
         .map(cluster => (

src/main/js/routes/error/vispana-error.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import {useRouteError} from "react-router-dom";
+
+function VispanaError() {
+    const error = useRouteError();
+    console.log(error)
+    const notFound = <div>Page not found x_x</div>
+    const genericError = (<div>
+        <p>Some error happened while trying to process the request.</p>
+        <br />
+        <p className="text-sm">Make sure you are pointing correctly to a Vespa cluster with a running application.</p>
+    </div>)
+
+    return (<>
+        <main role="main" className="h-screen flex flex-row flex-wrap">
+            <div className="hero min-h-screen bg-darkest-blue">
+                <div className="flex-col justify-center hero-content lg:flex-row w-full">
+                    <div
+                        className="card flex-shrink-0 w-full max-w-1/2 shadow-2xl bg-standout-blue overflow-visible">
+                        <div style={{position: "absolute", top: "-50px", left: "calc(50% - 40px)"}}
+                             className="flex flex-row flex-start justify-center mb-3 capitalize font-medium text-sm hover:text-teal-600 transition ease-in-out duration-500">
+                            <div
+                                className="mb-3 w-24 h-24 rounded-full bg-white flex items-center justify-center cursor-pointer text-indigo-700 border-4 border-yellow-400">
+                                <a href="/"><img alt="" src="/img/sad-wasp.png"
+                                                 className="icon icon-tabler icon-tabler-stack"/></a>
+                            </div>
+                        </div>
+                        <div className="flex mt-10 card-body w-800 text-center">
+                            <span className="text-yellow-400">Opzzz..</span>
+                            {error && error.status === 404 ? notFound : genericError}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </>);
+}
+
+export default VispanaError;