mirror of https://github.com/cncf/landscapeapp.git
195 lines
6.4 KiB
HTML
195 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Linux Foundation Landscapes </title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
|
|
<style>
|
|
html {
|
|
overflow: auto;
|
|
}
|
|
|
|
body .container {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.header {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.header,
|
|
.main {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
table.table {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td.organization a,
|
|
td.status a {
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
td.organization a,
|
|
td.organization img,
|
|
.logo {
|
|
height: 30px;
|
|
}
|
|
|
|
.previews {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.preview-logo-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
td.status a,
|
|
td.status img {
|
|
height: 18px;
|
|
max-width: initial;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container is-widescreen">
|
|
<div class="header is-clipped">
|
|
<h1 class="title is-marginless is-pulled-left">Linux Foundation Landscapes</h1>
|
|
<div class="is-pulled-right">
|
|
<a href="#" data-behavior="toggle" class="button is-light is-link">Show Previews</a>
|
|
<a href="#" class="is-hidden button is-light is-link" data-behavior="toggle">Show List</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<table class="table is-fullwidth" data-behavior="toggle-target">
|
|
<thead>
|
|
<th>Organization</th>
|
|
<th>Landscape</th>
|
|
<th>Repo</th>
|
|
<th>Status</th>
|
|
<th># of Tweets</th>
|
|
<th>Published</th>
|
|
<th>Data Refreshed</th>
|
|
</thead>
|
|
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<div class="is-hidden previews columns is-multiline" data-behavior="toggle-target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const toggleTargets = document.querySelectorAll('[data-behavior="toggle"], [data-behavior="toggle-target"]')
|
|
|
|
document.querySelectorAll('[data-behavior="toggle"]').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
e.preventDefault()
|
|
toggleTargets.forEach(({ classList }) => classList.toggle('is-hidden'))
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
let reportsIp = null;
|
|
const fetchFile = async path => await (await fetch(`https://raw.githubusercontent.com/${path}`)).text()
|
|
|
|
const tableEl = document.querySelector("tbody")
|
|
const previewsEl = document.querySelector(".previews")
|
|
|
|
const linkTo = (url, title) => `<a target="_blank" href="${url}">${title}</a>`
|
|
const imageLinkTo = (url, src, alt) => linkTo(url, `<img src="${src}" alt="${alt}" />`)
|
|
|
|
const fetchLandscapeInfo = ({ repo, name }) => {
|
|
const rowEl = document.createElement("tr")
|
|
const dateTimeFormat = new Intl.DateTimeFormat('en', { month: 'short', day: '2-digit', hour: '2-digit', minute:'2-digit', hour12: false })
|
|
tableEl.append(rowEl)
|
|
const appendColumn = (args = {}) => {
|
|
let column = document.createElement('td')
|
|
column.setAttribute("class", args.className)
|
|
column.innerText = "Fetching..."
|
|
rowEl.append(column)
|
|
return column
|
|
}
|
|
|
|
const appendPreview = () => {
|
|
let preview = document.createElement('div')
|
|
preview.setAttribute("class", "preview column is-one-third-widescreen is-half-desktop is-full-tablet")
|
|
previewsEl.append(preview)
|
|
return preview
|
|
}
|
|
|
|
let organizationEl = appendColumn({ className: "organization" })
|
|
let landscapeEl = appendColumn()
|
|
let repoEl = appendColumn()
|
|
let statusEl = appendColumn({ className: "status" })
|
|
let numTweetsEl = appendColumn()
|
|
let publishedEl = appendColumn()
|
|
let updatedEl = appendColumn()
|
|
let previewEl = appendPreview()
|
|
|
|
repoEl.innerHTML = linkTo(`https://github.com/${repo}`, repo)
|
|
|
|
fetchFile(`${repo}/HEAD/settings.yml`)
|
|
.then(async settings => {
|
|
const { company_url, short_name, short_domain, website } = jsyaml.load(settings).global
|
|
organizationEl.innerHTML = imageLinkTo(company_url, `${website}/images/right-logo.svg`, short_name)
|
|
landscapeEl.innerHTML = linkTo(website, short_domain)
|
|
previewEl.innerHTML = `
|
|
<div class="preview-logo-wrapper">
|
|
<img src="${website}/images/right-logo.svg" class="logo" alt="${short_name}"/>
|
|
</div>
|
|
${imageLinkTo(website, `${website}/images/landscape_preview.png`, short_domain)}`
|
|
const landscapeIndex = await (await fetch(website)).text()
|
|
const publishedAt = landscapeIndex.match(/Updated:\s*([^"]*)/)[1]
|
|
publishedEl.innerHTML = publishedAt ? dateTimeFormat.format(new Date(publishedAt)) : 'UNKNOWN'
|
|
})
|
|
|
|
fetchFile(`${repo}/HEAD/README.md`)
|
|
.then(async readme => {
|
|
const statusUrl = readme.match(/https:\/\/api.netlify.com\/api\/v1\/badges[^)]*/)[0]
|
|
const deploysUrl = readme.match(/https:\/\/app.netlify.com\/sites[^)]*/)[0]
|
|
statusEl.innerHTML = imageLinkTo(deploysUrl, statusUrl, "Netlify Status")
|
|
})
|
|
|
|
fetchFile(`${repo}/HEAD/processed_landscape.yml`)
|
|
.then(processedLandscape => {
|
|
const { updated_at, twitter_options } = jsyaml.load(processedLandscape)
|
|
const updatedAt = updated_at ? new Date(updated_at) : null
|
|
const oneDayAgo = new Date() - 24 * 60 * 60 * 1000
|
|
const className = updatedAt && updatedAt > oneDayAgo ? '' : 'has-text-danger'
|
|
|
|
numTweetsEl.innerHTML = (twitter_options ? twitter_options.count : 0).toString()
|
|
|
|
updatedEl.innerHTML = `<div class="${className}">
|
|
<div> ${updated_at ? dateTimeFormat.format(updatedAt) : 'UNKNOWN' } </div>
|
|
<a href="http://${reportsIp}/${name}.html">VIEW DAILY AUTOUPDATE LOGS</a>
|
|
</div>`
|
|
})
|
|
}
|
|
|
|
fetchFile("cncf/landscapeapp/HEAD/landscapes.yml")
|
|
.then(function(data) {
|
|
const content = jsyaml.load(data);
|
|
reportsIp = content.ip;
|
|
content.landscapes.forEach(landscape => fetchLandscapeInfo(landscape));
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|