From 2931f9b6c5dbe2a3a28273a9b8b7cb5c5ed91c06 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 2 Jul 2024 13:34:07 +0200 Subject: [PATCH] change(ui): check for enterprise cards --- .../DashboardList/DashboardList.tsx | 2 +- .../NewDashModal/ExampleCards.tsx | 1340 +++++++++-------- .../NewDashModal/NewDashboardModal.tsx | 15 +- .../DashboardList/NewDashModal/SelectCard.tsx | 216 +-- 4 files changed, 793 insertions(+), 780 deletions(-) diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 7740ec10b..56c73b692 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -44,7 +44,7 @@ function DashboardList({ siteId }: { siteId: string }) { title: 'Owner', dataIndex: 'owner', width: '16.67%', - sorter: (a, b) => a.owner.localeCompare(b.owner), + sorter: (a, b) => a.owner?.localeCompare(b.owner), sortDirections: ['ascend', 'descend'], }, { diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index 3732dd995..777f02175 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -1,737 +1,739 @@ -import ExampleFunnel from "./Examples/Funnel"; -import ExamplePath from "./Examples/Path"; -import ExampleTrend from "./Examples/Trend"; -import Trend from "./Examples/Trend"; -import PerfBreakdown from "./Examples/PerfBreakdown"; -import ByBrowser from "./Examples/SessionsBy/ByBrowser"; -import BySystem from "./Examples/SessionsBy/BySystem"; -import ByCountry from "./Examples/SessionsBy/ByCountry"; -import ByUrl from "./Examples/SessionsBy/ByUrl"; -import {ERRORS, FUNNEL, INSIGHTS, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS} from "App/constants/card"; -import {FilterKey} from "Types/filter/filterType"; -import {Activity, BarChart, TableCellsMerge, TrendingUp} from "lucide-react"; -import WebVital from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital"; -import Bars from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars"; -import ByIssues from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues"; -import InsightsExample from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample"; -import ByUser from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser"; -import BarChartCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart"; -import AreaChartCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard"; +import ExampleFunnel from './Examples/Funnel'; +import ExamplePath from './Examples/Path'; +import ExampleTrend from './Examples/Trend'; +import Trend from './Examples/Trend'; +import PerfBreakdown from './Examples/PerfBreakdown'; +import ByBrowser from './Examples/SessionsBy/ByBrowser'; +import BySystem from './Examples/SessionsBy/BySystem'; +import ByCountry from './Examples/SessionsBy/ByCountry'; +import ByUrl from './Examples/SessionsBy/ByUrl'; +import { ERRORS, FUNNEL, INSIGHTS, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS } from 'App/constants/card'; +import { FilterKey } from 'Types/filter/filterType'; +import { Activity, BarChart, TableCellsMerge, TrendingUp } from 'lucide-react'; +import WebVital from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital'; +import Bars from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars'; +import ByIssues from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues'; +import InsightsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample'; +import ByUser from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser'; +import BarChartCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart'; +import AreaChartCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard'; import CallsWithErrorsExample - from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample"; + from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample'; import SessionsPerBrowserExample - from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample'; + from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample'; import SlowestDomains - from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains'; + from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains'; import SpeedIndexByLocationExample - from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample'; + from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample'; export const CARD_CATEGORY = { - PRODUCT_ANALYTICS: 'product-analytics', - PERFORMANCE_MONITORING: 'performance-monitoring', - WEB_ANALYTICS: 'web-analytics', - ERROR_TRACKING: 'error-tracking', - WEB_VITALS: 'web-vitals', -} + PRODUCT_ANALYTICS: 'product-analytics', + PERFORMANCE_MONITORING: 'performance-monitoring', + WEB_ANALYTICS: 'web-analytics', + ERROR_TRACKING: 'error-tracking', + WEB_VITALS: 'web-vitals' +}; export const CARD_CATEGORIES = [ - {key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS]}, - {key: CARD_CATEGORY.PERFORMANCE_MONITORING, label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES]}, - {key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE]}, - {key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS]}, - {key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS]} + { key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS] }, + { key: CARD_CATEGORY.PERFORMANCE_MONITORING, label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES] }, + { key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE] }, + { key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS] }, + { key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS] } ]; export interface CardType { - title: string; - key: string; - cardType: string; - category: string; - example: any; - metricOf?: string; - width?: number; - data?: any; - height?: number; + title: string; + key: string; + cardType: string; + category: string; + example: any; + metricOf?: string; + width?: number; + data?: any; + height?: number; + isEnterprise?: boolean; } export const CARD_LIST: CardType[] = [ - { - title: 'Funnel', - key: FUNNEL, - cardType: FUNNEL, - category: CARD_CATEGORIES[0].key, - example: ExampleFunnel, - width: 4, - height: 356, - data: { - stages: [ - { - "value": [ - "/sessions" - ], - "type": "location", - "operator": "contains", - "sessionsCount": 1586, - "dropPct": null, - "usersCount": 470, - "dropDueToIssues": 0 - }, - { - "value": [], - "type": "click", - "operator": "onAny", - "sessionsCount": 1292, - "dropPct": 18, - "usersCount": 450, - "dropDueToIssues": 294 - } - ], - totalDropDueToIssues: 294 + { + title: 'Funnel', + key: FUNNEL, + cardType: FUNNEL, + category: CARD_CATEGORIES[0].key, + example: ExampleFunnel, + width: 4, + height: 356, + data: { + stages: [ + { + 'value': [ + '/sessions' + ], + 'type': 'location', + 'operator': 'contains', + 'sessionsCount': 1586, + 'dropPct': null, + 'usersCount': 470, + 'dropDueToIssues': 0 + }, + { + 'value': [], + 'type': 'click', + 'operator': 'onAny', + 'sessionsCount': 1292, + 'dropPct': 18, + 'usersCount': 450, + 'dropDueToIssues': 294 } + ], + totalDropDueToIssues: 294 + } + }, + { + title: 'Path Finder', + key: USER_PATH, + cardType: USER_PATH, + category: CARD_CATEGORIES[0].key, + example: ExamplePath + }, + { + title: 'Sessions Trend', + key: TIMESERIES, + cardType: TIMESERIES, + metricOf: 'sessionCount', + category: CARD_CATEGORIES[0].key, + data: { + chart: generateTimeSeriesData(), + label: 'Number of Sessions', + namesMap: [ + 'Series 1' + ] }, - { - title: 'Path Finder', - key: USER_PATH, - cardType: USER_PATH, - category: CARD_CATEGORIES[0].key, - example: ExamplePath, + example: ExampleTrend + }, + + { + title: 'Sessions by Issues', + key: FilterKey.ISSUE, + cardType: TABLE, + metricOf: FilterKey.ISSUE, + category: CARD_CATEGORIES[0].key, + example: ByIssues + }, + + { + title: 'Insights', + key: INSIGHTS, + cardType: INSIGHTS, + metricOf: 'issueCategories', + category: CARD_CATEGORIES[0].key, + width: 4, + isEnterprise: true, + example: InsightsExample + }, + + // Performance Monitoring + { + title: 'CPU Load', + key: FilterKey.CPU, + cardType: PERFORMANCE, + metricOf: FilterKey.CPU, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'CPU Load (%)', + namesMap: [ + 'Series 1' + ] }, - { - title: 'Sessions Trend', - key: TIMESERIES, - cardType: TIMESERIES, - metricOf: 'sessionCount', - category: CARD_CATEGORIES[0].key, - data: { - chart: generateTimeSeriesData(), - label: "Number of Sessions", - namesMap: [ - "Series 1" - ] + example: AreaChartCard + }, + + { + title: 'Crashes', + key: FilterKey.CRASHES, + cardType: PERFORMANCE, + metricOf: FilterKey.CRASHES, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'Framerate', + key: FilterKey.FPS, + cardType: PERFORMANCE, + metricOf: FilterKey.FPS, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'Frames Per Second', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'DOM Building Time', + key: FilterKey.PAGES_DOM_BUILD_TIME, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_DOM_BUILD_TIME, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'DOM Build Time (ms)', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'Memory Consumption', + key: FilterKey.MEMORY_CONSUMPTION, + cardType: PERFORMANCE, + metricOf: FilterKey.MEMORY_CONSUMPTION, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'JS Heap Size (MB)', + unit: 'mb', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'Page Response Time', + key: FilterKey.PAGES_RESPONSE_TIME, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_RESPONSE_TIME, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'Page Response Time (ms)', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'Page Response Time Distribution', + key: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateBarChartData(), + label: 'Number of Calls', + unit: 'ms', + namesMap: [ + 'Series 1' + ] + }, + example: BarChartCard + }, + + { + title: 'Resources vs Visually Completed', + key: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, + cardType: PERFORMANCE, + metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateBarChartData(), + namesMap: [ + 'Series 1' + ] + }, + example: BarChartCard + }, + + { + title: 'Sessions by Browser & Version', + key: FilterKey.SESSIONS_PER_BROWSER, + cardType: PERFORMANCE, + metricOf: FilterKey.SESSIONS_PER_BROWSER, + category: CARD_CATEGORIES[1].key, + data: generateRandomBarsData(), + example: SessionsPerBrowserExample + }, + + { + title: 'Slowest Domains', + key: FilterKey.SLOWEST_DOMAINS, + cardType: PERFORMANCE, + metricOf: FilterKey.SLOWEST_DOMAINS, + category: CARD_CATEGORIES[1].key, + // data: generateRandomBarsData(), + example: SlowestDomains + }, + + { + title: 'Speed Index by Location', + key: FilterKey.SPEED_LOCATION, + cardType: PERFORMANCE, + metricOf: FilterKey.SPEED_LOCATION, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + namesMap: [ + 'Series 1' + ] + }, + example: SpeedIndexByLocationExample + }, + + { + title: 'Time to Render', + key: FilterKey.TIME_TO_RENDER, + cardType: PERFORMANCE, + metricOf: FilterKey.TIME_TO_RENDER, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'Time to Render (ms)', + unit: 'ms', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + { + title: 'Sessions Impacted by Slow Pages', + key: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, + cardType: PERFORMANCE, + metricOf: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, + category: CARD_CATEGORIES[1].key, + data: { + chart: generateAreaData(), + label: 'Number of Sessions', + namesMap: [ + 'Series 1' + ] + }, + example: AreaChartCard + }, + + + // Web analytics + { + title: 'Sessions by Users', + key: FilterKey.USERID, + cardType: TABLE, + metricOf: FilterKey.USERID, + category: CARD_CATEGORIES[2].key, + example: ByUser + }, + + { + title: 'Sessions by Browser', + key: FilterKey.USER_BROWSER, + cardType: TABLE, + metricOf: FilterKey.USER_BROWSER, + category: CARD_CATEGORIES[2].key, + example: ByBrowser + }, + // { + // title: 'Sessions by System', + // key: TYPE.SESSIONS_BY_SYSTEM, + // cardType: TABLE, + // metricOf: FilterKey.USER_OS, + // category: CARD_CATEGORIES[2].key, + // example: BySystem, + // }, + { + title: 'Sessions by Country', + key: FilterKey.USER_COUNTRY, + cardType: TABLE, + metricOf: FilterKey.USER_COUNTRY, + category: CARD_CATEGORIES[2].key, + example: ByCountry + }, + + { + title: 'Sessions by Device', + key: FilterKey.USER_DEVICE, + cardType: TABLE, + metricOf: FilterKey.USER_DEVICE, + category: CARD_CATEGORIES[2].key, + example: BySystem + }, + { + title: 'Sessions by URL', + key: FilterKey.LOCATION, + cardType: TABLE, + metricOf: FilterKey.LOCATION, + category: CARD_CATEGORIES[2].key, + example: ByUrl + }, + + // Errors Tracking + { + title: 'JS Errors', + key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, + cardType: ERRORS, + metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, + category: CARD_CATEGORIES[3].key, + data: { + chart: generateBarChartData() + }, + example: BarChartCard + }, + { + title: 'Errors by Origin', + key: FilterKey.RESOURCES_BY_PARTY, + cardType: ERRORS, + metricOf: FilterKey.RESOURCES_BY_PARTY, + category: CARD_CATEGORIES[3].key, + data: { + chart: generateBarChartData() + }, + example: BarChartCard + }, + { + title: 'Errors by Domain', + key: FilterKey.ERRORS_PER_DOMAINS, + cardType: ERRORS, + metricOf: FilterKey.ERRORS_PER_DOMAINS, + category: CARD_CATEGORIES[3].key, + example: SlowestDomains + // data: generateRandomBarsData(), + }, + { + title: 'Errors by Type', + key: FilterKey.ERRORS_PER_TYPE, + cardType: ERRORS, + metricOf: FilterKey.ERRORS_PER_TYPE, + category: CARD_CATEGORIES[3].key, + data: { + chart: generateBarChartData() + }, + example: BarChartCard + }, + { + title: 'Calls with Errors', + key: FilterKey.CALLS_ERRORS, + cardType: ERRORS, + metricOf: FilterKey.CALLS_ERRORS, + category: CARD_CATEGORIES[3].key, + width: 4, + data: { + chart: [ + { + 'method': 'GET', + 'urlHostpath': 'https://openreplay.com', + 'allRequests': 1333, + '4xx': 1333, + '5xx': 0 }, - example: ExampleTrend, - }, - - { - title: 'Sessions by Issues', - key: FilterKey.ISSUE, - cardType: TABLE, - metricOf: FilterKey.ISSUE, - category: CARD_CATEGORIES[0].key, - example: ByIssues, - }, - - { - title: 'Insights', - key: INSIGHTS, - cardType: INSIGHTS, - metricOf: 'issueCategories', - category: CARD_CATEGORIES[0].key, - width: 4, - example: InsightsExample, - }, - - // Performance Monitoring - { - title: 'CPU Load', - key: FilterKey.CPU, - cardType: PERFORMANCE, - metricOf: FilterKey.CPU, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "CPU Load (%)", - namesMap: [ - "Series 1" - ] + { + 'method': 'POST', + 'urlHostpath': 'https://company.domain.com', + 'allRequests': 10, + '4xx': 10, + '5xx': 0 }, - example: AreaChartCard, + { + 'method': 'PUT', + 'urlHostpath': 'https://example.com', + 'allRequests': 3, + '4xx': 3, + '5xx': 0 + } + ] }, + example: CallsWithErrorsExample + }, - { - title: 'Crashes', - key: FilterKey.CRASHES, - cardType: PERFORMANCE, - metricOf: FilterKey.CRASHES, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, + { + title: '4xx Domains', + key: FilterKey.DOMAINS_ERRORS_4XX, + cardType: ERRORS, + metricOf: FilterKey.DOMAINS_ERRORS_4XX, + category: CARD_CATEGORIES[3].key, + data: { + chart: generateTimeSeriesData(), + label: 'Number of Errors', + namesMap: [ + 'Series 1' + ] }, + example: ExampleTrend + }, - { - title: 'Framerate', - key: FilterKey.FPS, - cardType: PERFORMANCE, - metricOf: FilterKey.FPS, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "Frames Per Second", - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, - }, - - { - title: 'DOM Building Time', - key: FilterKey.PAGES_DOM_BUILD_TIME, - cardType: PERFORMANCE, - metricOf: FilterKey.PAGES_DOM_BUILD_TIME, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "DOM Build Time (ms)", - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, - }, - - { - title: 'Memory Consumption', - key: FilterKey.MEMORY_CONSUMPTION, - cardType: PERFORMANCE, - metricOf: FilterKey.MEMORY_CONSUMPTION, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "JS Heap Size (MB)", - unit: 'mb', - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, - }, - - { - title: 'Page Response Time', - key: FilterKey.PAGES_RESPONSE_TIME, - cardType: PERFORMANCE, - metricOf: FilterKey.PAGES_RESPONSE_TIME, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "Page Response Time (ms)", - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, - }, - - { - title: 'Page Response Time Distribution', - key: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, - cardType: PERFORMANCE, - metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateBarChartData(), - label: "Number of Calls", - unit: 'ms', - namesMap: [ - "Series 1" - ] - }, - example: BarChartCard, - }, - - { - title: 'Resources vs Visually Completed', - key: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, - cardType: PERFORMANCE, - metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateBarChartData(), - namesMap: [ - "Series 1" - ] - }, - example: BarChartCard, - }, - - { - title: 'Sessions by Browser & Version', - key: FilterKey.SESSIONS_PER_BROWSER, - cardType: PERFORMANCE, - metricOf: FilterKey.SESSIONS_PER_BROWSER, - category: CARD_CATEGORIES[1].key, - data: generateRandomBarsData(), - example: SessionsPerBrowserExample, - }, - - { - title: 'Slowest Domains', - key: FilterKey.SLOWEST_DOMAINS, - cardType: PERFORMANCE, - metricOf: FilterKey.SLOWEST_DOMAINS, - category: CARD_CATEGORIES[1].key, - // data: generateRandomBarsData(), - example: SlowestDomains, - }, - - { - title: 'Speed Index by Location', - key: FilterKey.SPEED_LOCATION, - cardType: PERFORMANCE, - metricOf: FilterKey.SPEED_LOCATION, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - namesMap: [ - "Series 1" - ] - }, - example: SpeedIndexByLocationExample, - }, - - { - title: 'Time to Render', - key: FilterKey.TIME_TO_RENDER, - cardType: PERFORMANCE, - metricOf: FilterKey.TIME_TO_RENDER, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "Time to Render (ms)", - unit: 'ms', - namesMap: [ - "Series 1" - ] - }, - example: AreaChartCard, - }, - - { - title: 'Sessions Impacted by Slow Pages', - key: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, - cardType: PERFORMANCE, - metricOf: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, - category: CARD_CATEGORIES[1].key, - data: { - chart: generateAreaData(), - label: "Number of Sessions", - namesMap: [ - "Series 1" - ], - }, - example: AreaChartCard, + { + title: '5xx Domains', + key: FilterKey.DOMAINS_ERRORS_5XX, + cardType: ERRORS, + metricOf: FilterKey.DOMAINS_ERRORS_5XX, + category: CARD_CATEGORIES[3].key, + data: { + chart: generateTimeSeriesData(), + label: 'Number of Errors', + namesMap: [ + 'Series 1' + ] }, + example: ExampleTrend + }, - // Web analytics - { - title: 'Sessions by Users', - key: FilterKey.USERID, - cardType: TABLE, - metricOf: FilterKey.USERID, - category: CARD_CATEGORIES[2].key, - example: ByUser, - }, + // Web vitals + { + title: 'Avg. CPU Load', + key: FilterKey.AVG_CPU, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_CPU, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, + { + title: 'Avg. DOM Content Load Time', + key: FilterKey.AVG_DOM_CONTENT_LOADED, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_DOM_CONTENT_LOADED, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Sessions by Browser', - key: FilterKey.USER_BROWSER, - cardType: TABLE, - metricOf: FilterKey.USER_BROWSER, - category: CARD_CATEGORIES[2].key, - example: ByBrowser, - }, - // { - // title: 'Sessions by System', - // key: TYPE.SESSIONS_BY_SYSTEM, - // cardType: TABLE, - // metricOf: FilterKey.USER_OS, - // category: CARD_CATEGORIES[2].key, - // example: BySystem, - // }, - { - title: 'Sessions by Country', - key: FilterKey.USER_COUNTRY, - cardType: TABLE, - metricOf: FilterKey.USER_COUNTRY, - category: CARD_CATEGORIES[2].key, - example: ByCountry, - }, + { + title: 'DOM Content Loaded Start', + key: FilterKey.AVG_DOM_CONTENT_LOAD_START, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Sessions by Device', - key: FilterKey.USER_DEVICE, - cardType: TABLE, - metricOf: FilterKey.USER_DEVICE, - category: CARD_CATEGORIES[2].key, - example: BySystem, - }, - { - title: 'Sessions by URL', - key: FilterKey.LOCATION, - cardType: TABLE, - metricOf: FilterKey.LOCATION, - category: CARD_CATEGORIES[2].key, - example: ByUrl, - }, + { + title: 'Avg. First Meaningful Paint Time', + key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - // Errors Tracking - { - title: 'JS Errors', - key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, - cardType: ERRORS, - metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, - category: CARD_CATEGORIES[3].key, - data: { - chart: generateBarChartData(), - }, - example: BarChartCard, - }, - { - title: 'Errors by Origin', - key: FilterKey.RESOURCES_BY_PARTY, - cardType: ERRORS, - metricOf: FilterKey.RESOURCES_BY_PARTY, - category: CARD_CATEGORIES[3].key, - data: { - chart: generateBarChartData(), - }, - example: BarChartCard, - }, - { - title: 'Errors by Domain', - key: FilterKey.ERRORS_PER_DOMAINS, - cardType: ERRORS, - metricOf: FilterKey.ERRORS_PER_DOMAINS, - category: CARD_CATEGORIES[3].key, - example: SlowestDomains, - // data: generateRandomBarsData(), - }, - { - title: 'Errors by Type', - key: FilterKey.ERRORS_PER_TYPE, - cardType: ERRORS, - metricOf: FilterKey.ERRORS_PER_TYPE, - category: CARD_CATEGORIES[3].key, - data: { - chart: generateBarChartData(), - }, - example: BarChartCard, - }, - { - title: 'Calls with Errors', - key: FilterKey.CALLS_ERRORS, - cardType: ERRORS, - metricOf: FilterKey.CALLS_ERRORS, - category: CARD_CATEGORIES[3].key, - width: 4, - data: { - chart: [ - { - "method": "GET", - "urlHostpath": 'https://openreplay.com', - "allRequests": 1333, - "4xx": 1333, - "5xx": 0 - }, - { - "method": "POST", - "urlHostpath": 'https://company.domain.com', - "allRequests": 10, - "4xx": 10, - "5xx": 0 - }, - { - "method": "PUT", - "urlHostpath": 'https://example.com', - "allRequests": 3, - "4xx": 3, - "5xx": 0 - } - ], - }, - example: CallsWithErrorsExample, - }, + { + title: 'Avg. First Paint Time', + key: FilterKey.AVG_FIRST_PAINT, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FIRST_PAINT, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: '4xx Domains', - key: FilterKey.DOMAINS_ERRORS_4XX, - cardType: ERRORS, - metricOf: FilterKey.DOMAINS_ERRORS_4XX, - category: CARD_CATEGORIES[3].key, - data: { - chart: generateTimeSeriesData(), - label: "Number of Errors", - namesMap: [ - "Series 1" - ] - }, - example: ExampleTrend, - }, + { + title: 'Avg. Frame Rate', + key: FilterKey.AVG_FPS, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FPS, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: '5xx Domains', - key: FilterKey.DOMAINS_ERRORS_5XX, - cardType: ERRORS, - metricOf: FilterKey.DOMAINS_ERRORS_5XX, - category: CARD_CATEGORIES[3].key, - data: { - chart: generateTimeSeriesData(), - label: "Number of Errors", - namesMap: [ - "Series 1" - ] - }, - example: ExampleTrend, - }, + { + title: 'Avg. Load Time of Images', + key: FilterKey.AVG_IMAGE_LOAD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_IMAGE_LOAD_TIME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, + { + title: 'Avg. Load Time of Pages', + key: FilterKey.AVG_PAGE_LOAD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGE_LOAD_TIME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - // Web vitals - { - title: 'Avg. CPU Load', - key: FilterKey.AVG_CPU, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_CPU, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - { - title: 'Avg. DOM Content Load Time', - key: FilterKey.AVG_DOM_CONTENT_LOADED, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_DOM_CONTENT_LOADED, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Avg. DOM Build Time', + key: FilterKey.AVG_PAGES_DOM_BUILD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGES_DOM_BUILD_TIME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'DOM Content Loaded Start', - key: FilterKey.AVG_DOM_CONTENT_LOAD_START, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Page Response Time', + key: FilterKey.AVG_PAGES_RESPONSE_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. First Meaningful Paint Time', - key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Request Load Time', + key: FilterKey.AVG_REQUEST_LOADT_IME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_REQUEST_LOADT_IME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, + { + title: 'Response Time', + key: FilterKey.AVG_RESPONSE_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_RESPONSE_TIME, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. First Paint Time', - key: FilterKey.AVG_FIRST_PAINT, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FIRST_PAINT, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Session Duration', + key: FilterKey.AVG_SESSION_DURATION, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_SESSION_DURATION, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. Frame Rate', - key: FilterKey.AVG_FPS, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FPS, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Time Till First Byte', + key: FilterKey.AVG_TILL_FIRST_BYTE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TILL_FIRST_BYTE, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. Load Time of Images', - key: FilterKey.AVG_IMAGE_LOAD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_IMAGE_LOAD_TIME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Time to be Interactive', + key: FilterKey.AVG_TIME_TO_INTERACTIVE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. Load Time of Pages', - key: FilterKey.AVG_PAGE_LOAD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGE_LOAD_TIME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, + { + title: 'Time to Render', + key: FilterKey.AVG_TIME_TO_RENDER, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TIME_TO_RENDER, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + }, - { - title: 'Avg. DOM Build Time', - key: FilterKey.AVG_PAGES_DOM_BUILD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGES_DOM_BUILD_TIME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Page Response Time', - key: FilterKey.AVG_PAGES_RESPONSE_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Request Load Time', - key: FilterKey.AVG_REQUEST_LOADT_IME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_REQUEST_LOADT_IME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - { - title: 'Response Time', - key: FilterKey.AVG_RESPONSE_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_RESPONSE_TIME, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Session Duration', - key: FilterKey.AVG_SESSION_DURATION, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_SESSION_DURATION, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Time Till First Byte', - key: FilterKey.AVG_TILL_FIRST_BYTE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TILL_FIRST_BYTE, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Time to be Interactive', - key: FilterKey.AVG_TIME_TO_INTERACTIVE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'Time to Render', - key: FilterKey.AVG_TIME_TO_RENDER, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TIME_TO_RENDER, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, - - { - title: 'JS Heap Size', - key: FilterKey.AVG_USED_JS_HEAP_SIZE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE, - category: CARD_CATEGORIES[4].key, - data: generateWebVitalData(), - example: WebVital, - }, -] + { + title: 'JS Heap Size', + key: FilterKey.AVG_USED_JS_HEAP_SIZE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE, + category: CARD_CATEGORIES[4].key, + data: generateWebVitalData(), + example: WebVital + } +]; function generateRandomBarsData(): { total: number, values: { label: string, value: number }[] } { - const labels = ["company.domain.com", "openreplay.com"]; - const values = labels.map(label => ({ - label, - value: Math.floor(Math.random() * 100) - })); - const total = values.reduce((acc, curr) => acc + curr.value, 0); + const labels = ['company.domain.com', 'openreplay.com']; + const values = labels.map(label => ({ + label, + value: Math.floor(Math.random() * 100) + })); + const total = values.reduce((acc, curr) => acc + curr.value, 0); - return { - total, - values: values.sort((a, b) => b.value - a.value) - }; + return { + total, + values: values.sort((a, b) => b.value - a.value) + }; } function generateWebVitalData(): { value: number, chart: { timestamp: number, value: number }[], unit: string } { - const chart = Array.from({length: 7}, (_, i) => ({ - timestamp: Date.now() + i * 86400000, - value: parseFloat((Math.random() * 10).toFixed(15)) - })); + const chart = Array.from({ length: 7 }, (_, i) => ({ + timestamp: Date.now() + i * 86400000, + value: parseFloat((Math.random() * 10).toFixed(15)) + })); - const value = chart.reduce((acc, curr) => acc + curr.value, 0) / chart.length; + const value = chart.reduce((acc, curr) => acc + curr.value, 0) / chart.length; - return { - value, - chart, - unit: "%" - }; + return { + value, + chart, + unit: '%' + }; } function generateTimeSeriesData(): any[] { - const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; - const pointsPerMonth = 3; // Number of points for each month + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; + const pointsPerMonth = 3; // Number of points for each month - const data = months.flatMap((month, monthIndex) => - Array.from({length: pointsPerMonth}, (_, pointIndex) => ({ - time: month, - "Series 1": Math.floor(Math.random() * 90), - timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 - })) - ); + const data = months.flatMap((month, monthIndex) => + Array.from({ length: pointsPerMonth }, (_, pointIndex) => ({ + time: month, + 'Series 1': Math.floor(Math.random() * 90), + timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 + })) + ); - return data; + return data; } function generateAreaData(): any[] { - const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; - const pointsPerMonth = 3; // Number of points for each month + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; + const pointsPerMonth = 3; // Number of points for each month - const data = months.flatMap((month, monthIndex) => - Array.from({length: pointsPerMonth}, (_, pointIndex) => ({ - time: month, - "value": Math.floor(Math.random() * 90), - timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 - })) - ); + const data = months.flatMap((month, monthIndex) => + Array.from({ length: pointsPerMonth }, (_, pointIndex) => ({ + time: month, + 'value': Math.floor(Math.random() * 90), + timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 + })) + ); - return data; + return data; } function generateRandomValue(min: number, max: number): number { - return Math.floor(Math.random() * (max - min + 1)) + min; + return Math.floor(Math.random() * (max - min + 1)) + min; } function generateBarChartData(): any[] { - const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; - return months.map(month => ({ - time: month, - value: generateRandomValue(1000, 5000), - })); + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; + return months.map(month => ({ + time: month, + value: generateRandomValue(1000, 5000) + })); } diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx index a30db5c9d..c974e8bf3 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx @@ -3,17 +3,20 @@ import { Modal } from 'antd'; import SelectCard from './SelectCard'; import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard'; import colors from 'tailwindcss/colors'; +import { connect } from 'react-redux'; interface NewDashboardModalProps { onClose: () => void; open: boolean; isAddingFromLibrary?: boolean; + isEnterprise?: boolean; } const NewDashboardModal: React.FC = ({ onClose, open, - isAddingFromLibrary = false + isAddingFromLibrary = false, + isEnterprise = false }) => { const [step, setStep] = React.useState(0); const [selectedCategory, setSelectedCategory] = React.useState('product-analytics'); @@ -49,7 +52,8 @@ const NewDashboardModal: React.FC = ({ selected={selectedCategory} setSelectedCategory={setSelectedCategory} onCard={() => setStep(step + 1)} - isLibrary={isAddingFromLibrary} />} + isLibrary={isAddingFromLibrary} + isEnterprise={isEnterprise} />} {step === 1 && setStep(0)} />} @@ -58,4 +62,9 @@ const NewDashboardModal: React.FC = ({ ; }; -export default NewDashboardModal; +const mapStateToProps = (state: any) => ({ + isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || + state.getIn(['user', 'account', 'edition']) === 'msaas' +}); + +export default connect(mapStateToProps)(NewDashboardModal); diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index f908fe004..c200c4a82 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -1,137 +1,139 @@ -import React, {useMemo} from 'react'; -import {Button, Input, Segmented, Space} from 'antd'; -import {CARD_LIST, CARD_CATEGORIES, CardType} from './ExampleCards'; -import {useStore} from 'App/mstore'; +import React, { useMemo } from 'react'; +import { Button, Input, Segmented, Space } from 'antd'; +import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards'; +import { useStore } from 'App/mstore'; import Option from './Option'; -import CardsLibrary from "Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary"; -import {FUNNEL} from "App/constants/card"; +import CardsLibrary from 'Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary'; +import { FUNNEL } from 'App/constants/card'; interface SelectCardProps { - onClose: (refresh?: boolean) => void; - onCard: () => void; - isLibrary?: boolean; - selected?: string; - setSelectedCategory?: React.Dispatch>; + onClose: (refresh?: boolean) => void; + onCard: () => void; + isLibrary?: boolean; + selected?: string; + setSelectedCategory?: React.Dispatch>; + isEnterprise?: boolean; } const SelectCard: React.FC = (props: SelectCardProps) => { - const {onCard, isLibrary = false, selected, setSelectedCategory} = props; - const [selectedCards, setSelectedCards] = React.useState([]); - const {metricStore, dashboardStore} = useStore(); - const dashboardId = window.location.pathname.split('/')[3]; - const [libraryQuery, setLibraryQuery] = React.useState(''); + const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise } = props; + const [selectedCards, setSelectedCards] = React.useState([]); + const { metricStore, dashboardStore } = useStore(); + const dashboardId = window.location.pathname.split('/')[3]; + const [libraryQuery, setLibraryQuery] = React.useState(''); - const handleCardSelection = (card: string) => { - metricStore.init(); - const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType; + const handleCardSelection = (card: string) => { + metricStore.init(); + const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType; - const cardData: any = { - metricType: selectedCard.cardType, - name: selectedCard.title, - metricOf: selectedCard.metricOf, - }; - - if (selectedCard.cardType === FUNNEL) { - cardData.series = [] - cardData.series.filter = [] - } - - metricStore.merge(cardData); - metricStore.instance.resetDefaults(); - onCard(); + const cardData: any = { + metricType: selectedCard.cardType, + name: selectedCard.title, + metricOf: selectedCard.metricOf }; - const cardItems = useMemo(() => { - return CARD_LIST.filter((card) => card.category === selected).map((card) => ( -
- -
- )); - }, [selected]); - - const onCardClick = (cardId: number) => { - if (selectedCards.includes(cardId)) { - setSelectedCards(selectedCards.filter((id) => id !== cardId)); - } else { - setSelectedCards([...selectedCards, cardId]); - } + if (selectedCard.cardType === FUNNEL) { + cardData.series = []; + cardData.series.filter = []; } - const onAddSelected = () => { - const dashboard = dashboardStore.getDashboard(dashboardId); - dashboardStore.addWidgetToDashboard(dashboard!, selectedCards).finally(() => { - dashboardStore.fetch(dashboardId); - props.onClose(true); - }); + metricStore.merge(cardData); + metricStore.instance.resetDefaults(); + onCard(); + }; + + const cardItems = useMemo(() => { + return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || card.isEnterprise && isEnterprise)) + .map((card) => ( +
+ +
+ )); + }, [selected]); + + const onCardClick = (cardId: number) => { + if (selectedCards.includes(cardId)) { + setSelectedCards(selectedCards.filter((id) => id !== cardId)); + } else { + setSelectedCards([...selectedCards, cardId]); } + }; - return ( - <> - -
- {dashboardId ? (isLibrary ? "Your Library" : "Create Card") : "Select a template to create a card"} -
- {isLibrary && ( - - {selectedCards.length > 0 ? ( - - ) : ''} + const onAddSelected = () => { + const dashboard = dashboardStore.getDashboard(dashboardId); + dashboardStore.addWidgetToDashboard(dashboard!, selectedCards).finally(() => { + dashboardStore.fetch(dashboardId); + props.onClose(true); + }); + }; - setLibraryQuery(value.target.value)} - style={{width: 200}} - /> - - )} - + return ( + <> + +
+ {dashboardId ? (isLibrary ? 'Your Library' : 'Create Card') : 'Select a template to create a card'} +
+ {isLibrary && ( + + {selectedCards.length > 0 ? ( + + ) : ''} - {!isLibrary && } + setLibraryQuery(value.target.value)} + style={{ width: 200 }} + /> + + )} + - {isLibrary ? - : - } - - ); + {!isLibrary && } + + {isLibrary ? + : + } + + ); }; interface CategorySelectorProps { - setSelected?: React.Dispatch>; - selected?: string; + setSelected?: React.Dispatch>; + selected?: string; } -const CategorySelector: React.FC = ({setSelected, selected}) => ( - ({ - label: