Răsfoiți Sursa

[editor] Add remaining autocomplete popularity details panels in editor v2

Johan Ahlen 4 ani în urmă
părinte
comite
0b8e05ed6a

+ 4 - 2
desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/AceAutocomplete.vue

@@ -98,8 +98,9 @@
   import MatchedText from './MatchedText.vue';
   import SqlAutocompleter from './SqlAutocompleter';
   import CatalogEntryDetailsPanel from './details/CatalogEntryDetailsPanel.vue';
-  import JoinDetailsPanel from './details/JoinDetailsPanel.vue';
   import OptionDetailsPanel from './details/OptionDetailsPanel.vue';
+  import PopularAggregateUdfPanel from './details/PopularAggregateUdfPanel.vue';
+  import PopularDetailsPanel from './details/PopularDetailsPanel.vue';
   import UdfDetailsPanel from './details/UdfDetailsPanel.vue';
   import Spinner from 'components/Spinner.vue';
   import { clickOutsideDirective } from 'components/directives/clickOutsideDirective';
@@ -113,9 +114,10 @@
   @Component({
     components: {
       CatalogEntryDetailsPanel,
-      JoinDetailsPanel,
       MatchedText,
       OptionDetailsPanel,
+      PopularAggregateUdfPanel,
+      PopularDetailsPanel,
       Spinner,
       UdfDetailsPanel
     },

+ 7 - 1
desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/Category.ts

@@ -127,6 +127,7 @@ export const Category: { [categoryId in keyof typeof CategoryId]: CategoryInfo }
   PopularAggregate: {
     categoryId: CategoryId.PopularAggregate,
     color: Colors.Popular,
+    detailsComponent: 'PopularAggregateUdfPanel',
     label: I18n('Popular'),
     popular: true,
     weight: 1500
@@ -135,6 +136,7 @@ export const Category: { [categoryId in keyof typeof CategoryId]: CategoryInfo }
     categoryId: CategoryId.PopularActiveJoin,
     color: Colors.Popular,
     label: I18n('Popular'),
+    detailsComponent: 'PopularDetailsPanel',
     popular: true,
     weight: 1500
   },
@@ -142,12 +144,14 @@ export const Category: { [categoryId in keyof typeof CategoryId]: CategoryInfo }
     categoryId: CategoryId.PopularFilter,
     color: Colors.Popular,
     label: I18n('Popular'),
+    detailsComponent: 'PopularDetailsPanel',
     popular: true,
     weight: 1400
   },
   PopularGroupBy: {
     categoryId: CategoryId.PopularGroupBy,
     color: Colors.Popular,
+    detailsComponent: 'PopularDetailsPanel',
     label: I18n('Popular'),
     popular: true,
     weight: 1300
@@ -155,13 +159,14 @@ export const Category: { [categoryId in keyof typeof CategoryId]: CategoryInfo }
   PopularJoin: {
     categoryId: CategoryId.PopularJoin,
     color: Colors.Popular,
-    detailsComponent: 'JoinDetailsPanel',
+    detailsComponent: 'PopularDetailsPanel',
     label: I18n('Popular'),
     weight: 1500
   },
   PopularJoinCondition: {
     categoryId: CategoryId.PopularJoinCondition,
     color: Colors.Popular,
+    detailsComponent: 'PopularDetailsPanel',
     label: I18n('Popular'),
     popular: true,
     weight: 1500
@@ -169,6 +174,7 @@ export const Category: { [categoryId in keyof typeof CategoryId]: CategoryInfo }
   PopularOrderBy: {
     categoryId: CategoryId.PopularOrderBy,
     color: Colors.Popular,
+    detailsComponent: 'PopularDetailsPanel',
     label: I18n('Popular'),
     popular: true,
     weight: 1200

+ 17 - 8
desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/details/JoinDetailsPanel.vue → desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/details/PopularAggregateUdfPanel.vue

@@ -20,40 +20,49 @@
   <div>
     <div class="autocompleter-header">
       <i class="fa fa-fw fa-superscript" />
-      <span>{{ I18n('Popular Join') }}</span>
+      <span>{{ I18n('Popular aggregate') }}</span>
       <i class="popular fa fa-fw fa-star-o" :title="popularityTitle" />
     </div>
     <div class="autocompleter-details-contents">
       <div class="autocompleter-details-contents-inner">
-        <sql-text :value="suggestion.value" :dialect="dialect" />
+        <div class="details-code">
+          <sql-text :value="suggestion.value" :dialect="dialect" />
+        </div>
+        <div class="details-comment" data-bind="text: details.function.description">
+          {{ description }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { Connector } from 'types/config';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
 
   import { Suggestion } from '../AutocompleteResults';
-  import { TopJoinValue } from 'catalog/MultiTableEntry';
+  import { TopAggValue } from 'catalog/MultiTableEntry';
   import SqlText from 'components/SqlText.vue';
+  import { Connector } from 'types/config';
   import I18n from 'utils/i18n';
 
   @Component({
     components: { SqlText },
     methods: { I18n }
   })
-  export default class JoinDetailsPanel extends Vue {
+  export default class PopularAggregateUdfPanel extends Vue {
     @Prop({ required: true })
     suggestion!: Suggestion;
     @Prop({ required: false })
     connector?: Connector;
 
-    get details(): TopJoinValue {
-      return <TopJoinValue>this.suggestion.details;
+    get details(): TopAggValue {
+      return <TopAggValue>this.suggestion.details;
+    }
+
+    get description(): string {
+      return (this.details.function && this.details.function.description) || '';
     }
 
     get dialect(): string | undefined {
@@ -61,7 +70,7 @@
     }
 
     get popularityTitle(): string {
-      return `${this.details.relativePopularity || '?'}%`;
+      return `${I18n('Relative popularity')}: ${this.details.relativePopularity || '?'}%`;
     }
   }
 </script>

+ 94 - 0
desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/details/PopularDetailsPanel.vue

@@ -0,0 +1,94 @@
+<!--
+  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.
+-->
+
+<template>
+  <div>
+    <div class="autocompleter-header">
+      <i class="fa fa-fw fa-superscript" />
+      <span>{{ title }}</span>
+      <i class="popular fa fa-fw fa-star-o" :title="popularityTitle" />
+    </div>
+    <div class="autocompleter-details-contents">
+      <div class="autocompleter-details-contents-inner">
+        <sql-text :value="suggestion.value" :dialect="dialect" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+
+  import { Suggestion } from '../AutocompleteResults';
+  import { CategoryId } from '../Category';
+  import SqlText from 'components/SqlText.vue';
+  import { Connector } from 'types/config';
+  import I18n from 'utils/i18n';
+
+  interface PopularityDetails {
+    workloadPercent?: number;
+    relativePopularity?: number;
+  }
+
+  @Component({
+    components: { SqlText }
+  })
+  export default class JoinDetailsPanel extends Vue {
+    @Prop({ required: true })
+    suggestion!: Suggestion;
+    @Prop({ required: false })
+    connector?: Connector;
+
+    get details(): PopularityDetails {
+      return <PopularityDetails>this.suggestion.details;
+    }
+
+    get dialect(): string | undefined {
+      return this.connector && this.connector.dialect;
+    }
+
+    get popularityTitle(): string {
+      if (
+        this.suggestion.category.categoryId === CategoryId.PopularGroupBy ||
+        this.suggestion.category.categoryId === CategoryId.PopularOrderBy
+      ) {
+        return `${I18n('Workload percent')}: ${this.details.workloadPercent || '?'}%`;
+      }
+      return `${I18n('Relative popularity')}: ${this.details.relativePopularity || '?'}%`;
+    }
+
+    get title(): string {
+      switch (this.suggestion.category.categoryId) {
+        case CategoryId.PopularFilter:
+          return I18n('Popular filter');
+        case CategoryId.PopularGroupBy:
+          return I18n('Popular group by');
+        case CategoryId.PopularOrderBy:
+          return I18n('Popular order by');
+        case CategoryId.PopularActiveJoin:
+        case CategoryId.PopularJoin:
+          return I18n('Popular join');
+        case CategoryId.PopularJoinCondition:
+          return I18n('Popular join condition');
+      }
+      return I18n('Popular');
+    }
+  }
+</script>