github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Observability] Updating header menu links across Observability apps (#101472) (#102337)

Browse source 
* [Observability] POC aligning menu links across apps

* [APM] Changed guttersize

* [APM] Replace placeholder button

* [Uptime] Remove icon from Settings header link

* [APM] Reordered anomaly detection and alerts

* [Logs] Remove icon from settings and change guttersize

* [Metrics] Remove icon from settings and change guttersize

* [Logs] Change button style of `isStreaming` state

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Casper Hübertz <casper@elastic.co>
This commit is contained in:
Kibana Machine 2021-06-16 10:43:35 -04:00 • committed by GitHub
parent 0db70beffe
commit 0adf3b5ff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 61 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

21
x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
View file

@ -55,26 +55,43 @@ export function UXActionMenu({
http?.basePath.get()
);
const kibana = useKibana();
return (
<HeaderMenuPortal
setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
>
<EuiFlexGroup
alignItems="flexEnd"
alignItems="center"
gutterSize="s"
responsive={false}
style={{ paddingRight: 20 }}
>
<EuiFlexItem>
<EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
<EuiButtonEmpty
size="xs"
color="text"
href={uxExploratoryViewLink}
color="primary"
iconType="visBarVerticalStacked"
>
{ANALYZE_DATA}
</EuiButtonEmpty>
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem>
<EuiButtonEmpty
iconType="indexOpen"
iconSide="left"
href={kibana.services?.application?.getUrlForApp(
'/home#/tutorial/apm'
)}
>
{i18n.translate('xpack.apm.addDataButtonLabel', {
defaultMessage: 'Add data',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</HeaderMenuPortal>
);

3
x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
View file

@ -66,7 +66,8 @@ export function AlertingPopoverAndFlyout({
const button = (
<EuiHeaderLink
color="primary"
size="xs"
color="text"
iconType="arrowDown"
iconSide="right"
onClick={() => setPopoverOpen((prevState) => !prevState)}

9
x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
View file

@ -42,14 +42,15 @@ export function AnomalyDetectionSetupLink() {
return (
<EuiHeaderLink
color="primary"
size="xs"
color="text"
href={getAPMHref({ basePath, path: '/settings/anomaly-detection' })}
style={{ whiteSpace: 'nowrap' }}
>
{canGetJobs && hasValidLicense ? (
<MissingJobsAlert environment={environment} />
) : (
<EuiIcon type="inspect" color="primary" />
<EuiIcon size="s" type="inspect" color="text" />
)}
<span style={{ marginInlineStart: units.half }}>
{ANOMALY_DETECTION_LINK_LABEL}
@ -64,7 +65,7 @@ export function MissingJobsAlert({ environment }: { environment?: string }) {
anomalyDetectionJobsStatus,
} = useAnomalyDetectionJobsContext();
const defaultIcon = <EuiIcon type="inspect" color="primary" />;
const defaultIcon = <EuiIcon size="s" type="inspect" color="text" />;
if (anomalyDetectionJobsStatus === FETCH_STATUS.LOADING) {
return <EuiLoadingSpinner />;
@ -92,7 +93,7 @@ export function MissingJobsAlert({ environment }: { environment?: string }) {
return (
<EuiToolTip position="bottom" content={getTooltipText(environment)}>
<EuiIcon type="alert" color="danger" />
<EuiIcon size="s" type="alert" color="danger" />
</EuiToolTip>
);
}

10
x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
View file

@ -40,16 +40,13 @@ export function ApmHeaderActionMenu() {
}
return (
<EuiHeaderLinks>
<EuiHeaderLink
color="primary"
href={apmHref('/settings')}
iconType="gear"
>
<EuiHeaderLinks gutterSize="xs">
<EuiHeaderLink size="xs" color="text" href={apmHref('/settings')}>
{i18n.translate('xpack.apm.settingsLinkLabel', {
defaultMessage: 'Settings',
})}
</EuiHeaderLink>
{canAccessML && <AnomalyDetectionSetupLink />}
{isAlertingAvailable && (
<AlertingPopoverAndFlyout
basePath={basePath}
@ -59,7 +56,6 @@ export function ApmHeaderActionMenu() {
includeTransactionDuration={serviceName !== undefined}
/>
)}
{canAccessML && <AnomalyDetectionSetupLink />}
<EuiHeaderLink
color="primary"
href={kibanaHref('/app/home#/tutorial/apm')}

8
x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
View file

@ -134,7 +134,13 @@ export const MetricsAlertDropdown = () => {
panelPaddingSize="none"
anchorPosition="downLeft"
button={
<EuiButtonEmpty iconSide={'right'} iconType={'arrowDown'} onClick={openPopover}>
<EuiButtonEmpty
size="xs"
color="text"
iconSide={'right'}
iconType={'arrowDown'}
onClick={openPopover}
>
<FormattedMessage id="xpack.infra.alerting.alertsButton" defaultMessage="Alerts" />
</EuiButtonEmpty>
}

8
x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
View file

@ -83,7 +83,13 @@ export const AlertDropdown = () => {
<EuiPopover
panelPaddingSize="none"
button={
<EuiButtonEmpty iconSide={'right'} iconType={'arrowDown'} onClick={openPopover}>
<EuiButtonEmpty
size="xs"
color="text"
iconSide={'right'}
iconType={'arrowDown'}
onClick={openPopover}
>
<FormattedMessage id="xpack.infra.alerting.logs.alertsButton" defaultMessage="Alerts" />
</EuiButtonEmpty>
}

15
x-pack/plugins/infra/public/components/logging/log_datepicker.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useCallback } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiButtonEmpty } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiButton } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
interface LogDatepickerProps {
@ -49,24 +49,19 @@ export const LogDatepicker: React.FC<LogDatepickerProps> = ({
</EuiFlexItem>
<EuiFlexItem grow={false}>
{isStreaming ? (
<EuiButtonEmpty
color="primary"
iconType="pause"
iconSide="left"
onClick={onStopStreaming}
>
<EuiButton color="primary" iconType="pause" iconSide="left" onClick={onStopStreaming}>
<FormattedMessage
id="xpack.infra.logs.stopStreamingButtonLabel"
defaultMessage="Stop streaming"
/>
</EuiButtonEmpty>
</EuiButton>
) : (
<EuiButtonEmpty iconType="play" iconSide="left" onClick={onStartStreaming}>
<EuiButton color="primary" iconType="play" iconSide="left" onClick={onStartStreaming}>
<FormattedMessage
id="xpack.infra.logs.startStreamingButtonLabel"
defaultMessage="Stream live"
/>
</EuiButtonEmpty>
</EuiButton>
)}
</EuiFlexItem>
</EuiFlexGroup>

4
x-pack/plugins/infra/public/pages/logs/page_content.tsx
View file

@ -76,9 +76,9 @@ export const LogsPageContent: React.FunctionComponent = () => {
{setHeaderActionMenu && (
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
<EuiFlexGroup gutterSize={'none'} alignItems={'center'} responsive={false}>
<EuiFlexGroup gutterSize={'xs'} alignItems={'center'} responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="gear" {...settingsLinkProps}>
<EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
{settingsTabTitle}
</EuiButtonEmpty>
</EuiFlexItem>

4
x-pack/plugins/infra/public/pages/metrics/index.tsx
View file

@ -84,9 +84,9 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
{setHeaderActionMenu && (
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
<EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
<EuiFlexGroup alignItems="center" gutterSize={'xs'} responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="gear" {...settingsLinkProps}>
<EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
{settingsTabTitle}
</EuiButtonEmpty>
</EuiFlexItem>

2
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
View file

@ -51,6 +51,8 @@ export const AnomalyDetectionFlyout = () => {
return (
<>
<EuiButtonEmpty
size="xs"
color="text"
iconSide={'left'}
iconType={'inspect'}
onClick={openFlyout}

9
x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
View file

@ -49,19 +49,19 @@ export function ActionMenuContent(): React.ReactElement {
);
return (
<EuiHeaderLinks>
<EuiHeaderLinks gutterSize="xs">
<EuiHeaderSectionItem>
<EuiButtonEmpty
size="xs"
aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {
defaultMessage: 'Navigate to the Uptime settings page',
})}
color="primary"
color="text"
data-test-subj="settings-page-link"
href={history.createHref({
pathname: SETTINGS_ROUTE,
search: stringifyUrlParams(params, true),
})}
iconType="gear"
>
<FormattedMessage id="xpack.uptime.page_header.settingsLink" defaultMessage="Settings" />
</EuiButtonEmpty>
@ -72,12 +72,13 @@ export function ActionMenuContent(): React.ReactElement {
<EuiHeaderSectionItem>
<EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
<EuiButtonEmpty
size="xs"
aria-label={i18n.translate('xpack.uptime.page_header.analyzeData.label', {
defaultMessage:
'Navigate to the "Analyze Data" view to visualize Synthetics/User data',
})}
href={syntheticExploratoryViewLink}
color="primary"
color="text"
iconType="visBarVerticalStacked"
>
{ANALYZE_DATA}

2
x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
View file

@ -124,6 +124,8 @@ export const ToggleAlertFlyoutButtonComponent: React.FC<Props> = ({
<EuiPopover
button={
<EuiButtonEmpty
size="xs"
color="text"
aria-label={ToggleFlyoutTranslations.toggleButtonAriaLabel}
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
iconType="arrowDown"