Explorar o código

HUE-9143 [frontend] Add quick query action button component

Johan Ahlen %!s(int64=5) %!d(string=hai) anos
pai
achega
e19524a1d5

+ 9 - 0
desktop/core/src/desktop/js/ko/components/__snapshots__/ko.quickQueryAction.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ko.quickQueryAction.js should render component 1`] = `
+"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;quick-query-action&quot;, params: params }\\"><div style=\\"display: inline-block; margin-left: 20px; margin-top: 5px;\\">
+  <button class=\\"btn btn-mini disable-feedback\\" data-bind=\\"click: showQuickQuery\\">
+    <i class=\\"fa fa-play fa-fw\\"></i> Quick Query
+  </button>
+</div></div>"
+`;

+ 55 - 0
desktop/core/src/desktop/js/ko/components/ko.quickQueryAction.js

@@ -0,0 +1,55 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. 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 $ from 'jquery';
+
+import componentUtils from 'ko/components/componentUtils';
+import DisposableComponent from 'ko/components/DisposableComponent';
+import huePubSub from 'utils/huePubSub';
+import I18n from 'utils/i18n';
+
+export const NAME = 'quick-query-action';
+
+// prettier-ignore
+const TEMPLATE = `
+<div style="display: inline-block; margin-left: 20px; margin-top: 5px;">
+  <button class="btn btn-mini disable-feedback" data-bind="click: showQuickQuery">
+    <i class="fa fa-play fa-fw"></i> ${ I18n('Quick Query') }
+  </button>
+</div>
+`;
+
+class QuickQueryAction extends DisposableComponent {
+  showQuickQuery(data, event) {
+    const $source = $(event.target);
+    const offset = $source.offset();
+    huePubSub.publish('context.popover.show', {
+      data: {
+        type: 'quickQuery'
+      },
+      orientation: 'bottom',
+      pinEnabled: false,
+      source: {
+        left: offset.left,
+        top: offset.top,
+        right: offset.left + $source.outerWidth(),
+        bottom: offset.top + $source.outerHeight()
+      }
+    });
+  }
+}
+
+componentUtils.registerComponent(NAME, QuickQueryAction, TEMPLATE);

+ 28 - 0
desktop/core/src/desktop/js/ko/components/ko.quickQueryAction.test.js

@@ -0,0 +1,28 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. 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 { koSetup } from 'jest/koTestUtils';
+import { NAME } from './ko.quickQueryAction';
+
+describe('ko.quickQueryAction.js', () => {
+  const setup = koSetup();
+
+  it('should render component', async () => {
+    const element = await setup.renderComponent(NAME, {});
+
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

+ 1 - 0
desktop/core/src/desktop/js/ko/ko.all.js

@@ -160,6 +160,7 @@ import 'ko/components/ko.navProperties';
 import 'ko/components/ko.navTags';
 import 'ko/components/ko.performanceGraph';
 import 'ko/components/ko.pollingCatalogEntriesList';
+import 'ko/components/ko.quickQueryAction';
 import 'ko/components/ko.sentryPrivileges';
 import 'ko/components/ko.sessionAuthModal';
 import 'ko/components/ko.sessionPanel';

+ 3 - 0
desktop/core/src/desktop/templates/hue.mako

@@ -138,6 +138,9 @@ ${ hueIcons.symbols() }
             <select data-bind="options: clusters, optionsText: 'name', value: 'id'" class="input-small" style="margin-top:8px">
             </select>
           % endif
+          <!-- ko if: window.ENABLE_NOTEBOOK_2 -->
+            <!-- ko component: 'quick-query-action' --><!-- /ko -->
+          <!-- /ko -->
           <!-- ko component: 'hue-history-panel' --><!-- /ko -->
           <!-- ko if: hasJobBrowser -->
             <!-- ko component: { name: 'hue-job-browser-links', params: { onePageViewModel: onePageViewModel }} --><!-- /ko -->