From 0a9c2ed4d1ef443005d40d7ad0f5f8dd2762bd5f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 11 Aug 2022 17:51:10 +0200
Subject: [PATCH] feat(ui) - overview - stack event modal

---
 .../StackEventModal/StackEventModal.tsx       | 22 +++++-
 .../components/JsonViewer/JsonViewer.js       | 15 +++++
 .../components/JsonViewer/index.ts            |  1 +
 .../components/Sentry/Sentry.js               | 67 +++++++++++++++++++
 .../components/Sentry/index.ts                |  1 +
 .../components/Sentry/sentry.module.css       | 47 +++++++++++++
 6 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/JsonViewer.js
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/index.ts
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/Sentry.js
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/index.ts
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/sentry.module.css

diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
index 07d163dbe..76490900a 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
@@ -1,12 +1,30 @@
 import React from 'react';
+import JsonViewer from './components/JsonViewer';
+import Sentry from './components/Sentry';
+import { OPENREPLAY, SENTRY, DATADOG, STACKDRIVER } from 'Types/session/stackEvent';
 
 interface Props {
     event: any;
 }
 function StackEventModal(props: Props) {
+    const renderPopupContent = () => {
+        const {
+            event: { source, payload, name },
+        } = props;
+        switch (source) {
+            case SENTRY:
+                return <Sentry event={payload} />;
+            case DATADOG:
+                return <JsonViewer title={name} data={payload} icon="integrations/datadog" />;
+            case STACKDRIVER:
+                return <JsonViewer title={name} data={payload} icon="integrations/stackdriver" />;
+            default:
+                return <JsonViewer title={name} data={payload} icon={`integrations/${source}`} />;
+        }
+    };
     return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-            Content
+        <div className="bg-white h-screen overflow-y-auto" style={{ width: '450px' }}>
+            {renderPopupContent()}
         </div>
     );
 }
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/JsonViewer.js b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/JsonViewer.js
new file mode 100644
index 000000000..985191896
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/JsonViewer.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, JSONTree } from 'UI';
+
+export default class JsonViewer extends React.PureComponent {
+    render() {
+        const { data, title, icon } = this.props;
+        return (
+            <div className="p-5">
+                <Icon name={icon} size="30" />
+                <h4 className="my-5 capitalize"> {title}</h4>
+                <JSONTree src={data} collapsed={false} />
+            </div>
+        );
+    }
+}
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/index.ts b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/index.ts
new file mode 100644
index 000000000..155729246
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/JsonViewer/index.ts
@@ -0,0 +1 @@
+export { default } from './JsonViewer';
\ No newline at end of file
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/Sentry.js b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/Sentry.js
new file mode 100644
index 000000000..0e1ea0747
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/Sentry.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { getIn, get } from 'immutable';
+import cn from 'classnames';
+import { withRequest } from 'HOCs';
+import { Loader, Icon, JSONTree } from 'UI';
+import { Accordion } from 'semantic-ui-react';
+import stl from './sentry.module.css';
+
+@withRequest({
+    endpoint: (props) => `/integrations/sentry/events/${props.event.id}`,
+    dataName: 'detailedEvent',
+    loadOnInitialize: true,
+})
+export default class SentryEventInfo extends React.PureComponent {
+    makePanelsFromStackTrace(stacktrace) {
+        return get(stacktrace, 'frames', []).map(({ filename, function: method, lineNo, context = [] }) => ({
+            key: `${filename}_${method}_${lineNo}`,
+            title: {
+                content: (
+                    <span className={stl.accordionTitle}>
+                        <b>{filename}</b>
+                        {' in '}
+                        <b>{method}</b>
+                        {' at line '}
+                        <b>{lineNo}</b>
+                    </span>
+                ),
+            },
+            content: {
+                content: (
+                    <ol start={getIn(context, [0, 0], 0)} className={stl.lineList}>
+                        {context.map(([ctxLineNo, codeText]) => (
+                            <li className={cn(stl.codeLine, { [stl.highlighted]: ctxLineNo === lineNo })}>{codeText}</li>
+                        ))}
+                    </ol>
+                ),
+            },
+        }));
+    }
+
+    renderBody() {
+        const { detailedEvent, requestError, event } = this.props;
+
+        const exceptionEntry = get(detailedEvent, ['entries'], []).find(({ type }) => type === 'exception');
+        const stacktraces = getIn(exceptionEntry, ['data', 'values']);
+        if (!stacktraces) {
+            return <JSONTree src={requestError ? event : detailedEvent} sortKeys={false} enableClipboard />;
+        }
+        return stacktraces.map(({ type, value, stacktrace }) => (
+            <div key={type} className={stl.stacktrace}>
+                <h6>{type}</h6>
+                <p>{value}</p>
+                <Accordion styled panels={this.makePanelsFromStackTrace(stacktrace)} />
+            </div>
+        ));
+    }
+
+    render() {
+        const { open, toggleOpen, loading } = this.props;
+        return (
+            <div className={stl.wrapper}>
+                <Icon name="integrations/sentry-text" size="30" color="gray-medium" />
+                <Loader loading={loading}>{this.renderBody()}</Loader>
+            </div>
+        );
+    }
+}
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/index.ts b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/index.ts
new file mode 100644
index 000000000..534162c8b
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/index.ts
@@ -0,0 +1 @@
+export { default } from './Sentry';
\ No newline at end of file
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/sentry.module.css b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/sentry.module.css
new file mode 100644
index 000000000..75956a074
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/components/Sentry/sentry.module.css
@@ -0,0 +1,47 @@
+
+.wrapper {
+	padding: 20px 40px 30px;
+}
+.icon {
+	margin-left: -5px;
+}
+.stacktrace {
+	& h6 {
+		display: flex;
+		align-items: center;
+		font-size: 17px;
+		padding-top: 7px;
+		margin-bottom: 10px;
+	}
+	& p {
+		font-family: 'Menlo', 'monaco', 'consolas', monospace;
+	}
+}
+
+
+.accordionTitle {
+	font-weight: 100;
+	& > b {
+		font-weight: 700;
+	}
+}
+
+.lineList {
+	list-style-position: inside;
+  list-style-type: decimal-leading-zero;
+  background: $gray-lightest;
+}
+
+.codeLine {
+  font-family: 'Menlo', 'monaco', 'consolas', monospace;
+  line-height: 24px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  min-height: 24px;
+  padding: 0 25px;
+	&.highlighted {
+		background: $red;
+		color: $white;
+	}
+}
\ No newline at end of file