The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Oct 29, 2021
23 forks
38 stars
AWS HTTP Status Dashboard
region = "us-east-1"
logGroupName = "apache/access"
field = "status"
interval = d3.utcMinute
// The current time, rounded to the nearest minute
stop = interval.floor(new Date)
// Uses the width of our TimeChart to give each interval 1 pixel
start = interval.offset(stop, -width)
AWS = import("https://cdn.skypack.dev/@aws-sdk/client-cloudwatch-logs@3.39.0")
cwl = {
try {
return new AWS.CloudWatchLogsClient({
region,
credentials: {
accessKeyId: Secret("AWS_ACCESS_KEY_ID"),
secretAccessKey: Secret("AWS_SECRET_ACCESS_KEY")
}
});
} catch (error) {
console.error(error);
return false;
}
}
query = {
try {
// Bin the query by the number of seconds in the interval
const binSeconds = d3.utcSecond.count(
new Date(),
interval.offset(new Date(), 1)
);
return cwl.send(
new AWS.StartQueryCommand({
queryString: `stats count(*) by ${field}, bin(${binSeconds}s)`,
startTime: +start / 1000,
endTime: +stop / 1000,
logGroupName
})
);
} catch {
return false;
}
}
results = {
let res = [];
yield res;
// Not authenticated; do nothing
if (!query || !query.queryId) return;
// Get the initial response, usually "Running"
let response = await cwl.send(
new AWS.GetQueryResultsCommand({
queryId: query.queryId
})
);
// Poll the query every second until complete
while (response.status !== "Complete") {
response = await Promises.tick(
1000,
cwl.send(
new AWS.GetQueryResultsCommand({
queryId: query.queryId
})
)
);
}
yield response.results;
}
data = {
if (!cwl) {
// Not authenticated; use demo data
return FileAttachment("demo-403.csv").csv({ typed: true });
}
return results.map((d) => {
return {
status: +d[0].value,
date: new Date(d[1].value),
value: +d[2].value
};
});
}
import {TimeChart, TimeAxis} from "@observablehq/timechart"
timeOptions = {
if (!cwl) {
// Not authenticated; use demo data
const interval = d3.utcMinute.every(15);
const stop = new Date("2021-04-20T12:45");
return {
interval,
start: interval.offset(stop, -width),
stop,
width
};
}
return {
interval,
start,
stop,
width
};
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.