Skip to content

Commit d253541

Browse files
Merge pull request #552 from IABTechLab/ans-UID2-3621-additional-admin-participant-summary-work
additional admin participant summary work adding grafana links
2 parents 587e3bf + f200e6f commit d253541

File tree

2 files changed

+60
-17
lines changed

2 files changed

+60
-17
lines changed

webroot/adm/oncall/participant-summary.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,15 @@ <h5>Site App Names</h5>
6464
<div class="row px-2">
6565
<div class="col section">
6666
<h5>Participant API Keys</h5>
67+
<a id="grafanaApiKeyUsage" target="_blank">API Key Usage Dashboard</a>
6768
<pre class="errorDiv" id="participantKeysErrorOutput"></pre>
6869
<pre id="participantKeysStandardOutput"></pre>
6970
</div>
7071
</div>
7172
<div class="row px-2">
7273
<div class="col section">
7374
<h5>Client Side Keypairs</h5>
75+
<a id="grafanaCstg" target="_blank">CSTG Dashboard</a>
7476
<pre class="errorDiv" id="keyPairsErrorOutput"></pre>
7577
<pre id="keyPairsStandardOutput"></pre>
7678
</div>
@@ -84,13 +86,15 @@ <h5>Participant Encryption Keys</h5>
8486
<div class="col section">
8587
<h5>Participant Operator Keys</h5>
8688
<pre class="errorDiv" id="operatorKeysErrorOutput"></pre>
89+
<a id="operatorDashboard" target="_blank" style="visibility: hidden;">Operator Dashboard</a>
8790
<pre id="operatorKeysStandardOutput"></pre>
8891
</div>
8992
</div>
9093
<div class="row px-2">
9194
<div class="col section">
9295
<h5>Participant Opt-out Webhook</h5>
9396
<pre class="errorDiv" id="webhooksErrorOutput"></pre>
97+
<a id="optOutDashboard" target="_blank" style="visibility: hidden;">Opt Out Dashboard</a>
9498
<pre id="webhooksStandardOutput"></pre>
9599
</div>
96100
</div>
@@ -126,7 +130,7 @@ <h5>Participant Related Keysets</h5>
126130
</div>
127131
</div>
128132
<script src="../../js/main.js"></script>
129-
<script type="module" src="../../js/component/participantSummary.js"></script>
133+
<script src="../../js/component/participantSummary.js"></script>
130134
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
131135
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
132136

webroot/js/component/participantSummary.js

Lines changed: 55 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,19 @@ function loadSiteCallback(result) {
9191
if (siteElement) siteElement.innerHTML = formatted;
9292
}
9393

94-
function loadAPIKeysCallback(result) {
94+
function loadAPIKeysCallback(result, uidType, currentEnv) {
9595
const textToHighlight = '"disabled": true';
9696
let resultJson = JSON.parse(result);
9797
resultJson = resultJson.map((item) => {
9898
const created = new Date((item.created)*1000).toLocaleString(); // Convert Unix timestamp in seconds to milliseconds for Date constructor
99-
return { ...item, created };
99+
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}`;
100+
const dashboardLink = `<a href="${apiCallsUrl}" target="_blank">API Calls by Key</a>`;
101+
return { ...item, created, "Dashboard": dashboardLink };
100102
});
101-
const formatted = prettifyJson(JSON.stringify(resultJson));
103+
const resultJsonMinusDashboard = resultJson.map(({ Dashboard, ...rest }) => rest);
104+
const formatted = resultJson.map((r, index) => {
105+
return `<pre>${prettifyJson(JSON.stringify(resultJsonMinusDashboard[index])).trim().slice(0, -2)},\n "Dashboard": ${r.Dashboard}\n}</pre>`;
106+
}).join("\n");
102107
const highlightedText = formatted.replaceAll(textToHighlight, '<span style="background-color: orange;">' + textToHighlight + '</span>');
103108
const element = document.getElementById('participantKeysStandardOutput');
104109
if (element) element.innerHTML = highlightedText;
@@ -142,7 +147,7 @@ function loadEncryptionKeysCallback(result, siteId) {
142147
if (element) element.innerHTML = highlightedText;
143148
};
144149

145-
function loadOperatorKeysCallback(result, siteId) {
150+
function loadOperatorKeysCallback(result, siteId, uidType, currentEnv) {
146151
const textToHighlight = '"disabled": true';
147152
const resultJson = JSON.parse(result);
148153
let filteredResults = resultJson.filter((item) => { return item.site_id === siteId });
@@ -155,14 +160,28 @@ function loadOperatorKeysCallback(result, siteId) {
155160
const highlightedText = formatted.replaceAll(textToHighlight, '<span style="background-color: orange;">' + textToHighlight + '</span>');
156161
const element = document.getElementById('operatorKeysStandardOutput');
157162
if (element) element.innerHTML = highlightedText;
163+
164+
if (filteredResults.length !== 0) {
165+
const el = document.getElementById("operatorDashboard");
166+
el.style.visibility = "visible";
167+
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`;
168+
el.href = operatorDashboardUrl;
169+
}
158170
};
159171

160-
function loadOptoutWebhooksCallback(result, siteName) {
172+
function loadOptoutWebhooksCallback(result, siteName, uidType, currentEnv) {
161173
const resultJson = JSON.parse(result);
162174
const filteredResults = resultJson.filter((item) => { return item.name === siteName });
163175
const formatted = prettifyJson(JSON.stringify(filteredResults));
164176
const element = document.getElementById('webhooksStandardOutput');
165177
if (element) element.innerHTML = formatted;
178+
179+
if (filteredResults.length !== 0) {
180+
const el = document.getElementById("optOutDashboard");
181+
el.style.visibility = "visible";
182+
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`;
183+
el.href = optOutDashboardUrl;
184+
}
166185
};
167186

168187
function loadRelatedKeysetsCallback(result, siteId, clientTypes) {
@@ -227,11 +246,25 @@ document.addEventListener('DOMContentLoaded', () => {
227246
return;
228247
}
229248

230-
let url = `/api/site/${site.id}`;
249+
let currentEnv;
250+
if (window.location.origin.includes("prod")) {
251+
currentEnv = "prod";
252+
} else if (window.location.origin.includes("integ")) {
253+
currentEnv = "integ";
254+
} else {
255+
currentEnv = "test";
256+
}
257+
258+
let uidType = "uid2";
259+
if (window.location.origin.includes("UID2")) {
260+
uidType = "euid";
261+
}
262+
263+
let url = `/api/site/${site.id}`;
231264
doApiCallWithCallback('GET', url, loadSiteCallback, (err) => { participantSummaryErrorHandler(err, '#siteErrorOutput') });
232265

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

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

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

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

248-
url = `/api/sharing/keysets/related?site_id=${site.id}`;
249-
doApiCallWithCallback('GET', url, (r) => { loadRelatedKeysetsCallback(r, site.id, site.clientTypes) }, (err) => { participantSummaryErrorHandler(err, '#relatedKeysetsErrorOutput') });
250-
const sections = document.querySelectorAll('.section');
251-
sections.forEach(section => section.style.display = 'block');
252-
});
281+
url = `/api/sharing/keysets/related?site_id=${site.id}`;
282+
doApiCallWithCallback('GET', url, (r) => { loadRelatedKeysetsCallback(r, site.id, site.clientTypes) }, (err) => { participantSummaryErrorHandler(err, '#relatedKeysetsErrorOutput') });
283+
const sections = document.querySelectorAll('.section');
284+
sections.forEach(section => section.style.display = 'block');
285+
286+
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}`;
287+
const apiKeyUsageElement = document.getElementById("grafanaApiKeyUsage");
288+
apiKeyUsageElement.href = apiKeyUsageGrafanaUrl;
289+
290+
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`;
291+
const cstgElement = document.getElementById("grafanaCstg");
292+
cstgElement.href = cstgGrafanaUrl;
293+
});
253294
}
254295

255296
const rotateButton = document.getElementById('doRotateKeysets');
@@ -275,5 +316,3 @@ document.addEventListener('DOMContentLoaded', () => {
275316
});
276317
}
277318
});
278-
279-
export {};

0 commit comments

Comments
 (0)