diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js
index 51d774fd2c150..c639ee8d80938 100644
--- a/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js
+++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/doc_table.js
@@ -18,9 +18,7 @@
*/
import _ from 'lodash';
-import { i18n } from '@kbn/i18n';
import html from './doc_table.html';
-import { getSort } from './lib/get_sort';
import './infinite_scroll';
import './components/table_header';
import './components/table_row';
@@ -28,22 +26,21 @@ import { dispatchRenderComplete } from 'ui/render_complete';
import { uiModules } from 'ui/modules';
import './components/pager';
import './lib/pager';
-import { getRequestInspectorStats, getResponseInspectorStats } from 'ui/courier/utils/courier_inspector_utils';
-import { toastNotifications } from 'ui/notify';
import { getLimitedSearchResultsMessage } from './doc_table_strings';
uiModules.get('app/discover')
- .directive('docTable', function (config, getAppState, pagerFactory, $filter, courier) {
+ .directive('docTable', function (config, getAppState, pagerFactory, $filter) {
return {
restrict: 'E',
template: html,
scope: {
sorting: '=',
columns: '=',
- hits: '=?', // You really want either hits & indexPattern, OR searchSource
- indexPattern: '=?',
- searchSource: '=?',
+ hits: '=',
+ totalHitCount: '=',
+ indexPattern: '=',
+ isLoading: '=?',
infiniteScroll: '=?',
filter: '=?',
filters: '=?',
@@ -93,83 +90,19 @@ uiModules.get('app/discover')
if ($scope.columns.length === 0) $scope.columns.push('_source');
});
- $scope.$watch('searchSource', function () {
- if (!$scope.searchSource) return;
+ $scope.$watch('hits', hits => {
+ if (!hits) return;
- $scope.indexPattern = $scope.searchSource.getField('index');
-
- $scope.searchSource.setField('size', config.get('discover:sampleSize'));
- $scope.searchSource.setField('sort', getSort($scope.sorting, $scope.indexPattern));
-
- // Set the watcher after initialization
- $scope.$watchCollection('sorting', function (newSort, oldSort) {
- // Don't react if sort values didn't really change
- if (newSort === oldSort) return;
- $scope.searchSource.setField('sort', getSort(newSort, $scope.indexPattern));
- $scope.searchSource.fetchQueued();
- });
-
- $scope.$on('$destroy', function () {
- if ($scope.searchSource) $scope.searchSource.destroy();
- });
-
- function onResults(resp) {
// Reset infinite scroll limit
- $scope.limit = 50;
-
- // Abort if something changed
- if ($scope.searchSource !== $scope.searchSource) return;
-
- $scope.hits = resp.hits.hits;
- if ($scope.hits.length === 0) {
- dispatchRenderComplete($el[0]);
- }
- // We limit the number of returned results, but we want to show the actual number of hits, not
- // just how many we retrieved.
- $scope.totalHitCount = resp.hits.total;
- $scope.pager = pagerFactory.create($scope.hits.length, 50, 1);
- calculateItemsOnPage();
-
- return $scope.searchSource.onResults().then(onResults);
- }
+ $scope.limit = 50;
- function startSearching() {
- let inspectorRequest = undefined;
- if (_.has($scope, 'inspectorAdapters.requests')) {
- $scope.inspectorAdapters.requests.reset();
- const title = i18n.translate('kbn.docTable.inspectorRequestDataTitle', {
- defaultMessage: 'Data',
- });
- const description = i18n.translate('kbn.docTable.inspectorRequestDescription', {
- defaultMessage: 'This request queries Elasticsearch to fetch the data for the search.',
- });
- inspectorRequest = $scope.inspectorAdapters.requests.start(title, { description });
- inspectorRequest.stats(getRequestInspectorStats($scope.searchSource));
- $scope.searchSource.getSearchRequestBody().then(body => {
- inspectorRequest.json(body);
- });
- }
- $scope.searchSource.onResults()
- .then(resp => {
- if (inspectorRequest) {
- inspectorRequest
- .stats(getResponseInspectorStats($scope.searchSource, resp))
- .ok({ json: resp });
- }
- return resp;
- })
- .then(onResults)
- .catch(error => {
- toastNotifications.addError(error, {
- title: i18n.translate('kbn.docTable.errorTitle', {
- defaultMessage: 'Error fetching data'
- }),
- });
- startSearching();
- });
+ if (hits.length === 0) {
+ dispatchRenderComplete($el[0]);
}
- startSearching();
- courier.fetch();
+
+ if ($scope.infiniteScroll) return;
+ $scope.pager = pagerFactory.create(hits.length, 50, 1);
+ calculateItemsOnPage();
});
$scope.pageOfItems = [];
diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/get_sort.d.ts b/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/get_sort.d.ts
new file mode 100644
index 0000000000000..50c63a514da04
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/lib/get_sort.d.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { StaticIndexPattern } from 'ui/index_patterns';
+import { SortOrder } from '../components/table_header/helpers';
+
+export function getSort(
+ sort?: SortOrder[],
+ indexPattern?: StaticIndexPattern,
+ defaultSortOrder?: SortOrder
+): any;
diff --git a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts
index 8288e3d1d1d7a..afbbcf79173db 100644
--- a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts
@@ -22,14 +22,20 @@ import { getFilterGenerator } from 'ui/filter_manager';
import angular from 'angular';
import _ from 'lodash';
import { SearchSource } from 'ui/courier';
+import {
+ getRequestInspectorStats,
+ getResponseInspectorStats,
+} from 'ui/courier/utils/courier_inspector_utils';
import { StaticIndexPattern } from 'ui/index_patterns';
import { RequestAdapter } from 'ui/inspector/adapters';
import { Adapters } from 'ui/inspector/types';
-import { getTime } from 'ui/timefilter/get_time';
import { Subscription } from 'rxjs';
import * as Rx from 'rxjs';
import { Filter, FilterStateStore } from '@kbn/es-query';
-import { TimeRange } from 'ui/timefilter/time_history';
+import chrome from 'ui/chrome';
+import { i18n } from '@kbn/i18n';
+import { toastNotifications } from 'ui/notify';
+import { timefilter, getTime, TimeRange } from 'ui/timefilter';
import { Query, onlyDisabledFiltersChanged } from '../../../../data/public';
import {
APPLY_FILTER_TRIGGER,
@@ -41,19 +47,26 @@ import * as columnActions from '../doc_table/actions/columns';
import { SavedSearch } from '../types';
import searchTemplate from './search_template.html';
import { ISearchEmbeddable, SearchInput, SearchOutput } from './types';
+import { getSort } from '../doc_table/lib/get_sort';
+import { SortOrder } from '../doc_table/components/table_header/helpers';
+
+const config = chrome.getUiSettingsClient();
interface SearchScope extends ng.IScope {
columns?: string[];
description?: string;
- sort?: string[][];
- searchSource?: SearchSource;
+ sort?: SortOrder[];
sharedItemTitle?: string;
inspectorAdapters?: Adapters;
- setSortOrder?: (sortPair: [[string, string]]) => void;
+ setSortOrder?: (sortPair: SortOrder[]) => void;
removeColumn?: (column: string) => void;
addColumn?: (column: string) => void;
moveColumn?: (column: string, index: number) => void;
filter?: (field: { name: string; scripted: boolean }, value: string[], operator: string) => void;
+ hits?: any[];
+ indexPattern?: StaticIndexPattern;
+ totalHitCount?: number;
+ isLoading?: boolean;
}
export interface FilterManager {
@@ -71,7 +84,6 @@ export interface FilterManager {
interface SearchEmbeddableConfig {
$rootScope: ng.IRootScopeService;
$compile: ng.ICompileService;
- courier: any;
savedSearch: SavedSearch;
editUrl: string;
indexPatterns?: StaticIndexPattern[];
@@ -91,7 +103,7 @@ export class SearchEmbeddable extends Embeddable
private panelTitle: string = '';
private filtersSearchSource: SearchSource;
private searchInstance?: JQLite;
- private courier: any;
+ private autoRefreshFetchSubscription?: Subscription;
private subscription?: Subscription;
public readonly type = SEARCH_EMBEDDABLE_TYPE;
private filterGen: FilterManager;
@@ -104,7 +116,6 @@ export class SearchEmbeddable extends Embeddable
{
$rootScope,
$compile,
- courier,
savedSearch,
editUrl,
indexPatterns,
@@ -122,13 +133,14 @@ export class SearchEmbeddable extends Embeddable
);
this.filterGen = getFilterGenerator(queryFilter);
- this.courier = courier;
this.savedSearch = savedSearch;
this.$rootScope = $rootScope;
this.$compile = $compile;
this.inspectorAdaptors = {
requests: new RequestAdapter(),
};
+ this.initializeSearchScope();
+ this.autoRefreshFetchSubscription = timefilter.getAutoRefreshFetch$().subscribe(this.fetch);
this.subscription = Rx.merge(this.getOutput$(), this.getInput$()).subscribe(() => {
this.panelTitle = this.output.title || '';
@@ -153,10 +165,8 @@ export class SearchEmbeddable extends Embeddable
* @param {ContainerState} containerState
*/
public render(domNode: HTMLElement) {
- this.initializeSearchScope();
if (!this.searchScope) {
throw new Error('Search scope not defined');
- return;
}
this.searchInstance = this.$compile(searchTemplate)(this.searchScope);
const rootNode = angular.element(domNode);
@@ -178,42 +188,45 @@ export class SearchEmbeddable extends Embeddable
if (this.subscription) {
this.subscription.unsubscribe();
}
+ if (this.autoRefreshFetchSubscription) {
+ this.autoRefreshFetchSubscription.unsubscribe();
+ }
}
private initializeSearchScope() {
- const searchScope: SearchScope = this.$rootScope.$new();
+ const searchScope: SearchScope = (this.searchScope = this.$rootScope.$new());
searchScope.description = this.savedSearch.description;
- searchScope.searchSource = this.savedSearch.searchSource;
searchScope.inspectorAdapters = this.inspectorAdaptors;
- const timeRangeSearchSource = searchScope.searchSource.create();
+ const { searchSource } = this.savedSearch;
+ const indexPattern = (searchScope.indexPattern = searchSource.getField('index'));
+
+ const timeRangeSearchSource = searchSource.create();
timeRangeSearchSource.setField('filter', () => {
if (!this.searchScope || !this.input.timeRange) {
return;
}
- return getTime(this.searchScope.searchSource.getField('index'), this.input.timeRange);
+ return getTime(indexPattern, this.input.timeRange);
});
- this.filtersSearchSource = searchScope.searchSource.create();
+ this.filtersSearchSource = searchSource.create();
this.filtersSearchSource.setParent(timeRangeSearchSource);
- searchScope.searchSource.setParent(this.filtersSearchSource);
+ searchSource.setParent(this.filtersSearchSource);
this.pushContainerStateParamsToScope(searchScope);
- searchScope.setSortOrder = sortPair => {
- searchScope.sort = sortPair;
- this.updateInput({ sort: searchScope.sort });
+ searchScope.setSortOrder = sort => {
+ this.updateInput({ sort });
};
searchScope.addColumn = (columnName: string) => {
if (!searchScope.columns) {
return;
}
- this.savedSearch.searchSource.getField('index').popularizeField(columnName, 1);
+ indexPattern.popularizeField(columnName, 1);
columnActions.addColumn(searchScope.columns, columnName);
- searchScope.columns = searchScope.columns;
this.updateInput({ columns: searchScope.columns });
};
@@ -221,9 +234,7 @@ export class SearchEmbeddable extends Embeddable
if (!searchScope.columns) {
return;
}
- this.savedSearch.searchSource.getField('index').popularizeField(columnName, 1);
columnActions.removeColumn(searchScope.columns, columnName);
-
this.updateInput({ columns: searchScope.columns });
};
@@ -236,9 +247,7 @@ export class SearchEmbeddable extends Embeddable
};
searchScope.filter = async (field, value, operator) => {
- const index = this.savedSearch.searchSource.getField('index').id;
-
- let filters = this.filterGen.generate(field, value, operator, index);
+ let filters = this.filterGen.generate(field, value, operator, indexPattern.id);
filters = filters.map(filter => ({
...filter,
$state: { store: FilterStateStore.APP_STATE },
@@ -251,31 +260,76 @@ export class SearchEmbeddable extends Embeddable
},
});
};
-
- this.searchScope = searchScope;
}
public reload() {
- this.courier.fetch();
+ this.fetch();
}
+ private fetch = async () => {
+ if (!this.searchScope) return;
+
+ const { searchSource } = this.savedSearch;
+ searchSource.setField('size', config.get('discover:sampleSize'));
+ searchSource.setField('sort', getSort(this.searchScope.sort, this.searchScope.indexPattern));
+
+ // Log request to inspector
+ this.inspectorAdaptors.requests.reset();
+ const title = i18n.translate('kbn.embeddable.inspectorRequestDataTitle', {
+ defaultMessage: 'Data',
+ });
+ const description = i18n.translate('kbn.embeddable.inspectorRequestDescription', {
+ defaultMessage: 'This request queries Elasticsearch to fetch the data for the search.',
+ });
+ const inspectorRequest = this.inspectorAdaptors.requests.start(title, { description });
+ inspectorRequest.stats(getRequestInspectorStats(searchSource));
+ searchSource.getSearchRequestBody().then((body: any) => {
+ inspectorRequest.json(body);
+ });
+
+ this.searchScope.isLoading = true;
+
+ try {
+ // Make the request
+ const resp = await searchSource.fetch();
+
+ this.searchScope.isLoading = false;
+
+ // Log response to inspector
+ inspectorRequest.stats(getResponseInspectorStats(searchSource, resp)).ok({ json: resp });
+
+ // Apply the changes to the angular scope
+ this.searchScope.$apply(() => {
+ this.searchScope!.hits = resp.hits.hits;
+ this.searchScope!.totalHitCount = resp.hits.total;
+ });
+ } catch (error) {
+ toastNotifications.addError(error, {
+ title: i18n.translate('kbn.embeddable.errorTitle', {
+ defaultMessage: 'Error fetching data',
+ }),
+ });
+ }
+ };
+
private pushContainerStateParamsToScope(searchScope: SearchScope) {
+ const isFetchRequired =
+ !onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) ||
+ !_.isEqual(this.prevQuery, this.input.query) ||
+ !_.isEqual(this.prevTimeRange, this.input.timeRange) ||
+ !_.isEqual(searchScope.sort, this.input.sort || this.savedSearch.sort);
+
// If there is column or sort data on the panel, that means the original columns or sort settings have
// been overridden in a dashboard.
searchScope.columns = this.input.columns || this.savedSearch.columns;
searchScope.sort = this.input.sort || this.savedSearch.sort;
searchScope.sharedItemTitle = this.panelTitle;
- if (
- !onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) ||
- !_.isEqual(this.prevQuery, this.input.query) ||
- !_.isEqual(this.prevTimeRange, this.input.timeRange)
- ) {
+ if (isFetchRequired) {
this.filtersSearchSource.setField('filter', this.input.filters);
this.filtersSearchSource.setField('query', this.input.query);
- // Sadly this is neccessary to tell the angular component to refetch the data.
- this.courier.fetch();
+ this.fetch();
this.prevFilters = this.input.filters;
this.prevQuery = this.input.query;
diff --git a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts
index c76b3c7fbc5fd..88dafaacf7357 100644
--- a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts
@@ -22,7 +22,7 @@ import { capabilities } from 'ui/capabilities';
import { i18n } from '@kbn/i18n';
import chrome from 'ui/chrome';
import { IPrivate } from 'ui/private';
-import { TimeRange } from 'ui/timefilter/time_history';
+import { TimeRange } from 'ui/timefilter';
import { FilterBarQueryFilterProvider } from 'ui/filter_manager/query_filter';
import {
EmbeddableFactory,
@@ -77,7 +77,6 @@ export class SearchEmbeddableFactory extends EmbeddableFactory<
const $compile = $injector.get('$compile');
const $rootScope = $injector.get('$rootScope');
- const courier = $injector.get('courier');
const searchLoader = $injector.get('savedSearches');
const editUrl = chrome.addBasePath(`/app/kibana${searchLoader.urlFor(savedObjectId)}`);
@@ -88,7 +87,6 @@ export class SearchEmbeddableFactory extends EmbeddableFactory<
const savedObject = await searchLoader.get(savedObjectId);
return new SearchEmbeddable(
{
- courier,
savedSearch: savedObject,
$rootScope,
$compile,
diff --git a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_template.html b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_template.html
index 3fbcb16ea17da..e188d230ea307 100644
--- a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_template.html
+++ b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_template.html
@@ -1,5 +1,4 @@
diff --git a/src/legacy/core_plugins/kibana/public/discover/embeddable/types.ts b/src/legacy/core_plugins/kibana/public/discover/embeddable/types.ts
index 43648d575014e..981580079ae18 100644
--- a/src/legacy/core_plugins/kibana/public/discover/embeddable/types.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/embeddable/types.ts
@@ -18,7 +18,7 @@
*/
import { StaticIndexPattern } from 'ui/index_patterns';
-import { TimeRange } from 'ui/timefilter/time_history';
+import { TimeRange } from 'ui/timefilter';
import { Query } from 'src/legacy/core_plugins/data/public';
import { Filter } from '@kbn/es-query';
import { SavedSearch } from '../types';
@@ -27,6 +27,7 @@ import {
EmbeddableOutput,
IEmbeddable,
} from '../../../../embeddable_api/public/np_ready/public';
+import { SortOrder } from '../doc_table/components/table_header/helpers';
export interface SearchInput extends EmbeddableInput {
timeRange: TimeRange;
@@ -34,7 +35,7 @@ export interface SearchInput extends EmbeddableInput {
filters?: Filter[];
hidePanelTitles?: boolean;
columns?: string[];
- sort?: string[][];
+ sort?: SortOrder[];
}
export interface SearchOutput extends EmbeddableOutput {
diff --git a/src/legacy/core_plugins/kibana/public/discover/types.d.ts b/src/legacy/core_plugins/kibana/public/discover/types.d.ts
index 6de969888f166..f285e94369893 100644
--- a/src/legacy/core_plugins/kibana/public/discover/types.d.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/types.d.ts
@@ -18,6 +18,7 @@
*/
import { SearchSource } from 'ui/courier';
+import { SortOrder } from './doc_table/components/table_header/helpers';
export interface SavedSearch {
readonly id: string;
@@ -25,7 +26,7 @@ export interface SavedSearch {
searchSource: SearchSource;
description?: string;
columns: string[];
- sort: string[][];
+ sort: SortOrder[];
destroy: () => void;
}
export interface SavedSearchLoader {
diff --git a/src/legacy/core_plugins/kibana/public/doc_viewer/_doc_viewer.scss b/src/legacy/core_plugins/kibana/public/doc_viewer/_doc_viewer.scss
index 539efbe592a51..25aa530976719 100644
--- a/src/legacy/core_plugins/kibana/public/doc_viewer/_doc_viewer.scss
+++ b/src/legacy/core_plugins/kibana/public/doc_viewer/_doc_viewer.scss
@@ -1,3 +1,7 @@
+.kbnDocViewerTable {
+ margin-top: $euiSizeS;
+}
+
.kbnDocViewer {
pre,
.kbnDocViewer__value {
@@ -6,6 +10,11 @@
word-wrap: break-word;
white-space: pre-wrap;
color: $euiColorFullShade;
+ vertical-align: top;
+ padding-top: 2px;
+ }
+ .kbnDocViewer__field {
+ padding-top: 8px;
}
.dscFieldName {
@@ -28,20 +37,22 @@
}
}
-.kbnDocViewer__content {
- background-color: $euiColorEmptyShade;
- padding: $euiSizeS 0 0 0;
-}
-
.kbnDocViewer__buttons,
.kbnDocViewer__field {
white-space: nowrap;
}
+.kbnDocViewer__buttons {
+ width: 60px;
+}
+
+.kbnDocViewer__field {
+ width: 160px;
+}
.kbnDocViewer__actionButton {
opacity: 0;
-
- &:focus {
- opacity: 1;
- }
}
+.kbnDocViewer__warning {
+ margin-right: $euiSizeS;
+}
+
diff --git a/src/legacy/core_plugins/kibana/public/doc_viewer/doc_viewer_tab.tsx b/src/legacy/core_plugins/kibana/public/doc_viewer/doc_viewer_tab.tsx
index d0fa29c5344a9..0b25421d8aff3 100644
--- a/src/legacy/core_plugins/kibana/public/doc_viewer/doc_viewer_tab.tsx
+++ b/src/legacy/core_plugins/kibana/public/doc_viewer/doc_viewer_tab.tsx
@@ -17,6 +17,7 @@
* under the License.
*/
import React from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
import { DocViewRenderProps, DocViewRenderFn } from 'ui/registry/doc_views';
import { DocViewRenderTab } from './doc_viewer_render_tab';
import { DocViewerError } from './doc_viewer_render_error';
@@ -77,7 +78,12 @@ export class DocViewerTab extends React.Component {
}
// doc view is provided by a react component
+
const Component = component as any;
- return ;
+ return (
+
+
+
+ );
}
}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
index 2331fdd559c91..0e73c0cbc93a5 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
@@ -1135,7 +1135,10 @@ exports[`home welcome should show the normal home page if welcome screen is disa
exports[`home welcome should show the welcome screen if enabled, and there are no index patterns defined 1`] = `
`;
diff --git a/src/legacy/core_plugins/kibana/public/home/components/_welcome.scss b/src/legacy/core_plugins/kibana/public/home/components/_welcome.scss
index 821fbe46b1404..d8c777534647b 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/_welcome.scss
+++ b/src/legacy/core_plugins/kibana/public/home/components/_welcome.scss
@@ -1,6 +1,5 @@
-
.homWelcome {
- @include kibanaFullScreenGraphics;
+ @include kibanaFullScreenGraphics($euiZLevel6);
}
.homWelcome__header {
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home.js b/src/legacy/core_plugins/kibana/public/home/components/home.js
index 3b7e2c0990c6f..76f15f797ed6c 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.js
@@ -225,6 +225,10 @@ export class Home extends Component {
);
}
@@ -247,6 +251,10 @@ export class Home extends Component {
Home.propTypes = {
addBasePath: PropTypes.func.isRequired,
+ fetchTelemetry: PropTypes.func.isRequired,
+ getTelemetryBannerId: PropTypes.func.isRequired,
+ setOptIn: PropTypes.func.isRequired,
+ shouldShowTelemetryOptIn: PropTypes.bool.isRequired,
directories: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home.test.js b/src/legacy/core_plugins/kibana/public/home/components/home.test.js
index c10aa3f0b1e32..aa520ba2ed5f9 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home.test.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.test.js
@@ -17,30 +17,14 @@
* under the License.
*/
+import './home.test.mocks';
+
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { Home } from './home';
import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
-jest.mock(
- 'ui/chrome',
- () => ({
- getBasePath: jest.fn(() => 'path'),
- getInjected: jest.fn(() => ''),
- }),
- { virtual: true }
-);
-
-jest.mock(
- 'ui/capabilities',
- () => ({
- catalogue: {},
- management: {},
- navLinks: {}
- })
-);
-
describe('home', () => {
let defaultProps;
@@ -50,6 +34,10 @@ describe('home', () => {
apmUiEnabled: true,
mlEnabled: true,
kibanaVersion: '99.2.1',
+ fetchTelemetry: jest.fn(),
+ getTelemetryBannerId: jest.fn(),
+ setOptIn: jest.fn(),
+ showTelemetryOptIn: false,
addBasePath(url) {
return `base_path/${url}`;
},
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home.test.mocks.ts b/src/legacy/core_plugins/kibana/public/home/components/home.test.mocks.ts
new file mode 100644
index 0000000000000..1eed597a90a4b
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.test.mocks.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { notificationServiceMock } from '../../../../../../core/public/mocks';
+
+jest.doMock('ui/new_platform', () => {
+ return {
+ npSetup: {
+ core: {
+ notifications: notificationServiceMock.createSetupContract(),
+ },
+ },
+ };
+});
+
+jest.doMock(
+ 'ui/chrome',
+ () => ({
+ getBasePath: jest.fn(() => 'path'),
+ getInjected: jest.fn(() => ''),
+ }),
+ { virtual: true }
+);
+
+jest.doMock('ui/capabilities', () => ({
+ catalogue: {},
+ management: {},
+ navLinks: {},
+}));
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home_app.js b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
index fc24eeaa0f451..9aa44863f6d70 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home_app.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
@@ -30,12 +30,10 @@ import {
} from 'react-router-dom';
import { getTutorial } from '../load_tutorials';
import { replaceTemplateStrings } from './tutorial/replace_template_strings';
+import { telemetryOptInProvider, shouldShowTelemetryOptIn } from '../kibana_services';
import chrome from 'ui/chrome';
-export function HomeApp({
- directories,
-}) {
-
+export function HomeApp({ directories }) {
const isCloudEnabled = chrome.getInjected('isCloudEnabled', false);
const apmUiEnabled = chrome.getInjected('apmUiEnabled', true);
const mlEnabled = chrome.getInjected('mlEnabled', false);
@@ -94,6 +92,10 @@ export function HomeApp({
find={savedObjectsClient.find}
localStorage={localStorage}
urlBasePath={chrome.getBasePath()}
+ shouldShowTelemetryOptIn={shouldShowTelemetryOptIn}
+ setOptIn={telemetryOptInProvider.setOptIn}
+ fetchTelemetry={telemetryOptInProvider.fetchExample}
+ getTelemetryBannerId={telemetryOptInProvider.getBannerId}
/>
diff --git a/src/legacy/core_plugins/kibana/public/home/components/sample_data/index.tsx b/src/legacy/core_plugins/kibana/public/home/components/sample_data/index.tsx
new file mode 100644
index 0000000000000..1bb8bd214d2cb
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/sample_data/index.tsx
@@ -0,0 +1,71 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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.
+ */
+
+/*
+ * The UI and related logic for the welcome screen that *should* show only
+ * when it is enabled (the default) and there is no Kibana-consumed data
+ * in Elasticsearch.
+ */
+
+import React from 'react';
+import {
+ // @ts-ignore
+ EuiCard,
+ EuiButton,
+ EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+ urlBasePath: string;
+ onDecline: () => void;
+ onConfirm: () => void;
+}
+
+export function SampleDataCard({ urlBasePath, onDecline, onConfirm }: Props) {
+ return (
+ }
+ description={
+
+ }
+ footer={
+
+ }
+ />
+ );
+}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts
new file mode 100644
index 0000000000000..63636433bc00b
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { renderTelemetryOptInCard, Props } from './telemetry_opt_in_card';
+
+export const TelemetryOptInCard = (props: Props) => {
+ return renderTelemetryOptInCard(props);
+};
diff --git a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_details_component.tsx b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_details_component.tsx
new file mode 100644
index 0000000000000..d90f54b2bcb54
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_details_component.tsx
@@ -0,0 +1,163 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 * as React from 'react';
+
+import {
+ EuiCallOut,
+ EuiCodeBlock,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFlyout,
+ EuiFlyoutHeader,
+ EuiFlyoutBody,
+ EuiLoadingSpinner,
+ EuiPortal, // EuiPortal is a temporary requirement to use EuiFlyout with "ownFocus"
+ EuiText,
+ EuiTextColor,
+ EuiTitle,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+ fetchTelemetry: () => Promise;
+ onClose: () => void;
+}
+
+interface State {
+ isLoading: boolean;
+ hasPrivilegeToRead: boolean;
+ data: any[] | null;
+}
+
+/**
+ * React component for displaying the example data associated with the Telemetry opt-in banner.
+ */
+export class OptInExampleFlyout extends React.PureComponent {
+ public readonly state: State = {
+ data: null,
+ isLoading: true,
+ hasPrivilegeToRead: false,
+ };
+
+ componentDidMount() {
+ this.props
+ .fetchTelemetry()
+ .then(response =>
+ this.setState({
+ data: Array.isArray(response.data) ? response.data : null,
+ isLoading: false,
+ hasPrivilegeToRead: true,
+ })
+ )
+ .catch(err => {
+ this.setState({
+ isLoading: false,
+ hasPrivilegeToRead: err.status !== 403,
+ });
+ });
+ }
+
+ renderBody({ data, isLoading, hasPrivilegeToRead }: State) {
+ if (isLoading) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ if (!hasPrivilegeToRead) {
+ return (
+
+ }
+ color="danger"
+ iconType="cross"
+ >
+
+
+ );
+ }
+
+ if (data === null) {
+ return (
+
+ }
+ color="danger"
+ iconType="cross"
+ >
+
+
+ );
+ }
+
+ return {JSON.stringify(data, null, 2)};
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.renderBody(this.state)}
+
+
+ );
+ }
+}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_message.tsx b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_message.tsx
new file mode 100644
index 0000000000000..0f581e819b052
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/opt_in_message.tsx
@@ -0,0 +1,106 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 * as React from 'react';
+import { EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { OptInExampleFlyout } from './opt_in_details_component';
+
+interface Props {
+ fetchTelemetry: () => Promise;
+}
+
+interface State {
+ showDetails: boolean;
+ showExample: boolean;
+}
+
+export class OptInMessage extends React.PureComponent {
+ public readonly state: State = {
+ showDetails: false,
+ showExample: false,
+ };
+
+ toggleShowExample = () => {
+ this.setState(prevState => ({
+ showExample: !prevState.showExample,
+ }));
+ };
+
+ render() {
+ const { fetchTelemetry } = this.props;
+ const { showDetails, showExample } = this.state;
+
+ const getDetails = () => (
+
+
+
+ ),
+ telemetryPrivacyStatementLink: (
+
+
+
+ ),
+ }}
+ />
+ );
+
+ const getFlyoutDetails = () => (
+ this.setState({ showExample: false })}
+ fetchTelemetry={fetchTelemetry}
+ />
+ );
+
+ const getReadMore = () => (
+ this.setState({ showDetails: true })}>
+
+
+ );
+
+ return (
+
+ {' '}
+ {!showDetails && getReadMore()}
+ {showDetails && getDetails()}
+ {showDetails && showExample && getFlyoutDetails()}
+
+ );
+ }
+}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx
new file mode 100644
index 0000000000000..5fa842291b028
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx
@@ -0,0 +1,81 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+ // @ts-ignore
+ EuiCard,
+ EuiButton,
+} from '@elastic/eui';
+import { OptInMessage } from './opt_in_message';
+
+export interface Props {
+ urlBasePath: string;
+ onConfirm: () => void;
+ onDecline: () => void;
+ fetchTelemetry: () => Promise;
+}
+
+export function renderTelemetryOptInCard({
+ urlBasePath,
+ fetchTelemetry,
+ onConfirm,
+ onDecline,
+}: Props) {
+ return (
+
+ }
+ description={}
+ footer={
+
+ }
+ />
+ );
+}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/welcome.js b/src/legacy/core_plugins/kibana/public/home/components/welcome.js
deleted file mode 100644
index 98560b748ec0d..0000000000000
--- a/src/legacy/core_plugins/kibana/public/home/components/welcome.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. 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.
- */
-
-/*
- * The UI and related logic for the welcome screen that *should* show only
- * when it is enabled (the default) and there is no Kibana-consumed data
- * in Elasticsearch.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
- EuiCard,
- EuiTitle,
- EuiSpacer,
- EuiFlexGroup,
- EuiFlexItem,
- EuiText,
- EuiIcon,
- EuiButton,
- EuiButtonEmpty,
- EuiPortal,
-} from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n/react';
-
-/**
- * Shows a full-screen welcome page that gives helpful quick links to beginners.
- */
-export class Welcome extends React.Component {
- hideOnEsc = e => {
- if (e.key === 'Escape') {
- this.props.onSkip();
- }
- };
-
- componentDidMount() {
- document.addEventListener('keydown', this.hideOnEsc);
- }
-
- componentWillUnmount() {
- document.removeEventListener('keydown', this.hideOnEsc);
- }
-
- render() {
- const { urlBasePath, onSkip } = this.props;
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- description={
- }
- footer={
-
- }
- />
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {shouldShowTelemetryOptIn && step === 0 && (
+
+ )}
+ {(!shouldShowTelemetryOptIn || step === 1) && (
+
+ )}
+
+
+
+
+
hideToolbar(false)}
+ onMouseLeave={() => hideToolbar(true)}
+ ref={refs.stage}
+ >
+
+
+
onClick(number)}
+ onKeyPress={() => onClick(number)}
+ style={style}
+ >
+
+
+ dispatch(setAutoplay(!autoplay.enabled))}
+ />
+
+ dispatch(setAutoplayInterval(createTimeInterval(value)))}
+ />
+
+ );
+};
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/index.ts b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/index.ts
new file mode 100644
index 0000000000000..87d5cf67e6965
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './settings';
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/settings.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/settings.tsx
new file mode 100644
index 0000000000000..a4dad62b25bc1
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/settings.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { useExternalEmbedState } from '../../../context';
+// @ts-ignore Untyped local
+import { CustomInterval } from '../../../../public/components/workpad_header/control_settings/custom_interval';
+import { ToolbarSettings } from './toolbar_settings';
+import { AutoplaySettings } from './autoplay_settings';
+
+// @ts-ignore CSS Module
+import css from './settings.module';
+
+/**
+ * The Settings Popover for External Workpads.
+ */
+export const Settings = () => {
+ const [{ workpad, refs }] = useExternalEmbedState();
+
+ if (!workpad) {
+ return null;
+ }
+
+ const [isPopoverOpen, setPopoverOpen] = useState(false);
+ const button = (
+ setPopoverOpen(!isPopoverOpen)}
+ />
+ );
+
+ const flattenPanelTree = (tree: any, array: any[] = []) => {
+ array.push(tree);
+
+ if (tree.items) {
+ tree.items.forEach((item: any) => {
+ if (item.panel) {
+ flattenPanelTree(item.panel, array);
+ item.panel = item.panel.id;
+ }
+ });
+ }
+
+ return array;
+ };
+
+ const panels = flattenPanelTree({
+ id: 0,
+ title: 'Settings',
+ items: [
+ {
+ name: 'Auto Play',
+ icon: 'play',
+ panel: {
+ id: 1,
+ title: 'Auto Play',
+ content: ,
+ },
+ },
+ {
+ name: 'Toolbar',
+ icon: 'boxesHorizontal',
+ panel: {
+ id: 2,
+ title: 'Toolbar',
+ content: setPopoverOpen(false)} />,
+ },
+ },
+ ],
+ });
+
+ return (
+
+
+ {/*
+ //@ts-ignore EuiPopover missing insert property */}
+ setPopoverOpen(false)}
+ id="settings"
+ isOpen={isPopoverOpen}
+ button={button}
+ panelPaddingSize="none"
+ withTitle
+ anchorPosition="upRight"
+ insert={{ sibling: refs.stage.current, position: 'after' }}
+ >
+
+
+
+
+ );
+};
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/toolbar_settings.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/toolbar_settings.tsx
new file mode 100644
index 0000000000000..8e11e8a075acc
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/toolbar_settings.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiSwitch, EuiFormRow } from '@elastic/eui';
+import { useExternalEmbedState, setToolbarAutohide } from '../../../context';
+
+// @ts-ignore CSS Module
+import css from './settings.module';
+
+interface Props {
+ onChange?: () => void;
+}
+
+/**
+ * The settings panel for the Toolbar of an Embedded Workpad.
+ */
+export const ToolbarSettings = ({ onChange = () => {} }: Props) => {
+ const [{ settings }, dispatch] = useExternalEmbedState();
+
+ const { toolbar } = settings;
+
+ return (
+
+
+ {
+ onChange();
+ dispatch(setToolbarAutohide(!toolbar.autohide));
+ }}
+ />
+
+
+ );
+};
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/footer/title.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/title.tsx
new file mode 100644
index 0000000000000..6296e55007ef6
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/title.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui';
+import { useExternalEmbedState } from '../../context';
+
+/**
+ * The title of the workpad displayed in the right-hand of the footer.
+ */
+export const Title = () => {
+ const [{ workpad }] = useExternalEmbedState();
+
+ if (!workpad) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+ {workpad.name}
+
+
+
+ );
+};
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/page.module.scss b/x-pack/legacy/plugins/canvas/external_runtime/components/page.module.scss
new file mode 100644
index 0000000000000..335fa0ec92ea5
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/page.module.scss
@@ -0,0 +1,6 @@
+.root {
+ composes: canvasPage from global;
+ composes: canvasInteractivePage from global;
+ composes: kbn-resetFocusState from global;
+ overflow: 'hidden';
+}
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/page.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/page.tsx
new file mode 100644
index 0000000000000..538bf885c566d
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/page.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { RenderedElement } from './rendered_element';
+import { useExternalEmbedState } from '../context';
+import { CanvasRenderedPage, CanvasRenderedElement } from '../types';
+
+// @ts-ignore CSS Module
+import css from './page.module';
+
+interface Props {
+ page: CanvasRenderedPage;
+}
+
+export const Page = (props: Props) => {
+ const [{ workpad }] = useExternalEmbedState();
+ if (!workpad) {
+ return null;
+ }
+
+ const { height, width, id } = workpad;
+ const { elements, style } = props.page;
+
+ const output = elements.map((element: CanvasRenderedElement, index) => (
+
+ ));
+
+ return (
+
+ {output}
+
+ );
+};
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.module.scss b/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.module.scss
new file mode 100644
index 0000000000000..8d0851c4e2a8f
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.module.scss
@@ -0,0 +1,19 @@
+:global .kbnCanvas :local .root,
+:global .kbnCanvas :local .render {
+ height: 100%;
+ width: 100%;
+}
+
+.container {
+ composes: canvas__element from global;
+ composes: canvasElement from global;
+}
+
+.content {
+ composes: canvasElement__content from global;
+}
+
+.renderContainer {
+ composes: canvasWorkpad--element_render from global;
+ composes: canvasRenderEl from global;
+}
diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.tsx
new file mode 100644
index 0000000000000..2a415d71ec1e1
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/external_runtime/components/rendered_element.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+// @ts-ignore Untyped library
+import Style from 'style-it';
+// @ts-ignore Untyped local
+import { Positionable } from '../../public/components/positionable/positionable';
+// @ts-ignore Untyped local
+import { elementToShape } from '../../public/components/workpad_page/utils';
+import { CanvasRenderedElement } from '../types';
+import { ExternalEmbedContext } from '../context';
+
+// @ts-ignore CSS Module
+import css from './rendered_element.module';
+
+interface Props {
+ element: CanvasRenderedElement;
+ number?: number;
+}
+
+/**
+ * A Rendered Element is different from an Element added to a Canvas Workpad. A
+ * Rendered Element has actually be evaluated already to gather any data from
+ * datasources, and is just a simple expression to render the result. This
+ * component renders that "transient" element state.
+ */
+export class RenderedElement extends React.PureComponent {
+ static contextType = ExternalEmbedContext;
+ protected ref: React.RefObject;
+
+ constructor(props: Props) {
+ super(props);
+ this.ref = React.createRef();
+ }
+
+ componentDidMount() {
+ const [{ renderersRegistry }] = this.context;
+ const { element } = this.props;
+ const { expressionRenderable } = element;
+ const { value } = expressionRenderable;
+ const { as } = value;
+ const fn = renderersRegistry.get(as);
+
+ try {
+ // TODO: These are stubbed, but may need implementation.
+ fn.render(this.ref.current, value.value, {
+ done: () => {},
+ onDestroy: () => {},
+ onResize: () => {},
+ setFilter: () => {},
+ getFilter: () => {},
+ });
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.log(e.message);
+ }
+ }
+
+ render() {
+ const { element, number } = this.props;
+ const shape = elementToShape(element, number || 1);
+ const { id, expressionRenderable, position } = element;
+ const { value } = expressionRenderable;
+ const { as, css: elementCSS, containerStyle } = value;
+ const { height, width } = position;
+
+ return (
+
+
+ {Style.it(
+ elementCSS,
+
+ )}
+