-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: reproducibility graph #138
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,12 +10,16 @@ | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> | ||
</head> | ||
<script> | ||
function tabsComponent() { | ||
function platformTab() { | ||
return { | ||
activeTab: 1, | ||
selectTab(tab) { | ||
this.activeTab = tab; | ||
}, | ||
}; | ||
} | ||
|
||
// Calculate a human timestamp | ||
function timeAgo(timestamp) { | ||
const now = new Date(); | ||
const date = new Date(timestamp); | ||
|
@@ -45,18 +49,10 @@ | |
return `${years} year${years !== 1 ? 's' : ''} ago`; | ||
} | ||
} | ||
|
||
document.addEventListener("DOMContentLoaded", function () { | ||
const elements = document.querySelectorAll('[data-timestamp]'); | ||
elements.forEach(element => { | ||
const timestamp = element.getAttribute('data-timestamp'); | ||
element.textContent = timeAgo(timestamp); | ||
}); | ||
}); | ||
</script> | ||
|
||
<body class="bg-gray-100"> | ||
<div class="container mx-auto p-4" x-data="tabsComponent()"> | ||
<div class="container mx-auto p-4" x-data="platformTab()"> | ||
<h1 class="text-4xl font-bold py-6 mx-auto"> | ||
How Reproducible is | ||
<span class="font-mono">rattler-build</span>? | ||
|
@@ -65,19 +61,20 @@ | |
<h2 class="text-xl font-bold py-4"> | ||
Introduction | ||
</h2> | ||
<p> | ||
<span> | ||
This website contains some information about | ||
<span class="font-mono">.conda</span> packages that have been using | ||
<a href="https://github.com/prefix-dev/rattler-build" | ||
class="text-blue-500 underline hover:text-blue-300"> | ||
<span class="font-mono">rattler-build</pre> | ||
<span class="font-mono">rattler-build</span> | ||
<i class="fa-brands fa-github"></i> | ||
</a> to build their packages. | ||
</p> | ||
|
||
<p> | ||
More information regarding what we mean by reproducibility can be found | ||
at the github repository for this project <a class="text-blue-500 underline hover:text-blue-300" | ||
href="https://github.com/prefix-dev/reproducible-builds">Click Here</a> | ||
href="https://github.com/prefix-dev/reproducible-builds">Click Here <i class="fa-brands fa-github"></i></a> | ||
</p> | ||
</section> | ||
|
||
|
@@ -97,7 +94,7 @@ | |
{% set reproducibility_percentage = (reproducible_builds / total_builds) * 100 %} | ||
<div class="bg-white p-4 rounded shadow border cursor-pointer" | ||
:class="{ 'border-blue-600 border-4': activeTab === {{loop.index}}, 'border-gray-300 border-1': activeTab !== {{loop.index}} }" | ||
@click="activeTab = {{loop.index}}"> | ||
@click="selectTab({{loop.index}})"> | ||
<h3 class="text-lg font-semibold"> | ||
<span class="{{ platform | platform_fa }}"></span> | ||
{{ platform | capitalize }} | ||
|
@@ -118,7 +115,9 @@ | |
</div> | ||
|
||
<div> | ||
<canvas id="myChart"></canvas> | ||
{% for platform in by_platform.keys() %} | ||
<canvas id="chart-{{ platform }}" x-show="activeTab == {{ loop.index }}"></canvas> | ||
{% endfor %} | ||
</div> | ||
<div class="inline-flex gap-4 border py-3 px-4 bg-gray-50 rounded-xl"> | ||
<div>Reproducible: <i class="{{ reproducible }}"></i></div> | ||
|
@@ -143,7 +142,7 @@ | |
</tr> | ||
</thead> | ||
<tbody> | ||
{% for build in builds | sort(attribute='build_state') %} | ||
{% for build in builds | sort(attribute='build_state, recipe_name') %} | ||
<tr class="border-b border-dashed"> | ||
<td class="py-2 px-4"> | ||
<span class="{{ build_state_fa(build.build_state, build.rebuild_state) }}"></span> | ||
|
@@ -156,8 +155,8 @@ | |
{{ build.rebuild_state.value | capitalize if | ||
build.rebuild_state else 'N/A' }} | ||
</td> | ||
<td class="py-2 px-4" data-timestamp="{{build.time}}"></td> | ||
<td class="py-2 px-4"> | ||
<td class="py-2 px-4" x-data="{ humanTime: timeAgo('{{ build.time }}') }" x-html="humanTime"></td> | ||
<td class="py-2 px-4"></td> | ||
<pre>{{ build.reason if build.reason else "" }}</pre> | ||
</td> | ||
<td class="py-2 px-4 flex justify-center"> | ||
|
@@ -167,59 +166,19 @@ | |
<i class="fa-brands fa-github text-xl"></i> | ||
</a> | ||
</td> | ||
<!-- <td class="py-2 px-4 border-b"> | ||
<button class="bg-blue-500 text-white py-1 px-3 rounded hover:bg-blue-700" onclick="viewLogs('{{ build.reason }}')">View Logs</button> | ||
</td> --> | ||
</tr> | ||
{% endfor %} | ||
</tbody> | ||
</table> | ||
</div> | ||
{% endfor %} | ||
</div> | ||
|
||
<!-- Modal for logs --> | ||
<div id="logModal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 hidden"> | ||
<div class="bg-white p-4 rounded shadow-lg max-w-xl w-full"> | ||
<h2 class="text-xl font-bold mb-2">Logs</h2> | ||
<pre id="logContent" class="bg-gray-200 p-2 rounded h-64 overflow-y-scroll"></pre> | ||
<button class="bg-red-500 text-white py-1 px-3 rounded hover:bg-red-700 mt-2" onclick="closeModal()"> | ||
Close | ||
</button> | ||
</div> | ||
</div> | ||
</body> | ||
|
||
<script> | ||
|
||
const ctx = document.getElementById('myChart'); | ||
const DATA_COUNT = 7; | ||
const NUMBER_CFG = { count: DATA_COUNT, min: -100, max: 100 }; | ||
|
||
const data = { | ||
labels: ['2021-01-01', '2021-01-02'], | ||
datasets: [ | ||
{ | ||
label: 'Builds', | ||
data: [10, 20], | ||
fill: true, | ||
}, | ||
{ | ||
label: 'Rebuilds', | ||
data: [5, 10], | ||
fill: true, | ||
}, | ||
{ | ||
label: 'Total Builds', | ||
data: [12, 24], | ||
fill: false | ||
}, | ||
] | ||
}; | ||
|
||
const config = { | ||
type: 'line', | ||
data: data, | ||
options: { | ||
responsive: true, | ||
plugins: { | ||
|
@@ -280,7 +239,44 @@ | |
} | ||
}; | ||
|
||
new Chart(ctx, config); | ||
{% for platform in by_platform.keys() %} | ||
// Change the title of the chart | ||
const data_{{platform}} = { | ||
labels: {{ dates | tojson }}, | ||
datasets: [ | ||
{ | ||
label: 'Reproducible', | ||
data: {{ counts_per_platform[platform].rebuilds | tojson }}, | ||
fill: true, | ||
}, | ||
{ | ||
label: 'Builds', | ||
data: {{ counts_per_platform[platform].builds | tojson }}, | ||
fill: true, | ||
}, | ||
{ | ||
label: 'Total Recipes', | ||
data: {{ counts_per_platform[platform].total_builds | tojson }}, | ||
fill: false | ||
}, | ||
] | ||
}; | ||
const config_{{ platform }} = { | ||
...config, | ||
options: { | ||
...config.options, | ||
plugins: { | ||
...config.options.plugins, | ||
title: { | ||
...config.options.plugins.title, | ||
text: 'Rebuild Statistics for {{ platform | capitalize }}', | ||
}, | ||
}, | ||
}, | ||
data: data_{{platform}}, | ||
}; | ||
const chart_{{ platform }} = new Chart(document.getElementById("chart-{{ platform }}"), config_{{ platform }}); | ||
{% endfor %} | ||
</script> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why Literal as Lit?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because there is another Literal import beneath it.