mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-16 20:28:24 +00:00
3aaedcfe3c
This is almost identical to the instrumentation currently used in
production for mediawiki.searchSuggest -- the only differences being in
the nomenclature of variables, etc.
As part of comparing Vue search with legacy search, we need to track how
long it takes a keypress to load and render search results for Vue
search. This will only be used only in synthetic testing at this time
(Real user monitoring (RUM) is not in scope for this ticket).
To test locally, first enter characters in input. Then to see the
metrics recorded:
```
// View all marks
performance.getEntriesByType('mark');
// View all measures
performance.getEntriesByType('measure');
```
This commit adds the following metrics which will only be used in our
synthetic tests. We are not collecting RUM metrics at this time.
Measures:
* mwVectorVueSearchLoadStartToFirstRender: Measures the time it takes
from the start of loading the search module to the first render of results.
* mwVectorVueSearchQueryToRender: Measures the time it takes from
the start of the fetch to the render of search results.
Bug: T251544
Change-Id: I39200648a3a0a4079a132134d142ad8997c8962a
126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<div id="p-search">
|
|
<wvui-typeahead-search
|
|
id="searchform"
|
|
ref="searchForm"
|
|
:domain="domain"
|
|
:footer-search-text="$i18n('searchsuggest-containing').escaped()"
|
|
:suggestions-label="$i18n('searchresults').escaped()"
|
|
:accesskey="searchAccessKey"
|
|
:title="searchTitle"
|
|
:placeholder="searchPlaceholder"
|
|
:aria-label="searchPlaceholder"
|
|
:initial-input-value="searchQuery"
|
|
:button-label="$i18n( 'search' ).escaped()"
|
|
:form-action="action"
|
|
:search-language="language"
|
|
:show-thumbnail="showThumbnail"
|
|
:show-description="showDescription"
|
|
@fetch-start="instrumentation.onFetchStart"
|
|
@fetch-end="instrumentation.onFetchEnd"
|
|
@suggestion-click="instrumentation.onSuggestionClick"
|
|
>
|
|
<input type="hidden"
|
|
name="title"
|
|
value="Special:Search"
|
|
>
|
|
<input type="hidden"
|
|
name="wprov"
|
|
:value="wprov"
|
|
>
|
|
</wvui-typeahead-search>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* global SubmitEvent */
|
|
var wvui = require( 'wvui' ),
|
|
instrumentation = require( './instrumentation.js' );
|
|
|
|
module.exports = {
|
|
name: 'App',
|
|
components: wvui,
|
|
mounted: function () {
|
|
// access the element associated with the wvui-typeahead-search component
|
|
// eslint-disable-next-line no-jquery/variable-pattern
|
|
var wvuiSearchForm = this.$refs.searchForm.$el;
|
|
|
|
if ( this.autofocusInput ) {
|
|
// TODO: The wvui-typeahead-search component accepts an id prop but does not
|
|
// display that value as an HTML attribute on the form element.
|
|
wvuiSearchForm.querySelector( 'form' ).setAttribute( 'id', 'searchform' );
|
|
|
|
// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
|
|
// or directive. This can be removed when its does.
|
|
wvuiSearchForm.querySelector( 'input' ).focus();
|
|
}
|
|
},
|
|
computed: {
|
|
language: function () {
|
|
return mw.config.get( 'wgUserLanguage' );
|
|
},
|
|
domain: function () {
|
|
// It might be helpful to allow this to be configurable in future.
|
|
return location.host;
|
|
}
|
|
},
|
|
props: {
|
|
autofocusInput: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
action: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** The keyboard shortcut to focus search. */
|
|
searchAccessKey: {
|
|
type: String
|
|
},
|
|
/** The access key informational tip for search. */
|
|
searchTitle: {
|
|
type: String
|
|
},
|
|
/** The ghost text shown when no search query is entered. */
|
|
searchPlaceholder: {
|
|
type: String
|
|
},
|
|
/**
|
|
* The search query string taken from the server-side rendered input immediately before
|
|
* client render.
|
|
*/
|
|
searchQuery: {
|
|
type: String
|
|
},
|
|
showThumbnail: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showDescription: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
// -1 here is the default "active suggestion index" defined in the
|
|
// `wvui-typeahead-search` component (see
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/c7af5d6d091ffb3beb4fd2723fdf50dc6bb2789b/src/components/typeahead-search/TypeaheadSearch.vue#167).
|
|
wprov: instrumentation.getWprovFromResultIndex( -1 ),
|
|
|
|
instrumentation: instrumentation.listeners
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* @param {SubmitEvent} event
|
|
*/
|
|
onSubmit: function ( event ) {
|
|
this.wprov = instrumentation.getWprovFromResultIndex( event.index );
|
|
|
|
instrumentation.listeners.onSubmit( event );
|
|
}
|
|
}
|
|
};
|
|
</script>
|