Skip to content

Commit

Permalink
Many UI improvements
Browse files Browse the repository at this point in the history 
Click on a mark on the map shows the IP details
  • Loading branch information
@mdima
mdima committed May 4, 2024
1 parent e092c6b commit 76530e4
Show file tree
Hide file tree
Showing 12 changed files with 60 additions and 48 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ Based on the original repository: https://github.com/bencorn/traceroute

### Running in Docker
You can use the following image to run Visual Trace Route locally:
michele73/traceroute:1.1.2
michele73/traceroute:1.2

Example:
docker run -d -p 8081:80 --name=traceroute --restart=always -v traecroute_logs:/app/logs michele73/traceroute:1.1.2
docker run -d -p 8081:80 --name=traceroute --restart=always -v traecroute_logs:/app/logs michele73/traceroute:1.2

The image repository is here: https://hub.docker.com/r/michele73/traceroute

Expand Down
2 changes: 1 addition & 1 deletion TraceRoute/Controllers/APIController.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ public async Task<IpApiResponse> IPDetails(string ipAddress)

try
{
_logger.LogDebug("Requested IPDetails for: {0}", ipAddress);
_logger.LogInformation("Requested IPDetails for: {0}", ipAddress);

if (!_bogonIPService.IsBogonIP(ipAddress))
{
Expand Down
23 changes: 21 additions & 2 deletions TraceRoute/Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,24 @@ WORKDIR /app
EXPOSE 80
EXPOSE 443

RUN apt-get update
RUN apt-get install -y curl traceroute
RUN apt-get update \
&& apt-get install -y curl traceroute dnsutils

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["TraceRoute/TraceRoute.csproj", "TraceRoute/"]
RUN dotnet restore "./TraceRoute/TraceRoute.csproj"
COPY . .
WORKDIR "/src/TraceRoute"
RUN dotnet build "./TraceRoute.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./TraceRoute.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
ENV ASPNETCORE_URLS=http://+:80
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "TraceRoute.dll"]
10 changes: 5 additions & 5 deletions TraceRoute/Views/Home/Index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
ViewData["Title"] = "Visual Trace Route";
}
<div class="row m-0 p-0 fullHeight">
<div class="col-12 col-md-8 m-0 p-0 mobile-50">
<div class="col-12 col-md-7 m-0 p-0 mobile-50">
<div id="map" class="tr-map"></div>
</div>
<div class="col-12 col-md-4 m-0 p-0 mobile-max-50">
<div class="col-12 col-md-5 m-0 p-0 pb-5 mobile-max-50">
<h5 class="bg-secondary text-white ps-3 p-2">Route details</h5>
<table class="table table-striped table-sm m-0">
<thead class="thead-dark">
Expand All @@ -21,7 +21,7 @@ ViewData["Title"] = "Visual Trace Route";
<tr ng-repeat="hop in vm.HostList track by $index" class="tr_hop_{{$index + 1}}" data-index-value="{{ $index + 1 }}" onmouseover="hilightTooltip(this)">
<td class="ps-2 tr_hop_{{$index + 1}}">{{$index + 1}}</td>
<td class="tr_hop_{{$index + 1}}">
<a href="#" class="link-secondary" ng-click="vm.IpDetails(hop.hopAddress)" ng-show="!hop.details.isBogonIP">
<a href="#" class="link-secondary" ng-click="vm.IpDetails(hop.hopAddress); $event.preventDefault()" ng-show="!hop.details.isBogonIP">
{{hop.hopAddress}}
</a>
<span ng-show="hop.details.isBogonIP">
Expand All @@ -37,10 +37,10 @@ ViewData["Title"] = "Visual Trace Route";
<span class="visually-hidden">Loading...</span>
</div>
</td>
<td ng-hide="hop.details.isp == null" class="small tr_hop_{{$index + 1}}">
<td ng-hide="hop.details.isp == null" class="small text-break tr_hop_{{$index + 1}}">
{{ hop.details.country }} - {{ hop.details.city }}
</td>
<td ng-hide="hop.details.isp == null" class="small tr_hop_{{$index + 1}} d-none d-xl-table-cell">
<td ng-hide="hop.details.isp == null" class="small text-break tr_hop_{{$index + 1}} d-none d-xl-table-cell">
{{ hop.details.isp }}
</td>
</tr>
Expand Down
34 changes: 19 additions & 15 deletions TraceRoute/Views/Shared/_Layout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TraceRoute</title>
<link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/site.css[email protected]" />
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="~/lib/leaflet/leaflet.min.css" />
</head>
Expand Down Expand Up @@ -35,7 +35,11 @@
@RenderBody()
</main>
<footer class="footer fixed-bottom navbar-dark bg-dark">
<p class="navbar-brand ms-3">&copy; @DateTime.Now.Year - TraceRoute - <a class="link-secondary" href="https://github.com/mdima/traceroute" target="_blank"><i class="fa-brands fa-github"></i> GitHub</a></p>
<p class="navbar-brand ms-3">
&copy; @DateTime.Now.Year - TraceRoute -
<i class="fa-brands fa-github link-secondary"></i> <a class="link-secondary" href="https://github.com/mdima/traceroute" target="_blank">GitHub</a> -
<i class="fa-brands fa-docker link-secondary"></i> <a class="link-secondary" href="https://hub.docker.com/r/michele73/traceroute" target="_blank">Docker</a>
</p>
</footer>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAbout" aria-labelledby="offcanvasRightLabel">
<div class="spinner-border spinner-border-lg m-5" role="status">
Expand All @@ -60,25 +64,25 @@
<span class="visually-hidden">Loading...</span>
</div>
<div class="row" ng-show="vm.ipDetail != null">
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Continent</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Continent</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.continent}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Country</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Country</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.country}} ({{vm.ipDetail.countryCode}})</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Region</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Region</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.regionName}} ({{vm.ipDetail.region}})</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">City</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">City</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.city}} <span ng-show="vm.ipDetail.district"> ({{vm.ipDetail.district}}) </span>- {{vm.ipDetail.zip}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">ISP</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">ISP</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.isp}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Organization</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Organization</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.org}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">AS</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">AS</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.as}} ({{vm.ipDetail.asname}})</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Is mobile</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Is mobile</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.mobile}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Is proxy</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Is proxy</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.proxy}}</div>
<div class="col-3 HalfStrong" ng-show="vm.ipDetail != null">Is hosting</div>
<div class="col-3 text-muted" ng-show="vm.ipDetail != null">Is hosting</div>
<div class="col-9" ng-show="vm.ipDetail != null">{{vm.ipDetail.hosting}}</div>
</div>
</div>
Expand All @@ -92,9 +96,9 @@
<script src="~/lib/twitter-bootstrap/js/bootstrap.min.js"></script>
<script src="~/lib/leaflet/leaflet.min.js"></script>
<script src="~/lib/angular.js/angular.min.js"></script>
<script src="~/js/app.js"></script>
<script src="~/js/traceRouteController.js"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
<script src="~/js/app.js[email protected]"></script>
<script src="~/js/traceRouteController.js[email protected]"></script>
<script src="~/js/site.min.js[email protected]" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
4 changes: 0 additions & 4 deletions TraceRoute/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@ ul {
margin: 0px
}

.HalfStrong {
font-weight: 400
}

@keyframes highlight {
0% {
background: #ffff99;
Expand Down
2 changes: 1 addition & 1 deletion TraceRoute/wwwroot/css/site.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 6 additions & 1 deletion TraceRoute/wwwroot/js/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,23 @@ function initMap() {
});
}

function addMarker(lat, long, text) {
function addMarker(lat, long, text, ipAddress) {
var marker = L.marker([lat, long], {id: 'marker_' + text})
.bindTooltip(text,
{
permanent: true,
direction: 'right'
})
.on('mouseover', hilightHopTable)
.on('click', function (evt) { ipDetailsJS(ipAddress); })
.addTo(map);
markers.push[marker];
}

function ipDetailsJS(ipAddress) {
var scope = angular.element(document.querySelector("body")).controller();
scope.IpDetails(ipAddress);
}
function hilightHopTable() {
var tooltip = this.getTooltip();
var hopRowID = ".tr_hop_" + tooltip.getContent();
Expand Down
2 changes: 1 addition & 1 deletion TraceRoute/wwwroot/js/site.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion TraceRoute/wwwroot/js/traceRouteController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,10 @@
var hostDetail = angular.fromJson(responseDetail).data;
vm.HostList[i].details = hostDetail;
if (hostDetail.longitude && hostDetail.latitude) {
addMarker(hostDetail.latitude, hostDetail.longitude, (i + 1).toString());
addMarker(hostDetail.latitude, hostDetail.longitude, (i + 1).toString(), vm.HostList[i].hopAddress);
drawPath(vm.HostList);
}
$(window).trigger('resize');
}
);
}
Expand Down
17 changes: 2 additions & 15 deletions UnitTests/Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,5 @@ WORKDIR /app
EXPOSE 80
EXPOSE 443

RUN apt-get update
RUN apt-get install -y curl traceroute dnsutils

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["TraceRoute/TraceRoute.csproj", "TraceRoute/"]
RUN dotnet restore "./TraceRoute/TraceRoute.csproj"
COPY . .
WORKDIR "/src/TraceRoute"
RUN dotnet build "./TraceRoute.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./TraceRoute.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false
RUN apt-get update \
&& apt-get install -y curl traceroute dnsutils
Binary file modified screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 76530e4

Please sign in to comment.