Create documentation link directive to avoid cluttering scope (#14630)

* Create documentation links directive to avoid cluttering scope * Rename to documentationHref
2025-04-24 09:48:58 -04:00 · 2017-10-30 09:22:07 -07:00 · 2017-10-30 09:22:07 -07:00 · 950403ff6d
commit 950403ff6d
parent cc87c6ba93
18 changed files with 34 additions and 38 deletions
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@ -24,7 +24,6 @@ import { FilterBarClickHandlerProvider } from 'ui/filter_bar/filter_bar_click_ha
 import { DashboardState } from './dashboard_state';
 import { notify } from 'ui/notify';
 import './panel/get_object_loaders_for_dashboard';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import { showCloneModal } from './top_nav/show_clone_modal';
 import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery';
 import { QueryManagerProvider } from 'ui/query_manager';
@ -96,7 +95,6 @@ app.directive('dashboardApp', function ($injector) {
      const filterBar = Private(FilterBarQueryFilterProvider);
      const docTitle = Private(DocTitleProvider);
      const notify = new Notifier({ location: 'Dashboard' });
-      $scope.queryDocLinks = documentationLinks.query;

      const dash = $scope.dash = $route.current.locals.dash;
      if (dash.id) {
--- a/src/core_plugins/kibana/public/discover/controllers/discover.js
+++ b/src/core_plugins/kibana/public/discover/controllers/discover.js
@ -26,7 +26,6 @@ import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
 import indexTemplate from 'plugins/kibana/discover/index.html';
 import { StateProvider } from 'ui/state_management/state';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery';
 import { QueryManagerProvider } from 'ui/query_manager';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
@ -122,7 +121,6 @@ function discoverController(
    location: 'Discover'
  });

-  $scope.queryDocLinks = documentationLinks.query;
  $scope.intervalOptions = Private(AggTypesBucketsIntervalOptionsProvider);
  $scope.showInterval = false;
  $scope.minimumVisibleRows = 50;
--- a/src/core_plugins/kibana/public/discover/directives/no_results.js
+++ b/src/core_plugins/kibana/public/discover/directives/no_results.js
@ -1,15 +1,12 @@
 import { uiModules } from 'ui/modules';
 import noResultsTemplate from '../partials/no_results.html';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
+import 'ui/directives/documentation_href';

 uiModules
 .get('apps/discover')
 .directive('discoverNoResults', function () {
  return {
    restrict: 'E',
-    template: noResultsTemplate,
-    controller: function ($scope) {
-      $scope.queryDocLinks = documentationLinks.query;
-    }
+    template: noResultsTemplate
  };
 });
--- a/src/core_plugins/kibana/public/discover/partials/no_results.html
+++ b/src/core_plugins/kibana/public/discover/partials/no_results.html
@ -37,7 +37,7 @@
    <div ng-if="state.query.language === 'lucene'">
      <h3>Refine your query</h3>
      <p>
-        The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" ng-href="{{queryDocLinks.luceneQuerySyntax}}" target="_blank">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
+        The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
      </p>

      <p>
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@ -18,7 +18,6 @@ import { uiModules } from 'ui/modules';
 import editorTemplate from 'plugins/kibana/visualize/editor/editor.html';
 import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants';
 import { VisualizeConstants } from '../visualize_constants';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 import { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery';
@ -162,8 +161,6 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
    $scope.indexPattern = vis.indexPattern;
    $scope.searchSource = searchSource;
    $scope.state = $state;
-    $scope.queryDocLinks = documentationLinks.query;
-    $scope.dateDocLinks = documentationLinks.date;

    // Create a PersistedState instance.
    $scope.uiState = $state.makeStateful('uiState');
--- a/src/ui/public/agg_types/buckets/date_range.js
+++ b/src/ui/public/agg_types/buckets/date_range.js
@ -1,5 +1,6 @@
 import { dateRange } from 'ui/utils/date_range';
 import 'ui/directives/validate_date_math';
+import 'ui/directives/documentation_href';
 import { AggTypesBucketsBucketAggTypeProvider } from 'ui/agg_types/buckets/_bucket_agg_type';
 import { AggTypesBucketsCreateFilterDateRangeProvider } from 'ui/agg_types/buckets/create_filter/date_range';
 import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
--- a/src/ui/public/agg_types/controls/date_ranges.html
+++ b/src/ui/public/agg_types/controls/date_ranges.html
@ -43,7 +43,7 @@
          <small>
            <a
              class="kuiLink"
-              ng-href="{{dateDocLinks.dateMath}}"
+              documentation-href="date.dateMath"
              target="_blank"
            >
              Accepted date formats
--- a/src/ui/public/directives/documentation_href.js
+++ b/src/ui/public/directives/documentation_href.js
@ -0,0 +1,14 @@
+import { get } from 'lodash';
+import { documentationLinks } from '../documentation_links';
+import { uiModules } from 'ui/modules';
+
+const module = uiModules.get('kibana');
+
+module.directive('documentationHref', function () {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attributes) {
+      element.attr('href', get(documentationLinks, attributes.documentationHref));
+    }
+  };
+});
--- a/src/ui/public/field_editor/field_editor.html
+++ b/src/ui/public/field_editor/field_editor.html
@ -153,7 +153,7 @@
        </h4>

        <p>
-          Please familiarize yourself with <a target="_window" ng-href="{{ editor.docLinks.scriptFields }}">script fields <i class="fa-link fa"></i></a> and with <a target="_window" ng-href="{{ editor.docLinks.scriptAggs }}">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields.
+          Please familiarize yourself with <a target="_window" documentation-href="scriptedFields.scriptFields">script fields <i class="fa-link fa"></i></a> and with <a target="_window" documentation-href="scriptedFields.scriptAggs">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields.
        </p>

        <p>
@ -169,13 +169,13 @@
        </h4>

        <p>
-          By default, Kibana scripted fields use <a target="_window" ng-href="{{editor.docLinks.painless}}">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch.  To access values in the document use the following format:
+          By default, Kibana scripted fields use <a target="_window" documentation-href="scriptedFields.painless">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch.  To access values in the document use the following format:
        </p>

        <p><code>doc['some_field'].value</code></p>

        <p>
-          Painless is powerful but easy to use. It provides access to many <a target="_window" ng-href="{{editor.docLinks.painlessApi}}">native Java APIs <i class="fa-link fa"></i></a>. Read up on its <a target="_window" ng-href="{{editor.docLinks.painlessSyntax}}">syntax <i class="fa-link fa"></i></a> and you'll be up to speed in no time!
+          Painless is powerful but easy to use. It provides access to many <a target="_window" documentation-href="scriptedFields.painlessApi">native Java APIs <i class="fa-link fa"></i></a>. Read up on its <a target="_window" documentation-href="scriptedFields.painlessSyntax">syntax <i class="fa-link fa"></i></a> and you'll be up to speed in no time!
        </p>

        <p>
@ -183,7 +183,7 @@
        </p>

        <p>
-          Coming from an older version of Kibana? The <a target="_window" ng-href="{{editor.docLinks.luceneExpressions}}">Lucene Expressions <i class="fa-link fa"></i></a> you know and love are still available. Lucene expressions are a lot like JavaScript, but limited to basic arithmetic, bitwise and comparison operations.
+          Coming from an older version of Kibana? The <a target="_window" documentation-href="scriptedFields.luceneExpressions">Lucene Expressions <i class="fa-link fa"></i></a> you know and love are still available. Lucene expressions are a lot like JavaScript, but limited to basic arithmetic, bitwise and comparison operations.
        </p>

        <p>
--- a/src/ui/public/field_editor/field_editor.js
+++ b/src/ui/public/field_editor/field_editor.js
@ -6,7 +6,7 @@ import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
 import { IndexPatternsFieldProvider } from 'ui/index_patterns/_field';
 import { uiModules } from 'ui/modules';
 import fieldEditorTemplate from 'ui/field_editor/field_editor.html';
-import { documentationLinks } from '../documentation_links/documentation_links';
+import '../directives/documentation_href';
 import './field_editor.less';
 import { GetEnabledScriptingLanguagesProvider, getSupportedScriptingLanguages } from '../scripting_languages';
 import { getKbnTypeNames } from '../../../utils';
@ -37,7 +37,6 @@ uiModules
      const self = this;
      const notify = new Notifier({ location: 'Field Editor' });

-      self.docLinks = documentationLinks.scriptedFields;
      getScriptingLangs().then((langs) => {
        self.scriptingLangs = _.intersection(langs, ['expression', 'painless']);
        if (!_.includes(self.scriptingLangs, self.field.lang)) {
--- a/src/ui/public/filter_editor/filter_editor.html
+++ b/src/ui/public/filter_editor/filter_editor.html
@ -82,7 +82,7 @@
        ></filter-query-dsl-editor>

        <p class="kuiText kuiVerticalRhythmSmall">
-          Filters are built using the <a class="kuiLink" target="_blank" ng-href="{{ filterEditor.docLinks.query.queryDsl }}">Elasticsearch Query DSL</a>.
+          Filters are built using the <a class="kuiLink" target="_blank" documentation-href="query.queryDsl">Elasticsearch Query DSL</a>.
        </p>
      </div>
    </div>
--- a/src/ui/public/filter_editor/filter_editor.js
+++ b/src/ui/public/filter_editor/filter_editor.js
@ -3,7 +3,7 @@ import { uiModules } from 'ui/modules';
 import { callAfterBindingsWorkaround } from 'ui/compat';
 import { FILTER_OPERATOR_TYPES } from './lib/filter_operators';
 import template from './filter_editor.html';
-import { documentationLinks } from '../documentation_links/documentation_links';
+import '../directives/documentation_href';
 import './filter_query_dsl_editor';
 import './filter_field_select';
 import './filter_operator_select';
@ -37,7 +37,6 @@ module.directive('filterEditor', function ($timeout, indexPatterns) {
    controller: callAfterBindingsWorkaround(function ($scope, $element) {
      this.init = () => {
        const { filter } = this;
-        this.docLinks = documentationLinks;
        this.alias = filter.meta.alias;
        this.isEditingQueryDsl = false;
        this.queryDsl = getQueryDslFromFilter(filter);
--- a/src/ui/public/filter_editor/params_editor/filter_params_phrase_editor.html
+++ b/src/ui/public/filter_editor/params_editor/filter_params_phrase_editor.html
@ -36,7 +36,7 @@
  <a
    ng-if="field.type === 'date'"
    class="kuiLink"
-    ng-href="{{dateDocLinks.dateMath}}"
+    documentation-href="date.dateMath"
    target="_blank"
  >
    Accepted date formats
--- a/src/ui/public/filter_editor/params_editor/filter_params_phrase_editor.js
+++ b/src/ui/public/filter_editor/params_editor/filter_params_phrase_editor.js
@ -2,8 +2,8 @@ import 'angular-ui-select';
 import { uiModules } from 'ui/modules';
 import template from './filter_params_phrase_editor.html';
 import { filterParamsPhraseController } from './filter_params_phrase_controller';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import './filter_params_input_type';
+import '../../directives/documentation_href';
 import '../../directives/ui_select_focus_on';
 import '../../directives/focus_on';
 import '../../filters/sort_prefix_first';
@ -18,9 +18,6 @@ module.directive('filterParamsPhraseEditor', function () {
      params: '='
    },
    controllerAs: 'filterParamsPhraseEditor',
-    controller: filterParamsPhraseController,
-    link: function (scope) {
-      scope.dateDocLinks = documentationLinks.date;
-    }
+    controller: filterParamsPhraseController
  };
 });
--- a/src/ui/public/filter_editor/params_editor/filter_params_range_editor.html
+++ b/src/ui/public/filter_editor/params_editor/filter_params_range_editor.html
@ -21,7 +21,7 @@
  <a
    ng-if="field.type === 'date'"
    class="kuiLink"
-    ng-href="{{dateDocLinks.dateMath}}"
+    documentation-href="date.dateMath"
    target="_blank"
  >
    Accepted date formats
--- a/src/ui/public/filter_editor/params_editor/filter_params_range_editor.js
+++ b/src/ui/public/filter_editor/params_editor/filter_params_range_editor.js
@ -1,7 +1,7 @@
 import { uiModules } from 'ui/modules';
 import template from './filter_params_range_editor.html';
-import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import './filter_params_input_type';
+import '../../directives/documentation_href';
 import '../../directives/focus_on';

 const module = uiModules.get('kibana');
@ -12,9 +12,6 @@ module.directive('filterParamsRangeEditor', function () {
    scope: {
      field: '=',
      params: '='
-    },
-    link: function (scope) {
-      scope.dateDocLinks = documentationLinks.date;
    }
  };
 });
--- a/src/ui/public/query_bar/directive/query_bar.html
+++ b/src/ui/public/query_bar/directive/query_bar.html
@ -27,7 +27,7 @@
            <a
              id="discoverLuceneSyntaxHint"
              class="kuiLink"
-              ng-href="{{queryBar.queryDocLinks.luceneQuerySyntax}}"
+              documentation-href="query.luceneQuerySyntax"
              target="_blank"
            >
              Uses lucene query syntax
@ -56,7 +56,7 @@
            <a
              id="discoverKuerySyntaxHint"
              class="kuiLink"
-              ng-href="{{queryBar.queryDocLinks.kueryQuerySyntax}}"
+              documentation-href="query.kueryQuerySyntax"
              target="_blank"
            >
              Uses kuery syntax
--- a/src/ui/public/query_bar/directive/query_bar.js
+++ b/src/ui/public/query_bar/directive/query_bar.js
@ -2,7 +2,7 @@ import { uiModules } from 'ui/modules';
 import { callAfterBindingsWorkaround } from 'ui/compat';
 import template from './query_bar.html';
 import { queryLanguages } from '../lib/queryLanguages';
-import { documentationLinks } from '../../documentation_links/documentation_links.js';
+import '../../directives/documentation_href';

 const module = uiModules.get('kibana');

@ -20,7 +20,6 @@ module.directive('queryBar', function () {
    controllerAs: 'queryBar',
    bindToController: true,
    controller: callAfterBindingsWorkaround(function ($scope, config) {
-      this.queryDocLinks = documentationLinks.query;
      this.appName = this.appName || 'global';
      this.availableQueryLanguages = queryLanguages;
      this.showLanguageSwitcher = config.get('search:queryLanguage:switcher:enable');