From 5eaf4ee9c44b39a061cab20e5c138c379692ac74 Mon Sep 17 00:00:00 2001 From: dr|z3d Date: Tue, 17 Aug 2021 02:08:38 +0000 Subject: [PATCH] Console: start consolidation of tunnels page --- daemon/HTTPServer.cpp | 96 +++++++++++++++++++++++--------------- webconsole/style.css | 105 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 157 insertions(+), 44 deletions(-) diff --git a/daemon/HTTPServer.cpp b/daemon/HTTPServer.cpp index 4b9c5ffb..7b940a3e 100644 --- a/daemon/HTTPServer.cpp +++ b/daemon/HTTPServer.cpp @@ -341,7 +341,8 @@ namespace http { s << internalCSS; } - const char HTTP_PAGE_TUNNELS[] = "tunnels"; + const char HTTP_PAGE_TUNNEL_SUMMARY[] = "tunnel_summary"; + const char HTTP_PAGE_CLIENT_TUNNELS[] = "client_tunnels"; const char HTTP_PAGE_TRANSIT_TUNNELS[] = "transit_tunnels"; const char HTTP_PAGE_TRANSPORTS[] = "transports"; const char HTTP_PAGE_LOCAL_DESTINATIONS[] = "local_destinations"; @@ -517,14 +518,14 @@ namespace http { << "\r\n"; if (i2p::context.IsFloodfill ()) s << "" << tr("LeaseSets") << "\r\n"; - s << "" << tr("Destinations") << "\r\n" + s << "" << tr("Destinations") << "\r\n" // "" << tr("Services") << "\r\n" // "" << tr("Transit") << "\r\n" - "" << tr ("Transports") << "\r\n" - "" << tr("Tunnels") << "\r\n"; + "" << tr ("Transports") << "\r\n" + "" << tr("Tunnels") << "\r\n"; if (sam && sam->GetSessions ().size ()) { s << "" << tr("SAM Sessions") << "\r\n"; @@ -672,11 +673,10 @@ namespace http { clientTunnelCount += i2p::tunnel::tunnels.CountInboundTunnels(); std::string webroot; i2p::config::GetOption("http.webroot", webroot); - s << "" << tr("Service Tunnels") << "" << std::to_string(clientTunnelCount) << "\r\n"; + s << "" << tr("Service Tunnels") << "" << std::to_string(clientTunnelCount) << "\r\n"; if (i2p::context.AcceptsTunnels () || i2p::tunnel::tunnels.CountTransitTunnels()) { - s << "" << tr("Transit Tunnels") << "" << std::to_string(i2p::tunnel::tunnels.CountTransitTunnels()) << "\r\n"; + s << "" << tr("Transit Tunnels") << "" + << std::to_string(i2p::tunnel::tunnels.CountTransitTunnels()) << "\r\n"; } if(outputFormat==OutputFormatEnum::forWebConsole) { @@ -1096,16 +1096,35 @@ namespace http { s << "\r\n\r\n\r\n\r\n"; } + void ShowTunnelSummary (std::stringstream& s) { + std::string webroot; i2p::config::GetOption("http.webroot", webroot); + s << "" << tr("Tunnel Summary") << "\r\n"; + s << "\r\n"; + s << "\r\n" + << "" + << "" + << "\r\n\r\n"; + if (i2p::tunnel::tunnels.CountTransitTunnels() > 0) { + s << "" + << "\r\n"; + } + s << "" + << "\r\n" + << "" + << "\r\n" +// << "\r\n" + << "\r\n
" << tr("Type") << "" << tr("Inbound") << "" << tr("Outbound") << "" << tr("View Details") << "
" << tr("Transit") << "------View
" << tr("Exploratory") << "------View
" << tr("Exploratory + Service") << "------View
" << tr("Service") << "count in/outView
"; + ShowI2PTunnels (s); + s << "
\r\n"; + s << "\r\n"; + } + static void ShowCommands (std::stringstream& s, uint32_t token) { -// s << "" << tr("Router Configuration") << ""; - s << "\r\n"; s << "
\r\n\r\n" << "\r\n"; s << "
\r\n\r\n"; - - s << "\r\n"; s << "\r\n"; @@ -1181,7 +1200,7 @@ namespace http { else s << " " + << "\" data-tooltip=\"" << tr("Accept transit tunnels") << "\">" << tr("Accept transit tunnels") << "
\r\n"; if (i2p::tunnel::tunnels.CountTransitTunnels()) { @@ -1538,8 +1557,10 @@ namespace http { void ShowI2PTunnels (std::stringstream& s) { std::string webroot; i2p::config::GetOption("http.webroot", webroot); - s << "" - << "\r\n"; + s << "\r\n\r\n"; auto& serverTunnels = i2p::client::context.GetServerTunnels (); if (!serverTunnels.empty ()) { @@ -1610,7 +1631,7 @@ namespace http { s << i2p::client::context.GetAddressBook ().ToAddress(ident); s << "\r\n"<< std::endl; } - s << "\r\n"; + s << "
" << tr("Router Identity") << "
" << tr("Router Caps") << "" << i2p::context.GetRouterInfo().GetProperty("caps") << "
" << tr("Service Tunnels") << "
\r\n
\r\n"; + s << "
\r\n\r\n" + << "\r\n"; + s << "
\r\n"; for (auto& it: i2p::client::context.GetClientTunnels ()) { auto& ident = it.second->GetLocalDestination ()->GetIdentHash(); @@ -1566,7 +1587,7 @@ namespace http { s << i2p::client::context.GetAddressBook ().ToAddress(ident); s << "
\r\n" << std::endl; } - s << "
\r\n"; } } @@ -1769,35 +1790,36 @@ namespace http { url.parse_query(params); page = params["page"]; - if (page == HTTP_PAGE_TRANSPORTS) + if (page == HTTP_PAGE_TRANSPORTS) { ShowTransports (s); - else if (page == HTTP_PAGE_TUNNELS) + } else if (page == HTTP_PAGE_TUNNEL_SUMMARY) { + ShowTunnelSummary (s); +/* ShowTunnels (s); - else if (page == HTTP_PAGE_COMMANDS) - { + ShowI2PTunnels (s); + ShowTransitTunnels (s); +*/ + } else if (page == HTTP_PAGE_COMMANDS) { uint32_t token = CreateToken (); ShowCommands (s, token); - } - else if (page == HTTP_PAGE_TRANSIT_TUNNELS) + } else if (page == HTTP_PAGE_TRANSIT_TUNNELS) { ShowTransitTunnels (s); - else if (page == HTTP_PAGE_LOCAL_DESTINATIONS) + } else if (page == HTTP_PAGE_LOCAL_DESTINATIONS) { ShowLocalDestinations (s); - else if (page == HTTP_PAGE_LOCAL_DESTINATION) - { + } else if (page == HTTP_PAGE_LOCAL_DESTINATION) { uint32_t token = CreateToken (); ShowLocalDestination (s, params["b32"], token); - } - else if (page == HTTP_PAGE_I2CP_LOCAL_DESTINATION) + } else if (page == HTTP_PAGE_I2CP_LOCAL_DESTINATION) { ShowI2CPLocalDestination (s, params["i2cp_id"]); - else if (page == HTTP_PAGE_SAM_SESSIONS) + } else if (page == HTTP_PAGE_SAM_SESSIONS) { ShowSAMSessions (s); - else if (page == HTTP_PAGE_SAM_SESSION) + } else if (page == HTTP_PAGE_SAM_SESSION) { ShowSAMSession (s, params["sam_id"]); - else if (page == HTTP_PAGE_I2P_TUNNELS) - ShowI2PTunnels (s); - else if (page == HTTP_PAGE_LEASESETS) + } else if (page == HTTP_PAGE_CLIENT_TUNNELS) { + ShowTunnels (s); + } else if (page == HTTP_PAGE_LEASESETS) { ShowLeasesSets(s); - else { + } else { res.code = 400; ShowError(s, tr("Unknown page") + ": " + page); return; diff --git a/webconsole/style.css b/webconsole/style.css index 01294ec4..c1e96243 100644 --- a/webconsole/style.css +++ b/webconsole/style.css @@ -461,6 +461,18 @@ th { background: var(--th_multicolumn); } +th.in, th.out { + font-size: 0; +} + +th.in { + background: var(--arrow_down) no-repeat center center / 14px, var(--th_multicolumn); +} + +th.out { + background: var(--arrow_up) no-repeat center center / 14px, var(--th_multicolumn); +} + th:not(.sectiontitle)[colspan="2"], #routerservices { background: linear-gradient(to right, rgba(0,0,0.6), rgba(0,0,0,0), rgba(0,0,0,.6)), var(--th); background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0), rgba(0,0,0,.4)), rgba(32,0,32,.4); @@ -1075,22 +1087,63 @@ input[type=checkbox]:checked + label::after { min-width: 0; box-sizing: border-box; vertical-align: middle; + border: 1px solid var(--button-border); + border-radius: 2px; + box-shadow: var(--highlight); +} + +.cmd:active { + box-shadow: var(--highlight), var(--active_shadow); + background-blend-mode: luminosity; } #testpeer { - background: #313 var(--testpeer) no-repeat center center / 32px; + background: var(--testpeer) no-repeat center center / 32px, var(--button); +} + +#testpeer:hover, #testpeer:focus { + background: var(--testpeer) no-repeat center center / 32px, var(--button_hover); +} + +#testpeer:active { + background: var(--testpeer) no-repeat center center / 32px, var(--button_active); } #transitaccept { - background: #313 var(--transit) no-repeat center center / 32px; + background: var(--transit) no-repeat center center / 32px, var(--button); +} + +#transitaccept:hover, #transitaccept:focus { + background: var(--transit) no-repeat center center / 32px, var(--button_hover); +} + +#transitaccept:active { + background: var(--transit) no-repeat center center / 32px, var(--button_active); } #transitdecline { - background: #313 var(--notransit) no-repeat center center / 32px; + background: var(--notransit) no-repeat center center / 32px, var(--button); +} + +#transitdecline:hover, #transitdecline:focus { + background: var(--notransit) no-repeat center center / 32px, var(--button_hover); +} + +#transitdecline:active { + background: var(--notransit) no-repeat center center / 32px, var(--button_active); } #shutdownforce, #shutdowngraceful { - background: #313 var(--shutdown_hover) no-repeat center center / 32px; /* prompt user for forceful shutdown if garceful clicked when transit tunnels active */ + /* prompt user for forceful shutdown if graceful clicked when transit tunnels active */ + background: var(--shutdown_hover) no-repeat center center / 32px, var(--button); +} + +#shutdownforce:hover, #shutdownforce:focus { + background: var(--shutdown_hover) no-repeat center center / 32px, var(--button_hover); +} + +#shutdownforce:active { + background: var(--shutdown_hover) no-repeat center center / 32px, var(--button_active); } #shutdowngraceful { @@ -1098,11 +1151,48 @@ input[type=checkbox]:checked + label::after { } #shutdowncancel { - background: #313 var(--noshutdown) no-repeat center center / 32px; + background: var(--noshutdown) no-repeat center center / 32px, var(--button); +} + +#shutdowncancel:hover, #shutdowncancel:focus { + background: var(--noshutdown) no-repeat center center / 32px, var(--button_hover); +} + +#shutdowncancel:active { + background: var(--noshutdown) no-repeat center center / 32px, var(--button_active); } #reloadcss { - background: #313 var(--reloadcss) no-repeat center center / 32px; + background: var(--reloadcss) no-repeat center center / 32px, var(--button); +} + +#reloadcss:hover, #reloadcss:focus { + background: var(--reloadcss) no-repeat center center / 32px, var(--button_hover); +} + +#reloadcss:active { + background: var(--reloadcss) no-repeat center center / 32px, var(--button_active); +} + +#tunnelsummary td { + text-align: center; +} + +#tunnelsummary .button { + margin: 0; + display: inline-block; + width: 40px; + height: 16px; + background: var(--eye) no-repeat center center / 16px, var(--button) !important; + font-size: 0 !important; +} + +#tunnelsummary .button:hover, #tunnelsummary .button:focus { + background: var(--eye_hover) no-repeat center center / 16px, var(--button_hover) !important; +} + +#tunnelsummary .button:active, #tunnelsummary .button:focus { + background: var(--eye) no-repeat center center / 16px, var(--button_active) !important; } @media screen and (max-width: 1000px) { @@ -1144,7 +1234,6 @@ input[type=checkbox]:checked + label::after { display: inline-block; vertical-align: middle; } -} @media screen and (-webkit-min-device-pixel-ratio: 1.5) { body { @@ -1155,6 +1244,7 @@ input[type=checkbox]:checked + label::after { max-width: 200px !important; } } +} @media screen and (max-width: 800px) { #main { @@ -1375,6 +1465,7 @@ input[type=checkbox]:checked + label::after { .note { padding: 15px 90px !important; + } } @media screen and (min-width: 1200px) and (min-height: 600px) {