diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx index 6a6807004..c0b3767e2 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { NoContent } from 'UI'; import { Styles, Table } from '../../common'; import { List } from 'immutable'; @@ -17,7 +17,8 @@ const cols: Array = [ { key: 'sessions', title: 'Sessions', - toText: (count: number) => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`, + toText: (count: number) => + `${count > 1000 ? Math.trunc(count / 1000) : count}${count > 1000 ? 'k' : ''}`, width: '20%', }, { @@ -25,7 +26,7 @@ const cols: Array = [ title: 'Trend', Component: Chart, width: '20%', - } + }, ]; const copyPathCol = { @@ -34,40 +35,41 @@ const copyPathCol = { Component: CopyPath, cellClass: 'invisible group-hover:visible text-right', width: '20%', -} +}; interface Props { - data: any - metric?: any - isTemplate?: boolean + data: any; + metric?: any; + isTemplate?: boolean; } function MissingResources(props: Props) { - const { data, metric, isTemplate } = props; + const { data, metric, isTemplate } = props; - if (!isTemplate) { + useEffect(() => { + const lastCol: any = cols[cols.length - 1]; + if (!isTemplate && lastCol && lastCol.key !== 'copy-path') { cols.push(copyPathCol); } + }, []); - console.log('metric.data.chart', metric.data.chart); - - return ( - -
- - - - ); + return ( + +
+
+ + + ); } export default MissingResources; diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx index 97aebc599..ae873f2fb 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { NoContent } from 'UI'; import { Styles, Table } from '../../common'; import { List } from 'immutable'; @@ -8,12 +8,12 @@ import Chart from './Chart'; import ImageInfo from './ImageInfo'; import ResourceType from './ResourceType'; import CopyPath from './CopyPath'; -import { NO_METRIC_DATA } from 'App/constants/messages' +import { NO_METRIC_DATA } from 'App/constants/messages'; export const RESOURCE_OPTIONS = [ - { text: 'All', value: 'ALL', }, - { text: 'CSS', value: 'STYLESHEET', }, - { text: 'JS', value: 'SCRIPT', }, + { text: 'All', value: 'ALL' }, + { text: 'CSS', value: 'STYLESHEET' }, + { text: 'JS', value: 'SCRIPT' }, ]; const cols: Array = [ @@ -35,7 +35,7 @@ const cols: Array = [ { key: 'avg', title: 'Load Time', - toText: avg => `${ avg ? numberWithCommas(Math.trunc(avg)) : 0} ms`, + toText: (avg) => `${avg ? numberWithCommas(Math.trunc(avg)) : 0} ms`, className: 'justify-center', width: '15%', }, @@ -44,7 +44,7 @@ const cols: Array = [ title: 'Trend', Component: Chart, width: '15%', - } + }, ]; const copyPathCol = { @@ -53,38 +53,41 @@ const copyPathCol = { Component: CopyPath, cellClass: 'invisible group-hover:visible text-right', width: '15%', -} +}; interface Props { - data: any - metric?: any - isTemplate?: boolean + data: any; + metric?: any; + isTemplate?: boolean; } function SlowestResources(props: Props) { - const { data, metric, isTemplate } = props; + const { data, metric, isTemplate } = props; - if (!isTemplate) { + useEffect(() => { + const lastCol: any = cols[cols.length - 1]; + if (!isTemplate && lastCol && lastCol.key !== 'copy-path') { cols.push(copyPathCol); } - - return ( - -
-
- - - ); + }, []); + + return ( + +
+
+ + + ); } export default SlowestResources; diff --git a/frontend/app/styles/reset.css b/frontend/app/styles/reset.css index c551e31dc..e1cace6ed 100644 --- a/frontend/app/styles/reset.css +++ b/frontend/app/styles/reset.css @@ -38,6 +38,7 @@ input:focus { * { &::-webkit-scrollbar { width: 2px; + height: 0; } &::-webkit-scrollbar-thumb {