jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

integrations doc links

Browse source
This commit is contained in:
Shekar Siri 2021-05-04 18:59:46 +05:30
parent debf13ff99
commit bf80545766
27 changed files with 7902 additions and 13011 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
View file

@ -1,8 +1,14 @@
import { tokenRE } from 'Types/integrations/bugsnagConfig';
import IntegrationForm from '../IntegrationForm';
import ProjectListDropdown from './ProjectListDropdown';
import DocLink from 'Shared/DocLink/DocLink';
const BugsnagForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Bugsnag with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate Bugsnag" url="https://docs.openreplay.com/integrations/datadog" />
</div>
<IntegrationForm
{ ...props }
name="bugsnag"
@ -17,6 +23,7 @@ const BugsnagForm = (props) => (
}
]}
/>
</>
);
BugsnagForm.displayName = "BugsnagForm";

3
frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
View file

@ -2,12 +2,13 @@ import { ACCESS_KEY_ID_LENGTH, SECRET_ACCESS_KEY_LENGTH } from 'Types/integratio
import IntegrationForm from '../IntegrationForm';
import LogGroupDropdown from './LogGroupDropdown';
import RegionDropdown from './RegionDropdown';
import DocLink from 'Shared/DocLink/DocLink';
const CloudwatchForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate CloudWatch with OpenReplay and see backend errors alongside session replays.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate CloudWatch" url="https://docs.openreplay.com/integrations/cloudwatch" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/DatadogForm.js
View file

@ -1,10 +1,11 @@
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const DatadogForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Datadog with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate Datadog" url="https://docs.openreplay.com/integrations/datadog" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/ElasticsearchForm.js
View file

@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import IntegrationForm from './IntegrationForm';
import { withRequest } from 'HOCs';
import { edit } from 'Duck/integrations/actions';
import DocLink from 'Shared/DocLink/DocLink';
@connect(state => ({
config: state.getIn([ 'elasticsearch', 'instance' ])
@ -43,7 +44,7 @@ export default class ElasticsearchForm extends React.PureComponent {
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Elasticsearch with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate Elasticsearch" url="https://docs.openreplay.com/integrations/elastic" />
</div>
<IntegrationForm
{ ...props }

5
frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent'
import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const FetchDoc = (props) => {
return (
@ -55,7 +56,7 @@ fetch('https://api.openreplay.com/').then(response => console.log(response.json(
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate Fetch" url="https://docs.openreplay.com/plugins/fetch" />
</div>
)
};

3
frontend/app/components/Client/Integrations/GithubForm.js
View file

@ -1,11 +1,12 @@
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const GithubForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>Integrate GitHub with OpenReplay and create issues directly from the recording page.</div>
<div className="mt-8">
<a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Integrate with Github</a>
<DocLink className="mt-4" label="Integrate Github" url="https://docs.openreplay.com/integrations/github" />
</div>
</div>
<IntegrationForm

5
frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
import ToggleContent from 'Shared/ToggleContent';
const GraphQLDoc = (props) => {
return (
@ -52,7 +53,7 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`}
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate GraphQL" url="https://docs.openreplay.com/plugins/graphql" />
</div>
)
};

6
frontend/app/components/Client/Integrations/Integrations.js
View file

@ -289,7 +289,7 @@ export default class Integrations extends React.PureComponent {
<IntegrationItem
title="Fetch"
icon="integrations/ngrx"
icon="integrations/openreplay"
url={ null }
dockLink="https://docs.openreplay.com/integrations/sentry"
onClick={ () => this.showIntegrationConfig(FETCH) }
@ -298,7 +298,7 @@ export default class Integrations extends React.PureComponent {
<IntegrationItem
title="MobX"
icon="integrations/ngrx"
icon="integrations/mobx"
url={ null }
dockLink="https://docs.openreplay.com/integrations/sentry"
onClick={ () => this.showIntegrationConfig(MOBX) }
@ -307,7 +307,7 @@ export default class Integrations extends React.PureComponent {
<IntegrationItem
title="Profiler"
icon="integrations/ngrx"
icon="integrations/openreplay"
url={ null }
dockLink="https://docs.openreplay.com/integrations/sentry"
onClick={ () => this.showIntegrationConfig(PROFILER) }

9
frontend/app/components/Client/Integrations/JiraForm/JiraForm.js
View file

@ -1,6 +1,14 @@
import IntegrationForm from '../IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const JiraForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Jira Cloud with OpenReplay.</div>
<div className="mt-8">
<DocLink className="mt-4" label="Integrate Jira Cloud" url="https://docs.openreplay.com/integrations/jira" />
</div>
</div>
<IntegrationForm
{ ...props }
ignoreProject={true}
@ -20,6 +28,7 @@ const JiraForm = (props) => (
},
]}
/>
</>
);
JiraForm.displayName = "JiraForm";

5
frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent'
import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const MobxDoc = (props) => {
return (
@ -49,7 +50,7 @@ function SomeFunctionalComponent() {
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate MobX" url="https://docs.openreplay.com/plugins/mobx" />
</div>
)
};

3
frontend/app/components/Client/Integrations/NewrelicForm/NewrelicForm.js
View file

@ -1,10 +1,11 @@
import IntegrationForm from '../IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const NewrelicForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate NewRelic with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate NewRelic" url="https://docs.openreplay.com/integrations/newrelic" />
</div>
<IntegrationForm
{ ...props }

5
frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent'
import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const NgRxDoc = (props) => {
return (
@ -65,7 +66,7 @@ const metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of ava
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate NgRx" url="https://docs.openreplay.com/plugins/ngrx" />
</div>
)
};

5
frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent'
import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const ProfilerDoc = (props) => {
return (
@ -59,7 +60,7 @@ const fn = profiler('call_name')(() => {
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate Profiler" url="https://docs.openreplay.com/plugins/profiler" />
</div>
)
};

3
frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
const ReduxDoc = (props) => {
return (
@ -58,7 +59,7 @@ const store = createStore(
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate Redux" url="https://docs.openreplay.com/plugins/redux" />
</div>
)
};

3
frontend/app/components/Client/Integrations/RollbarForm.js
View file

@ -1,10 +1,11 @@
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const RollbarForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Rollbar with OpenReplay and see backend errors alongside session replays.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate Rollbar" url="https://docs.openreplay.com/integrations/rollbar" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/SentryForm.js
View file

@ -1,10 +1,11 @@
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const SentryForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Sentry with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate Sentry" url="https://docs.openreplay.com/integrations/sentry" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/StackdriverForm.js
View file

@ -1,10 +1,11 @@
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
const StackdriverForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate Stackdriver with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate Stackdriver" url="https://docs.openreplay.com/integrations/stackdriver" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/SumoLogicForm/SumoLogicForm.js
View file

@ -1,11 +1,12 @@
import IntegrationForm from '../IntegrationForm';
import RegionDropdown from './RegionDropdown';
import DocLink from 'Shared/DocLink/DocLink';
const SumoLogicForm = (props) => (
<>
<div className="p-5 border-b mb-4">
<div>How to integrate SumoLogic with OpenReplay and see backend errors alongside session recordings.</div>
<div className="mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for more details.</div>
<DocLink className="mt-4" label="Integrate SumoLogic" url="https://docs.openreplay.com/integrations/sumo" />
</div>
<IntegrationForm
{ ...props }

3
frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
View file

@ -1,5 +1,6 @@
import Highlight from 'react-highlight'
import ToggleContent from '../../../shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
const VueDoc = (props) => {
return (
@ -59,7 +60,7 @@ const store = new Vuex.Store({
}
/>
<div className="mt-6">See <a href="https://docs.openreplay.com/api" className="color-teal underline" target="_blank">API</a> for more options.</div>
<DocLink className="mt-4" label="Integrate Vuex" url="https://docs.openreplay.com/plugins/vuex" />
</div>
)
};

2
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js
View file

@ -88,7 +88,7 @@ function InstallDocs({ site }) {
</div>
</div>
</div>
<div className="border-t pt-4 mt-8">See <a href="https://docs.openreplay.com/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for the list of available options.</div>
<div className="border-t pt-4 mt-8">See <a href="https://docs.openreplay.com/installation/javascript-sdk" className="color-teal underline" target="_blank">Documentation</a> for the list of available options.</div>
</div>
)
}

3
frontend/app/components/Session_/Player/Controls/Timeline.js
View file

@ -112,6 +112,7 @@ export default class Timeline extends React.PureComponent {
style={ {
left: `${ interval.start * scale }%`,
width: `${ (interval.end - interval.start) * scale }%`,
top: '-30px'
} }
/>))
}
@ -120,7 +121,7 @@ export default class Timeline extends React.PureComponent {
<div
key={ e.key }
className={ stl.event }
style={ { left: `${ e.time * scale }%` } }
style={ { left: `${ e.time * scale }%`, top: '-30px' } }
/>
))
}

6
frontend/app/components/shared/DocLink/DocLink.js
View file

@ -1,13 +1,13 @@
import React from 'react'
import { Button } from 'UI'
export default function DocLink({ link, label }) {
export default function DocLink({ className = '', url, label }) {
const openLink = () => {
window.open(link, '_blank')
window.open(url, '_blank')
}
return (
<div>
<div className={className}>
<Button outline onClick={openLink}>
{ label }
</Button>

1
frontend/app/svg/icons/integrations/mobx.svg Normal file
View file

@ -0,0 +1 @@
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M256 236.394V19.607c0-8.894-5.923-16.4-14.037-18.8l-9.215 5.514-102.265 109.037-3.206 10.021-1.873 9.62 31.89 119.18 4.933 1.82h74.167c10.828 0 19.606-8.777 19.606-19.605" fill="#EA6618"/><path d="M0 19.606v216.787c0 6.705 3.367 12.62 8.5 16.155l6.287-3.01 108.246-115.894 4.244-8.265.159-7.99L97.976 5.306 93.513 0H19.606C8.778 0 0 8.778 0 19.606" fill="#d65813"/><path d="M127.277 125.38L241.963.806a19.595 19.595 0 0 0-5.57-.807H93.515l33.763 125.38z" fill="#e05e11"/><path d="M19.606 256h142.622l-34.951-130.621L8.499 252.549A19.511 19.511 0 0 0 19.606 256" fill="#de5c16"/><path d="M94.918 97.03h14.225c5.668 21.386 12.119 40.152 19.316 57.085 8.152-19.05 14.127-37.83 19.185-57.086h13.442c-6.02 23.926-15.868 48.04-27.132 72.93h-11.89c-10.82-23.586-20.03-47.837-27.146-72.93zm-46.92-37.055h31.63v135.637h-31.77v-10.456H67.33V70.152H47.998V59.975zm160.169 10.177h-19.332v115.004h19.47v10.456h-31.769V59.975h31.63v10.177z" fill="#FFF"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

2
frontend/app/svg/icons/integrations/openreplay.svg
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="59px" viewBox="0 0 52 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg viewBox="0 0 52 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<g id="logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1" transform="translate(-107.000000, -142.000000)" fill-rule="nonzero">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
frontend/env.js
View file

@ -8,7 +8,7 @@ const oss = {
CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED,
CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
ORIGIN: () => 'window.location.origin',
API_EDP: () => 'window.location.origin + "/api"',
API_EDP: 'https://staging-parrot.asayer.io',
ASSETS_HOST: () => 'window.location.origin + "/assets"',
VERSION: '1.0.1',
SOURCEMAP: true,

20714
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

11
frontend/scripts/upload-minio.js
View file

@ -1,14 +1,15 @@
const Minio = require('minio')
const { collectFilenames } = require('./fs');
require('dotenv').config()
const PUBLIC_DIR = 'public';
var minioClient = new Minio.Client({
endPoint: window.ENV.MINIO_ENDPOINT,
port: window.ENV.MINIO_PORT,
useSSL: window.ENV.MINIO_USE_SSL, //?
accessKey: window.ENV.MINIO_ACCESS_KEY,
secretKey: window.ENV.MINIO_SECRET_KEY,
endPoint: process.env.MINIO_ENDPOINT,
port: process.env.MINIO_PORT,
useSSL: process.env.MINIO_USE_SSL,
accessKey: process.env.MINIO_ACCESS_KEY,
secretKey: process.env.MINIO_SECRET_KEY,
});
collectFilenames(PUBLIC_DIR, n => !n.includes('.DS_Store')).forEach(name => {