paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 25 Packages Projects Releases Wiki Activity

Add overflow:display to display large tooltips on cost overview chart

Browse Source 
Signed-off-by: Olivier Liechti <olivier.liechti@wasabi-tech.com>
This commit is contained in:
Olivier Liechti
2022-05-27 08:28:15 +02:00
parent 7d96a85399
commit 646ca259f1
3 changed files with 136 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export const CostOverviewCard = ({
const showMetricSelect = config.metrics.length && safeTabIndex === 0;
return (
<Card style={{ position: 'relative' }}>
<Card style={{ position: 'relative', overflow: 'visible' }}>
<ScrollAnchor id={DefaultNavigation.CostOverviewCard} />
<CardContent>
{dailyCostData.groupedCosts && <OverviewTabs />}
plugins/cost-insights/src/example/client.ts
+3
View File
@@ -63,6 +63,9 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
{ id: 'project-a' },
{ id: 'project-b' },
{ id: 'project-c' },
{ id: 'project-a1' },
{ id: 'project-b1' },
{ id: 'project-c1' },
]);
return projects;
plugins/cost-insights/src/testUtils/testUtils.ts
+132
View File
@@ -188,4 +188,136 @@ export const getGroupedProjects = (intervals: string) => [
id: 'project-c',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a1',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b1',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c1',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a2',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b2',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c2',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a3',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b3',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c3',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a4',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b4',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c4',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a5',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b5',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c5',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a6',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b6',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c6',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a7',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b7',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c7',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a8',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b8',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c8',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a10',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b10',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c10',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a11',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b11',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c11',
aggregation: aggregationFor(intervals, 1_300),
},
{
id: 'project-a12',
aggregation: aggregationFor(intervals, 1_700),
},
{
id: 'project-b12',
aggregation: aggregationFor(intervals, 350),
},
{
id: 'project-c12',
aggregation: aggregationFor(intervals, 1_300),
},
];