Skip to content

additional admin participant summary work adding grafana links #552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashleysmithTTD merged 10 commits into from
Jul 21, 2025
Merged

additional admin participant summary work adding grafana links #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e125b9d
adding api key usage link
ashleysmithTTD Jul 17, 2025
d28f50b
Merge branch 'main' into ans-UID2-3621-additional-admin-participant-s…
ashleysmithTTD Jul 17, 2025
d657a35
attaching api key usage grafana dashboard
ashleysmithTTD Jul 18, 2025
7784a79
uid and euid url toggling
ashleysmithTTD Jul 18, 2025
a7c4a18
added operator and optout dashboard links
ashleysmithTTD Jul 18, 2025
5d7b736
formatting fix
ashleysmithTTD Jul 18, 2025
33484b3
added uidtype and currentenv as params
ashleysmithTTD Jul 18, 2025
5a52d71
added dashboard inside json
ashleysmithTTD Jul 18, 2025
12f7113
make set search a global window function
ashleysmithTTD Jul 18, 2025
f200e6f
remove module type from participant summary
ashleysmithTTD Jul 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion webroot/adm/oncall/participant-summary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,15 @@ <h5>Site App Names</h5>
<div class="row px-2">
<div class="col section">
<h5>Participant API Keys</h5>
<a id="grafanaApiKeyUsage" target="_blank">API Key Usage Dashboard</a>
<pre class="errorDiv" id="participantKeysErrorOutput"></pre>
<pre id="participantKeysStandardOutput"></pre>
</div>
</div>
<div class="row px-2">
<div class="col section">
<h5>Client Side Keypairs</h5>
<a id="grafanaCstg" target="_blank">CSTG Dashboard</a>
<pre class="errorDiv" id="keyPairsErrorOutput"></pre>
<pre id="keyPairsStandardOutput"></pre>
</div>
Expand All @@ -84,13 +86,15 @@ <h5>Participant Encryption Keys</h5>
<div class="col section">
<h5>Participant Operator Keys</h5>
<pre class="errorDiv" id="operatorKeysErrorOutput"></pre>
<a id="operatorDashboard" target="_blank" style="visibility: hidden;">Operator Dashboard</a>
<pre id="operatorKeysStandardOutput"></pre>
</div>
</div>
<div class="row px-2">
<div class="col section">
<h5>Participant Opt-out Webhook</h5>
<pre class="errorDiv" id="webhooksErrorOutput"></pre>
<a id="optOutDashboard" target="_blank" style="visibility: hidden;">Opt Out Dashboard</a>
<pre id="webhooksStandardOutput"></pre>
</div>
</div>
Expand Down Expand Up @@ -126,7 +130,7 @@ <h5>Participant Related Keysets</h5>
</div>
</div>
<script src="../../js/main.js"></script>
<script type="module" src="../../js/component/participantSummary.js"></script>
<script src="../../js/component/participantSummary.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Expand Down
71 changes: 55 additions & 16 deletions webroot/js/component/participantSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,19 @@ function loadSiteCallback(result) {
if (siteElement) siteElement.innerHTML = formatted;
}

function loadAPIKeysCallback(result) {
function loadAPIKeysCallback(result, uidType, currentEnv) {
const textToHighlight = '"disabled": true';
let resultJson = JSON.parse(result);
resultJson = resultJson.map((item) => {
const created = new Date((item.created)*1000).toLocaleString(); // Convert Unix timestamp in seconds to milliseconds for Date constructor
return { ...item, created };
const apiCallsUrl = `https://${uidType}.grafana.net/d/I-_c3zx7k/api-calls?orgId=1&from=now-6h&to=now&timezone=browser&var-Env=${currentEnv}&var-Path=\\$__all&var-Host=\\$__all&var-Cluster=\\$__all&var-Method=\\$__all&var-Application=\\$__all&var-Contact=${item.contact}`;
const dashboardLink = `<a href="${apiCallsUrl}" target="_blank">API Calls by Key</a>`;
return { ...item, created, "Dashboard": dashboardLink };
});
const formatted = prettifyJson(JSON.stringify(resultJson));
const resultJsonMinusDashboard = resultJson.map(({ Dashboard, ...rest }) => rest);
const formatted = resultJson.map((r, index) => {
return `<pre>${prettifyJson(JSON.stringify(resultJsonMinusDashboard[index])).trim().slice(0, -2)},\n "Dashboard": ${r.Dashboard}\n}</pre>`;
}).join("\n");
const highlightedText = formatted.replaceAll(textToHighlight, '<span style="background-color: orange;">' + textToHighlight + '</span>');
const element = document.getElementById('participantKeysStandardOutput');
if (element) element.innerHTML = highlightedText;
Expand Down Expand Up @@ -142,7 +147,7 @@ function loadEncryptionKeysCallback(result, siteId) {
if (element) element.innerHTML = highlightedText;
};

function loadOperatorKeysCallback(result, siteId) {
function loadOperatorKeysCallback(result, siteId, uidType, currentEnv) {
const textToHighlight = '"disabled": true';
const resultJson = JSON.parse(result);
let filteredResults = resultJson.filter((item) => { return item.site_id === siteId });
Expand All @@ -155,14 +160,28 @@ function loadOperatorKeysCallback(result, siteId) {
const highlightedText = formatted.replaceAll(textToHighlight, '<span style="background-color: orange;">' + textToHighlight + '</span>');
const element = document.getElementById('operatorKeysStandardOutput');
if (element) element.innerHTML = highlightedText;

if (filteredResults.length !== 0) {
const el = document.getElementById("operatorDashboard");
el.style.visibility = "visible";
const operatorDashboardUrl = `https://${uidType}.grafana.net/d/nnz7mb9Mk/operator-dashboard?orgId=1&from=now-24h&to=now&timezone=browser&var-_APP=uid2-operator&var-CLUSTER=uid2-prod-opr-use2-auto&var-ENV=${currentEnv}&var-_STORE=$__all`;
el.href = operatorDashboardUrl;
}
};

function loadOptoutWebhooksCallback(result, siteName) {
function loadOptoutWebhooksCallback(result, siteName, uidType, currentEnv) {
const resultJson = JSON.parse(result);
const filteredResults = resultJson.filter((item) => { return item.name === siteName });
const formatted = prettifyJson(JSON.stringify(filteredResults));
const element = document.getElementById('webhooksStandardOutput');
if (element) element.innerHTML = formatted;

if (filteredResults.length !== 0) {
const el = document.getElementById("optOutDashboard");
el.style.visibility = "visible";
const optOutDashboardUrl = `https://${uidType}.grafana.net/d/a3-KG_rGz/optout-dashboard?orgId=1&from=now-1h&to=now&timezone=browser&var-_APP=uid2-optout&var-CLUSTER=uid2-us-east-2&var-ENV=${currentEnv}&var-_STORE=operators`;
el.href = optOutDashboardUrl;
}
};

function loadRelatedKeysetsCallback(result, siteId, clientTypes) {
Expand Down Expand Up @@ -227,11 +246,25 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}

let url = `/api/site/${site.id}`;
let currentEnv;
if (window.location.origin.includes("prod")) {
currentEnv = "prod";
} else if (window.location.origin.includes("integ")) {
currentEnv = "integ";
} else {
currentEnv = "test";
}

let uidType = "uid2";
if (window.location.origin.includes("UID2")) {
uidType = "euid";
}

let url = `/api/site/${site.id}`;
doApiCallWithCallback('GET', url, loadSiteCallback, (err) => { participantSummaryErrorHandler(err, '#siteErrorOutput') });

url = `/api/client/list/${site.id}`;
doApiCallWithCallback('GET', url, loadAPIKeysCallback, (err) => { participantSummaryErrorHandler(err, '#participantKeysErrorOutput') });
doApiCallWithCallback('GET', url, (r) => { loadAPIKeysCallback(r, uidType, currentEnv) }, (err) => { participantSummaryErrorHandler(err, '#participantKeysErrorOutput') });

url = `/api/client_side_keypairs/list`;
doApiCallWithCallback('GET', url, (r) => { loadKeyPairsCallback(r, site.id) }, (err) => { participantSummaryErrorHandler(err, '#keyPairsErrorOutput') });
Expand All @@ -240,16 +273,24 @@ document.addEventListener('DOMContentLoaded', () => {
doApiCallWithCallback('GET', url, (r) => { loadEncryptionKeysCallback(r, site.id) }, (err) => { participantSummaryErrorHandler(err, '#encryptionKeysErrorOutput') });

url = '/api/operator/list';
doApiCallWithCallback('GET', url, (r) => { loadOperatorKeysCallback(r, site.id) }, (err) => { participantSummaryErrorHandler(err, '#operatorKeysErrorOutput') });
doApiCallWithCallback('GET', url, (r) => { loadOperatorKeysCallback(r, site.id, uidType, currentEnv) }, (err) => { participantSummaryErrorHandler(err, '#operatorKeysErrorOutput') });

url = '/api/partner_config/get';
doApiCallWithCallback('GET', url, (r) => { loadOptoutWebhooksCallback(r, site.name) }, (err) => { participantSummaryErrorHandler(err, '#webhooksErrorOutput') });
doApiCallWithCallback('GET', url, (r) => { loadOptoutWebhooksCallback(r, site.name, uidType, currentEnv) }, (err) => { participantSummaryErrorHandler(err, '#webhooksErrorOutput') });

url = `/api/sharing/keysets/related?site_id=${site.id}`;
doApiCallWithCallback('GET', url, (r) => { loadRelatedKeysetsCallback(r, site.id, site.clientTypes) }, (err) => { participantSummaryErrorHandler(err, '#relatedKeysetsErrorOutput') });
const sections = document.querySelectorAll('.section');
sections.forEach(section => section.style.display = 'block');
});
url = `/api/sharing/keysets/related?site_id=${site.id}`;
doApiCallWithCallback('GET', url, (r) => { loadRelatedKeysetsCallback(r, site.id, site.clientTypes) }, (err) => { participantSummaryErrorHandler(err, '#relatedKeysetsErrorOutput') });
const sections = document.querySelectorAll('.section');
sections.forEach(section => section.style.display = 'block');

const apiKeyUsageGrafanaUrl = `https://${uidType}.grafana.net/d/JaOQgV7Iz/api-key-usage?orgId=1&from=now-6h&to=now&timezone=browser&var-SiteId=${site.id}&var-Env=${currentEnv}`;
const apiKeyUsageElement = document.getElementById("grafanaApiKeyUsage");
apiKeyUsageElement.href = apiKeyUsageGrafanaUrl;

const cstgGrafanaUrl = `https://${uidType}.grafana.net/d/J22t4ykIz/cstg-client-side-token-generation-dashboard?orgId=1&from=now-2d&to=now&timezone=browser&var-env=${currentEnv}&var-cluster=$__all&var-site_name=${site.name}&var-platform_type=$__all&refresh=15m`;
const cstgElement = document.getElementById("grafanaCstg");
cstgElement.href = cstgGrafanaUrl;
});
}

const rotateButton = document.getElementById('doRotateKeysets');
Expand All @@ -275,5 +316,3 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
});

export {};