Skip to content

feat(site): add parameters usage to insights #8886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 8, 2023
Merged

feat(site): add parameters usage to insights #8886

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
49e8153
Add parameters
BrunoQuaresma Aug 3, 2023
c24cb88
Add behind experiments
BrunoQuaresma Aug 3, 2023
3d4a2d6
Merge branch 'main' of https://github.com/coder/coder into bq/add-par…
BrunoQuaresma Aug 4, 2023
78cb2b8
Improve option and link display
BrunoQuaresma Aug 4, 2023
de122b7
Fix date filter
BrunoQuaresma Aug 4, 2023
352f9da
Support boolean and array values
BrunoQuaresma Aug 4, 2023
f679712
Add better storybook
BrunoQuaresma Aug 4, 2023
faeb8c9
Merge branch 'main' of https://github.com/coder/coder into bq/add-par…
BrunoQuaresma Aug 4, 2023
62aff9c
Merge branch 'main' into bq/add-parameters-usage-in-dashboard
BrunoQuaresma Aug 7, 2023
157a9ee
Add improvements
BrunoQuaresma Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improve option and link display
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Aug 4, 2023
commit 78cb2b89a1784550a6ee3c5caf7b51012837e9e8
156 changes: 96 additions & 60 deletions site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@ import { Loader } from "components/Loader/Loader"
import {
DAUsResponse,
TemplateInsightsResponse,
TemplateParameterUsage,
TemplateParameterValue,
UserLatencyInsightsResponse,
} from "api/typesGenerated"
import { ComponentProps } from "react"
import subDays from "date-fns/subDays"
import { useDashboard } from "components/Dashboard/DashboardProvider"
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"
import Link from "@mui/material/Link"

export default function TemplateInsightsPage() {
const { template } = useTemplateLayoutContext()
Expand All @@ -43,6 +47,9 @@ export default function TemplateInsightsPage() {
queryFn: () => getInsightsUserLatency(insightsFilter),
})
const dashboard = useDashboard()
const shouldDisplayParameters =
dashboard.experiments.includes("template_parameters_insights") ||
process.env.NODE_ENV === "development"

return (
<>
Expand All @@ -52,9 +59,7 @@ export default function TemplateInsightsPage() {
<TemplateInsightsPageView
templateInsights={templateInsights}
userLatency={userLatency}
shouldDisplayParameters={dashboard.experiments.includes(
"template_parameters_insights",
)}
shouldDisplayParameters={shouldDisplayParameters}
/>
</>
)
Expand Down Expand Up @@ -290,7 +295,7 @@ const TemplateParametersUsagePanel = ({
{data && data.length === 0 && <NoDataAvailable sx={{ height: 200 }} />}
{data &&
data.length > 0 &&
data.map((parameter) => {
data.map((parameter, parameterIndex) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we wrap it into a dedicated React component, for instance, ParameterUsageRow?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I usually extract code into a component when:

  • It has a state
  • It has too many conditionals
  • It is large and not easy to read

So in this case, I would not do that to avoid nested components hell as we have for the Workspace component.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is large and not easy to read

Yeah, I admit that this is my concern in terms of this PR, but maybe it isn't too hard. I saw a lot of conditional logic and assumed that it could be healthier to hide it behind a component. So, maybe not a state, but a lot of conditional logic.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but a lot of conditional logic.

I'm only seeing one for the label 🤔

const label =
parameter.display_name !== ""
? parameter.display_name
Expand All @@ -314,62 +319,20 @@ const TemplateParametersUsagePanel = ({
<Box sx={{ flex: 1, fontSize: 14 }}>
{parameter.values
.sort((a, b) => b.count - a.count)
.map((value) => {
const icon = parameter.options
? parameter.options.find((o) => o.value === value.value)
?.icon
: undefined
const label =
value.value.trim() !== "" ? (
value.value
) : (
<Box
component="span"
sx={{
color: (theme) => theme.palette.text.secondary,
}}
>
Not set
</Box>
)
return (
<Box
key={value.value}
sx={{
display: "flex",
alignItems: "baseline",
justifyContent: "space-between",
py: 0.5,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 2,
}}
>
{icon && (
<Box
sx={{ width: 16, height: 16, lineHeight: 1 }}
>
<Box
component="img"
src={icon}
sx={{
objectFit: "contain",
width: "100%",
height: "100%",
}}
/>
</Box>
)}
{label}
</Box>
<Box sx={{ textAlign: "right" }}>{value.count}</Box>
</Box>
)
})}
.map((value, valueIndex) => (
<Box
key={`${parameterIndex}-${valueIndex}`}
sx={{
display: "flex",
alignItems: "baseline",
justifyContent: "space-between",
py: 0.5,
}}
>
<ValueLabel value={value} parameter={parameter} />
<Box sx={{ textAlign: "right" }}>{value.count}</Box>
</Box>
))}
</Box>
</Box>
)
Expand All @@ -379,6 +342,79 @@ const TemplateParametersUsagePanel = ({
)
}

const ValueLabel = ({
value,
parameter,
}: {
value: TemplateParameterValue
parameter: TemplateParameterUsage
}) => {
if (value.value.trim() === "") {
return (
<Box
component="span"
sx={{
color: (theme) => theme.palette.text.secondary,
}}
>
Not set
</Box>
)
}

if (parameter.options) {
const option = parameter.options.find((o) => o.value === value.value)!
const icon = option.icon
const label = option.name

return (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 2,
}}
>
{icon && (
<Box sx={{ width: 16, height: 16, lineHeight: 1 }}>
<Box
component="img"
src={icon}
sx={{
objectFit: "contain",
width: "100%",
height: "100%",
}}
/>
</Box>
)}
{label}
</Box>
)
}

if (value.value.startsWith("http")) {
return (
<Link
href={value.value}
target="_blank"
rel="noreferrer"
sx={{
display: "flex",
alignItems: "center",
gap: 1,
color: (theme) => theme.palette.text.primary,
}}
>
<OpenInNewOutlined sx={{ width: 14, height: 14 }} />
{value.value}
</Link>
)
}

return <Box>{value.value}</Box>
}

const Panel = styled(Box)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
Expand Down