change(ui) - tooltip replacement
This commit is contained in:
Shekar Siri
parent
815c1c35a8
commit
f890015e55
3 changed files with 7 additions and 645 deletions
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import stl from './announcements.module.css';
|
||||
import ListItem from './ListItem';
|
||||
import { connect } from 'react-redux';
|
||||
import { SlideModal, Icon, NoContent, Popup } from 'UI';
|
||||
import { SlideModal, Icon, NoContent, Tooltip } from 'UI';
|
||||
import { fetchList, setLastRead } from 'Duck/announcements';
|
||||
import withToggle from 'Components/hocs/withToggle';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
|
@ -45,14 +45,14 @@ class Announcements extends React.Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<Popup content={ `Announcements` } >
|
||||
<Tooltip content={ `Announcements` } >
|
||||
<div className={ stl.button } onClick={ this.toggleModal } data-active={ visible }>
|
||||
<div className={ stl.counter } data-hidden={ unReadNotificationsCount === 0 }>
|
||||
{ unReadNotificationsCount }
|
||||
</div>
|
||||
<Icon name="bullhorn" size="18" />
|
||||
</div>
|
||||
</Popup>
|
||||
</Tooltip>
|
||||
|
||||
<SlideModal
|
||||
title="Announcements"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import { Icon, Popup } from 'UI';
|
||||
import { Icon, Tooltip } from 'UI';
|
||||
import stl from './integrationItem.module.css';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
|
|
@ -17,9 +17,9 @@ const IntegrationItem = (props: Props) => {
|
|||
<div className={cn(stl.wrapper, 'mb-4', { [stl.integrated]: integrated })} onClick={(e) => props.onClick(e)}>
|
||||
{integrated && (
|
||||
<div className="m-2 absolute right-0 top-0 h-4 w-4 rounded-full bg-teal flex items-center justify-center">
|
||||
<Popup content="Integrated" delay={0}>
|
||||
<Tooltip title="Integrated" delay={0}>
|
||||
<Icon name="check" size="14" color="white" />
|
||||
</Popup>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{integration.icon.length ? <img className="h-12 w-12" src={'/assets/' + integration.icon + '.svg'} alt="integration" /> : (
|
||||
|
|
@ -33,9 +33,4 @@ const IntegrationItem = (props: Props) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default connect((state: any, props: Props) => {
|
||||
const list = state.getIn([props.integration.slug, 'list']) || [];
|
||||
return {
|
||||
// integrated: props.integration.slug === 'issues' ? !!(list.first() && list.first().token) : list.size > 0,
|
||||
};
|
||||
})(IntegrationItem);
|
||||
export default IntegrationItem;
|
||||
|
|
|
|||
|
|
@ -1,633 +0,0 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import withPageTitle from "HOCs/withPageTitle";
|
||||
import { Loader, IconButton, SlideModal } from "UI";
|
||||
import { fetchList as fetchListSlack } from "Duck/integrations/slack";
|
||||
import { remove as removeIntegrationConfig } from "Duck/integrations/actions";
|
||||
import { fetchList, init } from "Duck/integrations/actions";
|
||||
import cn from "classnames";
|
||||
|
||||
import IntegrationItem from "./IntegrationItem";
|
||||
import SentryForm from "./SentryForm";
|
||||
import GithubForm from "./GithubForm";
|
||||
import SlackForm from "./SlackForm";
|
||||
import DatadogForm from "./DatadogForm";
|
||||
import StackdriverForm from "./StackdriverForm";
|
||||
import RollbarForm from "./RollbarForm";
|
||||
import NewrelicForm from "./NewrelicForm";
|
||||
import BugsnagForm from "./BugsnagForm";
|
||||
import CloudwatchForm from "./CloudwatchForm";
|
||||
import ElasticsearchForm from "./ElasticsearchForm";
|
||||
import SumoLogicForm from "./SumoLogicForm";
|
||||
import JiraForm from "./JiraForm";
|
||||
import styles from "./integrations.module.css";
|
||||
import ReduxDoc from "./ReduxDoc";
|
||||
import VueDoc from "./VueDoc";
|
||||
import GraphQLDoc from "./GraphQLDoc";
|
||||
import NgRxDoc from "./NgRxDoc/NgRxDoc";
|
||||
import SlackAddForm from "./SlackAddForm";
|
||||
import FetchDoc from "./FetchDoc";
|
||||
import MobxDoc from "./MobxDoc";
|
||||
import ProfilerDoc from "./ProfilerDoc";
|
||||
import AssistDoc from "./AssistDoc";
|
||||
import AxiosDoc from "./AxiosDoc/AxiosDoc";
|
||||
|
||||
const NONE = -1;
|
||||
const SENTRY = 0;
|
||||
const DATADOG = 1;
|
||||
const STACKDRIVER = 2;
|
||||
const ROLLBAR = 3;
|
||||
const NEWRELIC = 4;
|
||||
const BUGSNAG = 5;
|
||||
const CLOUDWATCH = 6;
|
||||
const ELASTICSEARCH = 7;
|
||||
const SUMOLOGIC = 8;
|
||||
const JIRA = 9;
|
||||
const GITHUB = 10;
|
||||
const REDUX = 11;
|
||||
const VUE = 12;
|
||||
const GRAPHQL = 13;
|
||||
const NGRX = 14;
|
||||
const SLACK = 15;
|
||||
const FETCH = 16;
|
||||
const MOBX = 17;
|
||||
const PROFILER = 18;
|
||||
const ASSIST = 19;
|
||||
const AXIOS = 20;
|
||||
|
||||
const TITLE = {
|
||||
[SENTRY]: "Sentry",
|
||||
[SLACK]: "Slack",
|
||||
[DATADOG]: "Datadog",
|
||||
[STACKDRIVER]: "Stackdriver",
|
||||
[ROLLBAR]: "Rollbar",
|
||||
[NEWRELIC]: "New Relic",
|
||||
[BUGSNAG]: "Bugsnag",
|
||||
[CLOUDWATCH]: "CloudWatch",
|
||||
[ELASTICSEARCH]: "Elastic Search",
|
||||
[SUMOLOGIC]: "Sumo Logic",
|
||||
[JIRA]: "Jira",
|
||||
[GITHUB]: "Github",
|
||||
[REDUX]: "Redux",
|
||||
[VUE]: "VueX",
|
||||
[GRAPHQL]: "GraphQL",
|
||||
[NGRX]: "NgRx",
|
||||
[FETCH]: "Fetch",
|
||||
[MOBX]: "MobX",
|
||||
[PROFILER]: "Profiler",
|
||||
[ASSIST]: "Assist",
|
||||
[AXIOS]: "Axios",
|
||||
};
|
||||
|
||||
const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST];
|
||||
|
||||
const integrations = [
|
||||
"sentry",
|
||||
"datadog",
|
||||
"stackdriver",
|
||||
"rollbar",
|
||||
"newrelic",
|
||||
"bugsnag",
|
||||
"cloudwatch",
|
||||
"elasticsearch",
|
||||
"sumologic",
|
||||
"issues",
|
||||
];
|
||||
|
||||
@connect(
|
||||
(state) => {
|
||||
const props = {};
|
||||
integrations.forEach((name) => {
|
||||
props[`${name}Integrated`] =
|
||||
name === "issues"
|
||||
? !!(
|
||||
state.getIn([name, "list"]).first() &&
|
||||
state.getIn([name, "list"]).first().token
|
||||
)
|
||||
: state.getIn([name, "list"]).size > 0;
|
||||
props.loading =
|
||||
props.loading || state.getIn([name, "fetchRequest", "loading"]);
|
||||
});
|
||||
const site = state.getIn(["site", "instance"]);
|
||||
return {
|
||||
...props,
|
||||
issues: state.getIn(["issues", "list"]).first() || {},
|
||||
slackChannelListExists: state.getIn(["slack", "list"]).size > 0,
|
||||
tenantId: state.getIn(["user", "account", "tenantId"]),
|
||||
jwt: state.get("jwt"),
|
||||
projectKey: site ? site.projectKey : "",
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchList,
|
||||
init,
|
||||
fetchListSlack,
|
||||
removeIntegrationConfig,
|
||||
}
|
||||
)
|
||||
@withPageTitle("Integrations - OpenReplay Preferences")
|
||||
export default class Integrations extends React.PureComponent {
|
||||
state = {
|
||||
modalContent: NONE,
|
||||
showDetailContent: false,
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
integrations.forEach((name) => this.props.fetchList(name));
|
||||
this.props.fetchListSlack();
|
||||
}
|
||||
|
||||
onClickIntegrationItem = (e, url) => {
|
||||
e.preventDefault();
|
||||
window.open(url);
|
||||
};
|
||||
|
||||
closeModal = () =>
|
||||
this.setState({ modalContent: NONE, showDetailContent: false });
|
||||
|
||||
onOauthClick = (source) => {
|
||||
if (source === GITHUB) {
|
||||
const githubUrl = `https://auth.openreplay.com/oauth/login?provider=github&back_url=${document.location.href}`;
|
||||
const options = {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: new Headers({
|
||||
Authorization: "Bearer " + this.props.jwt.toString(),
|
||||
}),
|
||||
};
|
||||
fetch(githubUrl, options).then((resp) =>
|
||||
resp.text().then((txt) => window.open(txt, "_self"))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderDetailContent() {
|
||||
switch (this.state.modalContent) {
|
||||
case SLACK:
|
||||
return (
|
||||
<SlackAddForm
|
||||
onClose={() =>
|
||||
this.setState({ showDetailContent: false })
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
renderModalContent() {
|
||||
const { projectKey } = this.props;
|
||||
|
||||
switch (this.state.modalContent) {
|
||||
case SENTRY:
|
||||
return <SentryForm onClose={this.closeModal} />;
|
||||
case GITHUB:
|
||||
return <GithubForm onClose={this.closeModal} />;
|
||||
case SLACK:
|
||||
return (
|
||||
<SlackForm
|
||||
onClose={this.closeModal}
|
||||
onEdit={() =>
|
||||
this.setState({ showDetailContent: true })
|
||||
}
|
||||
/>
|
||||
);
|
||||
case DATADOG:
|
||||
return <DatadogForm onClose={this.closeModal} />;
|
||||
case STACKDRIVER:
|
||||
return <StackdriverForm onClose={this.closeModal} />;
|
||||
case ROLLBAR:
|
||||
return <RollbarForm onClose={this.closeModal} />;
|
||||
case NEWRELIC:
|
||||
return <NewrelicForm onClose={this.closeModal} />;
|
||||
case BUGSNAG:
|
||||
return <BugsnagForm onClose={this.closeModal} />;
|
||||
case CLOUDWATCH:
|
||||
return <CloudwatchForm onClose={this.closeModal} />;
|
||||
case ELASTICSEARCH:
|
||||
return <ElasticsearchForm onClose={this.closeModal} />;
|
||||
case SUMOLOGIC:
|
||||
return <SumoLogicForm onClose={this.closeModal} />;
|
||||
case JIRA:
|
||||
return <JiraForm onClose={this.closeModal} />;
|
||||
case REDUX:
|
||||
return (
|
||||
<ReduxDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case VUE:
|
||||
return (
|
||||
<VueDoc onClose={this.closeModal} projectKey={projectKey} />
|
||||
);
|
||||
case GRAPHQL:
|
||||
return (
|
||||
<GraphQLDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case NGRX:
|
||||
return (
|
||||
<NgRxDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case FETCH:
|
||||
return (
|
||||
<FetchDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case MOBX:
|
||||
return (
|
||||
<MobxDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case PROFILER:
|
||||
return (
|
||||
<ProfilerDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case ASSIST:
|
||||
return (
|
||||
<AssistDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
case AXIOS:
|
||||
return (
|
||||
<AxiosDoc
|
||||
onClose={this.closeModal}
|
||||
projectKey={projectKey}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
deleteHandler = (name) => {
|
||||
this.props.removeIntegrationConfig(name, null).then(
|
||||
function () {
|
||||
this.props.fetchList(name);
|
||||
}.bind(this)
|
||||
);
|
||||
};
|
||||
|
||||
showIntegrationConfig = (type) => {
|
||||
this.setState({ modalContent: type });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
loading,
|
||||
sentryIntegrated,
|
||||
stackdriverIntegrated,
|
||||
datadogIntegrated,
|
||||
rollbarIntegrated,
|
||||
newrelicIntegrated,
|
||||
bugsnagIntegrated,
|
||||
cloudwatchIntegrated,
|
||||
elasticsearchIntegrated,
|
||||
sumologicIntegrated,
|
||||
hideHeader = false,
|
||||
plugins = false,
|
||||
jiraIntegrated,
|
||||
issuesIntegrated,
|
||||
tenantId,
|
||||
slackChannelListExists,
|
||||
issues,
|
||||
} = this.props;
|
||||
const { modalContent, showDetailContent } = this.state;
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<SlideModal
|
||||
title={
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4">{TITLE[modalContent]}</div>
|
||||
{modalContent === SLACK && (
|
||||
<IconButton
|
||||
circle
|
||||
icon="plus"
|
||||
outline
|
||||
small="small"
|
||||
onClick={() =>
|
||||
this.setState({
|
||||
showDetailContent: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
isDisplayed={modalContent !== NONE}
|
||||
onClose={this.closeModal}
|
||||
size={
|
||||
DOCS.includes(this.state.modalContent)
|
||||
? "middle"
|
||||
: "small"
|
||||
}
|
||||
content={this.renderModalContent()}
|
||||
detailContent={
|
||||
showDetailContent && this.renderDetailContent()
|
||||
}
|
||||
/>
|
||||
|
||||
{!hideHeader && (
|
||||
<div className={styles.tabHeader}>
|
||||
<h3 className={cn(styles.tabTitle, "text-2xl")}>
|
||||
{"Integrations"}
|
||||
</h3>
|
||||
<p className={styles.subText}>
|
||||
Power your workflow with your favourite tools.
|
||||
</p>
|
||||
<div className={styles.divider} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{plugins && (
|
||||
<div className="">
|
||||
<div className="mb-4">
|
||||
Use plugins to better debug your application's
|
||||
store, monitor queries and track performance issues.
|
||||
</div>
|
||||
<div className="flex flex-wrap">
|
||||
<IntegrationItem
|
||||
title="Redux"
|
||||
icon="integrations/redux"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(REDUX)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="VueX"
|
||||
icon="integrations/vuejs"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() => this.showIntegrationConfig(VUE)}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="GraphQL"
|
||||
icon="integrations/graphql"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(GRAPHQL)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="NgRx"
|
||||
icon="integrations/ngrx"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() => this.showIntegrationConfig(NGRX)}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="MobX"
|
||||
icon="integrations/mobx"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() => this.showIntegrationConfig(MOBX)}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Fetch"
|
||||
icon="integrations/openreplay"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(FETCH)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Profiler"
|
||||
icon="integrations/openreplay"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(PROFILER)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Axios"
|
||||
icon="integrations/openreplay"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/plugins/axios"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(AXIOS)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Assist"
|
||||
icon="integrations/assist"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/installation/assist"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(ASSIST)
|
||||
}
|
||||
// integrated={ sentryIntegrated }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!plugins && (
|
||||
<Loader loading={loading}>
|
||||
<div className={styles.content}>
|
||||
<div className="">
|
||||
<div className="mb-4">
|
||||
How are you monitoring errors and crash
|
||||
reporting?
|
||||
</div>
|
||||
<div className="flex flex-wrap">
|
||||
{(!issues.token ||
|
||||
issues.provider !== "github") && (
|
||||
<IntegrationItem
|
||||
title="Jira"
|
||||
description="Jira is a proprietary issue tracking product developed by Atlassian that allows bug tracking and agile project management."
|
||||
icon="integrations/jira"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/jira"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(JIRA)
|
||||
}
|
||||
integrated={issuesIntegrated}
|
||||
/>
|
||||
)}
|
||||
{(!issues.token ||
|
||||
issues.provider !== "jira") && (
|
||||
<IntegrationItem
|
||||
title="Github"
|
||||
description="Easily share issues on GitHub directly from any session replay."
|
||||
icon="integrations/github"
|
||||
url={`https://auth.openreplay.com/oauth/login?provider=github&back_url=${
|
||||
window.env.ORIGIN ||
|
||||
window.location.origin
|
||||
}`}
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(
|
||||
GITHUB
|
||||
)
|
||||
}
|
||||
integrated={issuesIntegrated}
|
||||
deleteHandler={
|
||||
issuesIntegrated
|
||||
? () =>
|
||||
this.deleteHandler(
|
||||
"issues"
|
||||
)
|
||||
: null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<IntegrationItem
|
||||
title="Slack"
|
||||
description="Error tracking that helps developers monitor and fix crashes in real time."
|
||||
icon="integrations/slack"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(SLACK)
|
||||
}
|
||||
integrated={sentryIntegrated}
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Sentry"
|
||||
description="Error tracking that helps developers monitor and fix crashes in real time."
|
||||
icon="integrations/sentry"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sentry"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(SENTRY)
|
||||
}
|
||||
integrated={sentryIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="Bugsnag"
|
||||
description="Bugsnag is an error-monitoring tool that allows your developers to identify, prioritize and replicate bugs in a time-efficient and enjoyable manner."
|
||||
icon="integrations/bugsnag"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/bugsnag"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(BUGSNAG)
|
||||
}
|
||||
integrated={bugsnagIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="Rollbar"
|
||||
description="Rollbar provides real-time error tracking & debugging tools for developers."
|
||||
icon="integrations/rollbar"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/rollbar"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(ROLLBAR)
|
||||
}
|
||||
integrated={rollbarIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="Elastic Search"
|
||||
description="Elasticsearch is a distributed, RESTful search and analytics engine capable of addressing a growing number of use cases."
|
||||
icon="integrations/elasticsearch"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/elastic"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(
|
||||
ELASTICSEARCH
|
||||
)
|
||||
}
|
||||
integrated={elasticsearchIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="Datadog"
|
||||
description="Monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services."
|
||||
icon="integrations/datadog"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/datadog"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(DATADOG)
|
||||
}
|
||||
integrated={datadogIntegrated}
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Sumo Logic"
|
||||
description="Sumo Logic to collaborate, develop, operate, and secure their applications at cloud scale."
|
||||
icon="integrations/sumologic"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/sumo"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(
|
||||
SUMOLOGIC
|
||||
)
|
||||
}
|
||||
integrated={sumologicIntegrated}
|
||||
/>
|
||||
<IntegrationItem
|
||||
title="Stackdriver"
|
||||
description="Monitoring and management for services, containers, applications, and infrastructure."
|
||||
icon="integrations/stackdriver"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/stackdriver"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(
|
||||
STACKDRIVER
|
||||
)
|
||||
}
|
||||
integrated={stackdriverIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="CloudWatch"
|
||||
description="Amazon CloudWatch is a monitoring and management service that provides data and actionable insights for AWS, hybrid, and on-premises applications and infrastructure resources."
|
||||
icon="integrations/cloudwatch"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/cloudwatch"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(
|
||||
CLOUDWATCH
|
||||
)
|
||||
}
|
||||
integrated={cloudwatchIntegrated}
|
||||
/>
|
||||
|
||||
<IntegrationItem
|
||||
title="New Relic"
|
||||
description="New Relic's application monitoring gives you detailed performance metrics for every aspect of your environment."
|
||||
icon="integrations/newrelic"
|
||||
url={null}
|
||||
dockLink="https://docs.openreplay.com/integrations/newrelic"
|
||||
onClick={() =>
|
||||
this.showIntegrationConfig(NEWRELIC)
|
||||
}
|
||||
integrated={newrelicIntegrated}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue