Improved UI for actions in task/supervisor table

web-console/package.json

@@ -42,11 +42,13 @@
     "druid-console": "^0.0.2",
     "es6-shim": "^0.35.5",
     "es7-shim": "^6.0.0",
+    "file-saver": "^2.0.1",
     "hjson": "^3.1.2",
     "lodash.debounce": "^4.0.8",
     "numeral": "^2.0.6",
     "react": "^16.8.6",
     "react-ace": "^6.4.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
@@ -56,11 +58,13 @@
   "devDependencies": {
     "@types/classnames": "^2.2.7",
     "@types/d3-array": "^2.0.0",
+    "@types/file-saver": "^2.0.0",
     "@types/hjson": "^2.4.1",
     "@types/jest": "^24.0.11",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^11.13.4",
     "@types/numeral": "^0.0.25",
+    "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.2",
     "@types/react-table": "^6.8.1",

web-console/src/bootstrap/react-table-custom-pagination.tsx

@@ -100,7 +100,7 @@ export class ReactTableCustomPagination extends React.Component<ReactTableCustom
     } = this.props;
 
     return (
-      <div className={'-pagination'} style={style}>
+      <div className="-pagination" style={style}>
         <div className="-previous">
           <Button
             fill

web-console/src/components/action-cell.scss

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+.action-cell {
+  & > * {
+    margin-right: 10px;
+    color: #48aff0;
+    cursor: pointer;
+
+    &:hover {
+      color: #4891d2;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+

web-console/src/components/action-cell.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 * as React from 'react';
+
+import './action-cell.scss';
+
+export interface ActionCellProps extends React.Props<any> {
+}
+
+export class ActionCell extends React.Component<ActionCellProps, {}> {
+  constructor(props: ActionCellProps, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return <div className="action-cell">
+      {this.props.children}
+    </div>;
+  }
+}

web-console/src/components/show-json.scss

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+.show-json {
+  position: relative;
+  height: 100%;
+
+  .top-actions {
+    text-align: right;
+    padding-bottom: 10px;
+
+    & > * {
+      display: inline-block;
+    }
+  }
+
+  .main-area {
+    height: calc(100% - 40px);
+
+    textarea {
+      height: 100%;
+      width: 100%;
+      resize: none;
+    }
+  }
+}

web-console/src/components/show-json.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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, ButtonGroup, InputGroup, Intent, TextArea } from '@blueprintjs/core';
+import axios from 'axios';
+import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+
+import { AppToaster } from '../singletons/toaster';
+import { UrlBaser } from '../singletons/url-baser';
+import { downloadFile } from '../utils';
+
+import './show-json.scss';
+
+export interface ShowJsonProps extends React.Props<any> {
+  endpoint: string;
+  downloadFilename?: string;
+}
+
+export interface ShowJsonState {
+  jsonValue: string;
+}
+
+export class ShowJson extends React.Component<ShowJsonProps, ShowJsonState> {
+  constructor(props: ShowJsonProps, context: any) {
+    super(props, context);
+    this.state = {
+      jsonValue: ''
+    };
+
+    this.getJsonInfo();
+  }
+
+  private getJsonInfo = async (): Promise<void> => {
+    const { endpoint } = this.props;
+    try {
+      const resp = await axios.get(endpoint);
+      const data = resp.data;
+      this.setState({
+        jsonValue: typeof (data) === 'string' ? data : JSON.stringify(data, undefined, 2)
+      });
+    } catch (e) {
+      this.setState({
+        jsonValue: `Error: ` + e.response.data
+      });
+    }
+  }
+
+  render() {
+    const { endpoint, downloadFilename } = this.props;
+    const { jsonValue } = this.state;
+
+    return <div className="show-json">
+      <div className="top-actions">
+        <ButtonGroup className="right-buttons">
+          {
+            downloadFilename &&
+            <Button
+              text="Save"
+              minimal
+              onClick={() => downloadFile(jsonValue, 'json', downloadFilename)}
+            />
+          }
+          <CopyToClipboard text={jsonValue}>
+            <Button
+              text="Copy"
+              minimal
+              onClick={() => {
+                AppToaster.show({
+                  message: 'Copied JSON to clipboard',
+                  intent: Intent.SUCCESS
+                });
+              }}
+            />
+          </CopyToClipboard>
+          <Button
+            text="View raw"
+            minimal
+            onClick={() => window.open(UrlBaser.base(endpoint), '_blank')}
+          />
+        </ButtonGroup>
+      </div>
+      <div className="main-area">
+        <TextArea
+          readOnly
+          value={jsonValue}
+        />
+      </div>
+    </div>;
+  }
+}

web-console/src/components/show-log.scss

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+.show-log {
+  position: relative;
+  height: 100%;
+
+  .top-actions {
+    text-align: right;
+    padding-bottom: 10px;
+
+    & > * {
+      display: inline-block;
+    }
+  }
+
+  .main-area {
+    height: calc(100% - 40px);
+
+    textarea {
+      height: 100%;
+      width: 100%;
+      resize: none;
+      white-space: pre;
+    }
+  }
+}