GP: IPv6 support (#660)

Co-authored-by: Martin Kolárik <martin@kolarik.sk>
jsdelivr · Aug 9, 2024 · 5bd3288 · 5bd3288
1 parent 72482f7
commit 5bd3288
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 22 deletions.
diff --git a/src/assets/less/components/gp-results-controls.less b/src/assets/less/components/gp-results-controls.less
@@ -56,14 +56,22 @@
 				justify-content: center;
 				height: 100%;
 				width: 50%;
-				color: #9b9ba6;
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 20px;
 				padding: 0 16px;
 				cursor: pointer;
 				user-select: none;
 
+				&_text {
+					width: 100%;
+					color: #9b9ba6;
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 20px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					text-align: center;
+				}
+
 				@media (min-width: @screen-sm-min) {
 					width: auto;
 				}
@@ -73,7 +81,9 @@
 				}
 
 				&.active {
-					color: #17233a;
+					.content-wrapper_tabs_tab_text {
+						color: #17233a;
+					}
 
 					.active-tab-bar {
 						display: inline-flex;

diff --git a/src/assets/less/components/gp-results-table-output.less b/src/assets/less/components/gp-results-table-output.less
@@ -115,7 +115,7 @@
 					width: 120px;
 
 					@media (min-width: @screen-lg-min) {
-						width: 140px;
+						width: 180px;
 					}
 				}
 
@@ -330,7 +330,13 @@
 							width: 100%;
 
 							@media (min-width: @screen-lg-min) {
-								width: 140px;
+								width: 180px;
+							}
+
+							span {
+								overflow: hidden;
+								text-overflow: ellipsis;
+								white-space: nowrap;
 							}
 
 							.c-placeholder-skeleton {

diff --git a/src/assets/less/components/tags-input.less b/src/assets/less/components/tags-input.less
@@ -231,4 +231,104 @@
 			}
 		}
 	}
+
+	.switch-ip-type-wrapper {
+		align-items: center;
+		margin-left: 4px;
+		width: 92px;
+
+		&:focus {
+			box-shadow: 0 2px 2px rgba(0, 0, 0, .04), 0 0 0 1px #fff, 0 0 0 4px rgba(23, 212, 167, .48);
+			border: 1.5px solid #e7e7ee;
+			border-radius: 8px;
+			outline: none;
+		}
+
+		.switch-input {
+			display: none;
+
+			& + label {
+				position: relative;
+				display: flex;
+				align-items: center;
+				padding: 0 2px;
+				width: 92px;
+				height: 28px;
+				cursor: pointer;
+				font-weight: 400;
+				transition: background-color 400ms ease, padding-left 400ms ease;
+				background: #f3f5f6;
+				border: none;
+				box-sizing: border-box;
+				border-radius: 10px;
+				margin-bottom: 0;
+
+				&.disabled {
+					cursor: default;
+				}
+
+				> span:nth-child(1),
+				> span:nth-child(2) {
+					user-select: none;
+					position: absolute;
+					display: inline-flex;
+					justify-content: center;
+					align-items: center;
+					top: 2px;
+					background: transparent;
+					z-index: 2;
+					width: 44px;
+					color: #17233a;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 12px;
+					height: 24px;
+				}
+
+				> span.disabled {
+					opacity: .2;
+				}
+
+				> span:nth-child(1) {
+					left: 2px;
+				}
+
+				> span:nth-child(2) {
+					right: 2px;
+				}
+
+				&:before {
+					display: flex;
+					width: 44px;
+					height: 24px;
+					content: "";
+					background: #fff;
+					border-radius: 8px;
+					z-index: 1;
+				}
+			}
+
+			&.checked + label {
+				padding-left: 46px;
+			}
+		}
+
+		&.hidden {
+			display: none;
+		}
+
+		&.locked {
+			label {
+				cursor: not-allowed;
+			}
+		}
+
+		&.disabled {
+			opacity: .4;
+
+			label {
+				cursor: not-allowed;
+			}
+		}
+	}
 }
diff --git a/src/assets/less/pages/globalping.less b/src/assets/less/pages/globalping.less
@@ -629,7 +629,6 @@
 								.gp_switch .slider {
 									transition: none;
 									box-shadow: 0 2px 2px rgba(0, 0, 0, .04), 0 0 0 1px #fff, 0 0 0 4px rgba(23, 212, 167, .48);
-									border: 1.5px solid #e7e7ee;
 								}
 							}
 

diff --git a/src/views/components/gp-results-controls.html b/src/views/components/gp-results-controls.html
@@ -4,7 +4,7 @@
 			{{#each targets:idx}}
 				<div on-click="@this.handleTabSwitch(idx)"
 					class="content-wrapper_tabs_tab {{#if idx === activeTargetIdx && rawOutputMode}}active{{/if}} {{#unless rawOutputMode}}disabled{{/unless}}">
-					{{this}}
+					<span class="content-wrapper_tabs_tab_text">{{this}}</span>
 					<span class="active-tab-bar"></span>
 				</div>
 			{{/each}}

diff --git a/src/views/components/gp-results-table-output.html b/src/views/components/gp-results-table-output.html
@@ -21,7 +21,7 @@
 					<span class="rtt_separator">/</span>
 					<span class="rtt_text">max</span>
 				</div>
-				<div class="results-table_header_cell ip">IP</div>
+				<div class="results-table_header_cell ip">Resolved IP</div>
 				<div class="results-table_header_cell graph">Graph</div>
 			</div>
 
@@ -176,9 +176,14 @@
 
 									<div class="results-table_row_stats_subrow_cell ip">
 										<div class="results-table_row_stats_subrow_cell_value">
-											<span class="results-table_row_stats_subrow_cell_value_header">IP</span>
+											<span class="results-table_row_stats_subrow_cell_value_header">Resolved IP</span>
 											{{#if this.ipAddr}}
-												<span>{{this.ipAddr}}</span>
+												<span class="visible-lg"> <!-- We break in two lines if the value has more than 4 non-empty groups. -->
+													{{#each splitIPv6(ipAddr)}}
+														{{this}}<br>
+													{{/each}}
+												</span>
+												<span class="hidden-lg">{{this.ipAddr}}</span>
 											{{elseif !this.ipAddr}}
 												<c-placeholder-skeleton type="subheader"></c-placeholder-skeleton>
 											{{/if}}
@@ -232,6 +237,17 @@
 				PROBE_NO_TIMING_VALUE,
 				PROBE_OFFLINE_TEXT,
 				PROBE_FAILED_TEXT,
+				splitIPv6 (address) {
+					let segments = address.split(':');
+
+					if (segments.filter(Boolean).length <= 4) {
+						return [ address ];
+					}
+
+					let splitAt = segments[3] ? 4 : 3;
+
+					return [ segments.slice(0, splitAt).join(':'), ':' + segments.slice(splitAt).join(':') ];
+				},
 			};
 		},
 		onrender () {