arangodb · gnusi · Jan 10, 2022 · Jul 29, 2021 · Jul 29, 2021 · Aug 3, 2021
diff --git a/.gitignore b/.gitignore
@@ -83,6 +83,8 @@ Installation/MacOSX/Bundle/Info.plist
 
 nbproject/
 .idea
+.vs
+CMakeSettings.json
 .vscode
 *.sublime-workspace
 *.sublime-project

@@ -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();
 

@@ -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 () {

@@ -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">

@@ -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>'
         );
       }
     },

@@ -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;
 

@@ -2,3 +2,4 @@ declare module 'styled-css-grid';
 declare module 'sigma';
 declare module 'picomodal';
 declare module 'jsoneditor-react';
+declare module 'react-autocomplete-input';
@@ -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",

@@ -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');

@@ -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>;
+};
+
@@ -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>;
@@ -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>