Views Web UI (#15385)

* React-specific rules.

* Analyzers view.

* Modal component for React.

* Analyzer delete functional, +notifications.

* Stable render of modal children, +AddAnalyzer form stub.

* Fixed broken modal re-open.

* Delimiter form ready.

* All forms ready.

* Removed 'Tree' mode.

* Analyzer create functional.

* Fixed stopwords/stopwordsPath mixup.

* 'Create Analyzer' form schema validation.

* Added missing fields to Text and N-Gram analyzer forms.

* Added support for copying existing analyzer to form state.

* Implemented view analyzer details.

* UX improvements.

As suggested in #14599.

* Fixed analyzer selection.

* Added UI for AQL and GeoJSON analyzers.

* Added UI for GeoPoint analyzer.

* Improved validation, +dispatcher to manage state, +form cache.

* Changed button styles to match theme.

+fixed minor bug in form field setter
+error div spacing fix.

* Removed 'pointer' cursor on text field labels.

* Added help links to locale and delimiter inputs.

* Added help text to delimiter field.

* Fix bug that caused crash in case of pre-selected analyzer being deleted.

* Fixed parsing and UI for latitude/longitude elements.

* Reusable form and grid components based on Pure.css.

* View mode now provides both JSON and (disabled) form views.

* Using relative field paths to support embeddable forms.

* Normalized accent input, +made all inputs location agnostic.

+Renamed OptionsInput.tsx to GeoOptionsInput.tsx.

* Pipeline Analyzer form functional.

* Switched to simple text display for code view.

* Use text cursor for code view mode.

* Added UIs for Stopwords, Collation and Segmentation Analyzers.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed DB base URL evaluation.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Switched to Pure.css-based grid components.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Allow rw access when server is running in non-authenticated mode.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed radio button rendering.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Minor UI improvements.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed modal height issues, +fixed JSON form double scrollbar.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Maximized modal height for view mode.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Minor UI improvements.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed null values for blank numeric inputs.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* UI improvements.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Slightly improved responsive grid.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Reusing FormState as action button prop.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Stricter type restrictions.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Temp commit before switching to other work (build broken).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Restored changes before merge.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Added ajv merge patch

* Stable ids for elements.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Temp commit before branch change.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Temp commit before branch change.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Changed filter input id.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed build.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Temp commit before branch switch.

* Schema complete.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Views UI partially complete.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* ArangoTable component now accepts extra parameters.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Label now optional for text and dropdown components.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Removed Int type.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed FormProps.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Added LinkPropertiesForm (stub) and ViewPropertiesForm (partial).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Ignored MSVC project files.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed analyzer compile errors.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed build (analyzers tested, views untested).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Layout improvements.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Added ConsolidationPolicyForm.tsx.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Better table formatting.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Nested table for stored value fields array.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Extracted IconButton component due to frequent use, extracted nested inputs - LinkPropertiesInput.tsx and StoredValueFieldsInput.tsx.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Used IconButton component, replacing repeated custom markup.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Redefined IconButton classes for consistency with existing defined styles.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Recursive form render working.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* View creation successful (w/ recursive link properties).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* View display in both form/code mode now functional.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Restricted consolidation policy input to 'tier'.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Views edit works (mostly).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Converted all form inputs to controlled components.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Rebuild UI

* Primary Sort accepts 'asc': boolean as an alternative to direction field.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Removed unused form component.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* De-duplicated JSON forms.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Added post processor to invoke custom logic during action dispatch.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Removed auto-fix during validation.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Correctly differentiate between and 0-valued and empty numeric fields (workaround for JS quirk).

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Extracted method for boolean field setter.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Fixed multiple field validation issues.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* 'Store Values' field rendered as checklist.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Temp commit before migrating working directory.

* Optimized filter function.

* Removed unused export.

* Autocomplete - initial implementation.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Autocomplete multi-select React component partially ready.

* Autocomplete - multi-select React component ready.

* Switched to 'flex' layout.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Show 'In Background' field only at collection level.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Minor fixes.

* Removed link caching from form (was confusing to use).

* Non-modal view details - info page ready.

* Settings page partially built.

* Non-modal view details - settings and consolidation pages ready.

* Non-modal view details - links pages ready.

* Non-modal view details - json page ready.

* Removed unused files.

* Use current view name during JSON copy.

* Added `minScore` field to 'Tier' consolidation policy type.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

* Moved `consolidationIntervalMsec` to settings page, renamed consolidation menu item.

Signed-off-by: Aditya Mukhopadhyay <aditya@arangodb.com>

Co-authored-by: Vadim Kondratyev <vadim@arangodb.com>

.gitignore

@@ -83,6 +83,8 @@ Installation/MacOSX/Bundle/Info.plist
 
 nbproject/
 .idea
+.vs
+CMakeSettings.json
 .vscode
 *.sublime-workspace
 *.sublime-project

js/apps/system/_admin/aardvark/APP/frontend/js/arango/arango.js

@@ -133,7 +133,7 @@
       // note timestamp of last activity (only seconds part)
       sessionStorage.setItem('lastActivity', Date.now() / 1000);
     },
-  
+
     renewJwt: function (callback) {
       if (!window.atob) {
         return;
@@ -175,7 +175,7 @@
         error: function (data) {
           // this function is triggered by a non-interactive
           // background task. if it fails for whatever reason,
-          // we don't report this error. 
+          // we don't report this error.
           // the worst thing that can happen is that the JWT
           // is not renewed and thus the user eventually gets
           // logged out
@@ -771,7 +771,7 @@
         contentType: 'application/json',
         processData: false,
         success: function (data) {
-          // deleting a job that is not there anymore is intentionally not considered 
+          // deleting a job that is not there anymore is intentionally not considered
           // an error here. this is because in some other places we collect job data,
           // which automatically leads to server-side deletion of the job. so just
           // swallow 404 errors here, silently...
@@ -1101,16 +1101,16 @@
       }
 
       if (dlType) {
-        var blob = new Blob([obj], {type: dlType});
+        var blob = new Blob([obj], { type: dlType });
         var blobUrl = window.URL.createObjectURL(blob);
         var a = document.createElement('a');
         document.body.appendChild(a);
         a.style = 'display: none';
         a.href = blobUrl;
 
-        a.download = (filename ? filename : 'results') + '-' + 
-                     window.frontendConfig.db.replace(/[^-_a-z0-9]/gi, "_") + 
-                     '.' + type;
+        a.download = (filename ? filename : 'results') + '-' +
+                     window.frontendConfig.db.replace(/[^-_a-z0-9]/gi, "_") +
+          '.' + type;
 
         a.click();
 

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

@@ -60,7 +60,11 @@
       'logs': 'logger',
       'helpus': 'helpUs',
       'views': 'views',
-      'view/:name': 'view',
+      'view/:name': 'viewInfo',
+      'view/:name/settings': 'viewSettings',
+      'view/:name/consolidation': 'viewConsolidation',
+      'view/:name/links': 'viewLinks',
+      'view/:name/json': 'viewJSON',
       'graph/:name': 'graph',
       'graph/:name/settings': 'graphSettings',
       'support': 'support'
@@ -111,7 +115,7 @@
             this.loggerView.logTopicView.remove();
           }
         }
-      
+
         if (this.lastRoute === '#shards') {
           if (this.shardsView) {
             this.shardsView.remove();
@@ -1260,25 +1264,44 @@
       });
     },
 
-    view: function (name) {
-      const self = this;
+    viewInfo: function (name) {
       this.checkUser();
 
-      this.init.then(() => {
-        if (this.viewView) {
-          this.viewView.remove();
-        }
+      this.init.then(
+        () => ReactDOM.render(React.createElement(window.ViewInfoReactView, { name }),
+          document.getElementById('content')));
+    },
 
-        this.arangoViewsStore.fetch({
-          success: function () {
-            self.viewView = new window.ViewView({
-              model: self.arangoViewsStore.get(name),
-              name: name
-            });
-            self.viewView.render();
-          }
-        });
-      });
+    viewSettings: function (name) {
+      this.checkUser();
+
+      this.init.then(
+        () => ReactDOM.render(React.createElement(window.ViewSettingsReactView, { name }),
+          document.getElementById('content')));
+    },
+
+    viewConsolidation: function (name) {
+      this.checkUser();
+
+      this.init.then(
+        () => ReactDOM.render(React.createElement(window.ViewConsolidationReactView, { name }),
+          document.getElementById('content')));
+    },
+
+    viewLinks: function (name) {
+      this.checkUser();
+
+      this.init.then(
+        () => ReactDOM.render(React.createElement(window.ViewLinksReactView, { name }),
+          document.getElementById('content')));
+    },
+
+    viewJSON: function (name) {
+      this.checkUser();
+
+      this.init.then(
+        () => ReactDOM.render(React.createElement(window.ViewJSONReactView, { name }),
+          document.getElementById('content')));
     },
 
     views: function () {

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

@@ -17,12 +17,12 @@
     <li id="dbStatus" class="infoEntry subMenuEntry pull-right positive">
       <a class="info">DB:</a>
       <a class="state"><span><%= _.escape(currentDB.name) %></span></a>
-      <a class="icon db-icon default-icon">
-        <i class="fa fa-refresh"></i>      
-      </a>
-    </li>
-    <li id="userBar" class="infoEntry subMenuEntry pull-right" style="margin-right: 10px;">
+        <a class="icon db-icon default-icon">
+            <i class="fa fa-refresh"></i>
+        </a>
     </li>
+      <li id="userBar" class="infoEntry subMenuEntry pull-right" style="margin-right: 10px;">
+      </li>
   </ul>
 
   <div id="licenseInfoArea">

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

@@ -140,13 +140,13 @@
           if (licenseData.status && licenseData.features && licenseData.features.expires) {
             self.renderLicenseInfo(licenseData.status, licenseData.features.expires, serverTime);
           } else {
-            self.showLicenseError();  
+            self.showLicenseError();
           }
         },
         error: function () {
           self.showLicenseError();
         }
-      }); 
+      });
     },
 
     fetchServerTime: function () {
@@ -161,13 +161,13 @@
           if (!timeData.error && timeData.code === 200 && timeData.time) {
             self.fetchLicenseInfo(timeData.time);
           } else {
-            self.showGetTimeError();  
+            self.showGetTimeError();
           }
         },
         error: function () {
           self.showGetTimeError();
         }
-      }); 
+      });
     },
 
     showLicenseError: function () {
@@ -366,7 +366,7 @@
         });
       } else {
         $(self.subEl + ' .bottom').append(
-          '<li class="subMenuEntry</li>'
+          '<li class="subMenuEntry"></li>'
         );
       }
     },

js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss

@@ -93,6 +93,12 @@
     }
   }
 
+  .select2-container-multi {
+    .select2-choices {
+      overflow: unset;
+    }
+  }
+
   .select2-choices {
     background-image: none !important;
     border: 2px solid $c-content-border;
@@ -116,7 +122,7 @@
     }
 
     li {
-      background-color: $c-white !important;
+      //background-color: $c-white !important;
       background-image: none !important;
       color: $c-black;
 
@@ -135,6 +141,11 @@
     outline: transparent !important;
   }
 
+  .react-autocomplete-input {
+    left: unset !important;
+    top: unset !important;
+  }
+
   .nav-tabs {
     margin-top: 15px;
 

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

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

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

@@ -47,6 +47,7 @@
     "raw-loader": "^4.0.1",
     "react": "^17.0.2",
     "react-app-polyfill": "^0.1.3",
+    "react-autocomplete-input": "^1.0.18",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0",

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

@@ -1,5 +1,6 @@
 import 'jsoneditor-react/es/editor.min.css';
 import React, { Component } from 'react';
+import 'react-autocomplete-input/dist/bundle.css';
 import ReactDOM from 'react-dom';
 
 const jsoneditor = require('jsoneditor');
@@ -12,6 +13,11 @@ const parsePrometheusTextFormat = require('parse-prometheus-text-format');
 // import new react views
 // require('./views/shards/ShardsReactView');
 require('./views/analyzers/AnalyzersReactView');
+require('./views/views/ViewInfoReactView');
+require('./views/views/ViewSettingsReactView');
+require('./views/views/ViewConsolidationReactView');
+require('./views/views/ViewLinksReactView');
+require('./views/views/ViewJSONReactView');
 
 // old libraries
 const jQuery = require('jquery');

js/apps/system/_admin/aardvark/APP/react/src/components/arango/buttons.tsx

@@ -0,0 +1,47 @@
+import React, { CSSProperties, ReactNode } from "react";
+
+type IconButtonProps = {
+  icon: string;
+  type?: 'neutral' | 'disabled' | 'header' | 'primary' | 'notification' | 'success' | 'info' | 'navbar'
+    | 'danger' | 'warning' | 'inactive' | 'close' | 'default';
+  size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+  children?: ReactNode;
+  [key: string]: any;
+};
+
+const iconButtonSizeMap: { [key: string]: CSSProperties } = {
+  xsmall: {
+    fontSize: '70%'
+  },
+  small: {
+    fontSize: '85%'
+  },
+  large: {
+    fontSize: '110%'
+  },
+  xlarge: {
+    fontSize: '125%'
+  }
+};
+
+export const IconButton = ({ type, size, icon, children, ...rest }: IconButtonProps) => {
+  const style: CSSProperties = rest.style || {};
+
+  if (size) {
+    Object.assign(style, iconButtonSizeMap[size]);
+  }
+  delete rest.style;
+
+  return <button className={type ? `button-${type}` : 'pure-button'} style={style} {...rest}>
+    <i className={`fa fa-${icon}`} style={{ marginLeft: 'auto' }}/>
+    {
+      children
+        ? <>
+          &nbsp;
+          {children}
+        </>
+        : null
+    }
+  </button>;
+};
+

js/apps/system/_admin/aardvark/APP/react/src/components/arango/table.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ChildProp } from "../../utils/constants";
+
+type ArangoTableProps = ChildProp & {
+  [key: string]: any;
+};
+
+export const ArangoTable = ({ children, ...rest }: ArangoTableProps) =>
+  <table className={'arango-table'} {...rest}>{children}</table>;
+
+type ArangoTHProps = ChildProp & {
+  seq: number;
+  [key: string]: any;
+};
+
+export const ArangoTH = ({ children, seq, ...rest }: ArangoTHProps) =>
+  <th className={`arango-table-th table-cell${seq}`} {...rest}>{children}</th>;
+
+export const ArangoTD = ({ children, seq, ...rest }: ArangoTHProps) =>
+  <td className={`arango-table-td table-cell${seq}`} {...rest}>{children}</td>;

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

@@ -4,11 +4,12 @@ import { Cell, Grid } from "../pure-css/grid";
 interface ModalHeaderProps {
   title: string;
   children?: ReactNode;
+  minWidth?: string;
 }
 
-const ModalHeader = ({ title, children }: ModalHeaderProps) =>
+const ModalHeader = ({ title, children, minWidth = '60vw' }: ModalHeaderProps) =>
   <>
-    <div className="modal-header" style={{ minWidth: '60vw' }}>
+    <div className="modal-header" style={{ minWidth }}>
       <Grid>
         <Cell size={'1-4'}>
           <span className="arangoHeader">{title}</span>