Analyzers UI

js/.eslintrc

@@ -173,6 +173,15 @@
       ],
       "parserOptions": {
         "sourceType": "module"
+      },
+      "env": {
+        "es6": true,
+        "browser": true
+      },
+      "settings": {
+        "react": {
+          "version": "detect"
+        }
       }
     }
   ]

js/apps/system/_admin/aardvark/APP/frontend/css/jsoneditor.css

@@ -238,7 +238,7 @@ div.jsoneditor-tree table.jsoneditor-tree {
 }
 
 div.jsoneditor-tree div.jsoneditor-tree-inner {
-  padding-bottom: 300px;
+  padding-bottom: 0;
 }
 
 div.jsoneditor-outer {

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -20,6 +20,7 @@
       'replication': 'replication',
       'replication/applier/:endpoint/:database': 'applier',
       'collections': 'collections',
+      'analyzers': 'analyzers',
       'new': 'newCollection',
       'login': 'login',
       'collection/:colid/documents/:pageid': 'documents',
@@ -319,6 +320,13 @@
 
     },
 
+    analyzers: function () {
+      this.checkUser();
+
+      this.init.then(() => ReactDOM.render(React.createElement(window.AnalyzersReactView),
+        document.getElementById('content')));
+    },
+
     cluster: function () {
       this.checkUser();
 

js/apps/system/_admin/aardvark/APP/frontend/js/templates/navigationView.ejs

@@ -10,6 +10,7 @@
     <li class="navbar-spacer big"></li>
     <!-- <li id="dbSelect" class="dropdown databases-menu disabled"></li> -->
     <li class="collections-menu"><a id="collections" class="tab" href="#collections"><i class="fa fa-folder"></i>Collections</a></li>
+    <li class="analyzers-menu"><a id="analyzers" class="tab" href="#analyzers"><i class="fa fa-cog"></i>Analyzers</a></li>
     <li class="views-menu"><a id="views" class="tab" href="#views"><i class="fa fa-eye"></i>Views</a></li>
     <li class="queries-menu"><a id="queries" class="tab" href="#queries"><i class="fa fa-bolt"></i>Queries</a></li>
     <li class="graphs-menu"><a id="graphs" class="tab" href="#graphs"><i class="fa fa-sitemap"></i>Graphs</a></li>
@@ -20,7 +21,7 @@
     <% } %>
     <% if (currentDB.get('isSystem')) { %>
       <% if (!readOnly) { %>
-        <li class="users-menu"><a id="users" class="tab" href="#manage"><i class="fa fa-users"></i>Users</a></li>
+        <li class="users-menu"><a id="users" class="tab" href="#users"><i class="fa fa-users"></i>Users</a></li>
       <% } %>
     <% } %>
     <!--

js/apps/system/_admin/aardvark/APP/frontend/js/views/navigationView.js

@@ -128,9 +128,10 @@
 
     resize: function () {
       // set menu sizes - responsive
-      var height = $(window).height() - $('.subMenuEntries').first().height();
-      $('#navigationBar').css('min-height', height);
-      $('#navigationBar').css('height', height);
+      const height = $(window).height() - $('.subMenuEntries').first().height();
+      const navBar = $('#navigationBar');
+      navBar.css('min-height', height);
+      navBar.css('height', height);
     },
 
     navigateBySelect: function () {
@@ -199,6 +200,13 @@
           active: false
         }
       ],
+      analyzers: [
+        {
+          name: 'Add / View Analyzers',
+          route: 'analyzers',
+          active: true
+        }
+      ],
       queries: [
         {
           name: 'Editor',

js/apps/system/_admin/aardvark/APP/react/non_ts_libs.d.ts

@@ -1,2 +1,4 @@
 declare module 'styled-css-grid';
 declare module 'sigma';
+declare module 'picomodal';
+declare module 'jsoneditor-react';

js/apps/system/_admin/aardvark/APP/react/package.json

@@ -3,7 +3,9 @@
   "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "arangojs": "^6.14.1",
+    "@types/lodash": "^4.14.172",
+    "ajv": "^8.6.2",
+    "arangojs": "^7.5.0",
     "axios": "^0.18.0",
     "backbone": "^1.3.3",
     "bfj": "6.1.1",
@@ -24,13 +26,17 @@
     "jquery": "^3.5.1",
     "jquery-ui": "^1.12.1",
     "jsoneditor": "^5.26.3",
+    "jsoneditor-react": "1.0.1",
+    "lodash": "^4.17.21",
     "marked": "^0.7.0",
     "memory-fs": "^0.5.0",
     "mini-css-extract-plugin": "0.4.3",
+    "minimatch": "^3.0.4",
     "node-sass": "^6.0.0",
     "noty": "^3.2.0-beta",
     "nvd3": "^1.8.6",
     "parse-prometheus-text-format": "^1.1.1",
+    "picomodal": "^3.0.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.0.6",
@@ -49,6 +55,7 @@
     "styled-components": "^4.4.1",
     "styled-css-grid": "^1.1.1",
     "styled-icons": "^6.3.0",
+    "swr": "^0.5.6",
     "tippy.js": "^2.6.0",
     "typeahead.js": "^0.11.1",
     "underscore": "^1.10.2",
@@ -109,7 +116,7 @@
     "pnp-webpack-plugin": "1.1.0",
     "react-dev-utils": "^6.1.1",
     "terser-webpack-plugin": "^3.0.6",
-    "typescript": "^3.9.5",
+    "typescript": "^4.3.5",
     "webpack": "^4.43.0",
     "webpack-concat-plugin": "^3.0.0",
     "webpack-dev-server": "^3.11.0",

js/apps/system/_admin/aardvark/APP/react/src/App.js

@@ -1,7 +1,7 @@
+import 'jsoneditor-react/es/editor.min.css';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
-// import Overview from './views/shards/overview';
 const jsoneditor = require('jsoneditor');
 const d3 = require('d3');
 require('nvd3');
@@ -12,6 +12,7 @@ window.parsePrometheusTextFormat = parsePrometheusTextFormat;
 
 // import new react views
 require('./views/shards/ShardsReactView');
+require('./views/analyzers/AnalyzersReactView');
 
 // old libraries
 const jQuery = require('jquery');

js/apps/system/_admin/aardvark/APP/react/src/components/modal/Modal.tsx

@@ -0,0 +1,63 @@
+import { ReactNode, useEffect, useRef } from "react";
+import { createPortal, render, unmountComponentAtNode } from "react-dom";
+import picoModal from 'picomodal';
+import { uniqueId } from 'lodash';
+
+interface ModalProps {
+  show: boolean;
+  children?: ReactNode;
+  setShow: (show: boolean) => void;
+}
+
+function renderChildren (children: ReactNode, contentDivId: string) {
+  const contentDiv = document.getElementById(contentDivId) as HTMLElement;
+
+  render(createPortal(children, contentDiv, contentDivId), contentDiv);
+}
+
+const Modal = ({ show, setShow, children }: ModalProps) => {
+  const contentDivId = useRef(uniqueId('modal-content-'));
+  const modal = useRef(picoModal({
+    content: `<div id='${contentDivId.current}'></div>`,
+    closeButton: false
+  })
+    .afterCreate(() => {
+      renderChildren(children, contentDivId.current); // First render of children.
+    })
+    .afterClose(() => {
+      setShow(false);
+    }));
+
+  useEffect(() => {
+    if (modal.current.isVisible()) {
+      renderChildren(children, contentDivId.current); // Re-render children on any child update. Important!
+    }
+  }, [children]);
+
+  useEffect(() => {
+    if (show) {
+      modal.current.show();
+    } else {
+      modal.current.close();
+    }
+  }, [show]);
+
+  useEffect(() => {
+    return () => {
+      try {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        unmountComponentAtNode(document.getElementById(contentDivId.current) as HTMLElement);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        modal.current.destroy();
+      } catch (e) {
+      }
+    };
+  }, []);
+
+  return null;
+};
+
+export default Modal;
+export { default as ModalFooter } from './ModalFooter';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';

js/apps/system/_admin/aardvark/APP/react/src/components/modal/ModalBody.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+
+interface ModalBodyProps {
+  children?: ReactNode;
+}
+
+const ModalBody = ({ children }: ModalBodyProps) =>
+  <div className="modal-body" style={{
+    maxHeight: '90vh',
+    overflowX: 'hidden',
+    minWidth: '50vw'
+  }}>
+    {children}
+  </div>;
+
+export default ModalBody;

js/apps/system/_admin/aardvark/APP/react/src/components/modal/ModalFooter.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+
+interface ModalFooterProps {
+  children?: ReactNode;
+}
+
+const ModalFooter = ({ children }: ModalFooterProps) =>
+  <>
+    <hr style={{ marginTop: 0 }}/>
+    <div className="modal-footer">
+      {children}
+    </div>
+  </>;
+
+export default ModalFooter;

js/apps/system/_admin/aardvark/APP/react/src/components/modal/ModalHeader.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+
+interface ModalHeaderProps {
+  title: string;
+  children?: ReactNode;
+}
+
+const ModalHeader = ({ title, children }: ModalHeaderProps) =>
+  <>
+    <div className="modal-header">
+      <div className={'pure-g'}>
+        <div className={'pure-u-8-24 pure-u-md-8-24 pure-u-lg-8-24 pure-u-xl-8-24'}>
+          <span className="arangoHeader">{title}</span>
+        </div>
+        <div className={'pure-u-16-24 pure-u-md-16-24 pure-u-lg-16-24 pure-u-xl-16-24'}>
+          {children}
+        </div>
+      </div>
+    </div>
+    <hr style={{ marginBottom: 0 }}/>
+  </>;
+
+export default ModalHeader;

js/apps/system/_admin/aardvark/APP/react/src/utils/arangoClient.ts

@@ -0,0 +1,23 @@
+import { Database } from 'arangojs';
+import useSWR from 'swr';
+import { memoize } from 'lodash';
+
+declare var frontendConfig: { [key: string]: any };
+
+export const getDB = memoize((db: string) => new Database({
+  url: frontendConfig.basePath,
+  databaseName: db
+}));
+
+export const getRouteForDB = memoize((db: string, route: string) => getDB(db).route(route),
+  (db: string, route: string) => `${db}/${route}`);
+
+export const getApiRouteForCurrentDB = () => getRouteForDB(frontendConfig.db, '_api');
+
+type ApiMethod = 'get' | 'put' | 'post' | 'delete';
+
+export const useAPIFetch = (path: string | null, method: ApiMethod = 'get', body?: any) => useSWR(path, () => {
+  const route = getApiRouteForCurrentDB();
+
+  return route[method](path as string, body);
+});

js/apps/system/_admin/aardvark/APP/react/src/utils/helpers.ts

@@ -0,0 +1,7 @@
+import { ChangeEvent } from "react";
+
+export const getChangeHandler = (setter: (value: string) => void) => {
+  return (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setter(event.currentTarget.value);
+  };
+};