Skip to content

Commit

Permalink
feat: add empty state for pack details
Browse files Browse the repository at this point in the history
  • Loading branch information
@aswanson-nr
aswanson-nr committed Jul 15, 2021
1 parent f6e76e2 commit 5155e15
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 105 deletions.
6 changes: 6 additions & 0 deletions src/@newrelic/gatsby-theme-newrelic/icons/feather.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,10 @@ export default {
twitter: (
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
),
edit: (
<>
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</>
),
};
271 changes: 166 additions & 105 deletions src/templates/ObservabilityPackDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,159 @@ const SUPPORT_CONTENT = {
},
};

const renderDashboards = (pack) => {
const content = pack.dashboards.map((dashboard) => (
<>
<h3>{dashboard.name}</h3>
<ImageSlider height={400} images={dashboard.screenshots} />
{dashboard.description && (
<>
<h4>Description</h4>
<p>{dashboard.description}</p>
</>
)}
</>
));

return (
<>
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack contains{' '}
{pluralize('dashboard', pack.dashboards?.length ?? 0, true)}. These
interactive visualizations let you easily explore your data, understand
context, and resolve problems faster.
</Intro>
{content}
</>
);
};

const renderAlerts = (pack) => {
const alertContent = pack.alerts.map((alert) => (
<>
<h3>{alert.name}</h3>
{alert.description && (
<>
<h4>Description</h4>
<p>{alert.description}</p>
</>
)}
</>
));

return (
<>
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack contains{' '}
{pluralize('alert', pack.alerts?.length ?? 0, true)}. These alerts
detect changes in key performance metrics. Integrate these alerts with
your favorite tools (like Slack, PagerDuty, etc.) and New Relic will let
you know when something needs your attention.
</Intro>
{alertContent}
</>
);
};

const renderSynthetics = (pack) => {
return (
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack includes{' '}
{pluralize('Synthetics check', pack.synthetics?.length ?? 0, true)}. These
checks will run automatically to simulate user traffic and ensure your
site or API endpoint is not only available, but fully functional.
</Intro>
);
};

const renderVisualizations = (pack) => {
return (
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack includes{' '}
{pluralize('visualization', pack.visualizations?.length ?? 0, true)}.
These charts have been customized to represent data in a way that a
standard dashboard isn’t able to, so you can monitor what’s essential.
</Intro>
);
};

const emptyStateContent = (pack) => {
return (
<div
css={css`
border: 1px solid var(--divider-color);
border-radius: 0.25rem;
padding: 1rem;
`}
>
<div
css={css`
display: flex;
justify-content: center;
padding: 2rem;
`}
>
<Icon
css={css`
font-size: 4rem;
color: var(--divider-color);
`}
name="edit"
/>
</div>
<p
css={css`
text-align: center;
`}
>
I'm baby quinoa DIY narwhal artisan organic slow-carb cliche twee. Kogi
YOLO meggings quinoa affogato vegan bespoke hashtag. VHS skateboard palo
santo, gastropub edison bulb asymmetrical humblebrag plaid disrupt.
Activated charcoal glossier kinfolk before they sold out pok pok quinoa
bicycle rights humblebrag fanny pack church-key enamel pin.
</p>
<div
css={css`
display: flex;
justify-content: center;
`}
>
<Button
as={Link}
variant={Button.VARIANT.PRIMARY}
to={getPackUrl(pack.logoUrl)}
rel="noopener noreferrer"
instrumentation={{ packName: pack.name }}
>
<Icon
name="fe-github"
css={css`
margin-right: 7px;
`}
/>
View Repo
</Button>
</div>
</div>
);
};

const ObservabilityPackDetails = ({ data, location }) => {
const pack = data.observabilityPacks;
const tessen = useTessen();
Expand Down Expand Up @@ -102,30 +255,17 @@ const ObservabilityPackDetails = ({ data, location }) => {
`}
>
<Tabs.BarItem id="overview">Overview</Tabs.BarItem>
<Tabs.BarItem
id="dashboards"
disabled={!(pack.dashboards?.length ?? 0)}
count={pack.dashboards?.length ?? 0}
>
<Tabs.BarItem id="dashboards" count={pack.dashboards?.length ?? 0}>
Dashboards
</Tabs.BarItem>
<Tabs.BarItem
id="alerts"
disabled={!(pack.alerts?.length ?? 0)}
count={pack.alerts?.length ?? 0}
>
<Tabs.BarItem id="alerts" count={pack.alerts?.length ?? 0}>
Alerts
</Tabs.BarItem>
<Tabs.BarItem
id="synthetics"
disabled={!(pack.synthetics?.length ?? 0)}
count={pack.synthetics?.length ?? 0}
>
<Tabs.BarItem id="synthetics" count={pack.synthetics?.length ?? 0}>
Synthetics
</Tabs.BarItem>
<Tabs.BarItem
id="visualizations"
disabled={!(pack.visualizations?.length ?? 0)}
count={pack.visualizations?.length ?? 0}
>
Visualizations
Expand All @@ -140,100 +280,23 @@ const ObservabilityPackDetails = ({ data, location }) => {
{pack.description}
</Markdown>
</Tabs.Page>
<Tabs.Page id="requirements">
<Intro
css={css`
margin-bottom: 16px;
`}
>
Before you install the {pack.name} observability pack, make
sure you meet the requirements documented below.
</Intro>
</Tabs.Page>
<Tabs.Page id="dashboards">
{pack.dashboards?.map((dashboard) => (
<>
<h3>{dashboard.name}</h3>
<ImageSlider height={400} images={dashboard.screenshots} />
{dashboard.description && (
<>
<h4>Description</h4>
<p>{dashboard.description}</p>
</>
)}
</>
))}
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack contains{' '}
{pluralize('dashboard', pack.dashboards?.length ?? 0, true)}.
These interactive visualizations let you easily explore your
data, understand context, and resolve problems faster.
</Intro>
{pack.dashboards
? renderDashboards(pack.dashboards)
: emptyStateContent(pack)}
</Tabs.Page>
<Tabs.Page id="alerts">
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack contains{' '}
{pluralize('alert', pack.alerts?.length ?? 0, true)}. These
alerts detect changes in key performance metrics. Integrate
these alerts with your favorite tools (like Slack, PagerDuty,
etc.) and New Relic will let you know when something needs
your attention.
</Intro>
{pack.alerts
? renderAlerts(pack.alerts)
: emptyStateContent(pack)}
</Tabs.Page>
<Tabs.Page id="synthetics">
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack includes{' '}
{pluralize(
'Synthetics check',
pack.synthetics?.length ?? 0,
true
)}
. These checks will run automatically to simulate user traffic
and ensure your site or API endpoint is not only available,
but fully functional.
</Intro>
{pack.synthetics ? renderSynthetics() : emptyStateContent(pack)}
</Tabs.Page>
<Tabs.Page id="visualizations">
<Intro
css={css`
margin-bottom: 16px;
`}
>
{pack.name} observability pack includes{' '}
{pluralize(
'visualization',
pack.visualizations?.length ?? 0,
true
)}
. These charts have been customized to represent data in a way
that a standard dashboard isn’t able to, so you can monitor
what’s essential.
</Intro>
</Tabs.Page>
<Tabs.Page id="nerdpacks">
<Intro
css={css`
margin-bottom: 16px;
`}
>
Nerdpacks are custom applications that extend the monitoring
capabilities of the New Relic One platform. {pack.name}
observability pack includes{' '}
{pluralize('Nerdpack', pack.nerdpacks?.length ?? 0, true)} to
make sure you’re monitoring what matters.
</Intro>
{pack.visualizations
? renderVisualizations()
: emptyStateContent(pack)}
</Tabs.Page>
</Tabs.Pages>
</Layout.Content>
Expand Down Expand Up @@ -340,5 +403,3 @@ export const pageQuery = graphql`
}
}
`;

export default ObservabilityPackDetails;

0 comments on commit 5155e15

Please sign in to comment.