Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Observability] Creates "Add data" links in all Observability app headers #69016

Merged
merged 10 commits into from
Jun 18, 2020
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@
* 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 { i18n } from '@kbn/i18n';
import { ApmHeader } from '../../shared/ApmHeader';
import { ServiceDetailTabs } from './ServiceDetailTabs';
import { ServiceIntegrations } from './ServiceIntegrations';
Expand Down Expand Up @@ -33,6 +39,12 @@ export function ServiceDetails({ tab }: Props) {
const isAlertingAvailable =
isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);

const { core } = useApmPluginContext();

const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
defaultMessage: 'Add data',
});

return (
<div>
<ApmHeader>
Expand All @@ -53,6 +65,16 @@ export function ServiceDetails({ tab }: Props) {
/>
</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>
</ApmHeader>

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,14 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
const SETUP_INSTRUCTIONS_LABEL = i18n.translate(
'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
export function SetupInstructionsLink({
buttonFill = false,
Expand All @@ -30,8 +34,8 @@ export function SetupInstructionsLink({
{SETUP_INSTRUCTIONS_LABEL}
</EuiButton>
) : (
<EuiButtonEmpty size="s" color="primary" iconType="help">
{SETUP_INSTRUCTIONS_LABEL}
<EuiButtonEmpty size="s" color="primary" iconType="plusInCircle">
{ADD_DATA_LABEL}
</EuiButtonEmpty>
)}
</EuiLink>
Expand Down
16 changes: 15 additions & 1 deletion x-pack/plugins/infra/public/pages/logs/page_content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 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 React from 'react';
import { Route, Switch } from 'react-router-dom';
Expand Down Expand Up @@ -32,6 +32,10 @@ export const LogsPageContent: React.FunctionComponent = () => {

const { initialize } = useLogSourceContext();

const ADD_DATA_LABEL = i18n.translate('xpack.logs.addDataButtonLabel', {
defaultMessage: 'Add data',
});

useMount(() => {
initialize();
});
Expand Down Expand Up @@ -88,6 +92,16 @@ export const LogsPageContent: React.FunctionComponent = () => {
<EuiFlexItem grow={false}>
<AlertDropdown />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href="/app/home#/tutorial_directory/logging"
size="s"
color="primary"
iconType="plusInCircle"
>
{ADD_DATA_LABEL}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</AppNavigation>
<Switch>
Expand Down
16 changes: 15 additions & 1 deletion x-pack/plugins/infra/public/pages/metrics/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
import React from 'react';
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 { HelpCenterContent } from '../../components/help_center_content';
import { RoutedTabs } from '../../components/navigation/routed_tabs';
Expand All @@ -32,6 +32,10 @@ import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters
import { InventoryAlertDropdown } from '../../components/alerting/inventory/alert_dropdown';
import { MetricsAlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';

const ADD_DATA_LABEL = i18n.translate('xpack.metrics.addDataButtonLabel', {
defaultMessage: 'Add data',
});

export const InfrastructurePage = ({ match }: RouteComponentProps) => {
const uiCapabilities = useKibana().services.application?.capabilities;

Expand Down Expand Up @@ -102,6 +106,16 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
<Route path={'/explorer'} component={MetricsAlertDropdown} />
<Route path={'/inventory'} component={InventoryAlertDropdown} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href="/app/home#/tutorial_directory/metrics"
size="s"
color="primary"
iconType="plusInCircle"
>
{ADD_DATA_LABEL}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</AppNavigation>

Expand Down
13 changes: 13 additions & 0 deletions x-pack/plugins/uptime/public/pages/page_header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink
defaultMessage: 'Settings',
});

const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
defaultMessage: 'Add data',
});

const StyledPicker = styled(EuiFlexItem)`
&&& {
@media only screen and (max-width: 1024px) and (min-width: 868px) {
Expand Down Expand Up @@ -59,6 +63,15 @@ export const PageHeader = React.memo(
</EuiButtonEmpty>
</Link>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href="app/home#/tutorial/uptimeMonitors"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
href="app/home#/tutorial/uptimeMonitors"
href="/app/home#/tutorial/uptimeMonitors"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@justinkambic Thanks for the catch - I believe this is fixed in cfecae6#diff-d8ac796cb07610d1e13c47b996bfcbecR71

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@formgeist this is still sending me to a bad url like /app/app/home#/tutorial/uptimeMonitors.

I think if remove the app from the getUrlForApp call, we will end up with the correct URL.

href={kibana.services?.application?.getUrlForApp('home#/tutorial/uptimeMonitors')}

color="primary"
iconType="plusInCircle"
>
{ADD_DATA_LABEL}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
);

Expand Down