Data loader (GUI component)

web-console/package.json

@@ -8,6 +8,16 @@
     "type": "git",
     "url": "https://github.com/apache/druid/"
   },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "\\.scss$": "identity-obj-proxy"
+    },
+    "testMatch": [
+      "**/?(*.)+(spec).ts?(x)"
+    ]
+  },
   "scripts": {
     "watch": "./script/watch",
     "compile": "./script/build",
@@ -16,7 +26,7 @@
     "test": "jest --silent 2>&1",
     "tslint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter 'src/**/*.ts?(x)'",
     "tslint-fix": "npm run tslint -- --fix",
-    "tslint-changed-only": "git diff --diff-filter=ACMR --name-only | grep -E \\.tsx\\?$ | xargs ./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter",
+    "tslint-changed-only": "git diff --diff-filter=ACMR --cached --name-only | grep -E \\.tsx\\?$ | xargs ./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter",
     "tslint-fix-changed-only": "npm run tslint-changed-only -- --fix",
     "generate-licenses-file": "license-checker --production --json --out licenses.json",
     "check-licenses": "license-checker --production --onlyAllow 'Apache-1.1;Apache-2.0;BSD-2-Clause;BSD-3-Clause;MIT;CC0-1.0' --summary",
@@ -49,7 +59,6 @@
     "@types/hjson": "^2.4.1",
     "@types/jest": "^24.0.11",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/mocha": "^5.2.6",
     "@types/node": "^11.13.4",
     "@types/numeral": "^0.0.25",
     "@types/react-dom": "^16.8.4",
@@ -62,7 +71,6 @@
     "ignore-styles": "^5.0.1",
     "jest": "^24.7.1",
     "license-checker": "^25.0.1",
-    "mocha": "^6.1.3",
     "node-sass": "^4.11.0",
     "node-sass-chokidar": "^1.3.4",
     "postcss-cli": "^6.1.2",
@@ -81,6 +89,7 @@
     "tslint-loader": "^3.5.4",
     "typescript": "^3.4.3",
     "webpack": "^4.29.6",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.3.1"
   }

web-console/script/mkcomp

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+let fs = require('fs-extra');
+
+if (!(process.argv.length === 3 || process.argv.length === 4)) {
+  console.log('Usage: mkcomp <what?> <component-name>');
+  process.exit();
+}
+
+let name;
+let what;
+if (process.argv.length === 4) {
+  what = process.argv[2];
+  name = process.argv[3];
+  if (!(what === 'component' || what === 'dialog' || what === 'singleton')) {
+    console.log(`Bad what, should be on of: component, dialog, singleton`);
+    process.exit();
+  }
+} else {
+  what = 'component';
+  name = process.argv[2];
+}
+
+if (!/^([a-z-])+$/.test(name)) {
+  console.log('must be a hyphen case name');
+  process.exit();
+}
+
+let path = `./src/${what}s/`;
+fs.ensureDirSync(path);
+console.log('Making path:', path);
+
+const camelName = name.replace(/(^|-)[a-z]/g, (s) => s.replace('-', '').toUpperCase());
+const year = (new Date()).getFullYear();
+
+function writeFile(path, data) {
+  try {
+    return fs.writeFileSync(path, data, {
+      flag: 'wx', // x = fail if file exists
+      encoding: 'utf8'
+    });
+  } catch (error) {
+    return console.log(`Skipping ${path}`);
+  }
+}
+
+// Make the TypeScript file
+writeFile(path + name + '.tsx',
+`/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button, InputGroup } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import './${name}.scss';
+
+export interface ${camelName}Props extends React.Props<any> {
+}
+
+export interface ${camelName}State {
+}
+
+export class ${camelName} extends React.Component<${camelName}Props, ${camelName}State> {
+  constructor(props: ${camelName}Props, context: any) {
+    super(props, context);
+    // this.state = {};
+
+  }
+
+  render() {
+    return <div className="${name}">
+
+    </div>;
+  }
+}
+`);
+
+// Make the SASS file
+writeFile(path + name + '.scss',
+`/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.${name} {
+
+}
+`);

web-console/src/components/array-input.tsx

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import { InputGroup, ITagInputProps } from '@blueprintjs/core';
+import * as React from 'react';
+
+export interface ArrayInputProps extends ITagInputProps {
+
+}
+
+export class ArrayInput extends React.Component<ArrayInputProps, { stringValue: string }> {
+  constructor(props: ArrayInputProps) {
+    super(props);
+    this.state = {
+      stringValue: Array.isArray(props.values) ? props.values.join(', ') : ''
+    };
+  }
+
+  private handleChange = (e: any) => {
+    const { onChange } = this.props;
+    const stringValue = e.target.value;
+    const newValues = stringValue.split(',').map((v: string) => v.trim());
+    const newValuesFiltered = newValues.filter(Boolean);
+    this.setState({
+      stringValue: newValues.length === newValuesFiltered.length ? newValues.join(', ') : stringValue
+    });
+    if (onChange) onChange(stringValue === '' ? undefined : newValuesFiltered);
+  }
+
+  render() {
+    const { className, placeholder, large, disabled } = this.props;
+    const { stringValue } = this.state;
+    return <InputGroup
+      className={className}
+      value={stringValue}
+      onChange={this.handleChange}
+      placeholder={placeholder}
+      large={large}
+      disabled={disabled}
+    />;
+  }
+}

web-console/src/components/auto-form.scss

@@ -20,4 +20,22 @@
   .ace_scroller {
     background-color: #212c36;
   }
+
+  // Popover in info label
+  label.bp3-label {
+    position: relative;
+
+    .bp3-text-muted {
+      position: absolute;
+      right: 0;
+
+      .bp3-popover-wrapper {
+        display: inline;
+
+        .bp3-popover-target {
+          display: inline;
+        }
+      }
+    }
+  }
 }