Skip to content

Commit

Permalink
Observability Overview page rework (#2210)
Browse files Browse the repository at this point in the history 
* rework the obs overview page adding dismiss to cards, and changing ui

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

* hide new setting for showCards based on workspace

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

* small integrations ui adjustment

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

* Update snapshots

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

* fix lint

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

* capitalize Page

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

---------

Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: Adam Tackett <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
  • Loading branch information
@TackAdam
TackAdam and Adam Tackett authored Oct 18, 2024
1 parent d5853bc commit 90a2baf
Show file tree
Hide file tree
Showing 21 changed files with 2,168 additions and 673 deletions.
3 changes: 1 addition & 2 deletions common/constants/overview.ts
View file
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
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
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 Down Expand Up @@ -39,3 +40,4 @@ export const [getOSDSavedObjectsClient, setOSDSavedObjectsClient] = createGetter
SavedObjectsClientContract
>('SavedObjectsClient');
export const [getQueryManager, setQueryManager] = createGetterSetter<QueryManager>('QueryManager');
export const [getOverviewPage, setOverviewPage] = createGetterSetter<Page>('Page');
35 changes: 8 additions & 27 deletions ...datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
View file
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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,15 @@ export function AvailableIntegrationsTable(props: AvailableIntegrationsTableProp
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

0 comments on commit 90a2baf

Please sign in to comment.