removed store dependency, use global Faro object
This commit is contained in:
Rares Mardare
parent
e0175fa2ef
commit
7a6587bf02
5 changed files with 42 additions and 72 deletions
|
|
@ -104,9 +104,8 @@
|
|||
"node": ">=14"
|
||||
},
|
||||
"dependencies": {
|
||||
"@grafana/faro-core": "^1.0.0-beta3",
|
||||
"@grafana/faro-react": "^1.0.0-beta3",
|
||||
"@grafana/faro-web-sdk": "^1.0.0-beta3",
|
||||
"@grafana/faro-web-tracing": "^1.0.0-beta3",
|
||||
"@opentelemetry/api": "^1.3.0",
|
||||
"array-move": "^4.0.0",
|
||||
"change-case": "^4.1.1",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { faro } from '@grafana/faro-react';
|
||||
import { faro } from '@grafana/faro-web-sdk';
|
||||
import { SpanStatusCode } from '@opentelemetry/api';
|
||||
import axios from 'axios';
|
||||
import qs from 'query-string';
|
||||
|
|
@ -37,18 +37,7 @@ export const makeRequest = async <RT = any>(path: string, config: RequestConfig)
|
|||
|
||||
const url = `${API_PROXY_PREFIX}${API_PATH_PREFIX}${path}`;
|
||||
|
||||
const response = await instance({
|
||||
method,
|
||||
url,
|
||||
params,
|
||||
data,
|
||||
validateStatus,
|
||||
});
|
||||
|
||||
// for now just return response.data and figure OTEL later on
|
||||
return response.data as RT;
|
||||
|
||||
const otel = faro.api.getOTEL();
|
||||
const otel = faro?.api?.getOTEL();
|
||||
|
||||
if (otel) {
|
||||
const tracer = otel.trace.getTracer('default');
|
||||
|
|
@ -92,12 +81,12 @@ export const makeRequest = async <RT = any>(path: string, config: RequestConfig)
|
|||
validateStatus,
|
||||
});
|
||||
|
||||
faro.api.pushEvent('Request completed', { url });
|
||||
faro?.api?.pushEvent('Request completed', { url });
|
||||
|
||||
return response.data as RT;
|
||||
} catch (ex) {
|
||||
faro.api.pushEvent('Request failed', { url });
|
||||
faro.api.pushError(ex);
|
||||
throw ex;
|
||||
faro?.api?.pushEvent('Request failed', { url });
|
||||
faro?.api?.pushError(ex);
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { initializeFaro, getWebInstrumentations } from '@grafana/faro-react';
|
||||
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
|
||||
import { initializeFaro, getWebInstrumentations } from '@grafana/faro-web-sdk';
|
||||
import { TracingInstrumentation, getDefaultOTELInstrumentations } from '@grafana/faro-web-tracing';
|
||||
import { locationService } from '@grafana/runtime';
|
||||
import classnames from 'classnames';
|
||||
import dayjs from 'dayjs';
|
||||
|
|
@ -10,12 +10,13 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
|||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import timezone from 'dayjs/plugin/timezone';
|
||||
|
||||
import utc from 'dayjs/plugin/utc';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import { observer, Provider } from 'mobx-react';
|
||||
import Header from 'navbar/Header/Header';
|
||||
import LegacyNavTabsBar from 'navbar/LegacyNavTabsBar';
|
||||
|
||||
import plugin from '../../package.json'; // eslint-disable-line
|
||||
import { AppRootProps } from 'types';
|
||||
|
||||
import Unauthorized from 'components/Unauthorized';
|
||||
|
|
@ -28,8 +29,6 @@ import { useStore } from 'state/useStore';
|
|||
import { isUserActionAllowed } from 'utils/authorization';
|
||||
import { useQueryParams, useQueryPath } from 'utils/hooks';
|
||||
|
||||
import { FaroErrorBoundary } from '@grafana/faro-react';
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
dayjs.extend(weekday);
|
||||
|
|
@ -45,8 +44,6 @@ import 'style/utils.css';
|
|||
import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers';
|
||||
import PluginSetup from './PluginSetup';
|
||||
|
||||
import { RootBaseStore } from 'state/rootBaseStore';
|
||||
|
||||
export const GrafanaPluginRootPage = (props: AppRootProps) => (
|
||||
<Provider store={rootStore}>
|
||||
<PluginSetup InitializedComponent={Root} {...props} />
|
||||
|
|
@ -76,7 +73,7 @@ export const Root = observer((props: AppRootProps) => {
|
|||
|
||||
document.head.appendChild(link);
|
||||
|
||||
initFaro(store);
|
||||
initFaro();
|
||||
|
||||
return () => {
|
||||
document.head.removeChild(link);
|
||||
|
|
@ -98,36 +95,34 @@ export const Root = observer((props: AppRootProps) => {
|
|||
const userHasAccess = pagePermissionAction ? isUserActionAllowed(pagePermissionAction) : true;
|
||||
|
||||
return (
|
||||
<FaroErrorBoundary>
|
||||
<DefaultPageLayout {...props}>
|
||||
{!isTopNavbar() && (
|
||||
<>
|
||||
<Header page={page} backendLicense={store.backendLicense} />
|
||||
<nav className="page-container">
|
||||
<LegacyNavTabsBar currentPage={page} />
|
||||
</nav>
|
||||
</>
|
||||
)}
|
||||
<DefaultPageLayout {...props}>
|
||||
{!isTopNavbar() && (
|
||||
<>
|
||||
<Header page={page} backendLicense={store.backendLicense} />
|
||||
<nav className="page-container">
|
||||
<LegacyNavTabsBar currentPage={page} />
|
||||
</nav>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={classnames(
|
||||
{ 'page-container': !isTopNavbar() },
|
||||
{ 'page-body': !isTopNavbar() },
|
||||
'u-position-relative'
|
||||
)}
|
||||
>
|
||||
{userHasAccess ? (
|
||||
<Page {...props} query={...getQueryParams()} path={pathWithoutLeadingSlash} store={store} />
|
||||
) : (
|
||||
<Unauthorized requiredUserAction={pagePermissionAction} />
|
||||
)}
|
||||
</div>
|
||||
</DefaultPageLayout>
|
||||
</FaroErrorBoundary>
|
||||
<div
|
||||
className={classnames(
|
||||
{ 'page-container': !isTopNavbar() },
|
||||
{ 'page-body': !isTopNavbar() },
|
||||
'u-position-relative'
|
||||
)}
|
||||
>
|
||||
{userHasAccess ? (
|
||||
<Page {...props} query={...getQueryParams()} path={pathWithoutLeadingSlash} store={store} />
|
||||
) : (
|
||||
<Unauthorized requiredUserAction={pagePermissionAction} />
|
||||
)}
|
||||
</div>
|
||||
</DefaultPageLayout>
|
||||
);
|
||||
});
|
||||
|
||||
function initFaro(store: RootBaseStore) {
|
||||
function initFaro() {
|
||||
const faro = initializeFaro({
|
||||
url: `http://localhost:12345/collect`,
|
||||
apiKey: 'secret',
|
||||
|
|
@ -135,19 +130,19 @@ function initFaro(store: RootBaseStore) {
|
|||
...getWebInstrumentations({
|
||||
captureConsole: true,
|
||||
}),
|
||||
new TracingInstrumentation(),
|
||||
new TracingInstrumentation({
|
||||
instrumentations: [...getDefaultOTELInstrumentations([/^((?!\/{0,1}a\/grafana\-oncall\-app\\).)*$/])],
|
||||
}),
|
||||
],
|
||||
session: (window as any).__PRELOADED_STATE__?.faro?.session,
|
||||
app: {
|
||||
name: 'oncall',
|
||||
version: '1.0.0',
|
||||
environment: 'dev',
|
||||
name: plugin?.name || 'Grafana OnCall',
|
||||
version: plugin?.version || '1.0.0',
|
||||
// environment: 'dev', // TODO: sort this out
|
||||
},
|
||||
});
|
||||
|
||||
faro.api.pushLog(['Faro was initialized for Grafana On Call']);
|
||||
|
||||
store.faro = faro;
|
||||
}
|
||||
|
||||
function getPageMatchingComponent(pageId: string): (props?: any) => JSX.Element {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { Faro } from '@grafana/faro-core';
|
||||
import { action, observable } from 'mobx';
|
||||
import moment from 'moment-timezone';
|
||||
import qs from 'query-string';
|
||||
|
|
@ -73,9 +72,6 @@ export class RootBaseStore {
|
|||
@observable
|
||||
onCallApiUrl: string;
|
||||
|
||||
@observable
|
||||
faro: Faro = undefined;
|
||||
|
||||
// --------------------------
|
||||
|
||||
userStore: UserStore = new UserStore(this);
|
||||
|
|
|
|||
|
|
@ -1614,15 +1614,6 @@
|
|||
"@opentelemetry/otlp-transformer" "^0.34.0"
|
||||
fast-deep-equal "^3.1.3"
|
||||
|
||||
"@grafana/faro-react@^1.0.0-beta3":
|
||||
version "1.0.0-beta3"
|
||||
resolved "https://registry.yarnpkg.com/@grafana/faro-react/-/faro-react-1.0.0-beta3.tgz#f28ba2fba136cd6d0417f6894218f359a5cdc88e"
|
||||
integrity sha512-E8aI8FPqzs9NgOa3ApfeCNtmhakgMgfg1xu0snNz7Gt0KHssoHyIYrOHlI/C45BhkSXRMetIvhJv/YQkE9Ua7Q==
|
||||
dependencies:
|
||||
"@grafana/faro-web-sdk" "^1.0.0-beta3"
|
||||
"@grafana/faro-web-tracing" "^1.0.0-beta3"
|
||||
hoist-non-react-statics "^3.3.2"
|
||||
|
||||
"@grafana/faro-web-sdk@1.0.0-beta2":
|
||||
version "1.0.0-beta2"
|
||||
resolved "https://registry.yarnpkg.com/@grafana/faro-web-sdk/-/faro-web-sdk-1.0.0-beta2.tgz#d096a350d6366a108428a205753c797802eb480d"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue