[Bug] Services Data Picker, UI Fixes

public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap

@@ -385,11 +385,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
  >
  <EuiFlexItem
- className="metrics-search-bar-datepicker"
  grow={false}
  >
  <div
- className="euiFlexItem euiFlexItem--flexGrowZero metrics-search-bar-datepicker"
+ className="euiFlexItem euiFlexItem--flexGrowZero"
  >
  <EuiCompressedSuperDatePicker
  commonlyUsedRanges={
@@ -445,17 +444,17 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
  onTimeChange={[Function]}
  recentlyUsedRanges={Array []}
  refreshInterval={0}
- showUpdateButton={true}
+ showUpdateButton={false}
  start="now-1d"
  timeFormat="HH:mm"
  >
  <EuiFlexGroup
- className="euiSuperDatePicker__flexWrapper"
+ className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
  gutterSize="s"
  responsive={false}
  >
  <div
- className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+ className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
  >
  <EuiFlexItem>
  <div
@@ -768,153 +767,70 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
  </EuiFormControlLayout>
  </div>
  </EuiFlexItem>
- <EuiFlexItem
- grow={false}
- >
- <div
- className="euiFlexItem euiFlexItem--flexGrowZero"
- >
- <EuiSuperUpdateButton
- compressed={true}
- data-test-subj="superDatePickerApplyTimeButton"
- isDisabled={false}
- isLoading={false}
- needsUpdate={false}
- onClick={[Function]}
- showTooltip={true}
- >
- <EuiToolTip
- delay="regular"
- position="bottom"
- >
- <span
- className="euiToolTipAnchor"
- onKeyUp={[Function]}
- onMouseOut={[Function]}
- onMouseOver={[Function]}
- >
- <EuiButton
- className="euiSuperUpdateButton"
- color="primary"
- data-test-subj="superDatePickerApplyTimeButton"
- iconType="refresh"
- isDisabled={false}
- isLoading={false}
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- size="s"
- textProps={
- Object {
- "className": "euiSuperUpdateButton__text",
- }
- }
- >
- <EuiButtonDisplay
- baseClassName="euiButton"
- className="euiSuperUpdateButton"
- color="primary"
- data-test-subj="superDatePickerApplyTimeButton"
- disabled={false}
- element="button"
- iconType="refresh"
- isDisabled={false}
- isLoading={false}
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- size="s"
- textProps={
- Object {
- "className": "euiSuperUpdateButton__text",
- }
- }
- type="button"
- >
- <button
- className="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
- data-test-subj="superDatePickerApplyTimeButton"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- style={
- Object {
- "minWidth": undefined,
- }
- }
- type="button"
- >
- <EuiButtonContent
- className="euiButton__content"
- iconGap="m"
- iconSide="left"
- iconType="refresh"
- isLoading={false}
- textProps={
- Object {
- "className": "euiButton__text euiSuperUpdateButton__text",
- }
- }
- >
- <span
- className="euiButtonContent euiButton__content"
- >
- <EuiIcon
- className="euiButtonContent__icon"
- color="inherit"
- size="m"
- type="refresh"
- >
- <EuiIconBeaker
- aria-hidden={true}
- className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
- focusable="false"
- role="img"
- style={null}
- >
- <svg
- aria-hidden={true}
- className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
- focusable="false"
- height={16}
- role="img"
- style={null}
- viewBox="0 0 16 16"
- width={16}
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
- />
- </svg>
- </EuiIconBeaker>
- </EuiIcon>
- <span
- className="euiButton__text euiSuperUpdateButton__text"
- >
- <EuiI18n
- default="Refresh"
- token="euiSuperUpdateButton.refreshButtonLabel"
- >
- Refresh
- </EuiI18n>
- </span>
- </span>
- </EuiButtonContent>
- </button>
- </EuiButtonDisplay>
- </EuiButton>
- </span>
- </EuiToolTip>
- </EuiSuperUpdateButton>
- </div>
- </EuiFlexItem>
  </div>
  </EuiFlexGroup>
  </EuiCompressedSuperDatePicker>
  </div>
  </EuiFlexItem>
+ <EuiFlexItem
+ grow={false}
+ >
+ <div
+ className="euiFlexItem euiFlexItem--flexGrowZero"
+ >
+ <EuiButtonIcon
+ aria-label="Refresh"
+ data-click-metric-element="metrics.refresh_button"
+ data-test-subj="superDatePickerApplyTimeButton"
+ display="base"
+ iconType="refresh"
+ onClick={[Function]}
+ size="s"
+ >
+ <button
+ aria-label="Refresh"
+ className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
+ data-click-metric-element="metrics.refresh_button"
+ data-test-subj="superDatePickerApplyTimeButton"
+ disabled={false}
+ onClick={[Function]}
+ type="button"
+ >
+ <EuiIcon
+ aria-hidden="true"
+ className="euiButtonIcon__icon"
+ color="inherit"
+ size="m"
+ type="refresh"
+ >
+ <EuiIconBeaker
+ aria-hidden={true}
+ className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ role="img"
+ style={null}
+ >
+ <svg
+ aria-hidden={true}
+ className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height={16}
+ role="img"
+ style={null}
+ viewBox="0 0 16 16"
+ width={16}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+ />
+ </svg>
+ </EuiIconBeaker>
+ </EuiIcon>
+ </button>
+ </EuiButtonIcon>
+ </div>
+ </EuiFlexItem>
  <EuiFlexItem
  grow={false}
  >

public/components/metrics/top_menu/top_menu.tsx

@@ -4,6 +4,7 @@
  */
 
 import {
+ EuiButtonIcon,
  EuiCompressedFieldText,
  EuiCompressedSelect,
  EuiCompressedSuperDatePicker,
@@ -52,13 +53,25 @@ export const TopMenu = () => {
  </EuiFlexItem>
  <EuiFlexItem grow={false}>
  <EuiFlexGroup gutterSize="s">
- <EuiFlexItem grow={false} className="metrics-search-bar-datepicker">
+ <EuiFlexItem grow={false}>
  <EuiCompressedSuperDatePicker
  dateFormat={uiSettingsService.get('dateFormat')}
  start={dateSpanFilter.start}
  end={dateSpanFilter.end}
  onTimeChange={(dateSpan) => dispatch(setDateSpan(dateSpan))}
  recentlyUsedRanges={dateSpanFilter.recentlyUsedRanges}
+ showUpdateButton={false}
+ />
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonIcon
+ iconType="refresh"
+ aria-label="Refresh"
+ display="base"
+ onClick={() => dispatch(setDateSpan(dateSpanFilter))}
+ size="s"
+ data-test-subj="superDatePickerApplyTimeButton"
+ data-click-metric-element="metrics.refresh_button"
  />
  </EuiFlexItem>
  <EuiFlexItem grow={false}>

public/components/overview/components/dashboard_controls.tsx

@@ -7,6 +7,7 @@ import {
  EuiButtonIcon,
  EuiFlexGroup,
  EuiFlexItem,
+ EuiIcon,
  EuiLink,
  EuiSuperDatePicker,
  EuiText,
@@ -15,6 +16,7 @@ import {
 import { OnTimeChangeProps } from '@opensearch-project/oui/src/eui_components/date_picker/super_date_picker/super_date_picker';
 import React from 'react';
 import { useObservable } from 'react-use';
+import { FormattedMessage } from '@osd/i18n/react';
 import { coreRefs } from '../../../framework/core_refs';
 import { HOME_CONTENT_AREAS } from '../../../plugin_helpers/plugin_overview';
 import { redirectToDashboards } from '../../getting_started/components/utils';
@@ -48,15 +50,29 @@ export function DashboardControls() {
  };
 
  return isDashboardSelected ? (
- <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
- <EuiFlexItem grow={true}>
- <EuiText size="s" className="obsOverviewDashboardHeader">
- <p>
- <EuiLink onClick={() => redirectToDashboards('/view/' + dashboardState?.dashboardId)}>
- {dashboardState?.dashboardTitle}
- </EuiLink>
- </p>
- </EuiText>
+ <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
+ <EuiFlexItem grow={false}>
+ <EuiFlexGroup alignItems="center" gutterSize="s">
+ <EuiFlexItem grow={false}>
+ <EuiText size="m" className="obsOverviewDashboardHeader">
+ <h4>{dashboardState?.dashboardTitle}</h4>
+ </EuiText>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiToolTip
+ content={
+ <FormattedMessage id="dashboard.popout.tooltip" defaultMessage="Go to dashboard" />
+ }
+ >
+ <EuiLink
+ onClick={() => redirectToDashboards('/view/' + dashboardState?.dashboardId)}
+ external={true}
+ >
+ <EuiIcon type="popout" />
+ </EuiLink>
+ </EuiToolTip>
+ </EuiFlexItem>
+ </EuiFlexGroup>
  </EuiFlexItem>
  <EuiFlexItem grow={false}>
  <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">

public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`Search bar components renders date picker 1`] = `
  },
  ]
  }
- compressed={false}
+ compressed={true}
  dateFormat=""
  end="now"
  isAutoRefreshOnly={false}
@@ -73,7 +73,7 @@ exports[`Search bar components renders date picker 1`] = `
  >
  <EuiFormControlLayout
  className="euiSuperDatePicker"
- compressed={false}
+ compressed={true}
  isDisabled={false}
  prepend={
  <EuiQuickSelectPopover
@@ -134,7 +134,7 @@ exports[`Search bar components renders date picker 1`] = `
  }
  >
  <div
- className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+ className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
  >
  <EuiQuickSelectPopover
  applyTime={[Function]}
@@ -351,7 +351,7 @@ exports[`Search bar components renders date picker 1`] = `
  className="euiDatePickerRange euiDatePickerRange--inGroup"
  >
  <button
- className="euiSuperDatePicker__prettyFormat"
+ className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
  data-test-subj="superDatePickerShowDatesButton"
  disabled={false}
  onClick={[Function]}
@@ -371,7 +371,7 @@ exports[`Search bar components renders date picker 1`] = `
  </div>
  </EuiDatePickerRange>
  <EuiFormControlLayoutIcons
- compressed={false}
+ compressed={true}
  />
  </div>
  </div>

public/components/trace_analytics/components/common/search_bar.tsx

@@ -24,6 +24,7 @@ export const renderDatePicker = (
 ) => {
  return (
  <EuiSuperDatePicker
+ compressed
  start={startTime}
  end={endTime}
  dateFormat={uiSettingsService.get('dateFormat')}

public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap

@@ -67,7 +67,7 @@ exports[`Service view component renders service view 1`] = `
  },
  ]
  }
- compressed={false}
+ compressed={true}
  dateFormat=""
  end="now"
  isAutoRefreshOnly={false}