-
'
}
+function processBadgesLegacy (badges, options) {
+ const filter_field = options.get('filter_field')
+ const filter_value = options.get('filter_value')
+ const links = options.get("links")
+
+ var htmlText = ""
+ htmlText += renderSetButtons(options.get('sets'))
+
+ if (filter_field === 'date') {
+ badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
+ if (filter_value != null && filter_value != "all") {
+ htmlText += renderBadges(badges, filter_field, filter_value, links)
+ } else if (filter_value == "all") {
+ htmlText += createFilteredHorizontalTable(badges, filter_field, null, true, links)
+ }
+ } else if (filter_field != null) {
+ if (filter_value != null && filter_value != "all") {
+ badges = filterBadges(badges, filter_field, filter_value)
+ }
+ badges.sort(patternSort)
+ if (filter_value != null && filter_value != "all") {
+ htmlText += renderBadges(badges, filter_field, filter_value, links)
+ } else if (filter_value == "all") {
+ htmlText += createFilteredHorizontalTable(badges, filter_field, null, true, links)
+ }
+ } else {
+ badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
+ badges.sort(patternVertSort)
+ htmlText += createFilteredHorizontalTable(badges, 'pattern', null, true, links)
+ }
+
+ document.getElementById(options.get('target')).innerHTML = htmlText
+}
+
+// ============================================
+// New Dashboard Rendering (for CI status page)
+// ============================================
+
+function statusLabel (color) {
+ if (color === 'green') return 'Passed'
+ if (color === 'yellow') return 'CI infrastructure failure'
+ if (color === 'red') return 'CI test failure'
+ return 'Unknown'
+}
+
+function platformDisplayName (platform) {
+ var names = {
+ 'aws': 'AWS (us-east-1)',
+ 'azr': 'Azure',
+ 'gcp': 'Google Cloud',
+ 'nutanix': 'Nutanix',
+ 'intel': 'On-prem (Intel)'
+ }
+ return names[platform] || stringForKey(platform)
+}
+
+function platformIconSvg (platform) {
+ if (platform === 'aws' || platform === 'gcp') {
+ return ''
+ }
+ if (platform === 'azr') {
+ return ''
+ }
+ if (platform === 'intel' || platform === 'nutanix') {
+ return ''
+ }
+ return ''
+}
+
+function timeAgo (dateStr) {
+ if (!dateStr) return ''
+ var date = new Date(dateStr + 'T00:00:00')
+ var now = new Date()
+ var diffMs = now - date
+ var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+ if (diffDays < 0) return dateStr
+ if (diffDays === 0) return 'Today'
+ if (diffDays === 1) return 'Yesterday'
+ if (diffDays < 7) return diffDays + ' days ago'
+ if (diffDays < 30) {
+ var weeks = Math.floor(diffDays / 7)
+ return weeks + (weeks === 1 ? ' week ago' : ' weeks ago')
+ }
+ if (diffDays < 365) {
+ var months = Math.floor(diffDays / 30)
+ return months + (months === 1 ? ' month ago' : ' months ago')
+ }
+ var years = Math.floor(diffDays / 365)
+ return years + (years === 1 ? ' year ago' : ' years ago')
+}
+
+function sanitizeId (str) {
+ return str.replace(/\./g, '_').replace(/[^a-zA-Z0-9_-]/g, '-')
+}
+
+function getLatestPerPatternPlatform (badges) {
+ var seen = {}
+ var result = []
+ badges.forEach(function (b) {
+ var compositeKey = b.pattern + '-' + b.platform
+ if (!seen[compositeKey]) {
+ seen[compositeKey] = true
+ result.push(b)
+ }
+ })
+ return result
+}
+
+function getCurrentTab () {
+ var params = new URLSearchParams(window.location.search)
+ if (params.get('date') != null) return 'history'
+ if (params.get('pattern') != null) {
+ var val = params.get('pattern')
+ if (val !== 'all') return 'pattern-detail'
+ return 'patterns'
+ }
+ if (params.get('platform') != null) return 'infrastructure'
+ if (params.get('version') != null) return 'version'
+ return 'overview'
+}
+
+function buildTabUrl (paramKey) {
+ var base = window.location.pathname
+ if (!paramKey) return base
+ return base + '?' + paramKey + '=all'
+}
+
+function renderTabs (activeTab) {
+ var tabs = [
+ { id: 'overview', label: 'Overview', href: buildTabUrl(null) },
+ { id: 'infrastructure', label: 'By Platform', href: buildTabUrl('platform') },
+ { id: 'version', label: 'By Version', href: buildTabUrl('version') },
+ { id: 'history', label: 'History', href: buildTabUrl('date') }
+ ]
+
+ var html = '
+
-
{{ partial "footer.html" . }}
diff --git a/layouts/partials/menu-ci.html b/layouts/partials/menu-ci.html
index 908b7ab83..2dbbe936c 100644
--- a/layouts/partials/menu-ci.html
+++ b/layouts/partials/menu-ci.html
@@ -5,17 +5,7 @@
{{- .Title -}}
- {{ .Content }} +{{ .Content }}
-
+
-
-
{{ partial "spinner.html" . }}
@@ -26,13 +25,6 @@ {{- .Title -}}
- - All - - -
- - - By Date - - -
- - - By Pattern + Overview
- @@ -23,14 +13,14 @@ By Platform -
- By Version
- - - By Operator + + History
'
+ tabs.forEach(function (tab) {
+ var isActive = tab.id === activeTab || (activeTab === 'pattern-detail' && tab.id === 'overview')
+ var activeClass = isActive ? ' active' : ''
+ html += '' + tab.label + ''
+ })
+ html += '
'
+ return html
+}
+
+function renderSortControl (currentSort) {
+ var html = ''
+ return html
+}
+
+function renderDashboardTableHeader () {
+ return '| Status | ' + + 'Pattern | ' + + 'Platform | ' + + 'OpenShift Version | ' + + 'Time | ' + + '
|---|---|---|---|---|
'
+ html += ''
+ html += ' | '
+
+ html += '' + html += '' + patternName + '' + html += ' | ' + + html += '' + platformIconSvg(badge.platform) + ' ' + platformName + ' | '
+
+ html += '' + version + ' | ' + + html += '' + time + ' | ' + html += '
' + groupTitle + '
' + html += renderDashboardTableWithBadges(groupBadges) + }) + + return html +} + +// ============================================ +// Card-Based Dashboard (Progressive Disclosure) +// ============================================ + +var _cardTracker = {} + +function groupBadgesByPattern (badges) { + var groups = {} + badges.forEach(function (b) { + if (!groups[b.pattern]) { + groups[b.pattern] = [] + } + groups[b.pattern].push(b) + }) + return groups +} + +function getLatestBadgePerPlatform (badges) { + var seen = {} + var result = [] + badges.forEach(function (b) { + if (!seen[b.platform]) { + seen[b.platform] = true + result.push(b) + } + }) + return result +} + +function filterRecentBadges (badges, months) { + var cutoff = new Date() + cutoff.setMonth(cutoff.getMonth() - months) + var cutoffStr = cutoff.toISOString().substr(0, 10) + return badges.filter(function (b) { return b.date >= cutoffStr }) +} + +function getLatestBadgePerCombo (badges) { + var seen = {} + var result = [] + badges.forEach(function (b) { + var combo = b.platform + '-' + b.version + if (!seen[combo]) { + seen[combo] = true + result.push(b) + } + }) + return result +} + +function computeCardHealth (tracker) { + if (tracker.loaded < tracker.total) return 'loading' + var colors = Object.values(tracker.platforms) + var hasRed = colors.indexOf('red') !== -1 + var hasYellow = colors.indexOf('yellow') !== -1 + + if (!hasRed && !hasYellow) return 'green' + if (!hasRed && hasYellow) return 'green-with-infra' + return 'has-failures' +} + +function cardHealthLabel (tracker) { + var colors = Object.values(tracker.platforms) + var total = colors.length + var greenCount = colors.filter(function (c) { return c === 'green' }).length + var yellowCount = colors.filter(function (c) { return c === 'yellow' }).length + var redCount = colors.filter(function (c) { return c === 'red' }).length + + if (greenCount === total) return 'Passing' + if (redCount === 0 && yellowCount > 0) { + return 'Passing (' + yellowCount + ' infra ' + (yellowCount === 1 ? 'issue' : 'issues') + ')' + } + var passing = greenCount + yellowCount + if (redCount > 0) { + return 'Passing on ' + passing + '/' + total + ' platforms' + } + return 'Loading...' +} + +function cardHealthIcon (health) { + if (health === 'green' || health === 'green-with-infra') { + return '' + } + if (health === 'has-failures') { + return '' + } + return '' +} + +function updateCardUI (pattern) { + var tracker = _cardTracker[pattern] + if (!tracker) return + var health = computeCardHealth(tracker) + + Object.keys(tracker.platforms).forEach(function (platform) { + var dotEl = document.getElementById('ci-card-dot-' + sanitizeId(pattern) + '-' + sanitizeId(platform)) + if (dotEl) { + dotEl.className = 'ci-card-platform-dot ' + tracker.platforms[platform] + } + }) + + Object.keys(tracker.tests).forEach(function (comboKey) { + var blockEl = document.getElementById('ci-card-block-' + sanitizeId(pattern) + '-' + comboKey) + if (blockEl) { + blockEl.className = 'ci-card-block ' + tracker.tests[comboKey] + } + }) + + var summaryEl = document.getElementById('ci-card-summary-' + sanitizeId(pattern)) + if (summaryEl) { + summaryEl.textContent = cardHealthLabel(tracker) + summaryEl.className = 'ci-card-summary ' + health + } + + var iconEl = document.getElementById('ci-card-icon-' + sanitizeId(pattern)) + if (iconEl) { + iconEl.innerHTML = cardHealthIcon(health) + } + + var cardEl = document.getElementById('ci-card-' + sanitizeId(pattern)) + if (cardEl) { + cardEl.setAttribute('data-health', health) + } + + updateOverallStats() +} + +function updateOverallStats () { + var statsEl = document.getElementById('ci-overall-stats') + if (!statsEl) return + + var patterns = Object.keys(_cardTracker) + var totalPatterns = patterns.length + var passingCount = 0 + var infraCount = 0 + var failureCount = 0 + var loading = 0 + + patterns.forEach(function (p) { + var health = computeCardHealth(_cardTracker[p]) + if (health === 'green') passingCount++ + else if (health === 'green-with-infra') { passingCount++; infraCount++ } + else if (health === 'has-failures') failureCount++ + else loading++ + }) + + if (loading > 0) { + statsEl.innerHTML = '' + return + } + + var pct = Math.round((passingCount / totalPatterns) * 100) + var html = '' + statsEl.innerHTML = html +} + +function cardStatusCallback (badgeKey, pattern, platform, comboKey) { + var json_obj = JSON.parse(this.responseText) + var color = json_obj.color || 'green' + + if (_cardTracker[pattern]) { + _cardTracker[pattern].tests[comboKey] = color + _cardTracker[pattern].loadedTests++ + + // Platform dot uses latest badge only (first one seen, since badges sorted by date desc) + if (!_cardTracker[pattern].platforms[platform]) { + _cardTracker[pattern].platforms[platform] = color + _cardTracker[pattern].loaded++ + } + + updateCardUI(pattern) + } +} + +function renderPatternCard (pattern, platformBadges, comboBadges) { + var patternId = sanitizeId(pattern) + var patternName = stringForKey(pattern) + var latestDate = platformBadges.length > 0 ? platformBadges[0].date : '' + + var html = '' + + html += ''
+ html += '' + cardHealthIcon('loading') + ''
+ html += '' + patternName + ''
+ html += '
'
+
+ html += 'Loading...
'
+
+ html += ''
+ platformBadges.forEach(function (b) {
+ html += ''
+ html += ''
+ html += '' + stringForKey(b.platform) + ''
+ html += ''
+ })
+ html += '
'
+
+ html += ''
+ comboBadges.slice().reverse().forEach(function (b) {
+ var comboId = sanitizeId(b.platform) + '-' + sanitizeId(b.version)
+ html += ''
+ })
+ html += '
'
+
+ html += ''
+
+ html += ''
+ return html
+}
+
+function renderPatternCards (badges) {
+ badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
+
+ var groups = groupBadgesByPattern(badges)
+ var patternNames = Object.keys(groups).sort(function (a, b) {
+ return stringForKey(a).localeCompare(stringForKey(b))
+ })
+
+ _cardTracker = {}
+
+ var html = 'Cards show the latest test per platform. Status bars show all tests from the last 3 months, oldest to newest. Passed Infra issue Test failure
'
+ html += ''
+
+ html += '
'
+
+ var useSample = !isProductionSite()
+
+ patternNames.forEach(function (pattern) {
+ var patternBadges = groups[pattern]
+ var latestPerPlatform = getLatestBadgePerPlatform(patternBadges)
+ var latestPerCombo = getLatestBadgePerCombo(patternBadges)
+ var recentCombos = getLatestBadgePerCombo(filterRecentBadges(patternBadges, 3))
+
+ _cardTracker[pattern] = {
+ total: latestPerPlatform.length,
+ loaded: 0,
+ platforms: {},
+ tests: {},
+ totalTests: latestPerCombo.length,
+ loadedTests: 0,
+ recentComboKeys: {}
+ }
+
+ recentCombos.forEach(function (b) {
+ _cardTracker[pattern].recentComboKeys[sanitizeId(b.platform) + '-' + sanitizeId(b.version)] = true
+ })
+
+ html += renderPatternCard(pattern, latestPerPlatform, recentCombos)
+
+ latestPerCombo.forEach(function (b) {
+ var comboKey = sanitizeId(b.platform) + '-' + sanitizeId(b.version)
+ if (useSample) {
+ var color = sampleColorForKey(b.key)
+ _cardTracker[pattern].tests[comboKey] = color
+
+ // Platform dot uses latest badge only (first one seen)
+ if (!_cardTracker[pattern].platforms[b.platform]) {
+ _cardTracker[pattern].platforms[b.platform] = color
+ }
+ _cardTracker[pattern].loadedTests++
+ _cardTracker[pattern].loaded = latestPerPlatform.length
+ } else {
+ getJSON(b.getURI(), cardStatusCallback, b.key, pattern, b.platform, comboKey)
+ }
+ })
+ })
+
+ html += '
'
+
+ if (useSample) {
+ setTimeout(function () {
+ patternNames.forEach(function (pattern) {
+ updateCardUI(pattern)
+ })
+ }, 150)
+ }
+
+ html += 'View complete history →'
+
+ return html
+}
+
+function renderStatusKey () {
+ return '' +
+ ' Passed: Pattern deployed and tests succeeded' +
+ ' CI infrastructure failure: Cloud or pipeline problem, not a pattern issue' +
+ ' CI test failure: Pattern tests did not pass' +
+ '
'
+}
+
+function handleSort (value) {
+ var url = new URL(window.location.href)
+ url.searchParams.set('sort', value)
+ window.location.href = url.toString()
+}
+
+function renderDashboard (badges, options) {
+ var filter_field = options.get('filter_field')
+ var filter_value = options.get('filter_value')
+ var target = options.get('target')
+
+ var currentTab = getCurrentTab()
+ var params = new URLSearchParams(window.location.search)
+ var currentSort = params.get('sort') || 'latest'
+
+ if (filter_value != null && filter_value !== 'all') {
+ badges = filterBadges(badges, filter_field, filter_value)
+ }
+
+ badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
+
+ if (currentSort === 'pattern') {
+ badges.sort(patternSort)
+ } else if (currentSort === 'platform') {
+ badges.sort(function (a, b) {
+ if (a.platform !== b.platform) return a.platform.localeCompare(b.platform)
+ return -1 * a.date.localeCompare(b.date)
+ })
+ } else if (currentSort === 'version') {
+ badges.sort(function (a, b) {
+ if (a.version !== b.version) return -1 * a.version.localeCompare(b.version)
+ return -1 * a.date.localeCompare(b.date)
+ })
+ }
+
+ var html = ''
+
+ // Show tabs for top-level views (not for pattern detail drill-down)
+ html += renderTabs(currentTab)
+
+ if (currentTab === 'overview') {
+ // Card-based overview — no sort control
+ html += renderPatternCards(badges)
+ } else if (currentTab === 'pattern-detail') {
+ // Drill-down from a card: show back link + detail table + status key
+ html += '← Back to overview'
+ html += '' + stringForKey(filter_value) + '
' + html += renderStatusKey() + html += renderSortControl(currentSort) + html += renderDashboardTableWithBadges(badges) + } else if (currentTab === 'infrastructure') { + html += renderStatusKey() + html += renderSortControl(currentSort) + if (filter_value != null && filter_value !== 'all') { + html += renderDashboardTableWithBadges(badges) + } else { + html += renderGroupedTables(badges, 'platform') + } + } else if (currentTab === 'version') { + html += renderStatusKey() + html += renderSortControl(currentSort) + if (filter_value != null && filter_value !== 'all') { + html += renderDashboardTableWithBadges(badges) + } else { + html += renderGroupedTables(badges, 'version') + } + } else if (currentTab === 'history') { + html += renderStatusKey() + html += renderSortControl(currentSort) + if (filter_value != null && filter_value !== 'all') { + var dateBadges = filterBadges(badges, 'date', filter_value) + html += renderDashboardTableWithBadges(dateBadges) + } else { + html += renderDashboardTableWithBadges(badges) + } + } else if (currentTab === 'patterns') { + // Legacy route: ?pattern=all + html += renderSortControl(currentSort) + html += renderGroupedTables(badges, 'pattern') + } + + if (badges.length === 0) { + html += 'No CI results found.
'
+ }
+
+ document.getElementById(target).innerHTML = html
+}
+
+// ============================================
+// Badge Data Processing
+// ============================================
+
function getBadges (xmlText, bucket_url, badge_set) {
parser = new DOMParser()
var xmlDoc = parser.parseFromString(xmlText, 'application/xml')
@@ -386,7 +1078,6 @@ function getBadges (xmlText, bucket_url, badge_set) {
l = entries.length
for (i = 0; i < l; i++) {
- // entries[i].childNodes[0].nodeValue
key = entries[i].childNodes[0].nodeValue
if (badge_set == "GA" && key.endsWith("stable-badge.json") ) {
badges.push(new Badge(bucket_url, key, getBadgeDate(entries[i])));
@@ -403,49 +1094,18 @@ function getBadges (xmlText, bucket_url, badge_set) {
}
function processBadges (badges, options) {
- const filter_field = options.get('filter_field')
- const filter_value = options.get('filter_value')
- const links = options.get("links");
-
- htmlText = ""
- if (options.get("disable_buttons") != true) {
- htmlText += renderSetButtons(options.get('sets'))
+ if (options.get('disable_buttons') === true) {
+ processBadgesLegacy(badges, options)
+ return
}
- if (filter_field === 'date') {
- badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
- if (filter_value != null && filter_value != "all") {
- htmlText += renderBadges(badges, filter_field, filter_value)
- } else if (filter_value == "all") {
- htmlText += createFilteredHorizontalTable(badges, filter_field, null, true, links)
- }
- } else if (filter_field != null) {
- if (filter_value != null && filter_value != "all") {
- badges = filterBadges(badges, filter_field, filter_value)
- }
- badges.sort(patternSort)
- numElements = Math.min(Math.floor(window.innerWidth / 140), 6)
- if (filter_value != null && filter_value != "all") {
- htmlText += renderBadges(badges, filter_field, filter_value)
- } else if (filter_value == "all") {
- htmlText += createFilteredHorizontalTable(badges, filter_field, null, true, links)
- }
- } else {
- badges.sort(function (a, b) { return -1 * a.date.localeCompare(b.date) })
- badges.sort(patternVertSort)
-
- htmlText += createFilteredHorizontalTable(badges, 'date', null, true, links)
- htmlText += createFilteredHorizontalTable(badges, 'pattern', null, true, links)
- htmlText += createFilteredHorizontalTable(badges, 'platform', null, true, links)
- htmlText += createFilteredHorizontalTable(badges, 'version', null, true, links)
- if ( options.get('sets').includes('all') || options.get('sets').includes('early')) {
- htmlText += createFilteredHorizontalTable(badges, 'operator', null, true, links)
- }
-
- }
- document.getElementById(options.get('target')).innerHTML = htmlText
+ renderDashboard(badges, options)
}
+// ============================================
+// Entry Points
+// ============================================
+
function getBucketOptions (input) {
const options = new Map()
const queryString = window.location.search
@@ -464,7 +1124,6 @@ function getBucketOptions (input) {
if (bucket != null) {
buckets.push(bucket)
} else {
- //buckets.push('/ci/vp-results.xml')
buckets.push('https://storage.googleapis.com/vp-results')
buckets.push('https://vp-ntnx-results.s3.amazonaws.com')
}
@@ -478,7 +1137,7 @@ function getBucketOptions (input) {
options.set(fields[i], value)
}
}
- const sections = [ 'date', 'version', 'platform', 'pattern', 'operator' ]
+ const sections = [ 'date', 'version', 'platform', 'pattern' ]
filter_field = options.get('filter_field')
@@ -515,22 +1174,48 @@ function fetchBucketBadges(bucket, inputs) {
});
}
+function obtainBadgesFromSample (inputs) {
+ const options = getBucketOptions(inputs);
+
+ fetch('/data/sample-badges.json')
+ .then(function (response) { return response.json() })
+ .then(function (sampleData) {
+ var allBadges = sampleData.map(function (item) {
+ var b = new Badge(item.base, item.key, item.date + 'T00:00:00Z')
+ b.pattern = item.pattern
+ b.platform = item.platform
+ b.operator = item.operator
+ b.version = item.version
+ b.date = item.date
+ b._color = sampleColorForKey(item.key)
+ return b
+ })
+ console.log('Using sample data:', allBadges.length, 'badges')
+ processBadges(allBadges, options)
+ })
+ .catch(function (error) {
+ console.error('Error loading sample data:', error)
+ })
+}
+
function obtainBadges (inputs) {
+ if (!isProductionSite()) {
+ console.log('Non-production site detected, using sample badge data')
+ obtainBadgesFromSample(inputs)
+ return
+ }
+
const options = getBucketOptions(inputs);
const buckets = options.get('buckets')
- // Create an array to store promises for each bucket's badges
const badgePromises = [];
- // Iterate through each bucket URL and fetch badges asynchronously
for (const bucket of buckets) {
badgePromises.push(fetchBucketBadges(bucket, inputs));
}
- // Wait for all promises to resolve
Promise.all(badgePromises)
.then((results) => {
- // Process the badges from all buckets
const allBadges = [];
for (const badges of results) {
console.log("Got "+badges.length+" badges")