Skip to content
This repository has been archived by the owner on Aug 6, 2019. It is now read-only.

Commit

Permalink
Manually merged changes from old hub-support branch, tracking netdata…
Browse files Browse the repository at this point in the history 
…#131

Call claim url netdata#4771
Claim ui improvements netdata#4771
Cleanup
Implement Sign Out
Introduced sign-in modal netdata#3990
Added sign-in button
More work on the iframe trick
More work
More work on the logic, removed old obsolete stuff
Close modal
Implement account menu
Minor rename
Renamed my-netdata to My Agents
Show migrate button
Collect known agents
Work on migrateRegistryDidClick
Minor
Actually show agents from netdata cloud in the menu
Some cleanup
Keep all the alternate_urls for each agent
Fix for tooltips over SignIn/AccountMenu
  • Loading branch information
George Moschovitis committed Dec 13, 2018
1 parent f810850 commit 33eccfb
Show file tree
Hide file tree
Showing 3 changed files with 275 additions and 4 deletions.
25 changes: 23 additions & 2 deletions web/gui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
<img src="images/netdata-logomark.svg" height="32"/>
</li>
<li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Agents <strong class="caret"></strong></a>
<div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
</div>
</li>
Expand All @@ -106,8 +106,9 @@
<li title="export / save a netdata snapshot" data-toggle="tooltip" data-placement="bottom" id="saveButton"><a href="#" class="btn" data-toggle="modal" data-target="#saveSnapshotModal"><i class="fas fa-upload"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Export</span></a></li>
<li title="print this dashboard to PDF" data-toggle="tooltip" data-placement="bottom" id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal"><i class="fas fa-print"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
<li title="get help on using the charts" data-toggle="tooltip" data-placement="bottom" class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fas fa-question-circle"></i>&nbsp;<span class="hidden-sm hidden-md">Help</span></a></li>
<li id="account-menu-container" class="dropdown" data-toggle="tooltip"></li>
<li class="dropdown hidden-sm hidden-md hidden-lg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Agents <strong class="caret"></strong></a>
<ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
<li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
</ul>
Expand Down Expand Up @@ -586,6 +587,26 @@ <h4 class="modal-title" id="alarmsModalLabel">netdata alarms</h4>
</div>
</div>

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="singInModalLabel">netdata sign in</h4>
</div>
<div class="modal-body">
<iframe
id="sign-in-iframe"
src=""
width="100%"
height="300px"
>
</iframe>
</div>
</div>
</div>
</div>

<div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
Expand Down
5 changes: 5 additions & 0 deletions web/gui/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,3 +615,8 @@ body.modal-open {
#my-netdata-dropdown-content.theme-white a:hover {
color: #000;
}

#sign-in-iframe {
background-color: #fff;
border: none;
}
249 changes: 247 additions & 2 deletions web/gui/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ function saveObjectToClient(data, filename) {
saveTextToClient(JSON.stringify(data), filename);
}

// --------------------------------------------------------------------
// -----------------------------------------------------------------------------
// registry call back to render my-netdata menu

function toggleExpandIcon(svgEl) {
Expand Down Expand Up @@ -569,7 +569,7 @@ function renderMachines(machinesArray) {
(str, url) => str + (
`<div class="agent-item agent-item--alternate">
<div></div>
<a href="${url}" title="${url}">${clipString(url, 64)}</a>
<a href="${url}" title="${url}">${truncateString(url, 64)}</a>
<a href="#" onclick="deleteRegistryModalHandler('${machine.guid}', '${machine.name}', '${url}'); return false;">
<i class="fas fa-trash" style="color: #777;"></i>
</a>
Expand Down Expand Up @@ -642,8 +642,25 @@ function renderMachines(machinesArray) {

// Populates the my-netdata menu.
function netdataRegistryCallback(machinesArray) {
if (isSignedIn() && isRegistryMigrated()) {
machinesArray = associatedAgents;
} else {
registryKnownAgents = machinesArray;
}

let html = '';

// if (isSignedIn()) {
// html += (
// `<div class="agent-item">
// <i style="color: red" class="fas fa-cloud-upload-alt"></i>
// <a href="#" onclick="migrateRegistryDidClick()">Migrate Registry</a>
// <div></div>
// </div>
// <hr />`
// )
// }

if (options.hosts.length > 1) {
html += renderStreamedHosts(options) + `<hr />`;
}
Expand All @@ -666,6 +683,9 @@ function netdataRegistryCallback(machinesArray) {

const el = document.getElementById('my-netdata-dropdown-content')
el.classList.add(`theme-${netdataTheme}`);
if (!isRegistryMigrated()) {
el.classList.add("non-migrated");
}
el.innerHTML = html;

gotoServerInit();
Expand Down Expand Up @@ -4344,3 +4364,228 @@ var selected_server_timezone = function (timezone, status) {
// var netdataStarted = performance.now();

var netdataCallback = initializeDynamicDashboard;

// =================================================================================================
// netdata.cloud

const cloudBaseURL = "http://localhost:8080"; // TODO: Read from configuration.

// -------------------------------------------------------------------------------------------------

// The known agents in the legacy global registry.
let registryKnownAgents = [];

// The agents associated with the current cloud account.
let associatedAgents = [];

// -------------------------------------------------------------------------------------------------

function getURLParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
var results = regex.exec(location.search)
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "))
}

function closeModal() {
$(".modal-header button.close").click();
}

/// Enforces a maximum string length while retaining the prefix and the postfix of
/// the string.
function truncateString(str, maxLength) {
if (str.length <= maxLength) {
return str;
}

const spanLength = Math.floor((maxLength - 3) / 2);
return `${str.substring(0, spanLength)}...${str.substring(str.length - spanLength)}`;
}

// -------------------------------------------------------------------------------------------------

// https://github.com/netdata/hub/issues/146
function getAgentsList() {
const accountID = localStorage.getItem("cloud.accountID");
const token = localStorage.getItem("cloud.token");
if (accountID == null || token == null) {
return;
}

fetch(
`${cloudBaseURL}/api/v1/agents/list?accountID=${accountID}`,
{
method: "GET",
mode: "cors",
headers: {
"Authorization": `Bearer ${token}`
}
}
).then((response) => {
return response.json();
}).then((payload) => {
agents = payload.result ? payload.result.agents : null;

if (!agents) {
// TODO: handle this!
return;
}

associatedAgents = agents.map((a) => {
return {
"guid": a.id,
"name": a.name,
"url": a.urls[0],
"alternate_urls": a.urls
}
})
});
}

// https://github.com/netdata/hub/issues/128
function postAgentsMigrate() {
const accountID = localStorage.getItem("cloud.accountID");
const token = localStorage.getItem("cloud.token");
if (accountID == null || token == null) {
return;
}

const agents = registryKnownAgents.map((a) => {
return {
"id": a.guid,
"name": a.name,
"urls": a.alternate_urls
}
})

const payload = {
"accountID": accountID,
"agents": agents
};

fetch(
`${cloudBaseURL}/api/v1/agents/migrate`,
{
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8",
"Authorization": `Bearer ${token}`
},
body: JSON.stringify(payload)
}
).then((response) => {
return response.json();
}).then((payload) => {
localStorage.setItem("cloud.registryMigrated", true);
});
}

// -------------------------------------------------------------------------------------------------

function signInDidClick() {
initSignInModal();
}

function signOutDidClick() {
signOut();
}

function migrateRegistryDidClick() {
postAgentsMigrate();
}

function signOut() {
localStorage.removeItem("cloud.accountID");
localStorage.removeItem("cloud.accountName");
localStorage.removeItem("cloud.token");
// localStorage.removeItem("cloud.registryMigrated");

renderAccountUI();
deinitSignInModal();
}

function renderAccountUI() {
const container = document.getElementById("account-menu-container");
if (isSignedIn()) {
const accountName = localStorage.getItem("cloud.accountName");
container.removeAttribute("title");
container.removeAttribute("data-original-title");
container.removeAttribute("data-placement");
container.innerHTML = (
`<a href="#" class="dropdown-toggle" data-toggle="dropdown">${accountName} <strong class="caret"></strong></a>
<ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
<li>
<a href="#" class="btn" onclick="signOutDidClick();">
<i class="fas fa-sign-out-alt"></i>&nbsp;<span class="hidden-sm hidden-md">Sign Out</span>
</a>
</li>
</ul>`
)
} else {
container.setAttribute("title", "sign in");
container.setAttribute("data-original-title", "sign in");
container.setAttribute("data-placement", "bottom");
container.innerHTML = (
`<a href="#" class="btn" data-toggle="modal" data-target="#signInModal" onclick="signInDidClick();">
<i class="fas fa-sign-in-alt"></i>&nbsp;<span class="hidden-sm hidden-md">Sign In</span>
</a>`
)
}
}

function handleMessage(e) {
localStorage.setItem("cloud.accountID", e.data.accountID);
localStorage.setItem("cloud.accountName", e.data.accountName);
localStorage.setItem("cloud.token", e.data.token);

renderAccountUI();
closeModal();
deinitSignInModal();

if (!isRegistryMigrated()) {
postAgentsMigrate();
}
}

function isSignedIn() {
return localStorage.getItem("cloud.token") != null;
}

function isRegistryMigrated() {
return localStorage.getItem("cloud.registryMigrated") == "true";
}

function initSignInModal() {
if (!isSignedIn()) {
const iframeEl = document.getElementById("sign-in-iframe");
iframeEl.src = cloudBaseURL + "/account/sign-in-agent?iframe=" + encodeURIComponent(window.location.origin);
window.addEventListener("message", handleMessage, false);
}
}

function deinitSignInModal() {
if (isSignedIn()) {
const iframeEl = document.getElementById("sign-in-iframe");
iframeEl.src = "";
window.removeEventListener("message", handleMessage, false);
}
}

function initUI() {
renderAccountUI();

if (isSignedIn()) {
getAgentsList();
}
}

if (document.readyState === "complete") {
initUI();
} else {
document.addEventListener("readystatechange", () => {
if (document.readyState === "complete") {
initUI();
}
})
}

0 comments on commit 33eccfb

Please sign in to comment.