Example Plugin with Grid for Storybook (#2271)

* Add an example plugin with a grid of information and data

* Adjust types & imports

* Abstract Header & ContentHeader for both plugin examples

* Fix linting by removing unused import

* Remove React.FC

packages/core/src/layout/Page/Page.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Header,
   Page,
@@ -22,9 +22,18 @@ import {
   ContentHeader,
   Content,
   pageTheme,
+  InfoCard,
+  HeaderTabs,
 } from '../';
-import { SupportButton, Table, StatusOK, TableColumn } from '../../components';
-import { Box, Typography, Link, Chip, Button } from '@material-ui/core';
+import {
+  SupportButton,
+  Table,
+  StatusOK,
+  TableColumn,
+  ProgressCard,
+  TrendLine,
+} from '../../components';
+import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
 
 export default {
   title: 'Example Plugin',
@@ -85,23 +94,131 @@ const columns: TableColumn[] = [
   },
 ];
 
+const tabs = [
+  { label: 'Overview' },
+  { label: 'CI/CD' },
+  { label: 'Cost Efficency' },
+  { label: 'Code Coverage' },
+  { label: 'Test' },
+  { label: 'Compliance Advisor' },
+];
+
+const DataGrid = () => (
+  <Grid container>
+    <Grid item xs container>
+      <Grid item xs={12}>
+        <InfoCard title="Trend">
+          <TrendLine data={[0.1, 0.5, 0.9, 1.0]} title="Trend over time" />
+        </InfoCard>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        container
+        spacing={2}
+        justify="space-between"
+        direction="row"
+      >
+        <Grid item xs={6}>
+          <ProgressCard
+            title="GKE Usage Score"
+            subheader="This should be above 75%"
+            progress={0.87}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <ProgressCard
+            title="Deployment Score"
+            subheader="This should be above 40%"
+            progress={0.58}
+          />
+        </Grid>
+      </Grid>
+    </Grid>
+    <Grid item xs>
+      <InfoCard
+        title="Information Card"
+        deepLink={{ title: 'LEARN MORE ABOUT RIGHTSIZING FOR GKE', link: '' }}
+      >
+        <b>Rightsize GKE deployment</b>
+        <p>
+          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>
+          Review requested core and limit settings. Check HPA target scaling
+          settings in hpa.yaml. The recommended value for
+          targetCPUUtilizationPercentage is 80.
+        </p>
+        <p>
+          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>
+          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>
+          Contact <Link>#cost-awareness</Link> for information and support.
+        </b>
+      </InfoCard>
+    </Grid>
+  </Grid>
+);
+
+const ExampleHeader = () => (
+  <Header title="Example" subtitle="This an example plugin">
+    <HeaderLabel label="Owner" value="Owner" />
+    <HeaderLabel label="Lifecycle" value="Lifecycle" />
+  </Header>
+);
+
+const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
+  <ContentHeader
+    title={selectedTab !== undefined ? tabs[selectedTab].label : 'Header'}
+  >
+    <SupportButton>
+      This Plugin is an example. This text could provide usefull information for
+      the user.
+    </SupportButton>
+  </ContentHeader>
+);
+
+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>
+  );
+};
+
 export const PluginWithTable = () => {
   return (
     <Page theme={pageTheme.tool}>
-      <Header title="Example" subtitle="This an example plugin">
-        <HeaderLabel label="Owner" value="Owner" />
-        <HeaderLabel label="Lifecycle" value="Lifecycle" />
-      </Header>
+      <ExampleHeader />
       <Content>
-        <ContentHeader title="Header">
-          <Button color="primary" variant="contained">
-            Settings
-          </Button>
-          <SupportButton>
-            This Plugin is an example. This text could provide usefull
-            information for the user.
-          </SupportButton>
-        </ContentHeader>
+        <ExampleContentHeader />
         <Table
           options={{ paging: true, padding: 'dense' }}
           data={generateTestData(10)}