From a35311f4dcc72b63308732f3ac9fecab4cf5da9e Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 3 Jul 2024 10:19:13 +0200 Subject: [PATCH] Various UI improvements (#2337) * Various UI improvements * Title updates * No results icon update * UI Improvements in DevTools --------- Co-authored-by: Sudheer Salavadi --- .../Assist/RecordingsList/RecordingsList.tsx | 2 +- .../components/SessionList/SessionList.tsx | 2 +- .../Client/Audit/AuditList/AuditList.tsx | 2 +- .../Client/CustomFields/CustomFields.js | 2 +- .../app/components/Client/Sites/Sites.tsx | 2 +- .../Users/components/UserList/UserList.tsx | 2 +- .../components/Client/Webhooks/Webhooks.tsx | 2 +- .../ClickMapCard/ClickMapCard.tsx | 4 +- .../CustomMetricTable/CustomMetricTable.tsx | 4 +- .../CustomMetricTableErrors.tsx | 2 +- .../InsightsCard/InsightsCard.tsx | 4 +- .../CustomMetricsWidgets/SessionsBy.tsx | 4 +- .../BreakdownOfLoadedResources.tsx | 9 ++- .../PredefinedWidgets/CPULoad/CPULoad.tsx | 9 ++- .../CallsErrors5xx/CallsErrors5xx.tsx | 9 ++- .../components/Alerts/AlertsList.tsx | 2 +- .../SessionsModal/SessionsModal.tsx | 2 +- .../NewDashModal/ExampleCards.tsx | 18 +++--- .../Funnels/FunnelIssues/FunnelIssues.tsx | 2 +- .../FunnelIssuesList/FunnelIssuesList.tsx | 2 +- .../MetricViewHeader/MetricViewHeader.tsx | 23 ++++---- .../components/MetricsList/ListView.tsx | 2 +- .../components/MetricsList/MetricsList.tsx | 2 +- .../WidgetSessions/WidgetSessions.tsx | 2 +- .../components/WidgetView/WidgetView.tsx | 2 +- frontend/app/components/FFlags/FFlagsList.tsx | 2 +- .../Funnels/FunnelIssues/FunnelIssues.js | 2 +- .../FunnelIssuesHeader/FunnelIssuesHeader.js | 4 +- .../FunnelSessionList/FunnelSessionList.js | 2 +- .../Funnels/FunnelWidget/FunnelWidget.tsx | 4 +- .../EventsBlock/Metadata/SessionList.js | 2 +- .../EventsBlock/Metadata/SessionList.js | 2 +- .../components/Session_/Fetch/FetchDetails.js | 4 +- .../Fetch/components/Headers/Headers.tsx | 2 +- .../shared/AnimatedSVG/AnimatedSVG.tsx | 34 +++++------ .../components/shared/CopyText/CopyText.tsx | 4 +- .../SessionListModal/SessionListModal.tsx | 2 +- .../DevTools/ConsolePanel/ConsolePanel.tsx | 2 +- .../shared/DevTools/ConsoleRow/ConsoleRow.tsx | 15 +++-- .../shared/DevTools/TimeTable/TimeTable.tsx | 2 +- .../FetchDetailsModal/FetchDetailsModal.tsx | 9 +-- .../FetchBasicDetails/FetchBasicDetails.tsx | 57 +++++++++++-------- .../components/FetchTabs/FetchTabs.tsx | 16 +++--- .../components/Headers/Headers.tsx | 2 +- .../Filters/FilterModal/FilterModal.tsx | 4 +- .../Insights/SankeyChart/SankeyChart.tsx | 9 ++- .../LiveSessionList/LiveSessionList.tsx | 2 +- .../shared/ResultTimings/ResultTimings.js | 2 +- .../components/Notes/NoteList.tsx | 2 +- .../components/SessionList/SessionList.tsx | 4 +- .../SortOrderButton/SortOrderButton.tsx | 3 +- .../UserSessionsModal/UserSessionsModal.tsx | 2 +- frontend/app/components/ui/Button/Button.tsx | 2 +- frontend/app/components/ui/Modal/Modal.tsx | 2 +- frontend/app/svg/ghost.svg | 5 ++ 55 files changed, 182 insertions(+), 138 deletions(-) create mode 100644 frontend/app/svg/ghost.svg diff --git a/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx b/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx index 7c67c156f..ad979f06a 100644 --- a/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx +++ b/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx @@ -25,7 +25,7 @@ function RecordingsList() { show={length === 0} title={
- +
{recordsSearch !== '' ? 'No matching results' diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx index d87c01e7b..d24731ad6 100644 --- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx +++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx @@ -38,7 +38,7 @@ function SessionList(props: Props) { show={!props.loading && props.list.length === 0} title={
- +
No live sessions found
diff --git a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx index 53629c6d2..43ba629e3 100644 --- a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx +++ b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx @@ -37,7 +37,7 @@ function AuditList(props: Props) { - +
No data available
} diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js index 01cabb532..a525094f3 100644 --- a/frontend/app/components/Client/CustomFields/CustomFields.js +++ b/frontend/app/components/Client/CustomFields/CustomFields.js @@ -90,7 +90,7 @@ function CustomFields(props) { - + {/*
*/}
None added yet
diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx index ccab226c2..0b716fb4c 100644 --- a/frontend/app/components/Client/Sites/Sites.tsx +++ b/frontend/app/components/Client/Sites/Sites.tsx @@ -135,7 +135,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => { - +
No matching results
} diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx index 7a09dce3f..0225a3c09 100644 --- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx +++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx @@ -45,7 +45,7 @@ function UserList(props: Props) { - +
No matching results
} diff --git a/frontend/app/components/Client/Webhooks/Webhooks.tsx b/frontend/app/components/Client/Webhooks/Webhooks.tsx index d4c0e52e5..023d5a789 100644 --- a/frontend/app/components/Client/Webhooks/Webhooks.tsx +++ b/frontend/app/components/Client/Webhooks/Webhooks.tsx @@ -59,7 +59,7 @@ function Webhooks() { - +
None added yet
} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx index cb2f5fbea..4ade052f2 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx @@ -43,9 +43,9 @@ function ClickMapCard({ +
- No data for selected period or URL + No data available for the selected period.
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx index 9dea09596..02febea23 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx @@ -57,9 +57,9 @@ function CustomMetricTable(props: Props) { show={data.values && data.values.length === 0} size="small" title={ -
+
- No data for the selected time period + No data available for the selected period.
} > diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx index 0a05af579..ffa9cf436 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx @@ -45,7 +45,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) { return ( No data for the selected time period
} + title={
No data available for the selected period.
} show={!data.errors || data.errors.length === 0} size="small" style={{ minHeight: 220 }} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx index caa16e0c4..3124ea53b 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx @@ -59,9 +59,9 @@ function InsightsCard({ data }: any) { +
- No data for selected period + No data available for the selected period.
} show={data.issues && data.issues.length === 0} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index 288e40992..e1afe2265 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -59,9 +59,9 @@ function SessionsBy(props: Props) { className="flex flex-col items-center justify-center" imageStyle={{ height: 60 }} description={ -
+
- No data for the selected time period + No data available for the selected period.
} /> diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx index f28f81fff..a08bf610f 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { NoContent } from 'UI'; +import { NoContent, Icon } from 'UI'; import { Styles } from '../../common'; import { BarChart, Bar, CartesianGrid, Tooltip, @@ -18,7 +18,12 @@ function BreakdownOfLoadedResources(props: Props) { return ( + + No data available for the selected period. +
+ } show={ metric.data.chart && metric.data.chart.length === 0 } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx index ec1aaee92..a6906ca9a 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { NoContent } from 'UI'; +import { NoContent, Icon } from 'UI'; import { Styles } from '../../common'; import { AreaChart, Area, @@ -19,7 +19,12 @@ function CPULoad(props: Props) { return ( + + No data available for the selected period. +
+ } show={ metric.data.chart && metric.data.chart.length === 0 } style={ { height: '240px' } } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx index ee8bb056f..d61ebcf1a 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { NoContent } from 'UI'; +import { NoContent, Icon } from 'UI'; import { Styles } from '../../common'; import { CartesianGrid, Tooltip, @@ -16,7 +16,12 @@ function CallsErrors5xx(props: Props) { return ( + + No data available for the selected period. + + } show={ metric.data.chart.length === 0 } style={ { height: '240px' } } > diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx index dda4c4fbe..616229f0e 100644 --- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx +++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx @@ -36,7 +36,7 @@ function AlertsList({ siteId }: Props) { show={list.length === 0} title={
- +
{alertsSearch !== '' ? 'No matching results' : 'You haven\'t created any alerts yet'}
diff --git a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx index 72c8b7194..26b4a5cc1 100644 --- a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx +++ b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx @@ -61,7 +61,7 @@ function SessionsModal(props: Props) { - +
No recordings found.
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index 3ede58409..2d1b9bea0 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -535,7 +535,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'DOM Content Loaded Start', + title: 'Avg. DOM Content Loaded Start', key: FilterKey.AVG_DOM_CONTENT_LOAD_START, cardType: WEB_VITALS, metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START, @@ -605,7 +605,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Page Response Time', + title: 'Avg. Page Response Time', key: FilterKey.AVG_PAGES_RESPONSE_TIME, cardType: WEB_VITALS, metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME, @@ -615,7 +615,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Request Load Time', + title: 'Avg. Request Load Time', key: FilterKey.AVG_REQUEST_LOADT_IME, cardType: WEB_VITALS, metricOf: FilterKey.AVG_REQUEST_LOADT_IME, @@ -624,7 +624,7 @@ export const CARD_LIST: CardType[] = [ example: WebVital }, { - title: 'Response Time', + title: 'Avg. Response Time', key: FilterKey.AVG_RESPONSE_TIME, cardType: WEB_VITALS, metricOf: FilterKey.AVG_RESPONSE_TIME, @@ -634,7 +634,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Session Duration', + title: 'Avg. Session Duration', key: FilterKey.AVG_SESSION_DURATION, cardType: WEB_VITALS, metricOf: FilterKey.AVG_SESSION_DURATION, @@ -644,7 +644,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Time Till First Byte', + title: 'Avg. Time Till First Byte', key: FilterKey.AVG_TILL_FIRST_BYTE, cardType: WEB_VITALS, metricOf: FilterKey.AVG_TILL_FIRST_BYTE, @@ -654,7 +654,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Time to be Interactive', + title: 'Avg. Time to be Interactive', key: FilterKey.AVG_TIME_TO_INTERACTIVE, cardType: WEB_VITALS, metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE, @@ -664,7 +664,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'Time to Render', + title: 'Avg. Time to Render', key: FilterKey.AVG_TIME_TO_RENDER, cardType: WEB_VITALS, metricOf: FilterKey.AVG_TIME_TO_RENDER, @@ -674,7 +674,7 @@ export const CARD_LIST: CardType[] = [ }, { - title: 'JS Heap Size', + title: 'Avg. JS Heap Size', key: FilterKey.AVG_USED_JS_HEAP_SIZE, cardType: WEB_VITALS, metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE, diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx index 28ad4274e..172fef923 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx @@ -59,7 +59,7 @@ function FunnelIssues() { return useObserver(() => (
-

Most significant issues identified in this funnel

+

Significant issues in this funnel

diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx index 6221b2c03..a8b7f549e 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx @@ -116,7 +116,7 @@ function FunnelIssuesList(props: RouteComponentProps) { show={!loading && filteredIssues.length === 0} title={
- +
No issues found
} diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx index 67055980f..8e042c302 100644 --- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx +++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx @@ -38,15 +38,6 @@ function MetricViewHeader({siteId}: { siteId: string }) {
- - metricStore.updateKey('filter', {...filter, showMine: !filter.showMine}) - } - /> + + metricStore.updateKey('filter', {...filter, showMine: !filter.showMine}) + } + />
{/**/} @@ -112,6 +112,7 @@ function DashboardDropdown({onChange, plain = false}: { plain?: boolean; onChang value={metricStore.filter.dashboard} onChange={({value}: any) => onChange(value)} isMulti={true} + color='black' /> ); } diff --git a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx index 1cb35a25d..81d8be66d 100644 --- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx +++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx @@ -34,7 +34,7 @@ function ListView(props: Props) {
Owner
Visibility
Last Modified
-
Options
+
Options
{list.map((metric: any) => ( - +
{metricsSearch !== '' ? 'No matching results' : 'You haven\'t created any cards yet'}
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx index a23d6ea10..9362df9ff 100644 --- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx +++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx @@ -142,7 +142,7 @@ function WidgetSessions(props: Props) { - +
No relevant sessions found for the selected time period diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index 8202016ca..74ed781f0 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -132,7 +132,7 @@ function WidgetView(props: Props) { show={metricNotFound} title={
- +
Metric not found!
} diff --git a/frontend/app/components/FFlags/FFlagsList.tsx b/frontend/app/components/FFlags/FFlagsList.tsx index 485d919e9..e89a2050c 100644 --- a/frontend/app/components/FFlags/FFlagsList.tsx +++ b/frontend/app/components/FFlags/FFlagsList.tsx @@ -62,7 +62,7 @@ function FFlagsList({ siteId }: { siteId: string }) { show={featureFlagsStore.flags.length === 0} title={
- +
{featureFlagsStore.sort.query === '' ? "You haven't created any feature flags yet" diff --git a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js index 33c0e25c3..3a6070afe 100644 --- a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js +++ b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js @@ -45,7 +45,7 @@ function FunnelIssues(props) { - +
No Issues Found!
} diff --git a/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js b/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js index c8155f6c8..76688e6f0 100644 --- a/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js +++ b/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js @@ -6,9 +6,9 @@ function FunnelIssuesHeader({ criticalIssuesCount, filters }) {
- Most significant issues + Significant issues
-
identified in this funnel
+
in this funnel
) diff --git a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js index f146c8ab9..c7aca3149 100644 --- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js +++ b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js @@ -31,7 +31,7 @@ function FunnelSessionList(props) { - +
No recordings found!
} diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx index 7866bcbd3..77467e59e 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx @@ -52,9 +52,9 @@ function FunnelWidget(props: Props) { +
- No data for selected period + No data available for the selected period.
} show={!stages || stages.length === 0} diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js index 5279c6390..886db62a8 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js +++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js @@ -28,7 +28,7 @@ class SessionList extends React.PureComponent { show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)} title={
- +
No sessions found
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js index 5279c6390..886db62a8 100644 --- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js +++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js @@ -28,7 +28,7 @@ class SessionList extends React.PureComponent { show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)} title={
- +
No sessions found
diff --git a/frontend/app/components/Session_/Fetch/FetchDetails.js b/frontend/app/components/Session_/Fetch/FetchDetails.js index 81dc5a848..accf1b10a 100644 --- a/frontend/app/components/Session_/Fetch/FetchDetails.js +++ b/frontend/app/components/Session_/Fetch/FetchDetails.js @@ -44,7 +44,7 @@ export default class FetchDetails extends React.PureComponent { - +
Body is Empty
} @@ -68,7 +68,7 @@ export default class FetchDetails extends React.PureComponent { - +
Body is Empty
} diff --git a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx index 4f5b2db43..0f48fb792 100644 --- a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx +++ b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx @@ -9,7 +9,7 @@ function Headers(props) { - +
No data available
} diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx index df7685b3a..f963b5a74 100644 --- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx +++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx @@ -35,27 +35,27 @@ const ICONS_SVGS = { [ICONS.EMPTY_STATE]: require('../../../svg/empty-state.svg').default, [ICONS.LOGO_SMALL]: require('../../../svg/logo-small.svg').default, [ICONS.LOGO_FULL]: require('../../../svg/logo.svg').default, - [ICONS.NO_RESULTS]: require('../../../svg/no-results.svg').default, + [ICONS.NO_RESULTS]: require('../../../svg/ghost.svg').default, [ICONS.LOADER]: require('../../../svg/openreplay-preloader.svg').default, [ICONS.SIGNAL_GREEN]: require('../../../svg/signal-green.svg').default, [ICONS.SIGNAL_RED]: require('../../../svg/signal-red.svg').default, - [ICONS.NO_BOOKMARKS]: require('../../../svg/ca-no-bookmarked-session.svg').default, - [ICONS.NO_LIVE_SESSIONS]: require('../../../svg/ca-no-live-sessions.svg').default, - [ICONS.NO_SESSIONS]: require('../../../svg/ca-no-sessions.svg').default, - [ICONS.NO_SESSIONS_IN_VAULT]: require('../../../svg/ca-no-sessions-in-vault.svg').default, - [ICONS.NO_WEBHOOKS]: require('../../../svg/ca-no-webhooks.svg').default, - [ICONS.NO_METADATA]: require('../../../svg/ca-no-metadata.svg').default, - [ICONS.NO_ISSUES]: require('../../../svg/ca-no-issues.svg').default, - [ICONS.NO_AUDIT_TRAIL]: require('../../../svg/ca-no-audit-trail.svg').default, - [ICONS.NO_ANNOUNCEMENTS]: require('../../../svg/ca-no-announcements.svg').default, - [ICONS.NO_ALERTS]: require('../../../svg/ca-no-alerts.svg').default, - [ICONS.NO_NOTES]: require('../../../svg/ca-no-notes.svg').default, - [ICONS.NO_CARDS]: require('../../../svg/ca-no-cards.svg').default, - [ICONS.NO_RECORDINGS]: require('../../../svg/ca-no-recordings.svg').default, - [ICONS.NO_SEARCH_RESULTS]: require('../../../svg/ca-no-search-results.svg').default, + [ICONS.NO_BOOKMARKS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_LIVE_SESSIONS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_SESSIONS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_SESSIONS_IN_VAULT]: require('../../../svg/ghost.svg').default, + [ICONS.NO_WEBHOOKS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_METADATA]: require('../../../svg/ghost.svg').default, + [ICONS.NO_ISSUES]: require('../../../svg/ghost.svg').default, + [ICONS.NO_AUDIT_TRAIL]: require('../../../svg/ghost.svg').default, + [ICONS.NO_ANNOUNCEMENTS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_ALERTS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_NOTES]: require('../../../svg/ghost.svg').default, + [ICONS.NO_CARDS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_RECORDINGS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_SEARCH_RESULTS]: require('../../../svg/ghost.svg').default, [ICONS.NO_DASHBOARDS]: require('../../../svg/ca-no-dashboards.svg').default, - [ICONS.NO_PROJECTS]: require('../../../svg/ca-no-projects.svg').default, - [ICONS.NO_FFLAGS]: require('../../../svg/no-fflags.svg').default, + [ICONS.NO_PROJECTS]: require('../../../svg/ghost.svg').default, + [ICONS.NO_FFLAGS]: require('../../../svg/ghost.svg').default, [ICONS.PROCESSING]: require('../../../svg/ca-processing.svg').default, [ICONS.NO_UXT]: require('../../../svg/empty-uxt-list.svg').default, }; diff --git a/frontend/app/components/shared/CopyText/CopyText.tsx b/frontend/app/components/shared/CopyText/CopyText.tsx index 635865d0d..15091da74 100644 --- a/frontend/app/components/shared/CopyText/CopyText.tsx +++ b/frontend/app/components/shared/CopyText/CopyText.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Tooltip } from 'UI'; +import { Tooltip } from 'antd'; import copy from 'copy-to-clipboard'; interface Props { @@ -17,7 +17,7 @@ function CopyText(props: Props) { setTimeout(() => setIsCopied(false), 5000); }; return ( - + {children} ); diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx index 66c1ccfb0..d13b760d9 100644 --- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx +++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx @@ -103,7 +103,7 @@ function SessionListModal(props: Props) { show={ !loading && (filteredSessions.length === 0 )} title={
- +
No recordings found!
} diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index 88b0574a5..503301c78 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -220,7 +220,7 @@ function ConsolePanel({ ref={_list} deferredMeasurementCache={cache} overscanRowCount={5} - estimatedRowSize={36} + estimatedRowSize={24} rowCount={Math.ceil(filteredList.length || 1)} rowHeight={cache.rowHeight} rowRenderer={_rowRenderer} diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx index f5cc104f7..39e18e161 100644 --- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx +++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx @@ -34,7 +34,7 @@ function ConsoleRow(props: Props) {
-
-
+
+
{canExpand && ( )} - {renderWithNL(lines.pop())} + + {renderWithNL(lines.pop())} +
- {log.errorId && } + {log.errorId && +
+ {log.message} +
}
{canExpand && expanded && diff --git a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx index 63b9ed658..89c381252 100644 --- a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx +++ b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx @@ -83,7 +83,7 @@ type State = TimeLineInfo & typeof initialState; //const TABLE_HEIGHT = 195; let _additionalHeight = 0; -const ROW_HEIGHT = 32; +const ROW_HEIGHT = 24; //const VISIBLE_COUNT = Math.ceil(TABLE_HEIGHT/ROW_HEIGHT); const TIME_SECTIONS_COUNT = 8; diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx index 661c7535c..3949d186c 100644 --- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import FetchBasicDetails from './components/FetchBasicDetails'; -import { Button } from 'UI'; +import { Button } from 'antd'; +import { ArrowRightOutlined, ArrowLeftOutlined} from '@ant-design/icons'; import { ResourceType } from 'Player'; import FetchTabs from './components/FetchTabs/FetchTabs'; import { useStore } from 'App/mstore'; @@ -53,17 +54,17 @@ function FetchDetailsModal(props: Props) { return (
-
Network Request
+
Network Request
{isXHR && } {rows && rows.length > 0 && (
- -
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx index ef040ea1b..479379b8e 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from 'react'; import { formatBytes } from 'App/utils'; import CopyText from 'Shared/CopyText'; +import {Tag} from 'antd'; import cn from 'classnames'; interface Props { @@ -33,56 +34,66 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
- {!!resource.decodedBodySize && ( -
-
Size
-
- {formatBytes(resource.decodedBodySize)} -
-
- )} - {resource.method && (
-
Request Method
-
+
Request Method
+ {resource.method} -
+
)} {resource.status && (
-
Status
-
Status Code
+ {resource.status === '200' && ( -
+ )} {resource.status} -
+
)} +
+
Type
+ + {resource.type} + +
+ + {!!resource.decodedBodySize && ( +
+
Size
+ + {formatBytes(resource.decodedBodySize)} + +
+ )} + + + {!!_duration && (
-
Duration
-
+
Duration
+ {_duration} ms -
+
)} {timestamp && (
-
Time
-
+
Time
+ {timestamp} -
+
)} diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx index fedcca070..92f4f28fa 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx @@ -105,15 +105,15 @@ function FetchTabs({ resource }: Props) { - -
- Body is Empty or not captured. + +
+ Body is empty or not captured. {' '} Configure {' '} - network capturing to get more out of fetch/XHR requests. + network capturing to get more out of Fetch/XHR requests.
} @@ -137,15 +137,15 @@ function FetchTabs({ resource }: Props) { - -
- Body is Empty or not captured. + +
+ Body is empty or not captured. {' '} Configure {' '} - network capturing to get more out of fetch/XHR requests. + network capturing to get more out of Fetch/XHR requests.
} diff --git a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx index 5ebb8b474..2a3d4e830 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx @@ -13,7 +13,7 @@ function Headers(props: Props) { - +
No data available
} diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index fd850c0c9..d16e6dfa9 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -225,8 +225,8 @@ function FilterModal(props: Props) {
{isResultEmpty && !fetchingFilterSearchList ? (
- -
+ +
{' '} No Suggestions Found
diff --git a/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx b/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx index 02670e875..e99780d26 100644 --- a/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx +++ b/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx @@ -2,7 +2,7 @@ import React, {useState} from 'react'; import {Sankey, ResponsiveContainer} from 'recharts'; import CustomLink from './CustomLink'; import CustomNode from './CustomNode'; -import {NoContent} from 'UI'; +import {NoContent, Icon} from 'UI'; interface Node { idd: string; @@ -101,7 +101,12 @@ const SankeyChart: React.FC = ({data, height = 240, onChartClick}: Props) + + No data available for the selected period. +
+ } > - +
No live sessions found
diff --git a/frontend/app/components/shared/ResultTimings/ResultTimings.js b/frontend/app/components/shared/ResultTimings/ResultTimings.js index c78a08c42..5b38a7d09 100644 --- a/frontend/app/components/shared/ResultTimings/ResultTimings.js +++ b/frontend/app/components/shared/ResultTimings/ResultTimings.js @@ -26,7 +26,7 @@ function ResultTimings({ duration, timing }) { - +
No Data!
} diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx index db6b57ccc..199a70f12 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx @@ -22,7 +22,7 @@ function NotesList({ members }: { members: Array> }) { title={
{/* */} - +
No notes yet
} diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx index dfd2a8504..0f95dd232 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx @@ -213,7 +213,9 @@ function SessionList(props: Props) { - + + +
{NO_CONTENT.message} diff --git a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx index e9c634b3e..3b23b814f 100644 --- a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx +++ b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Icon, Tooltip } from 'UI'; import { Segmented } from 'antd'; import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; -import cn from 'classnames'; interface Props { sortOrder: string; @@ -21,6 +19,7 @@ export default React.memo(function SortOrderButton(props: Props) { { label: 'Ascending', value: 'Ascending', icon: }, { label: 'Descending', value: 'Descending', icon: }, ]} + defaultValue="Descending" onChange={(value) => { if (value === 'Ascending') { onChange('asc'); diff --git a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx index a878166a8..d1a4fdf6e 100644 --- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx +++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx @@ -61,7 +61,7 @@ function UserSessionsModal(props: Props) { - +
No recordings found
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx index 2b0514c87..5f67d89c4 100644 --- a/frontend/app/components/ui/Button/Button.tsx +++ b/frontend/app/components/ui/Button/Button.tsx @@ -45,7 +45,7 @@ export default (props: Props) => { }; let classes = cn( - 'relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap', + 'relative flex items-center h-10 px-3 rounded-lg tracking-wide whitespace-nowrap', variantClasses[variant], { 'opacity-40 pointer-events-none': disabled }, { '!rounded-full h-10 w-10 justify-center': rounded }, diff --git a/frontend/app/components/ui/Modal/Modal.tsx b/frontend/app/components/ui/Modal/Modal.tsx index 3ebcf0c17..b4bf374fc 100644 --- a/frontend/app/components/ui/Modal/Modal.tsx +++ b/frontend/app/components/ui/Modal/Modal.tsx @@ -25,7 +25,7 @@ function Modal(props: Props) { style.width = '300px'; break; case 'small': - style.width = '400px'; + style.width = '420px'; break; case 'large': style.width = '700px'; diff --git a/frontend/app/svg/ghost.svg b/frontend/app/svg/ghost.svg new file mode 100644 index 000000000..6a52f2814 --- /dev/null +++ b/frontend/app/svg/ghost.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file