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

Minor cleanup of Stories (#2302)

Browse Source 
* Minor cleanup of Stories

* Remove ugly styling

* Update InfoCard.stories.tsx
This commit is contained in:
Stefan Ålund
2020-09-07 12:24:39 +02:00
committed by GitHub
parent a7af454215
commit a1b3ff5f6e
2 changed files with 68 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/layout/InfoCard/InfoCard.stories.tsx
+19 -9
View File
@@ -15,9 +15,8 @@
*/
import React, { FC } from 'react';
import { InfoCard } from '.';
import { Grid } from '@material-ui/core';
import { Grid, Typography } from '@material-ui/core';
const cardContentStyle = { height: 200, width: 500 };
const linkInfo = { title: 'Go to XYZ Location', link: '#' };
export default {
@@ -25,24 +24,35 @@ export default {
component: InfoCard,
};
const text = (
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Typography>
);
const Wrapper: FC<{}> = ({ children }) => (
<Grid container spacing={4}>
<Grid item>{children}</Grid>
<Grid item xs={4}>
{children}
</Grid>
</Grid>
);
export const Default = () => (
<Wrapper>
<InfoCard title="Information Card">
<div style={cardContentStyle} />
</InfoCard>
<InfoCard title="Information Card">{text}</InfoCard>
</Wrapper>
);
export const Subhead = () => (
<Wrapper>
<InfoCard title="Information Card" subheader="Subhead">
<div style={cardContentStyle} />
<InfoCard title="Information Card" subheader="Subheader">
{text}
</InfoCard>
</Wrapper>
);
@@ -50,7 +60,7 @@ export const Subhead = () => (
export const LinkInFooter = () => (
<Wrapper>
<InfoCard title="Information Card" deepLink={linkInfo}>
<div style={cardContentStyle} />
{text}
</InfoCard>
</Wrapper>
);
packages/core/src/layout/Page/Page.stories.tsx
+49 -45
View File
@@ -97,7 +97,7 @@ const columns: TableColumn[] = [
const tabs = [
{ label: 'Overview' },
{ label: 'CI/CD' },
{ label: 'Cost Efficency' },
{ label: 'Cost Efficiency' },
{ label: 'Code Coverage' },
{ label: 'Test' },
{ label: 'Compliance Advisor' },
@@ -137,38 +137,38 @@ const DataGrid = () => (
</Grid>
<Grid item xs>
<InfoCard
title="Information Card"
deepLink={{ title: 'LEARN MORE ABOUT RIGHTSIZING FOR GKE', link: '' }}
title="Additional Information"
deepLink={{ title: 'Learn more about GKE', link: '' }}
>
<b>Rightsize GKE deployment</b>
<p>
<Typography variant="h6">Rightsize GKE deployment</Typography>
<Typography paragraph>
Services are considered underutilized in GKE when the average usage of
requested cores is less than 80%.
</p>
<b>What can I do?</b>
<p>
</Typography>
<Typography variant="h6">What can I do?</Typography>
<Typography paragraph>
Review requested core and limit settings. Check HPA target scaling
settings in hpa.yaml. The recommended value for
targetCPUUtilizationPercentage is 80.
</p>
<p>
settings in <code>hpa.yaml</code>. The recommended value for&nbsp;
<code>targetCPUUtilizationPercentage</code> is <code>80</code>.
</Typography>
<Typography paragraph>
For single pods, there is of course no HPA. But it can also be useful
to think about a single pod out of a larger deployment, then modify
based on HPA requirements. Within a pod, each container has its own
CPU and memory requests and limits.
</p>
<b>Definitions</b>
<p>
</Typography>
<Typography variant="h6">Definitions</Typography>
<Typography paragraph>
A request is a minimum reserved value; a container will never have
less than this amount allocated to it, even if it doesn't actually use
it. Requests are used for determining what nodes to schedule pods on
(bin-packing). The tension here is between not allocating resources we
don't need, and having easy-enough access to enough resources to be
able to function.
</p>
<b>
</Typography>
<Typography paragraph>
Contact <Link>#cost-awareness</Link> for information and support.
</b>
</Typography>
</InfoCard>
</Grid>
</Grid>
@@ -195,37 +195,41 @@ const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
export const PluginWithData = () => {
const [selectedTab, setSelectedTab] = useState<number>(2);
return (
<Page theme={pageTheme.tool}>
<ExampleHeader />
<HeaderTabs
selectedIndex={selectedTab}
onChange={index => setSelectedTab(index)}
tabs={tabs.map(({ label }, index) => ({
id: index.toString(),
label,
}))}
/>
<Content>
<ExampleContentHeader selectedTab={selectedTab} />
<DataGrid />
</Content>
</Page>
<div style={{ border: '1px solid #ddd' }}>
<Page theme={pageTheme.tool}>
<ExampleHeader />
<HeaderTabs
selectedIndex={selectedTab}
onChange={index => setSelectedTab(index)}
tabs={tabs.map(({ label }, index) => ({
id: index.toString(),
label,
}))}
/>
<Content>
<ExampleContentHeader selectedTab={selectedTab} />
<DataGrid />
</Content>
</Page>
</div>
);
};
export const PluginWithTable = () => {
return (
<Page theme={pageTheme.tool}>
<ExampleHeader />
<Content>
<ExampleContentHeader />
<Table
options={{ paging: true, padding: 'dense' }}
data={generateTestData(10)}
columns={columns}
title="Example Content"
/>
</Content>
</Page>
<div style={{ border: '1px solid #ddd' }}>
<Page theme={pageTheme.tool}>
<ExampleHeader />
<Content>
<ExampleContentHeader />
<Table
options={{ paging: true, padding: 'dense' }}
data={generateTestData(10)}
columns={columns}
title="Example Content"
/>
</Content>
</Page>
</div>
);
};