Merge pull request #334 from RedisInsight/redisgraph-plugin

Add redisgraph plugin

Author: egor-zalenski

redisinsight/ui/src/packages/redisgraph/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.parcel-cache

redisinsight/ui/src/packages/redisgraph/README.md

@@ -0,0 +1,34 @@
+# RedisGraph Plugin for RedisInsight v2
+
+The example has been created using React, TypeScript, and [Elastic UI](https://elastic.github.io/eui/#/). 
+[Parcel](https://parceljs.org/) is used to build the plugin.
+
+## Running locally
+
+The following commands will install dependencies and start the server to run the plugin locally:
+```
+yarn
+yarn start
+```
+These commands will install dependencies and start the server. 
+
+_Note_: Base styles are included to `index.html` from the repository.
+
+This command will generate the `vendor` folder with styles and fonts of the core app. Add this folder 
+inside the folder for your plugin and include appropriate styles to the `index.html` file.
+
+```
+yarn build:statics - for Linux or MacOs
+yarn build:statics:win - for Windows
+```
+
+## Build plugin
+
+The following commands will build plugins to be used in RedisInsight:
+```
+yarn
+yarn build
+```
+
+[Add](../../../../../docs/plugins/installation.md) the package.json file and the 
+`dist` folder to the folder with your plugin, which should be located in the `plugins` folder.

redisinsight/ui/src/packages/redisgraph/package.json

@@ -0,0 +1,77 @@
+{
+  "author": {
+    "name": "Redis Ltd.",
+    "email": "[email protected]",
+    "url": "https://redis.com/redis-enterprise/redis-insight"
+  },
+  "bugs": {
+    "url": "https://github.com/"
+  },
+  "description": "Show graph Visualization/table",
+  "source": "./src/main.tsx",
+  "styles": "./dist/styles.css",
+  "main": "./dist/index.js",
+  "name": "graph-plugin",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development parcel serve src/index.html",
+    "build": "rimraf dist && cross-env NODE_ENV=production concurrently \"yarn build:js && yarn minify:js\" \"yarn build:css\"",
+    "build-lite": "rm dist/*.js && cross-env NODE_ENV=production concurrently \"yarn build:js && yarn minify:js\"",
+    "build:js": "parcel build src/main.tsx --dist-dir dist",
+    "build:css": "parcel build src/styles/styles.less --dist-dir dist",
+    "minify:js": "terser -- dist/main.js > dist/index.js && rimraf dist/main.js"
+  },
+  "targets": {
+    "main": false,
+    "module": {
+      "includeNodeModules": true
+    }
+  },
+  "visualizations": [
+    {
+      "id": "graph-table",
+      "name": "Table",
+      "activationMethod": "renderGraphTable",
+      "matchCommands": [
+        "GRAPH.RO_QUERY",
+        "GRAPH.QUERY"
+      ],
+      "description": "Example of graph table plugin",
+      "default": false
+    },
+    {
+      "id": "graph-viz",
+      "name": "Graph",
+      "activationMethod": "renderGraph",
+      "matchCommands": [
+        "GRAPH.RO_QUERY",
+        "GRAPH.QUERY"
+      ],
+      "description": "Example of graph plugin",
+      "default": true
+    }
+  ],
+  "devDependencies": {
+    "@parcel/compressor-brotli": "^2.0.0",
+    "@parcel/compressor-gzip": "^2.0.0",
+    "@parcel/transformer-less": "^2.3.2",
+    "@types/d3": "^7.1.0",
+    "@types/react-json-tree": "^0.13.0",
+    "concurrently": "^6.3.0",
+    "cross-env": "^7.0.3",
+    "parcel": "^2.0.0",
+    "rimraf": "^3.0.2",
+    "terser": "^5.9.0"
+  },
+  "dependencies": {
+    "@elastic/eui": "34.6.0",
+    "@emotion/react": "^11.7.1",
+    "classnames": "^2.3.1",
+    "d3": "^7.3.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-json-tree": "^0.16.1",
+    "redisinsight-plugin-sdk": "^1.0.0"
+  }
+}

redisinsight/ui/src/packages/redisgraph/src/App.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { JSONTree } from 'react-json-tree'
+import { ResultsParser } from './parser'
+import Graph from './Graph'
+import { Table } from './Table'
+
+const isDarkTheme = document.body.classList.contains('theme_DARK')
+
+const json_tree_theme = {
+    scheme: 'solarized',
+    author: 'ethan schoonover (http://ethanschoonover.com/solarized)',
+    base00: '#002b36',
+    base01: '#073642',
+    base02: '#586e75',
+    base03: '#657b83',
+    base04: '#839496',
+    base05: '#93a1a1',
+    base06: '#eee8d5',
+    base07: '#fdf6e3',
+    base08: '#dc322f',
+    base09: '#098658',
+    base0A: '#b58900',
+    base0B: '#A31515',
+    base0C: '#2aa198',
+    base0D: '#0451A5',
+    base0E: '#6c71c4',
+    base0F: '#d33682',
+}
+
+export function TableApp(props: { command?: string, data: any }) {
+
+  const ErrorResponse = HandleError(props)
+
+  if (ErrorResponse !== null) return ErrorResponse
+
+  const tableData = ResultsParser(props.data[0].response as any)
+
+  return (
+      <div className="table-view">
+          <Table
+              data={tableData.results}
+              columns={tableData.headers.map(h => ({
+                  field: h,
+                  name: h,
+                  render: d => (
+                      <JSONTree
+                          invertTheme={isDarkTheme}
+                          theme={{
+                              extend: json_tree_theme,
+                              tree: ({ style }) => ({
+                                  style: { ...style, backgroundColor: undefined }, // removing default background color from styles
+                              }),
+                          }}
+                          labelRenderer={(key) => key ? key : null}
+                          hideRoot
+                          data={d}
+                      />
+                  )
+              }))}
+          />
+      </div>
+  )
+}
+
+
+export function GraphApp(props: { command?: string, data: any }) {
+
+  const ErrorResponse = HandleError(props)
+
+  if (ErrorResponse !== null) return ErrorResponse
+
+  return (
+    <div style={{ height: "100%" }}>
+      <Graph graphKey={props.command.split(' ')[1]} data={props.data[0].response} />
+    </div>
+  )
+}
+
+function HandleError(props: { command?: string, data: any }): JSX.Element {
+  const { data: [{ response = '', status = '' } = {}] = [] } = props
+
+  if (status === 'fail') {
+    return <div className="responseFail">{JSON.stringify(response)}</div>
+  }
+
+  if (status === 'success' && typeof(response) === 'string') {
+    return <div className="responseFail">{JSON.stringify(response)}</div>
+  }
+
+  const command = props.command.split(' ')
+
+  if (command[command.length - 1] === '--compact') {
+    return <div className="responseFail">'--compact' flag is currently not supported.</div>
+  }
+
+  return null
+}