diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx index bfc7c9bcc..a6a9bca4c 100644 --- a/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx +++ b/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx @@ -1,8 +1,15 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ErrorListItem from '../ErrorListItem'; +import { useStore } from 'App/mstore'; +import { useObserver } from 'mobx-react-lite'; function ErrorsList(props) { - + const { errorStore, metricStore } = useStore(); + const metric = useObserver(() => metricStore.instance); + + useEffect(() => { + errorStore.fetchErrors(); + }, []); return (
Errors List diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx new file mode 100644 index 000000000..f85110edb --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import SessionListItem from '../SessionListItem'; + +function SessionList(props) { + return ( +
+ Session list + +
+ ); +} + +export default SessionList; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts new file mode 100644 index 000000000..779c9df2a --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts @@ -0,0 +1 @@ +export { default } from './SessionList'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx new file mode 100644 index 000000000..898d2d341 --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +interface Props { + session: any; +} +function SessionListItem(props: Props) { + return ( +
+ Session list item +
+ ); +} + +export default SessionListItem; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts new file mode 100644 index 000000000..1c2791143 --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts @@ -0,0 +1 @@ +export { default } from './SessionListItem'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx new file mode 100644 index 000000000..0eb5ca1a5 --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import SessionList from '../SessionList'; + +function SessionWidget(props) { + return ( +
+ +
+ ); +} + +export default SessionWidget; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts new file mode 100644 index 000000000..64b9563f5 --- /dev/null +++ b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts @@ -0,0 +1 @@ +export { default } from './SessionWidget'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 32623efe7..c4232cc1b 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -13,6 +13,7 @@ import { getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper'; import { debounce } from 'App/utils'; import FunnelWidget from 'App/components/Funnels/FunnelWidget'; import ErrorsWidget from '../Errors/ErrorsWidget'; +import SessionWidget from '../Sessions/SessionWidget'; interface Props { metric: any; isWidget?: boolean @@ -84,6 +85,10 @@ function WidgetChart(props: Props) { const renderChart = () => { const { metricType, viewType } = metric; + if (metricType === 'sessions') { + return + } + if (metricType === 'errors') { return } diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index e6c29f4af..100a76baf 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -19,7 +19,6 @@ function WidgetView(props: Props) { const { metricStore } = useStore(); const widget = useObserver(() => metricStore.instance); const loading = useObserver(() => metricStore.isLoading); - const isFunnel = widget.metricType === 'funnel'; const [expanded, setExpanded] = useState(!metricId || metricId === 'create'); React.useEffect(() => { @@ -73,8 +72,8 @@ function WidgetView(props: Props) {
- { !isFunnel && } - { isFunnel && } + { (widget.metricType === 'table' || widget.metricType === 'timeseries') && } + { widget.metricType === 'funnel' && } )); diff --git a/frontend/app/mstore/errorStore.ts b/frontend/app/mstore/errorStore.ts new file mode 100644 index 000000000..32b095ade --- /dev/null +++ b/frontend/app/mstore/errorStore.ts @@ -0,0 +1,55 @@ +import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx" +import { errorService } from "App/services" +import Error from "./types/error" + +export default class ErrorStore { + isLoading: boolean = false + isSaving: boolean = false + + errors: any[] = [] + instance: Error | null = null + + constructor() { + makeAutoObservable(this, { + + }) + } + + updateKey(key: string, value: any) { + this[key] = value + } + + fetchErrors(): Promise { + this.isLoading = true + return new Promise((resolve, reject) => { + errorService.all() + .then(response => { + const errors = response.map(e => new Error().fromJSON(e)); + this.errors = errors + resolve(errors) + }).catch(error => { + reject(error) + }).finally(() => { + this.isLoading = false + } + ) + }) + } + + fetchError(errorId: string): Promise { + this.isLoading = true + return new Promise((resolve, reject) => { + errorService.one(errorId) + .then(response => { + const error = new Error().fromJSON(response); + this.instance = error + resolve(error) + }).catch(error => { + reject(error) + }).finally(() => { + this.isLoading = false + } + ) + }) + } +} \ No newline at end of file diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx index 11d8f35b6..4f56bac92 100644 --- a/frontend/app/mstore/index.tsx +++ b/frontend/app/mstore/index.tsx @@ -5,9 +5,18 @@ import UserStore from './userStore'; import RoleStore from './roleStore'; import APIClient from 'App/api_client'; import FunnelStore from './funnelStore'; -import { dashboardService, metricService, funnelService, sessionService, userService, auditService } from 'App/services'; +import { + dashboardService, + metricService, + funnelService, + sessionService, + userService, + auditService, + errorService, +} from 'App/services'; import SettingsStore from './settingsStore'; import AuditStore from './auditStore'; +import ErrorStore from './errorStore'; export class RootStore { dashboardStore: IDashboardSotre; @@ -17,6 +26,7 @@ export class RootStore { userStore: UserStore; roleStore: RoleStore; auditStore: AuditStore; + errorStore: ErrorStore; constructor() { this.dashboardStore = new DashboardStore(); @@ -26,6 +36,7 @@ export class RootStore { this.userStore = new UserStore(); this.roleStore = new RoleStore(); this.auditStore = new AuditStore(); + this.errorStore = new ErrorStore(); } initClient() { @@ -36,6 +47,7 @@ export class RootStore { sessionService.initClient(client) userService.initClient(client) auditService.initClient(client) + errorService.initClient(client) } } diff --git a/frontend/app/mstore/types/error.ts b/frontend/app/mstore/types/error.ts new file mode 100644 index 000000000..7542aca4b --- /dev/null +++ b/frontend/app/mstore/types/error.ts @@ -0,0 +1,42 @@ + +export default class Error { + sessionId: string = '' + messageId: string = '' + timestamp: string = '' + errorId: string = '' + projectId: string = '' + source: string = '' + name: string = '' + message: string = '' + time: string = '' + function: string = '?' + stack0InfoString: string = '' + + constructor() { + } + + fromJSON(json: any) { + this.sessionId = json.sessionId + this.messageId = json.messageId + this.timestamp = json.timestamp + this.errorId = json.errorId + this.projectId = json.projectId + this.source = json.source + this.name = json.name + this.message = json.message + this.time = json.time + this.function = json.function + this.stack0InfoString = getStck0InfoString(json.stack || []) + return this + } +} + +function getStck0InfoString(stack) { + const stack0 = stack[0]; + if (!stack0) return ""; + let s = stack0.function || ""; + if (stack0.url) { + s += ` (${stack0.url})`; + } + return s; + } \ No newline at end of file diff --git a/frontend/app/services/BaseService.ts b/frontend/app/services/BaseService.ts new file mode 100644 index 000000000..2af1897f8 --- /dev/null +++ b/frontend/app/services/BaseService.ts @@ -0,0 +1,12 @@ +import APIClient from 'App/api_client'; +export default class BaseService { + client: APIClient; + + constructor(client?: APIClient) { + this.client = client ? client : new APIClient(); + } + + initClient(client?: APIClient) { + this.client = client || new APIClient(); + } +} \ No newline at end of file diff --git a/frontend/app/services/ErrorService.ts b/frontend/app/services/ErrorService.ts new file mode 100644 index 000000000..5c0291561 --- /dev/null +++ b/frontend/app/services/ErrorService.ts @@ -0,0 +1,14 @@ +import BaseService from './BaseService'; + +export default class ErrorService extends BaseService { + all(params: any = {}): Promise { + return this.client.post('/errors/search', params) + .then(response => response.json()) + .then(response => response.data || []); + } + + one(id: string): Promise { + return this.client.get(`/errors/${id}`) + .then(response => response.json()) + } +} \ No newline at end of file diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts index ace22e0fb..78328b6ff 100644 --- a/frontend/app/services/index.ts +++ b/frontend/app/services/index.ts @@ -4,6 +4,7 @@ import FunnelService, { IFunnelService } from "./FunnelService"; import SessionSerivce from "./SessionService"; import UserService from "./UserService"; import AuditService from './AuditService'; +import ErrorService from "./ErrorService"; export const dashboardService: IDashboardService = new DashboardService(); export const metricService: IMetricService = new MetricService(); @@ -11,3 +12,4 @@ export const sessionService: SessionSerivce = new SessionSerivce(); export const userService: UserService = new UserService(); export const funnelService: IFunnelService = new FunnelService(); export const auditService: AuditService = new AuditService(); +export const errorService: ErrorService = new ErrorService();