Skip to content

Commit

Permalink
cisagov#528, add simple readiness indicator to upload page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmguero
mmguero committed Dec 12, 2024
1 parent d6d875e commit 6694aa2
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 34 deletions.
2 changes: 1 addition & 1 deletion docs/upload.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The types of files supported are:

Files uploaded via these methods are monitored and moved automatically to other directories for processing, generally within 1 minute of completion of the upload.

The upload UI features a readiness indicator at the bottom of the form. Hovering over this text reveals more details about the individual Malcolm components' [readiness](api-ready.md). When the minimal set of components required for ingestion are running, this indicator will read **✅ Ready to ingest data.** This indicator does not auto-refresh: users will need to manually refresh the page to update its status. It's recommended to wait until Malcolm is ready before uploading artifacts for processing.
The upload UI features a readiness indicator at the bottom of the form. Hovering over this text reveals more details about the individual Malcolm components' [readiness](api-ready.md). When the minimal set of components required for ingestion are running, this indicator will read **✅ Ready to ingest data.** Clicking on the indicator will cause it to refresh. It's recommended to wait until Malcolm is ready before uploading artifacts for processing.

## <a name="Tagging"></a>Tagging

Expand Down
77 changes: 44 additions & 33 deletions file-upload/site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,12 +213,12 @@ <h1 class="panel-title">Network Traffic Artifact Upload</h1>
}
setInterval(checkSubmitEnabler, 5000);

const siteDropdown = document.getElementById('site-dropdown');
const netBoxSiteDropdown = document.getElementById('site-dropdown');

// Function to populate the NetBox site dropdown
function populateSiteDropdown(data) {
function populatenetBoxSiteDropdown(data) {
// Clear any existing options
siteDropdown.innerHTML = '';
netBoxSiteDropdown.innerHTML = '';

// Create and append options from the API result data
if (data.results && data.results.length > 0) {
Expand All @@ -227,7 +227,7 @@ <h1 class="panel-title">Network Traffic Artifact Upload</h1>
const option = document.createElement('option');
option.value = 0;
option.textContent = "No NetBox Enrichment";
siteDropdown.appendChild(option);
netBoxSiteDropdown.appendChild(option);

// Find the index of the item with the lowest id
let lowestId = data.results[0].id;
Expand All @@ -248,57 +248,68 @@ <h1 class="panel-title">Network Traffic Artifact Upload</h1>
if (index === lowestIdIndex) {
option.selected = true;
}
siteDropdown.appendChild(option);
netBoxSiteDropdown.appendChild(option);
});


// Make the dropdown visible
siteDropdown.style.display = 'block';
netBoxSiteDropdown.style.display = 'block';

} else {
// Hide the dropdown if no results
siteDropdown.style.display = 'none';
netBoxSiteDropdown.style.display = 'none';
}
}

// Fetch data from the NetBox dcim/sites REST API
fetch('/netbox/api/dcim/sites/?format=json')
.then(response => response.json())
.then(data => {
populateSiteDropdown(data);
})
.catch(error => {
console.error('Error fetching NetBox sites:', error);
// Hide the dropdown on error
siteDropdown.style.display = 'none';
});
function fetchNetBoxSites() {
// Fetch data from the NetBox dcim/sites REST API
fetch('/netbox/api/dcim/sites/?format=json')
.then(response => response.json())
.then(data => {
populatenetBoxSiteDropdown(data);
})
.catch(error => {
console.error('Error fetching NetBox sites:', error);
// Hide the dropdown on error
netBoxSiteDropdown.style.display = 'none';
});
}


const summaryLabel = document.getElementById('malcolm-summary');
const detailsContainer = document.getElementById('malcolm-details');
const readinessIndicator = document.getElementById('malcolm-summary');
const readinessDetailsContainer = document.getElementById('malcolm-details');

function populateMalcolmReadiness(data) {
const isEssentialReady = data.arkime && data.logstash_lumberjack && data.logstash_pipelines && data.opensearch && data.pcap_monitor;

summaryLabel.textContent = isEssentialReady ? '✅ Ready to ingest data' : '❌ Not ready to ingest data';
readinessIndicator.textContent = isEssentialReady ? '✅ Ready to ingest data' : '❌ Not ready to ingest data 🔄';

const detailedList = Object.entries(data)
.map(([key, value]) => `<li>${key}</li><li>${value ? '✅' : '❌'}</li>`)
.join('');
detailsContainer.innerHTML = `<ul>${detailedList}</ul>`;
readinessDetailsContainer.innerHTML = `<ul>${detailedList}</ul>`;
}

// Fetch readiness from the Malcolm API
fetch('/mapi/ready')
.then(response => response.json())
.then(data => {
populateMalcolmReadiness(data);
})
.catch(error => {
console.error('Error fetching Malcolm readiness:', error);
summaryLabel.textContent = '';
detailsContainer.innerHTML = '<p></p>';
});
function fetchMalcolmReadiness() {
fetch('/mapi/ready')
.then(response => response.json())
.then(data => {
populateMalcolmReadiness(data);
})
.catch(error => {
console.error('Error fetching Malcolm readiness:', error);
readinessIndicator.textContent = '';
readinessDetailsContainer.innerHTML = '<p></p>';
});
}

fetchNetBoxSites();
fetchMalcolmReadiness();

readinessIndicator.addEventListener('click', function () {
fetchNetBoxSites();
fetchMalcolmReadiness();
});

})
</script>
Expand Down

0 comments on commit 6694aa2

Please sign in to comment.