Skip to content

Commit

Permalink
[Bug] Services Data Picker, UI Fixes (#2177)
Browse files Browse the repository at this point in the history 
* bug fix services data picker, ui fixes

Signed-off-by: Adam Tackett <[email protected]>

* add tooltip to the re-direct

Signed-off-by: Adam Tackett <[email protected]>

* fix services view page revert

Signed-off-by: Adam Tackett <[email protected]>

* fix services view page revert

Signed-off-by: Adam Tackett <[email protected]>

* fix services view

Signed-off-by: Adam Tackett <[email protected]>

* applied comments

Signed-off-by: Adam Tackett <[email protected]>

* fix traces bug

Signed-off-by: Adam Tackett <[email protected]>

* Fix bugs and add url redirection and testing

Signed-off-by: Adam Tackett <[email protected]>

* remove comment

Signed-off-by: Adam Tackett <[email protected]>

* address comments

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: Shenoy Pratik <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
Co-authored-by: Shenoy Pratik <[email protected]>
  • Loading branch information
@TackAdam @ps48
3 people authored Oct 5, 2024
1 parent 0884b42 commit cf01e52
Show file tree
Hide file tree
Showing 18 changed files with 630 additions and 328 deletions.
4 changes: 2 additions & 2 deletions common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@ export const observabilityMetricsTitle = 'Metrics';
export const observabilityMetricsPluginOrder = 5092;

export const observabilityTracesNewNavID = 'observability-traces-nav';
export const observabilityTracesNewNavURL = observabilityTracesNewNavID + '#/traces';
export const observabilityTracesNewNavURL = observabilityTracesNewNavID;
export const observabilityTracesID = 'observability-traces';
export const observabilityTracesTitle = 'Traces';
export const observabilityTracesPluginOrder = 5093;

export const observabilityServicesNewNavID = 'observability-services-nav';
export const observabilityServicesNewNavURL = observabilityServicesNewNavID + '#/services';
export const observabilityServicesNewNavURL = observabilityServicesNewNavID;
export const observabilityServicesID = 'observability-services';
export const observabilityServicesTitle = 'Services';
export const observabilityServicesPluginOrder = 5092;
Expand Down
210 changes: 63 additions & 147 deletions public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}
>
Expand Down
15 changes: 14 additions & 1 deletion public/components/metrics/top_menu/top_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import {
EuiButtonIcon,
EuiCompressedFieldText,
EuiCompressedSelect,
EuiCompressedSuperDatePicker,
Expand Down Expand Up @@ -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}>
Expand Down
8 changes: 4 additions & 4 deletions public/components/overview/components/card_configs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { i18n } from '@osd/i18n';
import {
observabilityGettingStartedID,
observabilityMetricsID,
observabilityTracesNewNavURL,
observabilityServicesNewNavURL,
observabilityTracesNewNavID,
observabilityServicesNewNavID,
alertingPluginID,
anomalyDetectionPluginID,
tutorialSampleDataPluginId,
Expand Down Expand Up @@ -82,7 +82,7 @@ const TRACES_CONFIG: GettingStartedConfig = {
}),
description: 'Analyze performance bottlenecks using event flow visualizations.',
footer: 'Traces',
url: observabilityTracesNewNavURL,
url: observabilityTracesNewNavID,
path: '#/',
};

Expand All @@ -94,7 +94,7 @@ const SERVICES_CONFIG: GettingStartedConfig = {
}),
description: 'Identify service performance issues with comprehensive monitoring and analysis.',
footer: 'Services',
url: observabilityServicesNewNavURL,
url: observabilityServicesNewNavID,
path: '#/',
};

Expand Down
37 changes: 28 additions & 9 deletions public/components/overview/components/dashboard_controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiSuperDatePicker,
EuiText,
Expand All @@ -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';
Expand Down Expand Up @@ -48,15 +50,32 @@ 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="observability.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">
Expand Down
Loading

0 comments on commit cf01e52

Please sign in to comment.