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

Jump to bottom

Observability Overview page rework #2210

Merged
merged 9 commits into from
Oct 18, 2024
Merged

Observability Overview page rework #2210

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e59b457
rework the obs overview page adding dismiss to cards, and changing ui
Oct 17, 2024
9400028
Merge branch 'main' into overviewPageDis
TackAdam Oct 17, 2024
8ee0914
hide new setting for showCards based on workspace
Oct 17, 2024
ab00fd1
small integrations ui adjustment
Oct 18, 2024
93484af
Merge branch 'main' into overviewPageDis
TackAdam Oct 18, 2024
466f86d
Update snapshots
Oct 18, 2024
61213c9
Merge branch 'main' into overviewPageDis
TackAdam Oct 18, 2024
4ef2c72
fix lint
Oct 18, 2024
5162c6d
capitalize Page
Oct 18, 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
3 changes: 1 addition & 2 deletions common/constants/overview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
* SPDX-License-Identifier: Apache-2.0
*/

export const alertsPluginID = 'alerting';
export const anomalyPluginID = 'anomalyDetection';
export const observabilityDashboardsKey = 'observability:defaultDashboard';
export const observabilityShowCardsKey = 'observability:overviewCardsDisplay';
2 changes: 2 additions & 0 deletions common/utils/core_services.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
SavedObjectsClientContract,
ToastInput,
} from '../../../../src/core/public';
import { Page } from '../../../../src/plugins/content_management/public';
import { createGetterSetter } from '../../../../src/plugins/opensearch_dashboards_utils/common';
import PPLService from '../../public/services/requests/ppl';
import { QueryManager } from '../query_manager';
Expand All @@ -22,10 +23,10 @@
uiSettings = client;
notifications = notificationsStart;
},
get: (key: string, defaultOverride?: any) => {

Check warning on line 26 in common/utils/core_services.ts

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
return uiSettings?.get(key, defaultOverride) || '';
},
set: (key: string, value: any) => {

Check warning on line 29 in common/utils/core_services.ts

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
return uiSettings?.set(key, value) || Promise.reject('uiSettings client not initialized.');
},
addToast: (toast: ToastInput) => {
Expand All @@ -39,3 +40,4 @@
SavedObjectsClientContract
>('SavedObjectsClient');
export const [getQueryManager, setQueryManager] = createGetterSetter<QueryManager>('QueryManager');
export const [getOverviewPage, setOverviewPage] = createGetterSetter<Page>('page');
TackAdam marked this conversation as resolved.
Show resolved Hide resolved
35 changes: 8 additions & 27 deletions ...datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,13 +937,10 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
</svg>
</button>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--xxl"
/>
Expand Down Expand Up @@ -1087,13 +1084,10 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
</svg>
</button>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--xxl"
/>
Expand Down Expand Up @@ -1169,13 +1163,10 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
</svg>
</button>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--xxl"
/>
Expand Down Expand Up @@ -1251,13 +1242,10 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
</svg>
</button>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--xxl"
/>
Expand Down Expand Up @@ -1321,13 +1309,10 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
</svg>
</button>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--xxl"
/>
Expand Down Expand Up @@ -1459,23 +1444,19 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
>
<EuiPageContent
id="availableIntegrationsArea"
paddingSize="m"
>
<EuiPanel
className="euiPageContent"
id="availableIntegrationsArea"
paddingSize="l"
paddingSize="m"
role="main"
>
<div
className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
<EuiSpacer
size="xxl"
>
Expand Down
11 changes: 4 additions & 7 deletions ...grations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,9 +463,11 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
</EuiFlexItem>
</div>
</EuiFlexGroup>
<EuiSpacer>
<EuiSpacer
size="m"
>
<div
className="euiSpacer euiSpacer--l"
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiFlexGroup
Expand Down Expand Up @@ -591,11 +593,6 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
</EuiFlexItem>
</div>
</EuiFlexGroup>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
</div>
</EuiPanel>
</AvailableIntegrationsCardView>
Expand Down
36 changes: 19 additions & 17 deletions ...rations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,19 @@ exports[`Available Integration Table View Test Renders nginx integration table v
>
<EuiPageContent
id="availableIntegrationsArea"
paddingSize="m"
>
<EuiPanel
className="euiPageContent"
id="availableIntegrationsArea"
paddingSize="l"
paddingSize="m"
role="main"
>
<div
className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
id="availableIntegrationsArea"
role="main"
>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
<EuiInMemoryTable
allowNeutralSort={false}
columns={
Expand Down Expand Up @@ -106,6 +102,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
},
]
}
compressed={true}
isSelectable={true}
itemId="id"
items={
Expand Down Expand Up @@ -175,6 +172,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
search={
Object {
"box": Object {
"compressed": true,
"incremental": true,
},
"toolsRight": <EuiFlexGroup>
Expand Down Expand Up @@ -210,6 +208,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
<EuiSearchBar
box={
Object {
"compressed": true,
"incremental": true,
}
}
Expand Down Expand Up @@ -258,6 +257,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
className="euiFlexItem euiSearchBar__searchHolder"
>
<EuiSearchBox
compressed={true}
incremental={true}
isInvalid={false}
onSearch={[Function]}
Expand All @@ -266,7 +266,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
>
<EuiFieldSearch
aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
compressed={false}
compressed={true}
defaultValue=""
fullWidth={true}
incremental={true}
Expand All @@ -278,13 +278,13 @@ exports[`Available Integration Table View Test Renders nginx integration table v
placeholder="Search..."
>
<EuiFormControlLayout
compressed={false}
compressed={true}
fullWidth={true}
icon="search"
isLoading={false}
>
<div
className="euiFormControlLayout euiFormControlLayout--fullWidth"
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
Expand All @@ -294,23 +294,23 @@ exports[`Available Integration Table View Test Renders nginx integration table v
>
<input
aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
className="euiFieldSearch euiFieldSearch--fullWidth"
className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
defaultValue=""
onKeyUp={[Function]}
placeholder="Search..."
type="search"
/>
</EuiValidatableControl>
<EuiFormControlLayoutIcons
compressed={false}
compressed={true}
icon="search"
isLoading={false}
>
<div
className="euiFormControlLayoutIcons"
>
<EuiFormControlLayoutCustomIcon
size="m"
size="s"
type="search"
>
<span
Expand All @@ -319,19 +319,19 @@ exports[`Available Integration Table View Test Renders nginx integration table v
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="search"
>
<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 Expand Up @@ -701,6 +701,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
},
]
}
compressed={true}
isSelectable={true}
itemId="id"
items={
Expand Down Expand Up @@ -809,12 +810,13 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</div>
</EuiTableHeaderMobile>
<EuiTable
compressed={true}
id="random_html_id"
responsive={true}
tableLayout="auto"
>
<table
className="euiTable euiTable--responsive euiTable--auto"
className="euiTable euiTable--compressed euiTable--responsive euiTable--auto"
id="random_html_id"
tabIndex={-1}
>
Expand Down
3 changes: 1 addition & 2 deletions public/components/integrations/components/available_integration_card_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
);
})}
</EuiFlexGroup>
<EuiSpacer />
</>
);
};
Expand Down Expand Up @@ -109,7 +108,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiSpacer size="m" />
{renderRows(props.data.hits.filter((x) => x.name.includes(props.query)))}
</EuiPanel>
);
Expand Down
5 changes: 3 additions & 2 deletions public/components/integrations/components/available_integration_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
truncateText: true,
render: (_value, record) => badges(record.labels ?? []),
},
] as Array<EuiTableFieldDataColumnType<any>>;

Check warning on line 100 in public/components/integrations/components/available_integration_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type

const renderToggle = () => {
return (
Expand All @@ -122,14 +122,15 @@
toolsRight: renderToggle(),
box: {
incremental: true,
compressed: true,
},
};

return (
<EuiPageContent id="availableIntegrationsArea">
<EuiSpacer />
<EuiPageContent id="availableIntegrationsArea" paddingSize="m">
{integrations.length > 0 ? (
<EuiInMemoryTable
compressed
loading={props.loading}
items={integrations}
itemId="id"
Expand Down
Loading
Loading