Initial commit.

izaakschroeder · izaakschroeder · commit 7bff321bfbf1 · 2019-07-19T13:26:10.000-07:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "8"
+      },
+      "modules": "commonjs",
+      "shippedProposals": true
+    }],
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-graphql-tag",
+    ["module-resolver", {
+      "alias": {"": "./src", "#test": "./test"},
+    }],
+  ]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,10 @@
+**/node_modules/**
+lib/**/*
+internal/**/*
+hub/**/*
+action/**/*
+bin/**/*
+/*.js
+**/dist/**
+/flow-typed/**/*
+/coverage
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,16 @@
+extends:
+  - metalab
+  - metalab/react
+rules:
+  no-console: 0
+  camelcase: 0
+  no-use-before-define: 0
+env:
+  node: true
+globals:
+  require: true
+overrides:
+  -
+    files: "*.test.js"
+    env:
+      jest: true
diff --git a/.flowconfig b/.flowconfig
@@ -0,0 +1,15 @@
+[ignore]
+.*\.flow
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+emoji=true
+include_warnings=true
+module.name_mapper='^/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
+module.ignore_non_literal_requires=true
+suppress_comment=\\(.\\|\n\\)*\\$ExpectError
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+dist
+node_modules
+*.log
+/lib
+/bin
+/*.js
+/hub
+/internal
+/action
+/coverage
+*.map
+*.flow
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+10.4.1
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+./lib
+node_modules
+test
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+parser: flow
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: false
+arrowParens: always
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,7 @@
+sudo: false
+language: node_js
+node_js:
+  - 10
+  - 8
+after_success:
+  - bash <(curl -s https://codecov.io/bash)
diff --git a/package.json b/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "luminol-ui",
+  "version": "1.0.0",
+  "author": "Izaak Schroeder <izaak.schroeder@gmail.com>",
+  "license": "CC0-1.0",
+  "repository": "metalabdesign/luminol-ui",
+  "scripts": {
+    "prepublish": "npm run clean && npm run build && npm run import && chmod +x ./bin/*.js",
+    "clean": "./node_modules/.bin/rimraf lib ./*.js ./*.map ./*.flow bin runtime internal",
+    "build": "./node_modules/.bin/babel --copy-files --ignore '**/__tests__' -s -d lib src",
+    "import": "./node_modules/.bin/ncp lib .",
+    "test:lint": "./node_modules/.bin/eslint .",
+    "test:smoke": "echo 'todo'",
+    "test:flow": "./node_modules/.bin/flow check",
+    "test:spec": "NODE_ENV=test ./node_modules/.bin/jest --coverage",
+    "test": "npm run test:lint && npm run test:spec && npm run test:smoke"
+  },
+  "dependencies": {
+    "apollo-cache-inmemory": "1.3.10",
+    "apollo-client": "2.4.6",
+    "apollo-link-ws": "1.0.9",
+    "apollo-server-core": "2.2.2",
+    "backo2": "1.0.2",
+    "blessed": "0.1.81",
+    "bytes": "3.0.0",
+    "chokidar": "2.0.4",
+    "clipboardy": "1.2.3",
+    "color-hash": "1.0.3",
+    "cross-fetch": "2.2.3",
+    "cuid": "2.1.4",
+    "debug": "4.1.0",
+    "graphql": "14.0.2",
+    "graphql-subscriptions": "1.0.0",
+    "graphql-tools": "4.0.3",
+    "memory-fs": "0.4.1",
+    "midori": "3.3.0",
+    "mime-types": "2.1.21",
+    "openport": "0.0.5",
+    "opn": "5.4.0",
+    "pidusage": "2.0.17",
+    "ramda": "0.25.0",
+    "react": "16.6.3",
+    "react-apollo": "2.3.1",
+    "react-blessed": "0.4.0",
+    "react-dom": "16.6.3",
+    "resolve": "1.8.1",
+    "subscriptions-transport-ws": "0.9.15",
+    "ws": "6.1.0",
+    "yargs": "12.0.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.0.0",
+    "@babel/core": "7.0.0",
+    "@babel/plugin-proposal-class-properties": "7.0.0",
+    "@babel/plugin-syntax-flow": "7.0.0",
+    "@babel/plugin-syntax-object-rest-spread": "7.0.0",
+    "@babel/preset-env": "7.0.0",
+    "@babel/preset-flow": "7.0.0",
+    "@babel/preset-react": "7.0.0",
+    "@babel/register": "7.0.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "23.4.2",
+    "babel-plugin-graphql-tag": "1.6.0",
+    "bl": "2.0.1",
+    "eslint": "5.4.0",
+    "eslint-config-metalab": "10.0.0",
+    "flow-bin": "0.79.1",
+    "graphql-tag": "2.9.2",
+    "jest": "23.5.0",
+    "ncp": "2.0.0",
+    "node-fetch": "2.2.0",
+    "prettier": "1.14.2"
+  },
+  "peerDependencies": {
+    "luminol": "*"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/__tests__/**/*.test.js"
+    ]
+  }
+}
diff --git a/renovate.json b/renovate.json
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}
diff --git a/src/AppRoot.js b/src/AppRoot.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {ApolloProvider} from 'react-apollo';
+
+import Header from './Header';
+import ProxyList from './ProxyList';
+import ProcessList from './ProcessList';
+import CompilerList from './CompilerList';
+import RequestLog from './RequestLog';
+
+import Process from './Process';
+
+class AppRoot extends React.Component {
+  state = {selected: null};
+  _handleSelect = (item) => {
+    this.setState({selected: item && item.id});
+  };
+  render() {
+    const {client} = this.props;
+    const {selected} = this.state;
+    return (
+      <ApolloProvider client={client}>
+        <box>
+          <Header />
+          <box>{selected && <Process id={selected} />}</box>
+          <box top={'50%'}>
+            <box
+              top="0"
+              left="0"
+              width="50%"
+              height="50%"
+              border={{type: 'line'}}
+              style={{border: {fg: 'blue'}}}
+            >
+              <ProcessList
+                value={this.state.selected}
+                onChange={(v) => {
+                  this.setState({selected: v});
+                }}
+              />
+            </box>
+
+            <box
+              top="50%"
+              left="0"
+              width="50%"
+              height="50%"
+              border={{type: 'line'}}
+              style={{border: {fg: 'blue'}}}
+            >
+              <RequestLog />
+            </box>
+            <box
+              top="0"
+              left="50%"
+              width="50%"
+              height="50%"
+              border={{type: 'line'}}
+              style={{border: {fg: 'blue'}}}
+            >
+              <ProxyList />
+            </box>
+            <box
+              top="50%"
+              left="50%"
+              width="50%"
+              height="50%"
+              border={{type: 'line'}}
+              style={{border: {fg: 'blue'}}}
+            >
+              <CompilerList />
+            </box>
+          </box>
+        </box>
+      </ApolloProvider>
+    );
+  }
+}
+
+export default AppRoot;
diff --git a/src/CompilerList.js b/src/CompilerList.js
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {Query} from 'react-apollo';
+import gql from 'graphql-tag';
+
+import Table from './Table';
+
+const COMPILER_QUERY = gql`
+  query CompilersQuery {
+    compilers {
+      id
+      status
+      hash
+    }
+  }
+`;
+
+const COMPILER_SUBSCRIPTION = gql`
+  subscription CompilersSubscription {
+    compilerUpdated {
+      id
+      status
+      hash
+    }
+  }
+`;
+
+class CompilerList extends React.Component {
+  componentDidMount() {
+    const {subscribeToMore} = this.props;
+    subscribeToMore();
+  }
+  render() {
+    const {compilers} = this.props;
+    return (
+      <Table header={['ID', 'Status', 'Hash']}>
+        {compilers.map(({id, status, hash}) => {
+          return (
+            <Table.TR key={id} value={id}>
+              <Table.TD>{id}</Table.TD>
+              <Table.TD>{status}</Table.TD>
+              <Table.TD>{hash}</Table.TD>
+            </Table.TR>
+          );
+        })}
+      </Table>
+    );
+  }
+}
+
+export default () => (
+  <Query query={COMPILER_QUERY}>
+    {({data, loading, error, subscribeToMore}) => {
+      if (loading || error) {
+        return null;
+      }
+      return (
+        <CompilerList
+          compilers={data.compilers || []}
+          subscribeToMore={() => {
+            subscribeToMore({
+              document: COMPILER_SUBSCRIPTION,
+              updateQuery: (prev, {subscriptionData}) => {
+                if (!subscriptionData.data) {
+                  return prev;
+                }
+                let found = false;
+                const next = prev.compilers.map((compiler) => {
+                  if (
+                    compiler.id === subscriptionData.data.compilerUpdated.id
+                  ) {
+                    found = true;
+                    return {
+                      ...compiler,
+                      ...subscriptionData.data.compilerUpdated,
+                    };
+                  }
+                  return compiler;
+                });
+                if (!found) {
+                  next.push(subscriptionData.data.compilerUpdated);
+                }
+                return {
+                  ...prev,
+                  compilers: next,
+                };
+              },
+            });
+          }}
+        />
+      );
+    }}
+  </Query>
+);
diff --git a/src/Header.js b/src/Header.js
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+class Header extends React.Component {
+  render() {
+    return <box>Hello</box>;
+  }
+}
+
+export default Header;
diff --git a/src/Process.js b/src/Process.js
diff --git a/src/ProcessList.js b/src/ProcessList.js
diff --git a/src/ProxyList.js b/src/ProxyList.js
diff --git a/src/RequestLog.js b/src/RequestLog.js
diff --git a/src/Table.js b/src/Table.js
diff --git a/src/createUi.js b/src/createUi.js
diff --git a/src/index.js b/src/index.js
