@@ -30,12 +30,12 @@ import { subDays, isToday } from "date-fns"
30
30
import "react-date-range/dist/styles.css"
31
31
import "react-date-range/dist/theme/default.css"
32
32
import { DateRange , DateRangeValue } from "./DateRange"
33
- import { useDashboard } from "components/Dashboard/DashboardProvider"
34
33
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"
35
34
import Link from "@mui/material/Link"
36
35
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"
37
36
import CancelOutlined from "@mui/icons-material/CancelOutlined"
38
37
import { getDateRangeFilter } from "./utils"
38
+ import Tooltip from "@mui/material/Tooltip"
39
39
40
40
export default function TemplateInsightsPage ( ) {
41
41
const now = new Date ( )
@@ -61,10 +61,6 @@ export default function TemplateInsightsPage() {
61
61
queryKey : [ "templates" , template . id , "user-latency" , insightsFilter ] ,
62
62
queryFn : ( ) => getInsightsUserLatency ( insightsFilter ) ,
63
63
} )
64
- const dashboard = useDashboard ( )
65
- const shouldDisplayParameters =
66
- dashboard . experiments . includes ( "template_parameters_insights" ) ||
67
- process . env . NODE_ENV === "development"
68
64
69
65
return (
70
66
< >
@@ -77,7 +73,6 @@ export default function TemplateInsightsPage() {
77
73
}
78
74
templateInsights = { templateInsights }
79
75
userLatency = { userLatency }
80
- shouldDisplayParameters = { shouldDisplayParameters }
81
76
/>
82
77
</ >
83
78
)
@@ -86,12 +81,10 @@ export default function TemplateInsightsPage() {
86
81
export const TemplateInsightsPageView = ( {
87
82
templateInsights,
88
83
userLatency,
89
- shouldDisplayParameters,
90
84
dateRange,
91
85
} : {
92
86
templateInsights : TemplateInsightsResponse | undefined
93
87
userLatency : UserLatencyInsightsResponse | undefined
94
- shouldDisplayParameters : boolean
95
88
dateRange : ReactNode
96
89
} ) => {
97
90
return (
@@ -114,12 +107,10 @@ export const TemplateInsightsPageView = ({
114
107
sx = { { gridColumn : "span 3" } }
115
108
data = { templateInsights ?. report . apps_usage }
116
109
/>
117
- { shouldDisplayParameters && (
118
- < TemplateParametersUsagePanel
119
- sx = { { gridColumn : "span 3" } }
120
- data = { templateInsights ?. report . parameters_usage }
121
- />
122
- ) }
110
+ < TemplateParametersUsagePanel
111
+ sx = { { gridColumn : "span 3" } }
112
+ data = { templateInsights ?. report . parameters_usage }
113
+ />
123
114
</ Box >
124
115
</ >
125
116
)
@@ -349,25 +340,34 @@ const TemplateParametersUsagePanel = ({
349
340
</ Box >
350
341
</ Box >
351
342
< Box sx = { { flex : 1 , fontSize : 14 } } >
343
+ < ParameterUsageRow
344
+ sx = { {
345
+ color : ( theme ) => theme . palette . text . secondary ,
346
+ fontWeight : 500 ,
347
+ fontSize : 13 ,
348
+ cursor : "default" ,
349
+ } }
350
+ >
351
+ < Box > Value</ Box >
352
+ < Tooltip
353
+ title = "The number of workspaces using this value"
354
+ placement = "top"
355
+ >
356
+ < Box > Count</ Box >
357
+ </ Tooltip >
358
+ </ ParameterUsageRow >
352
359
{ parameter . values
353
360
. sort ( ( a , b ) => b . count - a . count )
354
361
. map ( ( usage , usageIndex ) => (
355
- < Box
362
+ < ParameterUsageRow
356
363
key = { `${ parameterIndex } -${ usageIndex } ` }
357
- sx = { {
358
- display : "flex" ,
359
- alignItems : "baseline" ,
360
- justifyContent : "space-between" ,
361
- py : 0.5 ,
362
- gap : 5 ,
363
- } }
364
364
>
365
365
< ParameterUsageLabel
366
366
usage = { usage }
367
367
parameter = { parameter }
368
368
/>
369
369
< Box sx = { { textAlign : "right" } } > { usage . count } </ Box >
370
- </ Box >
370
+ </ ParameterUsageRow >
371
371
) ) }
372
372
</ Box >
373
373
</ Box >
@@ -378,6 +378,14 @@ const TemplateParametersUsagePanel = ({
378
378
)
379
379
}
380
380
381
+ const ParameterUsageRow = styled ( Box ) ( ( { theme } ) => ( {
382
+ display : "flex" ,
383
+ alignItems : "baseline" ,
384
+ justifyContent : "space-between" ,
385
+ padding : theme . spacing ( 0.5 , 0 ) ,
386
+ gap : theme . spacing ( 5 ) ,
387
+ } ) )
388
+
381
389
const ParameterUsageLabel = ( {
382
390
usage,
383
391
parameter,
@@ -386,16 +394,7 @@ const ParameterUsageLabel = ({
386
394
parameter : TemplateParameterUsage
387
395
} ) => {
388
396
if ( usage . value . trim ( ) === "" ) {
389
- return (
390
- < Box
391
- component = "span"
392
- sx = { {
393
- color : ( theme ) => theme . palette . text . secondary ,
394
- } }
395
- >
396
- Not set
397
- </ Box >
398
- )
397
+ return < Box component = "span" > Not set</ Box >
399
398
}
400
399
401
400
if ( parameter . options ) {
0 commit comments