Skip to content
This repository was archived by the owner on Nov 15, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions api_server/modules/apiweb/newrelic_ide_redirect_request.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const { defaultCookieName, ides} = require('./config');
class NewRelicIdeRedirectRequest extends IdeRedirectRequest {
constructor(options) {
super(options);
this.abTest = Math.random() < 0.5 ? "feature_tabs" : "feature_bullets";
this.pageType = ''
}

async prepareTemplateProps () {
Expand All @@ -26,22 +26,22 @@ class NewRelicIdeRedirectRequest extends IdeRedirectRequest {
let pageType, pageWhat, analyticsContentType, entityId, itemGuid;
switch (this.redirectType) {
case 'error':
pageType = 'errorsinbox';
this.pageType = 'errorsinbox';
pageWhat = 'ErrorsInbox';
analyticsContentType = 'error';
itemGuid = this.parsedPayload.errorGroupGuid;
this.showVideo = true;
break;
case 'span':
pageType = 'span';
this.pageType = 'span';
pageWhat = 'Span';
analyticsContentType = 'span';
entityId = this.parsedPayload.spanId;
itemGuid = this.parsedPayload.spanId;
this.showVideo = false;
break;
case 'logs':
pageType = 'logs';
this.pageType = 'logs';
pageWhat = 'Logs';
analyticsContentType = 'logs';
entityId = this.parsedPayload.entityId;
Expand All @@ -53,8 +53,7 @@ class NewRelicIdeRedirectRequest extends IdeRedirectRequest {
}
const launcherModel = this.createLauncherModel('');
this.templateProps = {
abTest: this.abTest,
pageType,
pageType: this.pageType,
pageWhat,
analyticsContentType,
launchIde: this.parsedPayload?.ide === '' ? 'default' : this.parsedPayload?.ide,
Expand Down Expand Up @@ -113,11 +112,11 @@ class NewRelicIdeRedirectRequest extends IdeRedirectRequest {
}
}).bind(this))();
const result = {
abTest: this.abTest,
environment,
ides: ides,
src: decodeURIComponent(this.parsedPayload.src || ''),
csrf: this.request.csrfToken(),
pageType: this.pageType,
showVideo: this.showVideo,
...lastOrigin
};
Expand Down
1 change: 0 additions & 1 deletion api_server/modules/apiweb/templates/ide_redirect.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
"meta_data_2": "source: {{src}}",
"meta_data_3": "new_to_codestream: {{newToCodeStream}}",
"meta_data_4": "item_guid: {{itemGuid}}",
"meta_data_5": "ab_test_version: {{abTest}}",
}, "{{nrUserId}}");
}();
</script>
Expand Down
140 changes: 48 additions & 92 deletions api_server/modules/apiweb/templates/partial_launcher_detailed.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -629,117 +629,71 @@ function onIdeSelected(e, moniker) {
</div>
</div>
</div>
{{#if (eq abTest "feature_tabs")}}
<div class="content-body-container">
<h4 style="text-align: center" class="content-body-header">
All the power of New Relic, right in your IDE
</h4>
<div>
Install New Relic's CodeStream IDE extension to see how the services built from your code
are performing, and access powerful tools for identifying and investigating performance issues.
</div>
<div class="content-body-container">
<h4 style="text-align: center" class="content-body-header">
All the power of New Relic, right in your IDE
</h4>
<div>
Install New Relic's CodeStream IDE extension to see how the services built from your code
are performing, and access powerful tools for identifying and investigating performance issues.
</div>

<div class="content-body-tab-container">
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M4.446 1h7.108c.377 0 .747.114 1.067.327a2.131 2.131 0 01.747.882l2.576 5.534A.61.61 0 0116 8v4.82c0 .578-.213 1.133-.594 1.541-.38.41-.895.639-1.433.639H2.027c-.538 0-1.053-.23-1.433-.639A2.267 2.267 0 010 12.82V8c0-.09.02-.177.056-.257L2.632 2.21c.168-.363.426-.669.747-.883.32-.213.69-.327 1.067-.327zm0 1.148a.91.91 0 00-.505.155 1.01 1.01 0 00-.354.418v.001l-2.19 4.704h3.616c.179 0 .345.096.444.256l1.335 2.154h2.416l1.335-2.154a.524.524 0 01.444-.256h3.616l-2.19-4.704v-.001a1.009 1.009 0 00-.354-.418.91.91 0 00-.505-.155m3.38 6.426h-3.662l-1.335 2.154a.524.524 0 01-.444.256H6.507a.524.524 0 01-.444-.256L4.728 8.574H1.067v4.246c0 .274.1.536.28.73.18.194.425.302.68.302h11.946a.928.928 0 00.68-.302c.18-.194.28-.456.28-.73V8.574z" clip-rule="evenodd"></path></svg>
Errors
</div>
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M7.7 0H2v15h11V5.3L7.7 0zm3.6 5H8V1.7L11.3 5zM3 1v13h9V6H7V1H3zm2 7h5v1H5V8zm3 3H5v1h3v-1z" clip-rule="evenodd"></path></svg>
Logs
</div>
<div style="width: 29%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M13 1H2C.9 1 0 1.9 0 3v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm1 12c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5h13v8zM1 4h13V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v1zm3.4 8.4l2.8-2.9-2.8-2.9-.8.8 2.2 2.1-2.2 2.1.8.8zM12 11H8v1h4v-1z" clip-rule="evenodd"></path></svg>
NRQL Queries
</div>
<div style="width: 32%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M9 12v3H1v-3h8zm-1 1H2v1h6v-1zm4-6v3H1V7h11zm-1 1H2v1h9V8zm4-6v3H1V2h14zm-1 1H2v1h12V3z" clip-rule="evenodd"></path></svg>
Code Performance
</div>
<div class="content-body-tab-container">
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M4.446 1h7.108c.377 0 .747.114 1.067.327a2.131 2.131 0 01.747.882l2.576 5.534A.61.61 0 0116 8v4.82c0 .578-.213 1.133-.594 1.541-.38.41-.895.639-1.433.639H2.027c-.538 0-1.053-.23-1.433-.639A2.267 2.267 0 010 12.82V8c0-.09.02-.177.056-.257L2.632 2.21c.168-.363.426-.669.747-.883.32-.213.69-.327 1.067-.327zm0 1.148a.91.91 0 00-.505.155 1.01 1.01 0 00-.354.418v.001l-2.19 4.704h3.616c.179 0 .345.096.444.256l1.335 2.154h2.416l1.335-2.154a.524.524 0 01.444-.256h3.616l-2.19-4.704v-.001a1.009 1.009 0 00-.354-.418.91.91 0 00-.505-.155m3.38 6.426h-3.662l-1.335 2.154a.524.524 0 01-.444.256H6.507a.524.524 0 01-.444-.256L4.728 8.574H1.067v4.246c0 .274.1.536.28.73.18.194.425.302.68.302h11.946a.928.928 0 00.68-.302c.18-.194.28-.456.28-.73V8.574z" clip-rule="evenodd"></path></svg>
Errors
</div>

<div class="content-body-tab" id="content-body-tab1">
<div class="content-body-copy">
Use the frames of the stack trace to navigate the code. Leverage the power of New Relic AI, and the help of
your teammates, to collaborate on the investigation.
</div>
<div>
<img class="observability-gif" src="https://raw.githubusercontent.com/TeamCodeStream/CodeStream/develop/images/animated/ErrorsAI-VSC.gif" alt="CodeStream Observability" />
</div>
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M7.7 0H2v15h11V5.3L7.7 0zm3.6 5H8V1.7L11.3 5zM3 1v13h9V6H7V1H3zm2 7h5v1H5V8zm3 3H5v1h3v-1z" clip-rule="evenodd"></path></svg>
Logs
</div>
<div class="content-body-tab" id="content-body-tab2">
<div class="content-body-copy">
Search logs for your APM or OTel services, or even an Infra container. Intiate a log search
directly from specific log lines in your code.
</div>
<div>
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-logs.png" />
</div>
<div style="width: 29%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M13 1H2C.9 1 0 1.9 0 3v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm1 12c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5h13v8zM1 4h13V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v1zm3.4 8.4l2.8-2.9-2.8-2.9-.8.8 2.2 2.1-2.2 2.1.8.8zM12 11H8v1h4v-1z" clip-rule="evenodd"></path></svg>
NRQL Queries
</div>
<div class="content-body-tab" id="content-body-tab3">
<div class="content-body-copy">
Run queries right from your IDE, with auto-complete, visualizations, and export. Share commonly
used queries in .nrql files added to your repo, and run queries right from the file.
</div>
<div>
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-queries.png" />
</div>
</div>
<div class="content-body-tab" id="content-body-tab4">
<div class="content-body-copy">
Identify transactions that are exhibiting performance problems since your last release, and drill down
into specific methods, database operations or external services that are at the root of the problem.
</div>
<div>
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-anomalies.png" />
</div>
<div style="width: 32%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M9 12v3H1v-3h8zm-1 1H2v1h6v-1zm4-6v3H1V7h11zm-1 1H2v1h9V8zm4-6v3H1V2h14zm-1 1H2v1h12V3z" clip-rule="evenodd"></path></svg>
Code Performance
</div>
</div>
{{/if}}

{{#if (eq abTest "feature_bullets")}}
<div class="content-body-container">
<h4 class="content-body-header">
All the power of New Relic, right in your IDE
</h4>
<div>
Install New Relic's CodeStream IDE extension to see how the services built from your code
are performing, and access powerful tools for identifying and investigating performance issues.
<div class="content-body-tab" id="content-body-tab1">
<div class="content-body-copy">
Use the frames of the stack trace to navigate the code. Leverage the power of New Relic AI, and the help of
your teammates, to collaborate on the investigation.
</div>
<h4 class="content-body-section-header">
<svg style="margin-top: -5px; width: 22px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M7.7 0H2v15h11V5.3L7.7 0zm3.6 5H8V1.7L11.3 5zM3 1v13h9V6H7V1H3zm2 7h5v1H5V8zm3 3H5v1h3v-1z" clip-rule="evenodd"></path></svg>
Search Logs
</h4>
<div>
<img class="observability-gif" src="https://raw.githubusercontent.com/TeamCodeStream/CodeStream/develop/images/animated/ErrorsAI-VSC.gif" alt="CodeStream Observability" />
</div>
</div>
<div class="content-body-tab" id="content-body-tab2">
<div class="content-body-copy">
Search logs for your APM or OTel services, or even an Infra container. Intiate a log search
directly from specific log lines in your code.
</div>
<h4 class="content-body-section-header">
<svg style="margin-top: -5px; width: 22px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M13 1H2C.9 1 0 1.9 0 3v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm1 12c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5h13v8zM1 4h13V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v1zm3.4 8.4l2.8-2.9-2.8-2.9-.8.8 2.2 2.1-2.2 2.1.8.8zM12 11H8v1h4v-1z" clip-rule="evenodd"></path></svg>
Run NRQL Queries
</h4>
<div>
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-logs.png" />
</div>
</div>
<div class="content-body-tab" id="content-body-tab3">
<div class="content-body-copy">
Run queries right from your IDE, with auto-complete, visualizations, and export. Share commonly
used queries in .nrql files added to your repo, and run queries right from the file.
</div>
<h4 class="content-body-section-header">
<svg style="margin-top: -5px; width: 22px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M4.446 1h7.108c.377 0 .747.114 1.067.327a2.131 2.131 0 01.747.882l2.576 5.534A.61.61 0 0116 8v4.82c0 .578-.213 1.133-.594 1.541-.38.41-.895.639-1.433.639H2.027c-.538 0-1.053-.23-1.433-.639A2.267 2.267 0 010 12.82V8c0-.09.02-.177.056-.257L2.632 2.21c.168-.363.426-.669.747-.883.32-.213.69-.327 1.067-.327zm0 1.148a.91.91 0 00-.505.155 1.01 1.01 0 00-.354.418v.001l-2.19 4.704h3.616c.179 0 .345.096.444.256l1.335 2.154h2.416l1.335-2.154a.524.524 0 01.444-.256h3.616l-2.19-4.704v-.001a1.009 1.009 0 00-.354-.418.91.91 0 00-.505-.155m3.38 6.426h-3.662l-1.335 2.154a.524.524 0 01-.444.256H6.507a.524.524 0 01-.444-.256L4.728 8.574H1.067v4.246c0 .274.1.536.28.73.18.194.425.302.68.302h11.946a.928.928 0 00.68-.302c.18-.194.28-.456.28-.73V8.574z" clip-rule="evenodd"></path></svg>
Investigate Errors
</h4>
<div>
Use the frames of the stack trace to navigate the code. Leverage the power of New Relic AI, and the help of
your teammates, to collaborate on the investigation.
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-queries.png" />
</div>
<h4 class="content-body-section-header">
<svg style="margin-top: -5px; width: 22px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M9 12v3H1v-3h8zm-1 1H2v1h6v-1zm4-6v3H1V7h11zm-1 1H2v1h9V8zm4-6v3H1V2h14zm-1 1H2v1h12V3z" clip-rule="evenodd"></path></svg>
Identify Poorly Performing Code
</h4>
<div>
</div>
<div class="content-body-tab" id="content-body-tab4">
<div class="content-body-copy">
Identify transactions that are exhibiting performance problems since your last release, and drill down
into specific methods, database operations or external services that are at the root of the problem.
</div>
<div>
<img class="observability-gif" src="https://images.codestream.com/misc/redirect-anomalies.png" />
</div>
</div>
{{/if}}
</div>
</div>
<script src="//fast.wistia.com/embed/medias/aei2dq75qi.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
Expand All @@ -762,9 +716,11 @@ function onIdeSelected(e, moniker) {
evt.currentTarget.classList.add("content-active-tab");
}

// By default, display the first tab
// @TODO - modify to open Logs by default if coming from
if ("{{abTest}}" === "feature_tabs"){
// Start on logs tab if coming from logs, otherwise default to errors tab
if ("{{pageType}}" === "logs"){
document.getElementById("content-body-tab2").style.display = "block";
document.getElementsByClassName("content-body-tab-header")[1].classList.add("content-active-tab");
} else {
document.getElementById("content-body-tab1").style.display = "block";
document.getElementsByClassName("content-body-tab-header")[0].classList.add("content-active-tab");
}
Expand Down