2.0.15 Release (#126)

* Added support for loading dashboards from a relative URL in standalone mode

* Hotfix for broken demo dashboard

* Bump to 2.0.15. Added option to replace dashboard parameters in Markdown and iFrame strings

* added html to image to lib

* W.I.P. on downloading reports/dashboard as image

* Added button to download entire dashboard as an image

* Updated release notes for 2.0.15

* Dockerfile - Configuration through env variables at runtime (#125)

* Configuration throug env variables

- Env variables can now be used to define the contents of config.json (when the container starts)
- Added tips for setting up single sign on

* Cleanup of Dockerfile and README

* Removed temporary files

* Bumped version number

Co-authored-by: Håkan Löfqvist <[email protected]>

* Updated release notes

* Updated README on Docker deployments

Co-authored-by: Håkan Löfqvist <[email protected]>

Author: nielsdejong

Dockerfile

@@ -1,14 +1,17 @@
 # build stage
 FROM node:lts-alpine AS build-stage
-RUN apk add --no-cache git
-RUN git clone https://github.com/nielsdejong/neodash.git /usr/local/src/neodash
+
 RUN npm install -g typescript jest 
 WORKDIR /usr/local/src/neodash
+
+# Pull source code if you have not cloned the repository
+#RUN apk add --no-cache git
+#RUN git clone https://github.com/nielsdejong/neodash.git /usr/local/src/neodash
+
+# Copy sources and install/build
 COPY ./package.json /usr/local/src/neodash/package.json
 RUN npm install
 COPY ./ /usr/local/src/neodash
-# ENV PUBLIC_URL=/neodash
-# RUN git checkout develop
 RUN npm run build
 
 # production stage
@@ -17,10 +20,15 @@ RUN apk upgrade
 COPY --from=build-stage /usr/local/src/neodash/dist /usr/share/nginx/html
 
 COPY ./conf/default.conf /etc/nginx/conf.d/
+COPY ./scripts/config-entrypoint.sh /docker-entrypoint.d/config-entrypoint.sh
+COPY ./scripts/message-entrypoint.sh /docker-entrypoint.d/message-entrypoint.sh
 
 RUN chown -R nginx:nginx /var/cache/nginx && \
     chown -R nginx:nginx /var/log/nginx && \
-    chown -R nginx:nginx /etc/nginx/conf.d 
+    chown -R nginx:nginx /etc/nginx/conf.d && \
+    chown -R nginx:nginx /docker-entrypoint.d/config-entrypoint.sh && \
+    chmod +x /docker-entrypoint.d/config-entrypoint.sh  && \
+    chmod +x /docker-entrypoint.d/message-entrypoint.sh
 RUN touch /var/run/nginx.pid && \
     chown -R nginx:nginx /var/run/nginx.pid
 RUN chown -R nginx:nginx /usr/share/nginx/html/
@@ -29,42 +37,4 @@ RUN chown -R nginx:nginx /usr/share/nginx/html/
 USER nginx
 EXPOSE 5005
 HEALTHCHECK cmd curl --fail http://localhost:5005 || exit 1
-
-# Set the defaults for the build arguments. When the image is created, these variables can be changed with --build-arg
-# Such as --build-arg ssoEnabled=true
-ARG ssoEnabled=false
-ARG ssoDiscoveryUrl='https://example.com'
-ARG standalone=false
-ARG standaloneProtocol='neo4j+s'
-ARG standaloneHost='test.databases.neo4j.io'
-ARG standalonePort=7687
-ARG standaloneDatabase='neo4j'
-ARG standaloneDashboardName='My Dashboard'
-ARG standaloneDashboardDatabase='neo4j'
-ARG standaloneDashboardURL=''
-
-LABEL version="2.0.14"
-
-# Dynamically set app config on container startup.
-RUN echo " \
-    { \
-    \"ssoEnabled\": ${ssoEnabled}, \
-    \"ssoDiscoveryUrl\": \"${ssoDiscoveryUrl}\",  \
-    \"standalone\": ${standalone}, \
-    \"standaloneProtocol\": \"${standaloneProtocol}\", \
-    \"standaloneHost\": \"${standaloneHost}\", \
-    \"standalonePort\": ${standalonePort}, \
-    \"standaloneDatabase\": \"${standaloneDatabase}\",  \
-    \"standaloneDashboardName\": \"${standaloneDashboardName}\", \
-    \"standaloneDashboardDatabase\": \"${standaloneDashboardDatabase}\",  \
-    \"standaloneDashboardURL\": \"${standaloneDashboardURL}\"  \
-    }" > /usr/share/nginx/html/config.json
-    
-CMD echo '-----------------------------------------------------------------------------------------' && \
-    echo '| NeoDash is available on http://localhost:5005 by default.                             |' && \  
-    echo '| Make sure your ports are mapped correctly (-p 5005:5005) when starting the container. |' && \
-    echo '-----------------------------------------------------------------------------------------' && \
-    /usr/sbin/nginx -g 'daemon off;'
-
-# neodash will be available at http://localhost:5005 inside the container. See `scripts/docker-build-run-unix.bash` on how to map ports.
-
+LABEL version="2.0.15"

README.md

@@ -23,6 +23,9 @@ docker pull nielsdejong/neodash:latest
 docker run -it --rm -p 5005:5005 nielsdejong/neodash
 ```
 
+> Windows users may need to prefix the `docker run` command with `winpty`.
+
+
 ## Run & Build using npm
 NeoDash is built with React. You'll need `npm` installed to run the web app.
 
@@ -52,15 +55,18 @@ Make sure you have a recent version of `docker` installed to build the multi-sta
 
 On Unix (Mac/Linux) systems:
 ```
-$ ./scripts/docker-build-run-unix.bash 
+docker build . -t neodash
 ```
 
-If you use Windows, you should have installed WSL. In WSL, you can run the script as follows:
+If you use Windows, you might need to prefix the command with `winpty`:
 ```
-$ ./scripts/docker-build-run-windows.bash
+winpty docker build . -t neodash
 ```
-Then visit `http://localhost:5005` in your browser.
 
+After building, you can run the image with:
+```
+docker run  -it --rm -p 5005:5005 neodash
+```
 
 ## Run in standalone mode
 NeoDash can be deployed in a 'standalone mode' for dashboard viewers. This mode will:
@@ -72,9 +78,52 @@ The diagram below illustrates how NeoDash standalone mode can be deployed next t
 
 ![](doc/standalone-architecture.png)
 
-You can configure an instance to run as standalone by changing the variables in `scripts/docker-build-run-unix.bash`, or, if you're not using docker, directly modifying `public/config.json`. Note that the editor mode is determined at runtime by the React app, and *not* at build time. You therefore do not need to (re-)build the React application, just the image.
+### Option 1 - Standard Deployment (Non-Docker)
+First, build NeoDash as described above. Then, you'll have a `dist` directory that you can deploy to a web server.
+
+To configure the app to run in standalone mode, you'll need to edit `dist/config.json` and change the `standalone` property to `true`.
+The other variables inside `config.json` should also be configured to match the hostname, port and database name of your Neo4j instance.
+
+As `config.json` gets picked up at runtime by the application, users viewing the application will now access the dashboard in standalone mode. 
+
+### Option 2 - Docker Deployment
+You can configure the app to run in standalone by passing environment variables to Docker:
+```
+docker run  -it --rm -p 5005:5005 \
+    -e ssoEnabled=false \
+    -e ssoDiscoveryUrl="https://example.com" \
+    -e standalone=true \
+    -e standaloneProtocol="neo4j" \
+    -e standaloneHost="localhost" \
+    -e standalonePort="7687" \
+    -e standaloneDatabase="neo4j" \
+    -e standaloneDashboardName="My Dashboard" \
+    -e standaloneDashboardDatabase="dashboards" \
+    nielsdejong/neodash
+```
+
+
+> Alternatively, environment variables from docker compose or a kubernetes deployment can also be used.
+
+
+## Auth Provider (SSO)
+
+To set up NeoDash to use an external identiy provider, you can add a /auth_provider resource to nginx (in `/conf/default.conf`):
+
+```
+location /auth_provider {
+        default_type application/json;
+        return 200 '{
+                        "auth_config" : {
+                            "oidc_providers" : [ ... ]
+                        }
+                    }';
+    }
+```
+
+For basic deployments it might suffice to route requests to `/auth_provider` on the https port of the neo4j database.
 
- ## Extending NeoDash
+## Extending NeoDash
 There are two categories of extensions to NeoDash you can build:
 - Core Dashboard Functionality
 - Custom Reports

package.json

@@ -1,6 +1,6 @@
 {
   "name": "neodash",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "homepage": "",
   "description": "NeoDash - Neo4j Dashboard Builder",
   "neo4jDesktop": {
@@ -47,6 +47,7 @@
     "codemirror": "^5.65.1",
     "cypher-codemirror": "github:nielsdejong/cypher-editor#c0eff97fc97f22355e60b57fb6f8dc26b16f9a5f",
     "d3-scale-chromatic": "^3.0.0",
+    "html2canvas": "^1.4.1",
     "leaflet": "^1.7.1",
     "material-ui-color-picker": "github:nielsdejong/material-ui-color-picker#c1bae552c1daf81952bf0478d7f71c1a416527d3",
     "neo4j-client-sso": "^1.2.2",

release-notes.md

@@ -1,3 +1,14 @@
+## NeoDash 2.0.15
+This is the final minor update before the 2.1 release.
+
+Changes:
+- Several stability improvements before the 2.1 release.
+- Updated Dockerfile to make better use of caching, and pick up environment variables at run time.
+- Added option to replace dashboard parameters in Markdown/iFrames to make them dynamic.
+- Removed unneeded index column from the CSV download for tables.
+- Added optional dashboard setting to enable image downloads for reports/the entire dashboard.
+
+
 ## NeoDash 2.0.14
 Report features:
 - Added optional "Download as CSV" button to table reports.

scripts/config-entrypoint.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+###########
+set -e 
+
+echo " \
+    { \
+    \"ssoEnabled\": ${ssoEnabled:=false}, \
+    \"ssoDiscoveryUrl\": \"${ssoDiscoveryUrl:='https://example.com'}\",  \
+    \"standalone\": "${standalone:=false}", \
+    \"standaloneProtocol\": \"${standaloneProtocol:='neo4j+s'}\", \
+    \"standaloneHost\": \"${standaloneHost:='test.databases.neo4j.io'}\", \
+    \"standalonePort\": ${standalonePort:=7687}, \
+    \"standaloneDatabase\": \"${standaloneDatabase:='neo4j'}\",  \
+    \"standaloneDashboardName\": \"${standaloneDashboardName:='My Dashboard'}\", \
+    \"standaloneDashboardDatabase\": \"${standaloneDashboardDatabase:='neo4j'}\"  \
+    }" > /usr/share/nginx/html/config.json

scripts/message-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+###########
+
+echo '-----------------------------------------------------------------------------------------' 
+echo '| NeoDash is available on http://localhost:5005 by default.                             |' 
+echo '| Make sure your ports are mapped correctly (-p 5005:5005) when starting the container. |' 
+echo '-----------------------------------------------------------------------------------------' 

scripts/push-docker-image.bash

@@ -1,6 +1,6 @@
-docker build --no-cache --label "version=2.0.14" . -t neodash
-docker image tag neodash nielsdejong/neodash:2.0.14
+docker build --no-cache --label "version=2.0.15" . -t neodash
+docker image tag neodash nielsdejong/neodash:2.0.15
 docker image tag neodash nielsdejong/neodash:latest
-docker push nielsdejong/neodash:2.0.14
+docker push nielsdejong/neodash:2.0.15
 docker push nielsdejong/neodash:latest
 

src/application/Application.tsx

@@ -15,6 +15,7 @@ import NeoAboutModal from '../modal/AboutModal';
 import { NeoUpgradeOldDashboardModal } from '../modal/UpgradeOldDashboardModal';
 import { loadDashboardThunk } from '../dashboard/DashboardThunks';
 import { NeoLoadSharedDashboardModal } from '../modal/LoadSharedDashboardModal';
+import { downloadComponentAsImage } from '../chart/util/ChartUtils';
 
 /**
  * This is the main application component for NeoDash.
@@ -37,12 +38,14 @@ const Application = ({ connection, connected, hasCachedDashboard, oldDashboard,
         initializeApplication(initialized);
     }
 
+    const ref = React.useRef();
+
     // Only render the dashboard component if we have an active Neo4j connection.
     return (
-        <div style={{ display: 'flex' }}>
+        <div ref={ref} style={{ display: 'flex' }}>
             <CssBaseline />
-            <NeoDashboardPlaceholder connected={false}></NeoDashboardPlaceholder>
-            {(connected) ? <Dashboard></Dashboard> : <></>}
+            <NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
+            {(connected) ? <Dashboard onDownloadDashboardAsImage={(e)=>downloadComponentAsImage(ref)}></Dashboard> : <></>}
             <NeoAboutModal
                 open={aboutModalOpen}
                 handleClose={onAboutModalClose}

src/application/ApplicationThunks.ts

@@ -41,7 +41,7 @@ export const createConnectionThunk = (protocol, url, port, database, username, p
 
                 // If we have remembered to load a specific dashboard after connecting to the database, take care of it here.
                 const application = getState().application;
-                if (application.dashboardToLoadAfterConnecting && application.dashboardToLoadAfterConnecting.startsWith("http")) {
+                if (application.dashboardToLoadAfterConnecting && (application.dashboardToLoadAfterConnecting.startsWith("http") || application.dashboardToLoadAfterConnecting.startsWith("./") || application.dashboardToLoadAfterConnecting.startsWith("/"))) {
                     fetch(application.dashboardToLoadAfterConnecting)
                         .then(response => response.text())
                         .then(data => dispatch(loadDashboardThunk(data))); 

src/card/view/CardView.tsx

@@ -7,24 +7,30 @@ import { CardContent, IconButton } from '@material-ui/core';
 import { REPORT_TYPES } from '../../config/ReportConfig';
 import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import { downloadComponentAsImage } from '../../chart/util/ChartUtils';
 
 export const CARD_FOOTER_HEIGHT = 64;
 
-const NeoCardView = ({ title, database, query, cypherParameters, globalParameters, width, height, fields, active, setActive,
+const NeoCardView = ({ title, database, query, cypherParameters, globalParameters, 
+    width, height, fields, active, setActive,
     type, selection, dashboardSettings, settings, settingsOpen, refreshRate, editable,
     onGlobalParameterUpdate, onSelectionUpdate, onToggleCardSettings, onTitleUpdate,
     onFieldsUpdate, expanded, onToggleCardExpand }) => {
 
     const reportHeight = (97 * height) + (148 * Math.floor((height - 1) / 3));
     const cardHeight = (120 * height) + (78 * Math.floor((height - 1) / 3)) - 7;
+    const ref = React.useRef();
 
     // @ts-ignore
     const reportHeader = <NeoCardViewHeader
         title={title}
         editable={editable}
         fullscreenEnabled={dashboardSettings.fullscreenEnabled}
+        downloadImageEnabled={dashboardSettings.downloadImageEnabled}
         onTitleUpdate={onTitleUpdate}
         onToggleCardSettings={onToggleCardSettings}
+        settings={settings}
+        onDownloadImage={()=> downloadComponentAsImage(ref)}
         onToggleCardExpand={onToggleCardExpand}
         expanded={expanded}
     >
@@ -63,7 +69,7 @@ const NeoCardView = ({ title, database, query, cypherParameters, globalParameter
             {reportHeader}
             {/* if there's no selection for this report, we don't have a footer, so the report can be taller. */}
             <ReportItemContainer style={{ height: expanded ? (withoutFooter ? "calc(100% - 69px)" : "calc(100% - 79px)") : cardHeight }}>
-                <CardContent style={{
+                <CardContent ref={ref}  style={{
                     paddingBottom: "0px", paddingLeft: "0px", paddingRight: "0px", paddingTop: "0px", width: "100%", marginTop: "-3px",
                     height: expanded ? (withoutFooter ? "100%" : `calc(100% - ${CARD_FOOTER_HEIGHT}px)`) : ((withoutFooter) ? reportHeight + CARD_FOOTER_HEIGHT + "px" : reportHeight + "px"),
                     overflow: "auto", overflowY: "auto", overflowX: "auto"