You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by fj...@apache.org on 2019/07/30 15:08:11 UTC

[incubator-druid] branch master updated: Web-console: add history menu to supervisors modal (#8164)

This is an automated email from the ASF dual-hosted git repository.

fjy pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git


The following commit(s) were added to refs/heads/master by this push:
     new a027051  Web-console: add history menu to supervisors modal  (#8164)
a027051 is described below

commit a0270512a26376767562f35abf7fb9b5528571a9
Author: mcbrewster <37...@users.noreply.github.com>
AuthorDate: Tue Jul 30 08:07:58 2019 -0700

    Web-console: add history menu to supervisors modal  (#8164)
    
    * Add history menu to supervisors dialog
    
    * add scrolling
    
    * change how tabs render
    
    * remove copy button
    
    * user query manager
---
 .../__snapshots__/show-history.spec.tsx.snap       |   3 +
 .../src/components/show-history/show-history.scss  |  36 +++++++
 .../components/show-history/show-history.spec.tsx  |  30 ++++++
 .../src/components/show-history/show-history.tsx   | 109 +++++++++++++++++++++
 .../__snapshots__/show-value.spec.tsx.snap         |  44 +++++++++
 .../src/components/show-value/show-value.scss      |  41 ++++++++
 .../src/components/show-value/show-value.spec.tsx  |  30 ++++++
 .../src/components/show-value/show-value.tsx       |  66 +++++++++++++
 .../supervisor-table-action-dialog.tsx             |   3 +-
 9 files changed, 361 insertions(+), 1 deletion(-)

diff --git a/web-console/src/components/show-history/__snapshots__/show-history.spec.tsx.snap b/web-console/src/components/show-history/__snapshots__/show-history.spec.tsx.snap
new file mode 100644
index 0000000..2627ab9
--- /dev/null
+++ b/web-console/src/components/show-history/__snapshots__/show-history.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rule editor matches snapshot 1`] = `null`;
diff --git a/web-console/src/components/show-history/show-history.scss b/web-console/src/components/show-history/show-history.scss
new file mode 100644
index 0000000..48b20f4
--- /dev/null
+++ b/web-console/src/components/show-history/show-history.scss
@@ -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.
+ */
+
+.show-history {
+  position: relative;
+  height: 100%;
+
+  .tab-area {
+    position: relative;
+    height: 100%;
+  }
+
+  .panel {
+    position: relative;
+    width: 100%;
+  }
+
+  .bp3-tab-list {
+    overflow-y: auto;
+  }
+}
diff --git a/web-console/src/components/show-history/show-history.spec.tsx b/web-console/src/components/show-history/show-history.spec.tsx
new file mode 100644
index 0000000..4ed8285
--- /dev/null
+++ b/web-console/src/components/show-history/show-history.spec.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { ShowHistory } from './show-history';
+
+describe('rule editor', () => {
+  it('matches snapshot', () => {
+    const showJson = <ShowHistory endpoint={'test'} downloadFilename={'test'} />;
+    const { container } = render(showJson);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/show-history/show-history.tsx b/web-console/src/components/show-history/show-history.tsx
new file mode 100644
index 0000000..9051e5b
--- /dev/null
+++ b/web-console/src/components/show-history/show-history.tsx
@@ -0,0 +1,109 @@
+/*
+ * 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 { Tab, Tabs } from '@blueprintjs/core';
+import axios from 'axios';
+import React from 'react';
+
+import { QueryManager } from '../../utils';
+import { Loader } from '../loader/loader';
+import { ShowValue } from '../show-value/show-value';
+
+import './show-history.scss';
+
+export interface PastSupervisor {
+  version: string;
+  spec: any;
+}
+export interface ShowHistoryProps {
+  endpoint: string;
+  transform?: (x: any) => any;
+  downloadFilename?: string;
+}
+
+export interface ShowHistoryState {
+  data?: PastSupervisor[];
+  loading: boolean;
+  error?: string;
+}
+
+export class ShowHistory extends React.PureComponent<ShowHistoryProps, ShowHistoryState> {
+  private showHistoryQueryManager: QueryManager<null, string>;
+  constructor(props: ShowHistoryProps, context: any) {
+    super(props, context);
+    this.state = {
+      data: [],
+      loading: true,
+    };
+
+    this.showHistoryQueryManager = new QueryManager({
+      processQuery: async () => {
+        const resp = await axios.get(this.props.endpoint);
+        return resp.data;
+      },
+      onStateChange: ({ result, loading, error }) => {
+        this.setState({
+          loading,
+          data: result,
+          error,
+        });
+      },
+    });
+  }
+
+  componentDidMount(): void {
+    this.showHistoryQueryManager.runQuery(null);
+  }
+
+  render() {
+    const { downloadFilename, endpoint } = this.props;
+    const { data, loading } = this.state;
+    if (loading) return <Loader />;
+    if (!data) return;
+    const versions = data.map((pastSupervisor: PastSupervisor, index: number) => (
+      <Tab
+        id={index}
+        key={index}
+        title={pastSupervisor.version}
+        panel={
+          <ShowValue
+            jsonValue={JSON.stringify(pastSupervisor.spec, undefined, 2)}
+            downloadFilename={downloadFilename + 'version-' + pastSupervisor.version}
+            endpoint={endpoint}
+          />
+        }
+        panelClassName={'panel'}
+      />
+    ));
+
+    return (
+      <div className="show-history">
+        <Tabs
+          animate
+          renderActiveTabPanelOnly
+          vertical
+          className={'tab-area'}
+          defaultSelectedTabId={0}
+        >
+          {versions}
+          <Tabs.Expander />
+        </Tabs>
+      </div>
+    );
+  }
+}
diff --git a/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap b/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap
new file mode 100644
index 0000000..0a9238f
--- /dev/null
+++ b/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rule editor matches snapshot 1`] = `
+<div
+  class="show-json"
+>
+  <div
+    class="top-actions"
+  >
+    <div
+      class="bp3-button-group right-buttons"
+    >
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          Save
+        </span>
+      </button>
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          View raw
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="main-area"
+  >
+    <textarea
+      class="bp3-input"
+      readonly=""
+    />
+  </div>
+</div>
+`;
diff --git a/web-console/src/components/show-value/show-value.scss b/web-console/src/components/show-value/show-value.scss
new file mode 100644
index 0000000..770fc35
--- /dev/null
+++ b/web-console/src/components/show-value/show-value.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-value {
+  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;
+    }
+  }
+}
diff --git a/web-console/src/components/show-value/show-value.spec.tsx b/web-console/src/components/show-value/show-value.spec.tsx
new file mode 100644
index 0000000..e443f37
--- /dev/null
+++ b/web-console/src/components/show-value/show-value.spec.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { ShowValue } from './show-value';
+
+describe('rule editor', () => {
+  it('matches snapshot', () => {
+    const showJson = <ShowValue endpoint={'test'} downloadFilename={'test'} />;
+    const { container } = render(showJson);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/show-value/show-value.tsx b/web-console/src/components/show-value/show-value.tsx
new file mode 100644
index 0000000..de2f2ce
--- /dev/null
+++ b/web-console/src/components/show-value/show-value.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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, TextArea } from '@blueprintjs/core';
+import React from 'react';
+
+import { UrlBaser } from '../../singletons/url-baser';
+import { downloadFile } from '../../utils';
+
+import './show-value.scss';
+
+export interface ShowValueProps {
+  endpoint: string;
+  downloadFilename?: string;
+  jsonValue?: string;
+}
+
+export class ShowValue extends React.PureComponent<ShowValueProps> {
+  constructor(props: ShowValueProps, context: any) {
+    super(props, context);
+  }
+
+  render(): JSX.Element {
+    const { endpoint, downloadFilename, jsonValue } = this.props;
+    return (
+      <div className="show-json">
+        <div className="top-actions">
+          <ButtonGroup className="right-buttons">
+            {downloadFilename && (
+              <Button
+                text="Save"
+                minimal
+                onClick={() =>
+                  jsonValue ? downloadFile(jsonValue, 'json', downloadFilename) : null
+                }
+              />
+            )}
+            <Button
+              text="View raw"
+              minimal
+              onClick={() => window.open(UrlBaser.base(endpoint), '_blank')}
+            />
+          </ButtonGroup>
+        </div>
+        <div className="main-area">
+          <TextArea readOnly value={jsonValue} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
index 84a10b0..d941de5 100644
--- a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
@@ -20,6 +20,7 @@ import { IDialogProps } from '@blueprintjs/core';
 import React from 'react';
 
 import { ShowJson } from '../../components';
+import { ShowHistory } from '../../components/show-history/show-history';
 import { BasicAction, basicActionsToButtons } from '../../utils/basic-action';
 import { deepGet } from '../../utils/object-change';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
@@ -103,7 +104,7 @@ export class SupervisorTableActionDialog extends React.PureComponent<
           />
         )}
         {activeTab === 'history' && (
-          <ShowJson
+          <ShowHistory
             endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/history`}
             downloadFilename={`supervisor-history-${supervisorId}.json`}
           />


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org