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.

Sign up for GitHub

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

[Page Header] New page header for metrics #2050

Merged
merged 15 commits into from
Aug 15, 2024
Merged

[Page Header] New page header for metrics #2050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a211d43
Move the save button to the header control bar
RyanL1997 Aug 9, 2024
057e7a2
Update snapshots
RyanL1997 Aug 9, 2024
2a19a5a
Fix the save button and correct its size + position
RyanL1997 Aug 9, 2024
8874d77
Fix the date picker location
RyanL1997 Aug 9, 2024
6a2c87d
Rename the navigation in coreRef and switch to use compressed date pi…
RyanL1997 Aug 9, 2024
646fc89
Fix the popover
RyanL1997 Aug 9, 2024
059449f
Merge branch 'main' into metrics-nav
RyanL1997 Aug 9, 2024
2daba61
Rename the button
RyanL1997 Aug 11, 2024
244defe
Update to latest mockup
RyanL1997 Aug 12, 2024
4119098
Update snapshots
RyanL1997 Aug 12, 2024
e51caa3
Fix the ui issues
RyanL1997 Aug 12, 2024
2d5af13
Dummy metrics
RyanL1997 Aug 12, 2024
b3676b4
Remove dummy
RyanL1997 Aug 12, 2024
eb087fb
update snapshots
RyanL1997 Aug 12, 2024
bee60d7
minor changes to match mocks
ps48 Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`Log Config component renders empty log config 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -119,6 +120,7 @@ exports[`Log Config component renders empty log config 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -649,6 +651,7 @@ exports[`Log Config component renders with query 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -752,6 +755,7 @@ exports[`Log Config component renders with query 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down
4 changes: 4 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`Service Config component renders empty service config 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -119,6 +120,7 @@ exports[`Service Config component renders empty service config 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -1219,6 +1221,7 @@ exports[`Service Config component renders with one service selected 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -1322,6 +1325,7 @@ exports[`Service Config component renders with one service selected 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down
4 changes: 4 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -118,6 +119,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -931,6 +933,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
Expand Down Expand Up @@ -1034,6 +1037,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down
8 changes: 8 additions & 0 deletions public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -888,6 +888,7 @@ exports[`Panels View Component renders panel view container with visualizations
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction] {
"calls": Array [
Expand Down Expand Up @@ -1285,6 +1286,7 @@ exports[`Panels View Component renders panel view container with visualizations
},
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -2692,6 +2694,7 @@ exports[`Panels View Component renders panel view container with visualizations
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction] {
"calls": Array [
Expand Down Expand Up @@ -3089,6 +3092,7 @@ exports[`Panels View Component renders panel view container with visualizations
},
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -3259,6 +3263,7 @@ exports[`Panels View Component renders panel view container without visualizatio
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction] {
"calls": Array [
Expand Down Expand Up @@ -3545,6 +3550,7 @@ exports[`Panels View Component renders panel view container without visualizatio
},
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down Expand Up @@ -4947,6 +4953,7 @@ exports[`Panels View Component renders panel view container without visualizatio
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction] {
"calls": Array [
Expand Down Expand Up @@ -5233,6 +5240,7 @@ exports[`Panels View Component renders panel view container without visualizatio
},
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down
2 changes: 2 additions & 0 deletions ...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
"getBreadcrumbsEnricher$": [MockFunction],
"getCustomNavLink$": [MockFunction],
"getHeaderComponent": [MockFunction],
"getHeaderVariant$": [MockFunction],
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction] {
"calls": Array [
Expand Down Expand Up @@ -276,6 +277,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
"setBreadcrumbs": [MockFunction],
"setBreadcrumbsEnricher": [MockFunction],
"setCustomNavLink": [MockFunction],
"setHeaderVariant": [MockFunction],
"setHelpExtension": [MockFunction],
"setHelpSupportUrl": [MockFunction],
"setIsVisible": [MockFunction],
Expand Down
2 changes: 1 addition & 1 deletion ...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
showLabel={true}
>
<div
className="euiSwitch euiSwitch--compressed"
className="euiSwitch euiSwitch--primary euiSwitch--compressed euiSwitch-isDisabled"
>
<button
aria-checked={false}
Expand Down
10 changes: 8 additions & 2 deletions public/components/metrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
import { EuiPage, EuiPageBody, EuiResizableContainer, EuiSpacer } from '@elastic/eui';
import debounce from 'lodash/debounce';
import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
Expand Down Expand Up @@ -32,7 +32,7 @@

interface MetricsProps {
parentBreadcrumb: ChromeBreadcrumb;
renderProps: RouteComponentProps<any, StaticContext, any>;

Check warning on line 35 in public/components/metrics/index.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type

Check warning on line 35 in public/components/metrics/index.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
pplService: PPLService;
savedObjects: SavedObjects;
setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
Expand Down Expand Up @@ -100,7 +100,7 @@
}}
/>
);
}, [setActionMenu, savedObjectsMDSClient.client, notifications]);

Check warning on line 103 in public/components/metrics/index.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useMemo has a missing dependency: 'onSelectedDataSource'. Either include it or remove the dependency array

return (
<>
Expand All @@ -115,11 +115,17 @@
<EuiPage>
<EuiPageBody component="div">
<TopMenu />
<EuiSpacer size="m" />
<div className="metricsContainer">
<EuiResizableContainer>
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
<EuiResizablePanel
mode="collapsible"
initialSize={20}
minSize="10%"
paddingSize="none"
>
<Sidebar
additionalSelectedMetricId={routerProps.match.params.id}
selectedDataSource={selectedDataSource}
Expand Down
22 changes: 11 additions & 11 deletions public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
</EuiTitle>
<EuiComboBox
async={false}
compressed={false}
compressed={true}
data-test-subj="metricsDataSourcePicker"
fullWidth={false}
isClearable={true}
Expand Down Expand Up @@ -196,14 +196,14 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
<div
aria-expanded={false}
aria-haspopup="listbox"
className="euiComboBox"
className="euiComboBox euiComboBox--compressed"
data-test-subj="metricsDataSourcePicker"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={false}
compressed={true}
fullWidth={false}
hasSelectedOptions={false}
inputRef={[Function]}
Expand All @@ -230,7 +230,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
value=""
>
<EuiFormControlLayout
compressed={false}
compressed={true}
fullWidth={false}
icon={
Object {
Expand All @@ -245,13 +245,13 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
}
>
<div
className="euiFormControlLayout"
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
</AutosizeInput>
</div>
<EuiFormControlLayoutIcons
compressed={false}
compressed={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -341,7 +341,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
data-test-subj="comboBoxToggleListButton"
iconRef={[Function]}
onClick={[Function]}
size="m"
size="s"
type="arrowDown"
>
<button
Expand All @@ -354,19 +354,19 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="arrowDown"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height={16}
role="img"
Expand Down
1 change: 1 addition & 0 deletions public/components/metrics/sidebar/data_source_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const DataSourcePicker = ({
<h5>Metrics source</h5>
</EuiTitle>
<EuiComboBox
compressed
placeholder="Select a metric source"
singleSelection={{ asPlainText: true }}
options={DATASOURCE_OPTIONS}
Expand Down
13 changes: 11 additions & 2 deletions public/components/metrics/sidebar/search_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
*/

import { EuiSearchBar } from '@elastic/eui';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import debounce from 'lodash/debounce';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { searchSelector, setSearch } from '../redux/slices/metrics_slice';

export const SearchBar = () => {
Expand All @@ -17,6 +17,15 @@ export const SearchBar = () => {
dispatch(setSearch(query.text));
}, 300);

// OUI doesn't pass down the prop
// Work around for OUI bug: https://github.com/opensearch-project/oui/issues/1343
useEffect(() => {
const element = document.querySelector('.euiFieldSearch');
if (element) {
element.classList.add('euiFieldSearch--compressed');
}
}, []);

return (
<div className="metrics-search-bar-input" data-test-subj="metricsSearch">
<EuiSearchBar
Expand Down
16 changes: 9 additions & 7 deletions public/components/metrics/sidebar/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ section.sidebar {
}

#metrics__mainContent {
.dscAppContainer{
.metricsSideBar {
padding: $euiSizeS;
.dscAppContainer {
.metricsSideBar {
padding: $euiSizeS;
overflow: auto;

&__fieldGroups {
Expand All @@ -44,8 +44,10 @@ section.sidebar {
}
}
.metricsSideBar {
@include euiYScrollWithShadows;
.sidebar-list {
height: 100%;
@include euiYScrollWithShadows;
.sidebar-list {
height: 100%;
}
}
}
}}}
}
Loading
Loading