Skip to content

Commit

Permalink
fix: add collapsible text on kpi modal frame to display query instruc…
Browse files Browse the repository at this point in the history 
…tions and sample queries
  • Loading branch information
@shahramk
shahramk committed Aug 29, 2023
1 parent d5ec436 commit 988858a
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 80 deletions.
94 changes: 31 additions & 63 deletions src/components/kpi-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,7 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';

import {
BlockText,
Button,
HeadingText,
Modal,
PlatformStateContext,
} from 'nr1';
import { Button, HeadingText, Modal, PlatformStateContext } from 'nr1';

import {
EditInPlace,
Expand Down Expand Up @@ -53,7 +47,6 @@ const KpiModal = ({

const nameRef = useRef('name');
const aliasRef = useRef('alias');
const nrqlQueryRef = useRef();

useEffect(() => {
setAccountId(kpi.accountIds?.length ? kpi.accountIds[0] : '');
Expand Down Expand Up @@ -110,15 +103,15 @@ const KpiModal = ({
value={name}
setValue={setName}
ref={nameRef}
placeholder="Enter KPI name"
placeholder="Untitled KPI"
/>
</div>
<div className="modal-component-kpi-name">
<div className="modal-component-kpi-alias">
<EditInPlace
value={alias}
setValue={setAlias}
ref={aliasRef}
placeholder="Enter KPI alias"
placeholder="Alias (optional)"
/>
</div>
</div>
Expand All @@ -128,13 +121,10 @@ const KpiModal = ({
>
<NrqlEditor
id={'nrqlEditor'}
ref={nrqlQueryRef}
query={
nrqlQuery
? nrqlQuery
: kpi.nrqlQuery
? kpi.nrqlQuery
: UI_CONTENT.KPI_MODAL.QUERY_PROMPT
nrqlQuery ||
kpi.nrqlQuery ||
UI_CONTENT.KPI_MODAL.QUERY_PROMPT
}
accountId={accountId}
saveButtonText="Preview"
Expand All @@ -144,55 +134,33 @@ const KpiModal = ({
setNrqlQuery(res.query);
}}
/>
<div>
<BlockText
className="modal-component-nrql-editor-help"
type={BlockText.TYPE.NORMAL}
>
<p>{UI_CONTENT.KPI_MODAL.NRQL_EDITOR_DESCRIPTION}</p>
<br />
<strong className="exmple-title">
{UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_TITLE}
</strong>
<br />
<Button
type={Button.TYPE.PLAIN}
sizeType={Button.SIZE_TYPE.SMALL}
onClick={() =>
handleClick(
UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_1
)
}
>
{UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_1}
</Button>
<Button
type={Button.TYPE.PLAIN}
sizeType={Button.SIZE_TYPE.SMALL}
onClick={() =>
handleClick(
UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_2
)
}
>
{UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_2}
</Button>
<Button
type={Button.TYPE.PLAIN}
sizeType={Button.SIZE_TYPE.SMALL}
onClick={() =>
handleClick(
UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_3
)
}
>
{UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_3}
</Button>
</BlockText>
<div className="modal-component-nrql-editor-help">
<details>
<summary>
{` ${UI_CONTENT.KPI_MODAL.NRQL_EDITOR_INSTRUCTIONS_HEADING}`}
</summary>
<p>{UI_CONTENT.KPI_MODAL.NRQL_EDITOR_INSTRUCTIONS}</p>
</details>
<details>
<summary>
{` ${UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_TITLE}`}
</summary>
{UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE.map(
(query, index) => (
<div
key={`query_${index}index`}
className="query-example"
onClick={() => handleClick(query)}
>
{query}
</div>
)
)}
</details>
</div>
</div>
<div className="modal-component-preview-heading">
<HeadingText type={HeadingText.TYPE.HEADING_1}>
<HeadingText type={HeadingText.TYPE.HEADING_3}>
Preview:
</HeadingText>
</div>
Expand Down
61 changes: 49 additions & 12 deletions src/components/kpi-modal/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,70 @@
}

.modal-component-edit-in-place {
margin: 1.25rem 0;
margin-top: 1.25rem;
font-size: 1.5rem;
gap: 0.625rem;
}

.modal-component-kpi-name {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.625rem;
line-height: 2rem;
}

.modal-component-kpi-alias {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
margin-bottom: 0.5rem;
}

.modal-component-nrql-editor {
margin: 1.875rem 0;
margin-bottom: 1.875rem;
overflow: hidden;
}

.modal-component-nrql-editor-help {
font-size: 9px;

.exmple-title {
details {
margin: 0.75rem 0;
color: #535E65;
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}

summary {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}

Button {
font-size: 9px;
padding: 0px;
margin: 0px;
min-height: 16px;
summary::before {
display: inline-block;
content: '> ';
transition: 0.2s;
}

details[open] summary::before {
transform: rotate(90deg);
}

p {
margin-left: 0.75rem;
color: #535E65;
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}

.query-example {
width: 352px;
margin: 0 0 0.5rem 0.75rem;

&:hover {
background: #f3f4f4;
cursor: pointer;
}
}
}

Expand Down Expand Up @@ -103,4 +140,4 @@
font-weight: 400;
font-size: 1.5rem;
line-height: 2rem;
}
}
11 changes: 6 additions & 5 deletions src/constants/ui-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,15 @@ export const UI_CONTENT = {
// billboard related messages
BILLBOARD_DOC_LINK:
'https://docs.newrelic.com/docs/query-your-data/explore-query-data/use-charts/chart-types/#widget-billboard',
NRQL_EDITOR_DESCRIPTION: `Enter a query which returns a single number. You could use queries that return Apdex values, or compare a single value across states and show the up/down trend. For instance, use 'COMPARE WITH' clause in a query to compare the same attribute across two different time frames.`,
BILLBOARD_HELP_TITLE: 'Example Queries: ',
BILLBOARD_HELP_QUERY_EXAMPLE_1:
NRQL_EDITOR_INSTRUCTIONS_HEADING: 'Instructions',
NRQL_EDITOR_INSTRUCTIONS:
'Enter a query which returns a single number. You could use queries that return Apdex values, or compare a single value across states to show the upward/downward trend.',
BILLBOARD_HELP_TITLE: 'Sample Queries: ',
BILLBOARD_HELP_QUERY_EXAMPLE: [
'SELECT count(*) FROM Transaction since 1 hour ago',
BILLBOARD_HELP_QUERY_EXAMPLE_2:
'SELECT count(*) FROM Pageview since 3 hours ago COMPARE WITH 2 days ago',
BILLBOARD_HELP_QUERY_EXAMPLE_3:
'SELECT count(session) FROM Pageview since 1 hour ago COMPARE WITH 1 day ago',
],
QUERY_PROMPT: 'Enter query here',
},
GET_STARTED: {
Expand Down

0 comments on commit 988858a

Please sign in to comment.