[Observability] Creates "Add data" links in all Observability app headers (#69016)
* Add data options to all Observability app headers * Updated failing snapshot * [Uptime] Update snapshot Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
9f9a5c69f9
commit
f27162a213
|
@ -4,8 +4,14 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
|
import {
|
||||||
|
EuiFlexGroup,
|
||||||
|
EuiFlexItem,
|
||||||
|
EuiTitle,
|
||||||
|
EuiButtonEmpty,
|
||||||
|
} from '@elastic/eui';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
import { ApmHeader } from '../../shared/ApmHeader';
|
import { ApmHeader } from '../../shared/ApmHeader';
|
||||||
import { ServiceDetailTabs } from './ServiceDetailTabs';
|
import { ServiceDetailTabs } from './ServiceDetailTabs';
|
||||||
import { ServiceIntegrations } from './ServiceIntegrations';
|
import { ServiceIntegrations } from './ServiceIntegrations';
|
||||||
|
@ -33,6 +39,12 @@ export function ServiceDetails({ tab }: Props) {
|
||||||
const isAlertingAvailable =
|
const isAlertingAvailable =
|
||||||
isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
|
isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
|
||||||
|
|
||||||
|
const { core } = useApmPluginContext();
|
||||||
|
|
||||||
|
const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
|
||||||
|
defaultMessage: 'Add data',
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ApmHeader>
|
<ApmHeader>
|
||||||
|
@ -53,6 +65,16 @@ export function ServiceDetails({ tab }: Props) {
|
||||||
/>
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
)}
|
)}
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiButtonEmpty
|
||||||
|
href={core.http.basePath.prepend('/app/home#/tutorial/apm')}
|
||||||
|
size="s"
|
||||||
|
color="primary"
|
||||||
|
iconType="plusInCircle"
|
||||||
|
>
|
||||||
|
{ADD_DATA_LABEL}
|
||||||
|
</EuiButtonEmpty>
|
||||||
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
</ApmHeader>
|
</ApmHeader>
|
||||||
|
|
||||||
|
|
|
@ -114,7 +114,7 @@ NodeList [
|
||||||
<span
|
<span
|
||||||
class="euiButton__text"
|
class="euiButton__text"
|
||||||
>
|
>
|
||||||
Setup Instructions
|
Setup instructions
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -12,10 +12,14 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
|
||||||
const SETUP_INSTRUCTIONS_LABEL = i18n.translate(
|
const SETUP_INSTRUCTIONS_LABEL = i18n.translate(
|
||||||
'xpack.apm.setupInstructionsButtonLabel',
|
'xpack.apm.setupInstructionsButtonLabel',
|
||||||
{
|
{
|
||||||
defaultMessage: 'Setup Instructions',
|
defaultMessage: 'Setup instructions',
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
|
||||||
|
defaultMessage: 'Add data',
|
||||||
|
});
|
||||||
|
|
||||||
// renders a filled button or a link as a kibana link to setup instructions
|
// renders a filled button or a link as a kibana link to setup instructions
|
||||||
export function SetupInstructionsLink({
|
export function SetupInstructionsLink({
|
||||||
buttonFill = false,
|
buttonFill = false,
|
||||||
|
@ -30,8 +34,8 @@ export function SetupInstructionsLink({
|
||||||
{SETUP_INSTRUCTIONS_LABEL}
|
{SETUP_INSTRUCTIONS_LABEL}
|
||||||
</EuiButton>
|
</EuiButton>
|
||||||
) : (
|
) : (
|
||||||
<EuiButtonEmpty size="s" color="primary" iconType="help">
|
<EuiButtonEmpty size="s" color="primary" iconType="plusInCircle">
|
||||||
{SETUP_INSTRUCTIONS_LABEL}
|
{ADD_DATA_LABEL}
|
||||||
</EuiButtonEmpty>
|
</EuiButtonEmpty>
|
||||||
)}
|
)}
|
||||||
</EuiLink>
|
</EuiLink>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Route, Switch } from 'react-router-dom';
|
import { Route, Switch } from 'react-router-dom';
|
||||||
|
@ -32,6 +32,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
|
||||||
|
|
||||||
const { initialize } = useLogSourceContext();
|
const { initialize } = useLogSourceContext();
|
||||||
|
|
||||||
|
const kibana = useKibana();
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initialize();
|
initialize();
|
||||||
});
|
});
|
||||||
|
@ -88,6 +90,16 @@ export const LogsPageContent: React.FunctionComponent = () => {
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<AlertDropdown />
|
<AlertDropdown />
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiButtonEmpty
|
||||||
|
href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
|
||||||
|
size="s"
|
||||||
|
color="primary"
|
||||||
|
iconType="plusInCircle"
|
||||||
|
>
|
||||||
|
{ADD_DATA_LABEL}
|
||||||
|
</EuiButtonEmpty>
|
||||||
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
</AppNavigation>
|
</AppNavigation>
|
||||||
<Switch>
|
<Switch>
|
||||||
|
@ -123,3 +135,7 @@ const settingsTabTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle
|
||||||
});
|
});
|
||||||
|
|
||||||
const feedbackLinkUrl = 'https://discuss.elastic.co/c/logs';
|
const feedbackLinkUrl = 'https://discuss.elastic.co/c/logs';
|
||||||
|
|
||||||
|
const ADD_DATA_LABEL = i18n.translate('xpack.infra.logsHeaderAddDataButtonLabel', {
|
||||||
|
defaultMessage: 'Add data',
|
||||||
|
});
|
||||||
|
|
|
@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
|
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||||
|
|
||||||
import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
|
import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui';
|
||||||
import { DocumentTitle } from '../../components/document_title';
|
import { DocumentTitle } from '../../components/document_title';
|
||||||
import { HelpCenterContent } from '../../components/help_center_content';
|
import { HelpCenterContent } from '../../components/help_center_content';
|
||||||
import { RoutedTabs } from '../../components/navigation/routed_tabs';
|
import { RoutedTabs } from '../../components/navigation/routed_tabs';
|
||||||
|
@ -32,9 +32,15 @@ import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters
|
||||||
import { InventoryAlertDropdown } from '../../components/alerting/inventory/alert_dropdown';
|
import { InventoryAlertDropdown } from '../../components/alerting/inventory/alert_dropdown';
|
||||||
import { MetricsAlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';
|
import { MetricsAlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';
|
||||||
|
|
||||||
|
const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLabel', {
|
||||||
|
defaultMessage: 'Add data',
|
||||||
|
});
|
||||||
|
|
||||||
export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
||||||
const uiCapabilities = useKibana().services.application?.capabilities;
|
const uiCapabilities = useKibana().services.application?.capabilities;
|
||||||
|
|
||||||
|
const kibana = useKibana();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiErrorBoundary>
|
<EuiErrorBoundary>
|
||||||
<Source.Provider sourceId="default">
|
<Source.Provider sourceId="default">
|
||||||
|
@ -102,6 +108,18 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
||||||
<Route path={'/explorer'} component={MetricsAlertDropdown} />
|
<Route path={'/explorer'} component={MetricsAlertDropdown} />
|
||||||
<Route path={'/inventory'} component={InventoryAlertDropdown} />
|
<Route path={'/inventory'} component={InventoryAlertDropdown} />
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiButtonEmpty
|
||||||
|
href={kibana.services?.application?.getUrlForApp(
|
||||||
|
'/home#/tutorial_directory/metrics'
|
||||||
|
)}
|
||||||
|
size="s"
|
||||||
|
color="primary"
|
||||||
|
iconType="plusInCircle"
|
||||||
|
>
|
||||||
|
{ADD_DATA_LABEL}
|
||||||
|
</EuiButtonEmpty>
|
||||||
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
</AppNavigation>
|
</AppNavigation>
|
||||||
|
|
||||||
|
|
|
@ -104,6 +104,29 @@ Array [
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="euiButtonEmpty__content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
class="euiButtonEmpty__icon"
|
||||||
|
data-euiicon-type="plusInCircle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="euiButtonEmpty__text"
|
||||||
|
>
|
||||||
|
Add data
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -12,6 +12,7 @@ import styled from 'styled-components';
|
||||||
import { UptimeDatePicker } from '../components/common/uptime_date_picker';
|
import { UptimeDatePicker } from '../components/common/uptime_date_picker';
|
||||||
import { SETTINGS_ROUTE } from '../../common/constants';
|
import { SETTINGS_ROUTE } from '../../common/constants';
|
||||||
import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
|
import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
|
||||||
|
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
|
||||||
|
|
||||||
interface PageHeaderProps {
|
interface PageHeaderProps {
|
||||||
headingText: string | JSX.Element;
|
headingText: string | JSX.Element;
|
||||||
|
@ -23,6 +24,10 @@ const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink
|
||||||
defaultMessage: 'Settings',
|
defaultMessage: 'Settings',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
|
||||||
|
defaultMessage: 'Add data',
|
||||||
|
});
|
||||||
|
|
||||||
const StyledPicker = styled(EuiFlexItem)`
|
const StyledPicker = styled(EuiFlexItem)`
|
||||||
&&& {
|
&&& {
|
||||||
@media only screen and (max-width: 1024px) and (min-width: 868px) {
|
@media only screen and (max-width: 1024px) and (min-width: 868px) {
|
||||||
|
@ -52,6 +57,8 @@ export const PageHeader = React.memo(
|
||||||
</StyledPicker>
|
</StyledPicker>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
|
const kibana = useKibana();
|
||||||
|
|
||||||
const extraLinkComponents = !extraLinks ? null : (
|
const extraLinkComponents = !extraLinks ? null : (
|
||||||
<EuiFlexGroup alignItems="flexEnd" responsive={false}>
|
<EuiFlexGroup alignItems="flexEnd" responsive={false}>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
|
@ -64,6 +71,15 @@ export const PageHeader = React.memo(
|
||||||
</EuiButtonEmpty>
|
</EuiButtonEmpty>
|
||||||
</Link>
|
</Link>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiButtonEmpty
|
||||||
|
href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
|
||||||
|
color="primary"
|
||||||
|
iconType="plusInCircle"
|
||||||
|
>
|
||||||
|
{ADD_DATA_LABEL}
|
||||||
|
</EuiButtonEmpty>
|
||||||
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue