Skip to content

Commit

Permalink
Show TLS details (#730)
Browse files Browse the repository at this point in the history
  • Loading branch information
MartinKolarik authored Feb 24, 2025
1 parent d88047d commit f691655
Show file tree
Hide file tree
Showing 8 changed files with 112 additions and 26 deletions.
2 changes: 1 addition & 1 deletion src/assets/js/utils/http.js
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ module.exports.postGlobalpingMeasurement = (opts, responseHeadersToGet) => {
method: 'POST',
url: `${GLOBALPING_HOST}/v1/measurements`,
body: opts,
withCredentials: true,
withCredentials: /(?:^|\.)globalping\.io$/.test(location.hostname),
};

if (responseHeadersToGet) {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/less/bootstrap/bootstrap.less
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
//@import "popovers.less";
@import "popovers.less";
//@import "carousel.less";

// Utility classes
Expand Down
2 changes: 1 addition & 1 deletion src/assets/less/bootstrap/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
@popover-max-width: none;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
Expand Down
12 changes: 4 additions & 8 deletions src/assets/less/components/gp-results-raw-output.less
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@
overflow-y: scroll;

&_item {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
padding: 24px 0 24px 18px;

&_top-wrapper {
position: relative;
display: flex;
width: 100%;

Expand All @@ -42,7 +40,6 @@
}

&_inner-wrapper {
position: relative;
width: 100%;
padding: 0 24px;
background: #fbfbfb;
Expand Down Expand Up @@ -141,8 +138,8 @@

&_status-line {
position: absolute;
top: 24px;
left: 0;
top: 0;
left: -18px;
width: 2px;
height: 28px;
border-radius: 8px;
Expand All @@ -155,7 +152,6 @@
// gp-test-results actions styles (now applied only to globalping page)
.p-globalping .c-gp-results-raw-output {
.c-gp-results-raw-output_list_item_top-wrapper {
position: relative;
display: flex;
justify-content: right;
width: 100%;
Expand All @@ -179,8 +175,8 @@
.c-gp-results-raw-output_list_item_top-wrapper_actions {
display: none;
position: absolute;
top: 24px;
left: 0;
top: 0;
left: -70px;
visibility: hidden;
overflow: visible;

Expand Down
2 changes: 1 addition & 1 deletion src/assets/less/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
@popover-max-width: none; //
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
Expand Down
31 changes: 18 additions & 13 deletions src/views/components/gp-results-raw-output.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<link rel="ractive" href="../components/gp-results-share.html" name="c-gp-results-share">
<link rel="ractive" href="./gp-tls-details.html" name="c-gp-tls-details">

<div class="c-gp-results-raw-output">
<div class="c-gp-results-raw-output_list">
Expand Down Expand Up @@ -41,33 +42,37 @@
{{/each}}
{{/unless}}

<c-gp-tls-details tls="{{this.statsPerTarget[activeTargetIdx].tls}}" screenWidth="{{screenWidth}}"></c-gp-tls-details>

<img on-click="@this.hideShowTestResult(idx)"
class="c-gp-results-raw-output_list_item_header_dropdown-icon {{#if hiddenTestResults.includes(idx)}}upside-down{{/if}}"
width="24"
height="24"
src="{{@shared.assetsHost}}/img/globalping/chevron-up-icon.svg">

<div
class="c-gp-results-raw-output_list_item_status-line"
style="background-color: {{_.getGpProbeStatusColor(this.statsPerTarget[activeTargetIdx].avgTiming, testReqParams.type === 'http' ? 1000 : 200) || ''}}">
</div>

<div class="c-gp-results-raw-output_list_item_top-wrapper_actions">
<div class="c-gp-results-raw-output_list_item_top-wrapper_actions_btn"
as-tooltip="'Set as location for the next test', 'right'"
on-click="@this.setProbeAsLocation(this)">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
</div>
</div>

<pre class="{{#if hiddenTestResults.includes(idx)}}hidden{{/if}}">{{this.statsPerTarget[activeTargetIdx].rawOutput}}</pre>

{{#if testInProgress === false && isInfiniteModeRes}}
<pre class="{{#if hiddenTestResults.includes(idx)}}hidden{{/if}}">{{this.statsPerTarget[activeTargetIdx].rawFooter}}</pre>
{{/if}}

<div
class="c-gp-results-raw-output_list_item_status-line"
style="background-color: {{_.getGpProbeStatusColor(this.statsPerTarget[activeTargetIdx].avgTiming, testReqParams.type === 'http' ? 1000 : 200) || ''}}">
</div>
</div>

<div class="c-gp-results-raw-output_list_item_inner-wrapper_bottom-line"></div>
</div>

<div class="c-gp-results-raw-output_list_item_top-wrapper_actions">
<div class="c-gp-results-raw-output_list_item_top-wrapper_actions_btn"
as-tooltip="'Set as location for the next test', 'right'"
on-click="@this.setProbeAsLocation(this)">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<div style="position: relative;">
<div class="c-gp-results-raw-output_list_item_inner-wrapper_bottom-line"></div>
</div>
</div>
</div>
Expand Down
83 changes: 83 additions & 0 deletions src/views/components/gp-tls-details.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
{{#if tls}}
<button type="button" class="btn" title="TLS details" data-content="{{@this.getTlsString(tls)}}" data-html="true" data-container=".c-gp-results-raw-output_list">
<i class="fa fa-lock" aria-hidden="true"></i> TLS details
</button>
{{/if}}

<script>
const _ = require('../../assets/js/_');

component.exports = {
data () {
return {
_,
};
},
computed: {
placement () {
return this.get('screenWidth') >= 1200 ? 'right' : 'top';
},
},
onrender () {
if (!Ractive.isServer) {
this.observe('placement', () => {
let button = this.find('button');

$(button).popover('destroy');

setTimeout(() => {
$(button).popover({ placement: this.get('placement') });

let closeHandler = (e) => {
if (e.target !== button && $(e.target).closest('.popover').length === 0) {
button.click();
}
};

$(button).on('show.bs.popover', () => {
console.log('show');
$(document).on('click', closeHandler);
$(document).on('resize', closeHandler);
$('.c-gp-results-raw-output_list').on('scroll', closeHandler);
}).on('hide.bs.popover', () => {
console.log('hide');
$(document).off('click', closeHandler);
$(document).off('resize', closeHandler);
$('.c-gp-results-raw-output_list').off('scroll', closeHandler);
});
}, 600);
});
}
},
getTlsString (tls) {
return `
<table class="table" style="margin-bottom: 0; overflow-wrap: anywhere;">
<tr>
<th style="border-top: 0; min-width: 86px;">Subject</th>
<td style="border-top: 0;">${tls.subject.CN}; ${tls.subject.alt}</td>
</tr>
<tr>
<th>Issuer</th>
<td>${tls.issuer.CN}; ${tls.issuer.O}; ${tls.issuer.C}</td>
</tr>
<tr>
<th>Validity</th>
<td>${_.formatDateTime(tls.createdAt)}; ${_.formatDateTime(tls.expiresAt)}</td>
</tr>
<tr>
<th>Serial number</th>
<td>${tls.serialNumber}</td>
</tr>
<tr>
<th>Fingerprint</th>
<td>${tls.fingerprint256}</td>
</tr>
<tr>
<th>Key type</th>
<td>${tls.keyType}${tls.keyBits}</td>
</tr>
</table>
`;
},
};
</script>
4 changes: 3 additions & 1 deletion src/views/pages/globalping/_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -606,7 +606,8 @@
currSearchLocation="{{mainOptions.location}}"
measurementsMetadata="{{measurementsMetadata}}"
activeTargetIdx="{{activeTargetIdx}}"
isInfiniteModeRes="{{isInfiniteModeRes}}">
isInfiniteModeRes="{{isInfiniteModeRes}}"
screenWidth="{{screenWidth}}">
</c-gp-results-raw-output>
</div>
{{else}}
Expand Down Expand Up @@ -3066,6 +3067,7 @@
rawOutput: res.result.rawOutput,
qualityStr: this.createQualityString(isOffline, statsTotal, statsDrop),
areTimingsReady: this.checkAreTimingsReady(lastTiming, maxTiming, minTiming, avgTiming, packetsTotal),
tls: res.result.tls,
}];
}

Expand Down

0 comments on commit f691655

Please sign in to comment.