Project easy studio

mock_data/LMS_API.instances.json

@@ -0,0 +1,51 @@
+[
+  {
+    "id": "3f6c9e35-f6a8-4fb7-b09f-8b3e7d4e20de",
+    "name": "Cluster Demo 1",
+    "url": "dev.harperdb.io",
+    "port": 9931,
+    "is_ssl": false
+  },
+  {
+    "id": "cee98941-8975-44d6-88e6-9a1a4fa02b25",
+    "name": "Cluster Demo 2",
+    "url": "dev.harperdb.io",
+    "port": 9932,
+    "is_ssl": false
+  },
+  {
+    "id": "a32b2464-b5ca-4b9d-a10f-c6da23a7dcbe",
+    "name": "Cluster Demo 3",
+    "url": "dev.harperdb.io",
+    "port": 9933,
+    "is_ssl": false
+  },
+  {
+    "id": "7a60b51d-7983-4659-a34b-cfb578a4db54",
+    "name": "Cluster Demo 4",
+    "url": "dev.harperdb.io",
+    "port": 9934,
+    "is_ssl": false
+  },
+  {
+    "id": "f0d29404-9fb1-4d66-ab98-41f05e1ac665",
+    "name": "Cluster Demo 5",
+    "url": "dev.harperdb.io",
+    "port": 9935,
+    "is_ssl": false
+  },
+  {
+    "id": "ccf2b958-0b0e-4bf6-a81d-6abee1e4eec5",
+    "name": "Cluster Demo 6",
+    "url": "dev.harperdb.io",
+    "port": 9936,
+    "is_ssl": false
+  },
+  {
+    "id": "8291c224-6911-4155-b5a9-34559e5a45ff",
+    "name": "Cluster Demo 7",
+    "url": "dev.harperdb.io",
+    "port": 9937,
+    "is_ssl": false
+  }
+]

package.json

@@ -11,64 +11,68 @@
     "transfer": "cp -r ./public/* /Users/jrepp/Developer/harperdb/harperdb/docs/",
     "tohdb": "npm run build && npm run clean-source && npm run clean-destination && npm run transfer",
     "start": "webpack-dev-server --mode development --config webpack.dev.js",
-    "lint": "eslint --fix src && sass-lint --verbose"
+    "lint": "eslint --fix src && sass-lint --verbose",
+    "deploy": "npm run build && npm run clean-source && scp -r ./public/* ubuntu@fcfleet.demo.harperdb.io:/home/ubuntu/sites/studio-stage"
   },
   "author": "harperdb",
   "license": "Apache-2.0",
   "dependencies": {
-    "@nio/ui-kit": "^2.1.1",
+    "@nio/ui-kit": "^2.1.2",
     "font-awesome": "^4.7.0",
+    "json-stringify-pretty-compact": "^2.0.0",
     "react": "^16.12.0",
+    "react-alert": "^6.0.0",
+    "react-alert-template-basic": "^1.0.0",
+    "react-card-flip": "^1.0.10",
     "react-csv-reader": "^2.0.2",
     "react-dom": "^16.12.0",
     "react-json-editor-ajrm": "^2.5.9",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-table": "=6.10.3",
-    "terser-webpack-plugin": "^2.2.1",
-    "url-regex": "^5.0.0",
     "use-async-effect": "^2.2.1",
     "use-persisted-state": "^0.3.0",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "zustand": "^2.2.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/polyfill": "^7.6.0",
-    "@babel/preset-env": "^7.7.4",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/runtime": "^7.7.4",
-    "@babel/types": "^7.7.4",
-    "autoprefixer": "^9.7.3",
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/polyfill": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/runtime": "^7.8.3",
+    "@babel/types": "^7.8.3",
+    "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-imports": "^2.0.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.5",
-    "css-loader": "^3.2.1",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
     "cssnano": "^4.1.10",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^4.2.0",
+    "eslint-plugin-react": "^7.18.0",
+    "file-loader": "^5.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "merge": "^1.2.1",
-    "node-sass": "^4.13.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "purgecss-webpack-plugin": "^1.6.0",
     "sass-lint": "^1.13.1",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.1",
-    "webpack": "^4.41.2",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "terser-webpack-plugin": "^2.3.2",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0",
+    "webpack-dev-server": "^3.10.1",
     "webpack-merge": "^4.2.2"
   }
 }

src/app.scss

@@ -3,6 +3,8 @@
 @import './assets/styles/vars';
 @import '~font-awesome/scss/font-awesome';
 @import './assets/styles/base';
+@import './assets/styles/alert';
+@import './assets/styles/divider';
 @import './assets/styles/typography';
 @import './assets/styles/react-table';
 @import './assets/styles/card';

src/assets/styles/_alert.scss

@@ -0,0 +1,26 @@
+.alert {
+  padding: 13px;
+  border-radius: 6px;
+  width: 300px;
+  margin-top: 5px;
+  z-index: 9999;
+
+  .message {
+    padding-top: 7px;
+    white-space: nowrap;
+    text-overflow: clip;
+    overflow: hidden;
+  }
+
+  &.success {
+    background-color: $color-success;
+  }
+
+  &.info {
+    background-color: $dark-grey-overlay;
+  }
+
+  &.error {
+    background-color: $color-danger;
+  }
+}

src/assets/styles/_base.scss

@@ -32,6 +32,7 @@ body {
       background: rgba(0, 0, 0, .3) !important;
       padding: .5rem 2rem;
       position: fixed;
+      z-index: 99 !important;
 
       @media screen and (max-width: 991px) {
         padding: .5rem 1rem;

src/assets/styles/_card.scss

@@ -5,4 +5,35 @@
   &.dark {
     background: $white-overlay !important;
   }
+
+  .card-body {
+    padding: 15px;
+
+    .scrollable {
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: 75px;
+    }
+  }
+
+  &.instance {
+    height: 140px;
+    cursor: pointer;
+
+    input,
+    .btn {
+      border-color: transparent;
+    }
+    input {
+      background: $color-white;
+    }
+    .btn {
+      white-space: nowrap;
+    }
+    &.error {
+      input {
+        border-color: $color-danger;
+      }
+    }
+  }
 }

src/assets/styles/_code.scss

@@ -16,3 +16,9 @@ pre {
     }
   }
 }
+
+.code-holder {
+  max-height: calc(100vh - 220px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}

src/assets/styles/_divider.scss

@@ -0,0 +1,5 @@
+hr {
+  &.white {
+    border-top-color: $color-white;
+  }
+}

src/assets/styles/_typography.scss

@@ -21,7 +21,7 @@ $font-line-height: 1 !important;
 body {
   font-weight: $font-weight-light;
   font-family: $font-family-sans;
-  line-height: 1.5;
+  line-height: $font-line-height;
   letter-spacing: .02rem;
   font-size: $font-size-root;
   color: $color-black;
@@ -135,6 +135,10 @@ strong {
   color: $color-lightgrey;
 }
 
+.text-darkgrey {
+  color: $color-darkgrey;
+}
+
 .text-white-overlay {
   color: rgba(255, 255, 255, .6);
 }

src/components/app.js

@@ -1,33 +1,16 @@
-import React, { useContext } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 
-import '../app.scss';
-import routes from './routes';
-import { HarperDBContext } from '../providers/harperdb';
-import Login from '../pages/login';
-import TopNav from './topnav';
+import Instances from './instances';
+import Instance from './instance';
+import Login from './login';
 
-export default () => {
-  const { structure } = useContext(HarperDBContext);
-
-  return (
-    <>
-      { structure && (
-        <TopNav />
-      )}
-      <div id="app-container">
-        { structure ? (
-          <Switch>
-            {routes.map((route) => (
-              <Route key={route.path} component={route.component} path={route.path} />
-            ))}
-            <Redirect to="/browse" />
-          </Switch>
-        ) : (
-          <Login />
-        )}
-      </div>
-      <div id="app-bg" />
-    </>
-  );
-};
+export default () => (
+  <div id="app-container">
+    <Switch>
+      <Route component={Instance} path="/instances/:instance_id" />
+      <Route component={Instances} path="/instances" />
+      <Route component={Login} exact path="/" />
+    </Switch>
+  </div>
+);