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

change(ui): integrations - modal docs text

Browse source
This commit is contained in:
Shekar Siri 2023-07-26 18:53:09 +02:00
parent 595fcd41be
commit 18d1e1edef
15 changed files with 431 additions and 320 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,31 +3,39 @@ import { tokenRE } from 'Types/integrations/bugsnagConfig';
import IntegrationForm from '../IntegrationForm';
import ProjectListDropdown from './ProjectListDropdown';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const BugsnagForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Bugsnag</h3>
<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/bugsnag" />
</div>
<IntegrationForm
{...props}
name="bugsnag"
formFields={[
{
key: 'authorizationToken',
label: 'Authorisation Token',
},
{
key: 'bugsnagProjectId',
label: 'Project',
checkIfDisplayed: (config) => tokenRE.test(config.authorizationToken),
component: ProjectListDropdown,
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Bugsnag' icon='integrations/bugsnag'
description='Integrate Bugsnag to access the OpenReplay session linked to the JS exception within its interface.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Generate Bugsnag Auth Token</li>
<li>Enter the token below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate Bugsnag' url='https://docs.openreplay.com/integrations/bugsnag' />
</div>
<IntegrationForm
{...props}
name='bugsnag'
formFields={[
{
key: 'authorizationToken',
label: 'Authorisation Token'
},
{
key: 'bugsnagProjectId',
label: 'Project',
checkIfDisplayed: (config) => tokenRE.test(config.authorizationToken),
component: ProjectListDropdown
}
]}
/>
</div>
);
BugsnagForm.displayName = 'BugsnagForm';

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

@ -4,43 +4,51 @@ import IntegrationForm from '../IntegrationForm';
import LogGroupDropdown from './LogGroupDropdown';
import RegionDropdown from './RegionDropdown';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const CloudwatchForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Cloud Watch</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate CloudWatch with OpenReplay and see backend errors alongside session replays.</div>
<DocLink className="mt-4" label="Integrate CloudWatch" url="https://docs.openreplay.com/integrations/cloudwatch" />
</div>
<IntegrationForm
{...props}
name="cloudwatch"
formFields={[
{
key: 'awsAccessKeyId',
label: 'AWS Access Key ID',
},
{
key: 'awsSecretAccessKey',
label: 'AWS Secret Access Key',
},
{
key: 'region',
label: 'Region',
component: RegionDropdown,
},
{
key: 'logGroupName',
label: 'Log Group Name',
component: LogGroupDropdown,
checkIfDisplayed: (config) =>
config.awsSecretAccessKey.length === SECRET_ACCESS_KEY_LENGTH &&
config.region !== '' &&
config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH,
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Cloud Watch' icon='integrations/aws'
description='Integrate CloudWatch to see backend logs and errors alongside session replay.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create a Service Account</li>
<li>Enter the details below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate CloudWatch'
url='https://docs.openreplay.com/integrations/cloudwatch' />
</div>
<IntegrationForm
{...props}
name='cloudwatch'
formFields={[
{
key: 'awsAccessKeyId',
label: 'AWS Access Key ID'
},
{
key: 'awsSecretAccessKey',
label: 'AWS Secret Access Key'
},
{
key: 'region',
label: 'Region',
component: RegionDropdown
},
{
key: 'logGroupName',
label: 'Log Group Name',
component: LogGroupDropdown,
checkIfDisplayed: (config) =>
config.awsSecretAccessKey.length === SECRET_ACCESS_KEY_LENGTH &&
config.region !== '' &&
config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH
}
]}
/>
</div>
);
CloudwatchForm.displayName = 'CloudwatchForm';

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

@ -1,30 +1,37 @@
import React from 'react';
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const DatadogForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Datadog</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate Datadog with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate Datadog" url="https://docs.openreplay.com/integrations/datadog" />
</div>
<IntegrationForm
{...props}
name="datadog"
formFields={[
{
key: 'apiKey',
label: 'API Key',
autoFocus: true,
},
{
key: 'applicationKey',
label: 'Application Key',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Datadog' icon='integrations/datadog'
description='Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Generate Datadog API Key & Application Key</li>
<li>Enter the API key below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate Datadog' url='https://docs.openreplay.com/integrations/datadog' />
</div>
<IntegrationForm
{...props}
name='datadog'
formFields={[
{
key: 'apiKey',
label: 'API Key',
autoFocus: true
},
{
key: 'applicationKey',
label: 'Application Key'
}
]}
/>
</div>
);
DatadogForm.displayName = 'DatadogForm';

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

@ -4,85 +4,94 @@ import IntegrationForm from './IntegrationForm';
import { withRequest } from 'HOCs';
import { edit } from 'Duck/integrations/actions';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
@connect(
(state) => ({
config: state.getIn(['elasticsearch', 'instance']),
}),
{ edit }
(state) => ({
config: state.getIn(['elasticsearch', 'instance'])
}),
{ edit }
)
@withRequest({
dataName: 'isValid',
initialData: false,
dataWrapper: (data) => data.state,
requestName: 'validateConfig',
endpoint: '/integrations/elasticsearch/test',
method: 'POST',
dataName: 'isValid',
initialData: false,
dataWrapper: (data) => data.state,
requestName: 'validateConfig',
endpoint: '/integrations/elasticsearch/test',
method: 'POST'
})
export default class ElasticsearchForm extends React.PureComponent {
componentWillReceiveProps(newProps) {
const {
config: { host, port, apiKeyId, apiKey },
} = this.props;
const { loading, config } = newProps;
const valuesChanged = host !== config.host || port !== config.port || apiKeyId !== config.apiKeyId || apiKey !== config.apiKey;
if (!loading && valuesChanged && newProps.config.validateKeys() && newProps) {
this.validateConfig(newProps);
}
componentWillReceiveProps(newProps) {
const {
config: { host, port, apiKeyId, apiKey }
} = this.props;
const { loading, config } = newProps;
const valuesChanged = host !== config.host || port !== config.port || apiKeyId !== config.apiKeyId || apiKey !== config.apiKey;
if (!loading && valuesChanged && newProps.config.validateKeys() && newProps) {
this.validateConfig(newProps);
}
}
validateConfig = (newProps) => {
const { config } = newProps;
this.props
.validateConfig({
host: config.host,
port: config.port,
apiKeyId: config.apiKeyId,
apiKey: config.apiKey,
})
.then((res) => {
const { isValid } = this.props;
this.props.edit('elasticsearch', { isValid: isValid });
});
};
validateConfig = (newProps) => {
const { config } = newProps;
this.props
.validateConfig({
host: config.host,
port: config.port,
apiKeyId: config.apiKeyId,
apiKey: config.apiKey
})
.then((res) => {
const { isValid } = this.props;
this.props.edit('elasticsearch', { isValid: isValid });
});
};
render() {
const props = this.props;
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Elasticsearch</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate Elasticsearch with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate Elasticsearch" url="https://docs.openreplay.com/integrations/elastic" />
</div>
<IntegrationForm
{...props}
name="elasticsearch"
formFields={[
{
key: 'host',
label: 'Host',
},
{
key: 'apiKeyId',
label: 'API Key ID',
},
{
key: 'apiKey',
label: 'API Key',
},
{
key: 'indexes',
label: 'Indexes',
},
{
key: 'port',
label: 'Port',
type: 'number',
},
]}
/>
</div>
);
}
render() {
const props = this.props;
return (
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Elasticsearch' icon='integrations/elasticsearch'
description='Integrate Elasticsearch with session replays to seamlessly observe backend errors.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create a new Elastic API key</li>
<li>Enter the API key below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate Elasticsearch'
url='https://docs.openreplay.com/integrations/elastic' />
</div>
<IntegrationForm
{...props}
name='elasticsearch'
formFields={[
{
key: 'host',
label: 'Host'
},
{
key: 'apiKeyId',
label: 'API Key ID'
},
{
key: 'apiKey',
label: 'API Key'
},
{
key: 'indexes',
label: 'Indexes'
},
{
key: 'port',
label: 'Port',
type: 'number'
}
]}
/>
</div>
);
}
}

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

@ -1,29 +1,31 @@
import React from 'react';
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const GithubForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Github</h3>
<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">
<DocLink className="mt-4" label="Integrate Github" url="https://docs.openreplay.com/integrations/github" />
</div>
</div>
<IntegrationForm
{...props}
ignoreProject
name="github"
customPath="github"
formFields={[
{
key: 'token',
label: 'Token',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Github' icon='integrations/github'
description='Integrate GitHub with OpenReplay to enable the direct creation of a new issue from a session.' />
<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'>
<DocLink className='mt-4' label='Integrate Github' url='https://docs.openreplay.com/integrations/github' />
</div>
</div>
<IntegrationForm
{...props}
ignoreProject
name='github'
customPath='github'
formFields={[
{
key: 'token',
label: 'Token'
}
]}
/>
</div>
);
GithubForm.displayName = 'GithubForm';

11
frontend/app/components/Client/Integrations/IntegrationItem.tsx
View file

@ -15,14 +15,17 @@ const IntegrationItem = (props: Props) => {
const { integration, integrated, hide = false } = props;
return hide ? <></> : (
<div
className={cn('flex flex-col border p-3 bg-white relative justify-between cursor-pointer hover:bg-active-blue')}
className={cn('flex flex-col border rounded-lg p-3 bg-white relative justify-between cursor-pointer hover:bg-active-blue')}
onClick={(e) => props.onClick(e)}
style={{ height: '126px' }}
>
<div className='flex gap-3'>
{integration.icon.length ?
<img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' /> :
(<span style={{ fontSize: '3rem', lineHeight: '3rem' }}>{integration.header}</span>)}
{/*{integration.icon.length ?*/}
{/* <img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' /> :*/}
{/* (<span style={{ fontSize: '3rem', lineHeight: '3rem' }}>{integration.header}</span>)}*/}
<div className="shrink-0">
<img className='h-10 w-10' src={'/assets/' + integration.icon + '.svg'} alt='integration' />
</div>
<div className='flex flex-col'>
<h4 className='text-lg'>{integration.title}</h4>
<p className='text-sm color-gray-medium m-0 p-0 h-3'>{integration.subtitle && integration.subtitle}</p>

26
frontend/app/components/Client/Integrations/IntegrationModalCard.tsx Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import { Icon } from 'UI';
import DocLink from 'Shared/DocLink';
interface Props {
title: string;
icon: string;
description: string;
}
function IntegrationModalCard(props: Props) {
const { title, icon, description } = props;
return (
<div className='flex items-start p-5 gap-4'>
<div className='border rounded-lg p-2 shrink-0'>
<img className='h-20 w-20' src={'/assets/' + icon + '.svg'} alt='integration' />
</div>
<div>
<h3 className='text-2xl'>{title}</h3>
<div>{description}</div>
</div>
</div>
);
}
export default IntegrationModalCard;

2
frontend/app/components/Client/Integrations/Integrations.tsx
View file

@ -251,7 +251,7 @@ const integrations = [
component: <SumoLogicForm />
},
{
title: 'Stackdriver',
title: 'Google Cloud',
subtitle: 'Integrate Google Cloud to view backend logs and errors in conjunction with session replay',
slug: 'stackdriver',
icon: 'integrations/google-cloud',

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

@ -2,43 +2,55 @@ import React from 'react';
import IntegrationForm from '../IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import { useModal } from 'App/components/Modal';
import { Icon } from 'UI';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const JiraForm = (props) => {
const { hideModal } = useModal();
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Jira</h3>
<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}
name="jira"
customPath="jira"
onClose={hideModal}
formFields={[
{
key: 'username',
label: 'Username',
autoFocus: true,
},
{
key: 'token',
label: 'API Token',
},
{
key: 'url',
label: 'JIRA URL',
placeholder: 'E.x. https://myjira.atlassian.net',
},
]}
/>
const { hideModal } = useModal();
return (
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Jira' icon='integrations/jira'
description='Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.' />
<div className='border-b my-4 p-5'>
<div className='font-medium mb-1'>How it works?</div>
<ol className='list-decimal list-inside'>
<li>Create a new API token</li>
<li>Enter the token below</li>
</ol>
<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}
name='jira'
customPath='jira'
onClose={hideModal}
formFields={[
{
key: 'username',
label: 'Username',
autoFocus: true
},
{
key: 'token',
label: 'API Token'
},
{
key: 'url',
label: 'JIRA URL',
placeholder: 'E.x. https://myjira.atlassian.net'
}
]}
/>
</div>
);
};
JiraForm.displayName = 'JiraForm';

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

@ -1,34 +1,41 @@
import React from 'react';
import IntegrationForm from '../IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const NewrelicForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">New Relic</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate NewRelic with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate NewRelic" url="https://docs.openreplay.com/integrations/newrelic" />
</div>
<IntegrationForm
{...props}
name="newrelic"
formFields={[
{
key: 'applicationId',
label: 'Application Id',
},
{
key: 'xQueryKey',
label: 'X-Query-Key',
},
{
key: 'region',
label: 'EU Region',
type: 'checkbox',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='New Relic' icon='integrations/newrelic'
description='Integrate NewRelic with session replays to seamlessly observe backend errors.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create Query Key</li>
<li>Enter the details below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate NewRelic' url='https://docs.openreplay.com/integrations/newrelic' />
</div>
<IntegrationForm
{...props}
name='newrelic'
formFields={[
{
key: 'applicationId',
label: 'Application Id'
},
{
key: 'xQueryKey',
label: 'X-Query-Key'
},
{
key: 'region',
label: 'EU Region',
type: 'checkbox'
}
]}
/>
</div>
);
NewrelicForm.displayName = 'NewrelicForm';

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

@ -1,25 +1,32 @@
import React from 'react';
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const RollbarForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Rollbar</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate Rollbar with OpenReplay and see backend errors alongside session replays.</div>
<DocLink className="mt-4" label="Integrate Rollbar" url="https://docs.openreplay.com/integrations/rollbar" />
</div>
<IntegrationForm
{...props}
name="rollbar"
formFields={[
{
key: 'accessToken',
label: 'Access Token',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Rollbar' icon='integrations/rollbar'
description='Integrate Rollbar with session replays to seamlessly observe backend errors.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create Rollbar Access Tokens</li>
<li>Enter the token below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate Rollbar' url='https://docs.openreplay.com/integrations/rollbar' />
</div>
<IntegrationForm
{...props}
name='rollbar'
formFields={[
{
key: 'accessToken',
label: 'Access Token'
}
]}
/>
</div>
);
RollbarForm.displayName = 'RollbarForm';

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

@ -1,33 +1,40 @@
import React from 'react';
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const SentryForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Sentry</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate Sentry with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate Sentry" url="https://docs.openreplay.com/integrations/sentry" />
</div>
<IntegrationForm
{...props}
name="sentry"
formFields={[
{
key: 'organizationSlug',
label: 'Organization Slug',
},
{
key: 'projectSlug',
label: 'Project Slug',
},
{
key: 'token',
label: 'Token',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Sentry' icon='integrations/sentry'
description='Integrate Sentry with session replays to seamlessly observe backend errors.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Generate Sentry Auth Token</li>
<li>Enter the token below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='See detailed steps' url='https://docs.openreplay.com/integrations/sentry' />
</div>
<IntegrationForm
{...props}
name='sentry'
formFields={[
{
key: 'organizationSlug',
label: 'Organization Slug'
},
{
key: 'projectSlug',
label: 'Project Slug'
},
{
key: 'token',
label: 'Token'
}
]}
/>
</div>
);
SentryForm.displayName = 'SentryForm';

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

@ -1,30 +1,38 @@
import React from 'react';
import IntegrationForm from './IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const StackdriverForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Stackdriver</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate Stackdriver with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate Stackdriver" url="https://docs.openreplay.com/integrations/stackdriver" />
</div>
<IntegrationForm
{...props}
name="stackdriver"
formFields={[
{
key: 'logName',
label: 'Log Name',
},
{
key: 'serviceAccountCredentials',
label: 'Service Account Credentials (JSON)',
component: 'textarea',
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Google Cloud' icon='integrations/google-cloud'
description='Integrate Google Cloud Watch to see backend logs and errors alongside session replay.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create Google Cloud Service Account</li>
<li>Enter the details below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate Stackdriver'
url='https://docs.openreplay.com/integrations/stackdriver' />
</div>
<IntegrationForm
{...props}
name='stackdriver'
formFields={[
{
key: 'logName',
label: 'Log Name'
},
{
key: 'serviceAccountCredentials',
label: 'Service Account Credentials (JSON)',
component: 'textarea'
}
]}
/>
</div>
);
StackdriverForm.displayName = 'StackdriverForm';

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

@ -2,34 +2,41 @@ import React from 'react';
import IntegrationForm from '../IntegrationForm';
import RegionDropdown from './RegionDropdown';
import DocLink from 'Shared/DocLink/DocLink';
import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
const SumoLogicForm = (props) => (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<h3 className="p-5 text-2xl">Sumologic</h3>
<div className="p-5 border-b mb-4">
<div>How to integrate SumoLogic with OpenReplay and see backend errors alongside session recordings.</div>
<DocLink className="mt-4" label="Integrate SumoLogic" url="https://docs.openreplay.com/integrations/sumo" />
</div>
<IntegrationForm
{...props}
name="sumologic"
formFields={[
{
key: 'accessId',
label: 'Access ID',
},
{
key: 'accessKey',
label: 'Access Key',
},
{
key: 'region',
label: 'Region',
component: RegionDropdown,
},
]}
/>
<div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
<IntegrationModalCard title='Sumologic' icon='integrations/sumologic'
description='Integrate Sumo Logic with session replays to seamlessly observe backend errors.' />
<div className='p-5 border-b mb-4'>
<div className='font-medium mb-1'>How it works?</div>
<ol className="list-decimal list-inside">
<li>Create a new Access ID and Access Key</li>
<li>Enter the details below</li>
<li>Propagate openReplaySessionToken</li>
</ol>
<DocLink className='mt-4' label='Integrate SumoLogic' url='https://docs.openreplay.com/integrations/sumo' />
</div>
<IntegrationForm
{...props}
name='sumologic'
formFields={[
{
key: 'accessId',
label: 'Access ID'
},
{
key: 'accessKey',
label: 'Access Key'
},
{
key: 'region',
label: 'Region',
component: RegionDropdown
}
]}
/>
</div>
);
SumoLogicForm.displayName = 'SumoLogicForm';

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

@ -8,7 +8,7 @@ export default function DocLink({ className = '', url, label }) {
return (
<div className={className}>
<Button variant="outline" onClick={openLink}>
<Button variant="text-primary" onClick={openLink}>
<span className="mr-2">{ label }</span>
<Icon name="external-link-alt" color="teal" />
</Button>