Skip to content

Commit

Permalink
Rearrange table contents
Browse files Browse the repository at this point in the history 
This places the information that's not sortable in one column, now with
the heading 'Repository'. The programming language is displayed as a
colour-coded badge next to the repository name, and tags are presented
as small capsules.
  • Loading branch information
@danlivings-dxw
danlivings-dxw committed Sep 23, 2024
1 parent 5a02f56 commit 8cf5b53
Showing 1 changed file with 108 additions and 97 deletions.
205 changes: 108 additions & 97 deletions index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
</header>

<div class="container mx-auto flex flex-col mt-6 space-y-6">
<div class="bg-stone-50 overflow-hidden rounded-lg border-b-4 border-stone-200 space-y-4">
<h2 class="bg-white border-b-2 border-stone-100 text-xl font-bold p-4">{{ name }}</h2>
<div class="bg-stone-50 rounded-lg border-b-4 border-stone-200 space-y-4">
<h2 class="bg-white rounded-t-lg border-b-2 border-stone-100 text-xl font-bold p-4">{{ name }}</h2>
<p class="mx-4">
{% if totalRepos === 1 %}
There is <span class="font-bold">1</span> repository
Expand All @@ -30,13 +30,10 @@
that Towtruck is tracking for <span class="font-bold">{{ org }}</span>.
</p>
<div class="mx-4">
<table class="table-auto w-full mb-4 border-y border-stone-200">
<thead class="bg-white border-b border-stone-200 text-left">
<table class="table-fixed w-full mb-4 border-y border-stone-200">
<thead class="sticky top-0 z-20 bg-white border-b border-stone-200 text-left">
<tr class="space-x-2">
<th class="py-2 pl-2" scope="col">Name</th>
<th class="py-2 pl-2" scope="col">Description</th>
<th class="py-2 pl-2" scope="col">Language</th>
<th class="py-2 pl-2" scope="col">Topics</th>
<th class="py-2 pl-2 w-5/12" scope="col">Repository</th>
{{macros.sortableTableHeader("Open issues count", "openIssues", sortDirection, sortBy)}}
{{macros.sortableTableHeader("Open bot PR count", "openBotPrCount", sortDirection, sortBy)}}
{{macros.sortableTableHeader("Open PR count", "openPrCount", sortDirection, sortBy)}}
Expand All @@ -45,106 +42,120 @@
{{macros.sortableTableHeader("Oldest open PR opened", "oldestOpenPrOpenedAt", sortDirection, sortBy)}}
{{macros.sortableTableHeader("Most recent issue opened", "mostRecentIssueOpenedAt", sortDirection, sortBy)}}
{{macros.sortableTableHeader("Oldest open issue opened", "oldestOpenIssueOpenedAt", sortDirection, sortBy)}}
<th class="py-2 pl-2" scope="col">Dependabot alerts</th>
<th class="py-2 pl-2 last:pr-2" scope="col">Dependencies</th>
</tr>
</thead>
<tbody>
{% for repo in repos %}
<tr class="even:bg-white">
<td class="py-2 pl-2" scope="row"><a target="_blank" class="text-blue-600 dark:text-blue-500 hover:underline" href="{{repo.htmlUrl}}">{{ repo.name }}</a></td>
<td class="py-2 pl-2">{{ repo.description }}</td>
<td class="py-2 pl-2">{{ repo.language }}</td>
<td class="py-2 pl-2">{{ repo.topics | join(", ")}}</td>
<td class="py-2 pl-2">{{ repo.openIssues }}</td>
<td class="py-2 pl-2">{{ repo.openBotPrCount }}</td>
<td class="py-2 pl-2">{{ repo.openPrCount }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.updatedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.mostRecentPrOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.oldestOpenPrOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.mostRecentIssueOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.oldestOpenIssueOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2 text-center">
{% if repo.totalOpenAlerts !== undefined %}
<div class="inline-block whitespace-nowrap text-[0px]">
{% set id = [repo.name, "alerts", "critical"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.criticalSeverityAlerts, ">", repo.criticalSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-red-600 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Critical severity alerts")}}</div>
{% set id = [repo.name, "alerts", "high"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.highSeverityAlerts, ">", repo.highSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-red-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "High severity alerts")}}</div>
{% set id = [repo.name, "alerts", "medium"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.mediumSeverityAlerts, ">", repo.mediumSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-orange-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Medium severity alerts")}}</div>
{% set id = [repo.name, "alerts", "low"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.lowSeverityAlerts, ">", repo.lowSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-amber-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Low severity alerts")}}</div>
<td class="py-2 pl-2 align-text-top" scope="row">
<div class="text-[0px]">
<a target="_blank" class="inline-block text-base text-sky-600 dark:text-sky-500 hover:underline" href="{{repo.htmlUrl}}">{{ repo.name }}</a>
{% if repo.language %}
<span class="inline-block text-xs text-{{ repo.languageColor }}-600 border-{{ repo.languageColor }}-600 border rounded-lg ml-2 py-1 px-2">{{ repo.language }}</span>
{% endif %}
{% if repo.totalOpenAlerts !== undefined %}
<div class="inline-block whitespace-nowrap text-[0px] ml-2 align-[-1px]">
{% set id = [repo.name, "alerts", "critical"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.criticalSeverityAlerts, ">", repo.criticalSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-red-600 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Critical severity alerts")}}</div>
{% set id = [repo.name, "alerts", "high"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.highSeverityAlerts, ">", repo.highSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-red-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "High severity alerts")}}</div>
{% set id = [repo.name, "alerts", "medium"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.mediumSeverityAlerts, ">", repo.mediumSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-orange-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Medium severity alerts")}}</div>
{% set id = [repo.name, "alerts", "low"] | join("-") %}
{% set mainText = ["<span", " class='font-bold'" if repo.lowSeverityAlerts, ">", repo.lowSeverityAlerts, "</span>"] | join('') | safe %}
<div class="inline-block text-sm text-white bg-amber-500 first:rounded-l-full last:rounded-r-full first:pl-3 last:pr-3 py-1 px-2">{{macros.tooltip(id, mainText, "Low severity alerts")}}</div>
</div>
{% else %}
<span class="text-stone-400 font-light italic">Dependabot alerts have been disabled for this repository.</span>
{% endif %}
</div>
<p class="mt-2">{{ repo.description }}</p>

{% if repo.topics.length %}
<div class="mt-4">
{% for topic in repo.topics %}
<span class="text-xs text-stone-600 bg-stone-200 rounded-full py-1 px-2">{{ topic }}</span>
{% endfor %}
</div>
{% else %}
<span class="text-stone-400 font-light italic">Dependabot alerts have been disabled for this repository.</span>
{% endif %}
</td>

{% if repo.dependencies.length %}
<td class="group py-2 pl-2 last:pr-2 align-text-top space-y-2">
<p>
{% if repo.dependencies.length === 1 %}
There is <span class="font-bold">1</span> dependency:
<hr class="mt-4 w-96 border-stone-200" />

<div class="mt-4 mb-2">
{% if repo.dependencies.length %}
<div class="group space-y-2">
<p>
{% if repo.dependencies.length === 1 %}
There is <span class="font-bold">1</span> dependency:
{% else %}
There are <span class="font-bold">{{ repo.dependencies.length }}</span> dependencies:
{% endif %}
<label>
<input class="hidden" type="checkbox" />
<span class="text-sm bg-stone-500 text-white rounded-lg py-1 px-2 hidden group-has-[:checked]:inline">Hide</span>
<span class="text-sm bg-stone-500 text-white rounded-lg py-1 px-2 group-has-[:checked]:hidden">Show</span>
</label>
</p>
<ul class="space-y-2 hidden group-has-[:checked]:block">
{% for dependency in repo.dependencies %}
<li>
<div class="inline-block whitespace-nowrap text-[0px]">
<span>
<span class="font-mono text-sm bg-{{ dependency.color }}-200 rounded-l-full last:rounded-r-full py-1 px-2">{{ dependency.name }}</span>
{% if dependency.version %}
<span class="font-mono text-sm bg-{{ dependency.color }}-300 last:rounded-r-full py-1 px-2">v{{ dependency.version }}</span>
{% endif %}
{% if dependency.tag %}
<span class="font-mono text-sm bg-{{ dependency.color }}-400 text-white last:rounded-r-full py-1 px-2">{{ dependency.tag }}</span>
{% endif %}
</span>
<span class="inline-block w-1"></span>
<span>
{% if dependency.isOutdated %}
<span class="font-mono text-sm bg-{{ dependency.color }}-500 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx {{dependency.icon}}"></i>
{{ dependency.changelog }}
v{{ dependency.latestVersion }}
</span>
{% endif %}
{% if dependency.isEndOfLifeSoon %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass"></i>
<span class="font-sans">Support ends {{ dependency.endOfLifeRelative }}</span>
</span>
{% elif dependency.isOutOfSupport %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass-bottom"></i>
<span class="font-sans">Support ended {{ dependency.endOfLifeRelative }}</span>
</span>
{% endif %}
</span>
</div>
</li>
{% endfor %}
</ul>
</div>
{% else %}
There are <span class="font-bold">{{ repo.dependencies.length }}</span> dependencies:
<span class="text-stone-400 font-light italic">
No dependencies have been discovered.
<br/>
Please make sure that Renovate has been configured on the repository to produce a dependency dashboard.
</span>
{% endif %}
<label>
<input class="hidden" type="checkbox" />
<span class="text-sm bg-stone-500 text-white rounded-lg py-1 px-2 hidden group-has-[:checked]:inline">Hide</span>
<span class="text-sm bg-stone-500 text-white rounded-lg py-1 px-2 group-has-[:checked]:hidden">Show</span>
</label>
</p>
<ul class="space-y-2 hidden group-has-[:checked]:block">
{% for dependency in repo.dependencies %}
<li>
<div class="inline-block whitespace-nowrap text-[0px]">
<span>
<span class="font-mono text-sm bg-{{ dependency.color }}-200 rounded-l-full last:rounded-r-full py-1 px-2">{{ dependency.name }}</span>
{% if dependency.version %}
<span class="font-mono text-sm bg-{{ dependency.color }}-300 last:rounded-r-full py-1 px-2">v{{ dependency.version }}</span>
{% endif %}
{% if dependency.tag %}
<span class="font-mono text-sm bg-{{ dependency.color }}-400 text-white last:rounded-r-full py-1 px-2">{{ dependency.tag }}</span>
{% endif %}
</span>
<span class="inline-block w-1"></span>
<span>
{% if dependency.isOutdated %}
<span class="font-mono text-sm bg-{{ dependency.color }}-500 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx {{dependency.icon}}"></i>
{{ dependency.changelog }}
v{{ dependency.latestVersion }}
</span>
{% endif %}
{% if dependency.isEndOfLifeSoon %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass"></i>
<span class="font-sans">Support ends {{ dependency.endOfLifeRelative }}</span>
</span>
{% elif dependency.isOutOfSupport %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass-bottom"></i>
<span class="font-sans">Support ended {{ dependency.endOfLifeRelative }}</span>
</span>
{% endif %}
</span>
</div>
</li>
{% endfor %}
</ul>
</div>
</td>
{% else %}
<td class="py-2 px-2 text-center text-stone-400 font-light italic">
No dependencies have been discovered.
<br/>
Please make sure that Renovate has been configured on the repository to produce a dependency dashboard.
</td>
{% endif %}

<td class="py-2 pl-2 align-text-top">{{ repo.openIssues }}</td>
<td class="py-2 pl-2 align-text-top">{{ repo.openBotPrCount }}</td>
<td class="py-2 pl-2 align-text-top">{{ repo.openPrCount }}</td>
<td class="py-2 pl-2 align-text-top">{{ repo.updatedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.mostRecentPrOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.oldestOpenPrOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.mostRecentIssueOpenedAt }}</td>
<td class="py-2 pl-2 last:pr-2">{{ repo.oldestOpenIssueOpenedAt }}</td>

</tr>
{% else %}
Expand Down

0 comments on commit 8cf5b53

Please sign in to comment.