Skip to content

Commit cf01e52

Browse files
TackAdamAdam Tackettps48
authored
[Bug] Services Data Picker, UI Fixes (opensearch-project#2177)
* 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]>
1 parent 0884b42 commit cf01e52

File tree

18 files changed

+630
-328
lines changed

18 files changed

+630
-328
lines changed

‎common/constants/shared.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ export const observabilityMetricsTitle = 'Metrics';
6161
export const observabilityMetricsPluginOrder = 5092;
6262

6363
export const observabilityTracesNewNavID = 'observability-traces-nav';
64-
export const observabilityTracesNewNavURL = observabilityTracesNewNavID + '#/traces';
64+
export const observabilityTracesNewNavURL = observabilityTracesNewNavID;
6565
export const observabilityTracesID = 'observability-traces';
6666
export const observabilityTracesTitle = 'Traces';
6767
export const observabilityTracesPluginOrder = 5093;
6868

6969
export const observabilityServicesNewNavID = 'observability-services-nav';
70-
export const observabilityServicesNewNavURL = observabilityServicesNewNavID + '#/services';
70+
export const observabilityServicesNewNavURL = observabilityServicesNewNavID;
7171
export const observabilityServicesID = 'observability-services';
7272
export const observabilityServicesTitle = 'Services';
7373
export const observabilityServicesPluginOrder = 5092;

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

Lines changed: 63 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -385,11 +385,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
385385
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
386386
>
387387
<EuiFlexItem
388-
className="metrics-search-bar-datepicker"
389388
grow={false}
390389
>
391390
<div
392-
className="euiFlexItem euiFlexItem--flexGrowZero metrics-search-bar-datepicker"
391+
className="euiFlexItem euiFlexItem--flexGrowZero"
393392
>
394393
<EuiCompressedSuperDatePicker
395394
commonlyUsedRanges={
@@ -445,17 +444,17 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
445444
onTimeChange={[Function]}
446445
recentlyUsedRanges={Array []}
447446
refreshInterval={0}
448-
showUpdateButton={true}
447+
showUpdateButton={false}
449448
start="now-1d"
450449
timeFormat="HH:mm"
451450
>
452451
<EuiFlexGroup
453-
className="euiSuperDatePicker__flexWrapper"
452+
className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
454453
gutterSize="s"
455454
responsive={false}
456455
>
457456
<div
458-
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
457+
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
459458
>
460459
<EuiFlexItem>
461460
<div
@@ -768,153 +767,70 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
768767
</EuiFormControlLayout>
769768
</div>
770769
</EuiFlexItem>
771-
<EuiFlexItem
772-
grow={false}
773-
>
774-
<div
775-
className="euiFlexItem euiFlexItem--flexGrowZero"
776-
>
777-
<EuiSuperUpdateButton
778-
compressed={true}
779-
data-test-subj="superDatePickerApplyTimeButton"
780-
isDisabled={false}
781-
isLoading={false}
782-
needsUpdate={false}
783-
onClick={[Function]}
784-
showTooltip={true}
785-
>
786-
<EuiToolTip
787-
delay="regular"
788-
position="bottom"
789-
>
790-
<span
791-
className="euiToolTipAnchor"
792-
onKeyUp={[Function]}
793-
onMouseOut={[Function]}
794-
onMouseOver={[Function]}
795-
>
796-
<EuiButton
797-
className="euiSuperUpdateButton"
798-
color="primary"
799-
data-test-subj="superDatePickerApplyTimeButton"
800-
iconType="refresh"
801-
isDisabled={false}
802-
isLoading={false}
803-
onBlur={[Function]}
804-
onClick={[Function]}
805-
onFocus={[Function]}
806-
size="s"
807-
textProps={
808-
Object {
809-
"className": "euiSuperUpdateButton__text",
810-
}
811-
}
812-
>
813-
<EuiButtonDisplay
814-
baseClassName="euiButton"
815-
className="euiSuperUpdateButton"
816-
color="primary"
817-
data-test-subj="superDatePickerApplyTimeButton"
818-
disabled={false}
819-
element="button"
820-
iconType="refresh"
821-
isDisabled={false}
822-
isLoading={false}
823-
onBlur={[Function]}
824-
onClick={[Function]}
825-
onFocus={[Function]}
826-
size="s"
827-
textProps={
828-
Object {
829-
"className": "euiSuperUpdateButton__text",
830-
}
831-
}
832-
type="button"
833-
>
834-
<button
835-
className="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
836-
data-test-subj="superDatePickerApplyTimeButton"
837-
disabled={false}
838-
onBlur={[Function]}
839-
onClick={[Function]}
840-
onFocus={[Function]}
841-
style={
842-
Object {
843-
"minWidth": undefined,
844-
}
845-
}
846-
type="button"
847-
>
848-
<EuiButtonContent
849-
className="euiButton__content"
850-
iconGap="m"
851-
iconSide="left"
852-
iconType="refresh"
853-
isLoading={false}
854-
textProps={
855-
Object {
856-
"className": "euiButton__text euiSuperUpdateButton__text",
857-
}
858-
}
859-
>
860-
<span
861-
className="euiButtonContent euiButton__content"
862-
>
863-
<EuiIcon
864-
className="euiButtonContent__icon"
865-
color="inherit"
866-
size="m"
867-
type="refresh"
868-
>
869-
<EuiIconBeaker
870-
aria-hidden={true}
871-
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
872-
focusable="false"
873-
role="img"
874-
style={null}
875-
>
876-
<svg
877-
aria-hidden={true}
878-
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
879-
focusable="false"
880-
height={16}
881-
role="img"
882-
style={null}
883-
viewBox="0 0 16 16"
884-
width={16}
885-
xmlns="http://www.w3.org/2000/svg"
886-
>
887-
<path
888-
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"
889-
/>
890-
</svg>
891-
</EuiIconBeaker>
892-
</EuiIcon>
893-
<span
894-
className="euiButton__text euiSuperUpdateButton__text"
895-
>
896-
<EuiI18n
897-
default="Refresh"
898-
token="euiSuperUpdateButton.refreshButtonLabel"
899-
>
900-
Refresh
901-
</EuiI18n>
902-
</span>
903-
</span>
904-
</EuiButtonContent>
905-
</button>
906-
</EuiButtonDisplay>
907-
</EuiButton>
908-
</span>
909-
</EuiToolTip>
910-
</EuiSuperUpdateButton>
911-
</div>
912-
</EuiFlexItem>
913770
</div>
914771
</EuiFlexGroup>
915772
</EuiCompressedSuperDatePicker>
916773
</div>
917774
</EuiFlexItem>
775+
<EuiFlexItem
776+
grow={false}
777+
>
778+
<div
779+
className="euiFlexItem euiFlexItem--flexGrowZero"
780+
>
781+
<EuiButtonIcon
782+
aria-label="Refresh"
783+
data-click-metric-element="metrics.refresh_button"
784+
data-test-subj="superDatePickerApplyTimeButton"
785+
display="base"
786+
iconType="refresh"
787+
onClick={[Function]}
788+
size="s"
789+
>
790+
<button
791+
aria-label="Refresh"
792+
className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
793+
data-click-metric-element="metrics.refresh_button"
794+
data-test-subj="superDatePickerApplyTimeButton"
795+
disabled={false}
796+
onClick={[Function]}
797+
type="button"
798+
>
799+
<EuiIcon
800+
aria-hidden="true"
801+
className="euiButtonIcon__icon"
802+
color="inherit"
803+
size="m"
804+
type="refresh"
805+
>
806+
<EuiIconBeaker
807+
aria-hidden={true}
808+
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
809+
focusable="false"
810+
role="img"
811+
style={null}
812+
>
813+
<svg
814+
aria-hidden={true}
815+
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
816+
focusable="false"
817+
height={16}
818+
role="img"
819+
style={null}
820+
viewBox="0 0 16 16"
821+
width={16}
822+
xmlns="http://www.w3.org/2000/svg"
823+
>
824+
<path
825+
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"
826+
/>
827+
</svg>
828+
</EuiIconBeaker>
829+
</EuiIcon>
830+
</button>
831+
</EuiButtonIcon>
832+
</div>
833+
</EuiFlexItem>
918834
<EuiFlexItem
919835
grow={false}
920836
>

‎public/components/metrics/top_menu/top_menu.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import {
7+
EuiButtonIcon,
78
EuiCompressedFieldText,
89
EuiCompressedSelect,
910
EuiCompressedSuperDatePicker,
@@ -52,13 +53,25 @@ export const TopMenu = () => {
5253
</EuiFlexItem>
5354
<EuiFlexItem grow={false}>
5455
<EuiFlexGroup gutterSize="s">
55-
<EuiFlexItem grow={false} className="metrics-search-bar-datepicker">
56+
<EuiFlexItem grow={false}>
5657
<EuiCompressedSuperDatePicker
5758
dateFormat={uiSettingsService.get('dateFormat')}
5859
start={dateSpanFilter.start}
5960
end={dateSpanFilter.end}
6061
onTimeChange={(dateSpan) => dispatch(setDateSpan(dateSpan))}
6162
recentlyUsedRanges={dateSpanFilter.recentlyUsedRanges}
63+
showUpdateButton={false}
64+
/>
65+
</EuiFlexItem>
66+
<EuiFlexItem grow={false}>
67+
<EuiButtonIcon
68+
iconType="refresh"
69+
aria-label="Refresh"
70+
display="base"
71+
onClick={() => dispatch(setDateSpan(dateSpanFilter))}
72+
size="s"
73+
data-test-subj="superDatePickerApplyTimeButton"
74+
data-click-metric-element="metrics.refresh_button"
6275
/>
6376
</EuiFlexItem>
6477
<EuiFlexItem grow={false}>

‎public/components/overview/components/card_configs.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { i18n } from '@osd/i18n';
77
import {
88
observabilityGettingStartedID,
99
observabilityMetricsID,
10-
observabilityTracesNewNavURL,
11-
observabilityServicesNewNavURL,
10+
observabilityTracesNewNavID,
11+
observabilityServicesNewNavID,
1212
alertingPluginID,
1313
anomalyDetectionPluginID,
1414
tutorialSampleDataPluginId,
@@ -82,7 +82,7 @@ const TRACES_CONFIG: GettingStartedConfig = {
8282
}),
8383
description: 'Analyze performance bottlenecks using event flow visualizations.',
8484
footer: 'Traces',
85-
url: observabilityTracesNewNavURL,
85+
url: observabilityTracesNewNavID,
8686
path: '#/',
8787
};
8888

@@ -94,7 +94,7 @@ const SERVICES_CONFIG: GettingStartedConfig = {
9494
}),
9595
description: 'Identify service performance issues with comprehensive monitoring and analysis.',
9696
footer: 'Services',
97-
url: observabilityServicesNewNavURL,
97+
url: observabilityServicesNewNavID,
9898
path: '#/',
9999
};
100100

‎public/components/overview/components/dashboard_controls.tsx

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
EuiButtonIcon,
88
EuiFlexGroup,
99
EuiFlexItem,
10+
EuiIcon,
1011
EuiLink,
1112
EuiSuperDatePicker,
1213
EuiText,
@@ -15,6 +16,7 @@ import {
1516
import { OnTimeChangeProps } from '@opensearch-project/oui/src/eui_components/date_picker/super_date_picker/super_date_picker';
1617
import React from 'react';
1718
import { useObservable } from 'react-use';
19+
import { FormattedMessage } from '@osd/i18n/react';
1820
import { coreRefs } from '../../../framework/core_refs';
1921
import { HOME_CONTENT_AREAS } from '../../../plugin_helpers/plugin_overview';
2022
import { redirectToDashboards } from '../../getting_started/components/utils';
@@ -48,15 +50,32 @@ export function DashboardControls() {
4850
};
4951

5052
return isDashboardSelected ? (
51-
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
52-
<EuiFlexItem grow={true}>
53-
<EuiText size="s" className="obsOverviewDashboardHeader">
54-
<p>
55-
<EuiLink onClick={() => redirectToDashboards('/view/' + dashboardState?.dashboardId)}>
56-
{dashboardState?.dashboardTitle}
57-
</EuiLink>
58-
</p>
59-
</EuiText>
53+
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
54+
<EuiFlexItem grow={false}>
55+
<EuiFlexGroup alignItems="center" gutterSize="s">
56+
<EuiFlexItem grow={false}>
57+
<EuiText size="m" className="obsOverviewDashboardHeader">
58+
<h4>{dashboardState?.dashboardTitle}</h4>
59+
</EuiText>
60+
</EuiFlexItem>
61+
<EuiFlexItem grow={false}>
62+
<EuiToolTip
63+
content={
64+
<FormattedMessage
65+
id="observability.dashboard.popout.tooltip"
66+
defaultMessage="Go to dashboard"
67+
/>
68+
}
69+
>
70+
<EuiLink
71+
onClick={() => redirectToDashboards('/view/' + dashboardState?.dashboardId)}
72+
external={true}
73+
>
74+
<EuiIcon type="popout" />
75+
</EuiLink>
76+
</EuiToolTip>
77+
</EuiFlexItem>
78+
</EuiFlexGroup>
6079
</EuiFlexItem>
6180
<EuiFlexItem grow={false}>
6281
<EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">

0 commit comments

Comments
 (0)