feat(report-viewer): add column sorting for better inspection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monito/technical-stats",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.10",
   "repository": "https://github.com/monito/technical-stats.git",
   "author": "[email protected]",
   "license": "MIT",

report-viewer/index.html

@@ -18,13 +18,22 @@
     <div id="app" v-cloak>
       <div class="p-6">
         <div class="p-2 text-gray-500">
-          generated at: {{ report.generatedAt }}
+          <span>
+            generated at: {{ report.generatedAt }}
+          </span>
+          <span v-if="sorting.direction" class="font-semibold">
+            sorted by {{ sorting.column }} in {{ sorting.direction }} direction
+          </span>
+          <span v-else class="font-semibold">
+            click by column for sorting
+          </span>
         </div>
         <div class="shadow rounded max-h-screen overflow-auto">
           <table class="min-w-full divide-y divide-gray-200">
-            <thead>
+            <thead class="cursor-pointer">
               <th
                 class="px-6 py-3 sticky left-0 top-0 z-20 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                @click="sortByName()"
               >
                 Name
               </th>
@@ -34,13 +43,15 @@
                 :class="{ 'text-blue-500 hover:underline': goal.link }"
                 :key="goal.name"
                 :title="goal.description"
+                @click="sortByGoal(goal.name)"
               >
                 <a :href="goal.link" target="_blank">
                   {{ goal.name }}
                 </a>
               </th>
               <th
                 class="px-6 py-3 sticky right-0 top-0 z-20 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                @click="sortByAchieved()"
               >
                 Achieved
               </th>
@@ -141,6 +152,37 @@
           return {
             report: window.REPORT_JSON,
           }
+        },
+        methods: {
+          sortByGoal(goal) {
+            const statusSorting = { error: 1, skip: 2, fail: 3, warn: 4, pass: 5 }
+            const getStatus = (project) => statusSorting[project.checks.find(check => check.name === goal).status]
+            this.sortProjects(getStatus, goal)
+          },
+          sortByName() {
+            const getName = (project) => project.repo
+            this.sortProjects(getName, 'Name')
+          },
+          sortByAchieved() {
+            const getAchieved = (project) => project.achieved.value
+            this.sortProjects(getAchieved, 'Achieved')
+          },
+          sortProjects(getValueFunc, column) {
+            if (this.sorting.direction === '') {
+              this.sorting.direction = 'ASCENDING'
+            } else {
+              this.sorting.direction = this.sorting.direction === 'ASCENDING'
+                ? 'DESCENDING'
+                : 'ASCENDING'
+            }
+
+            const sortFunc = this.sorting.direction === 'ASCENDING'
+              ? (a, b) => getValueFunc(a) > getValueFunc(b) ? 1 : -1
+              : (a, b) => getValueFunc(a) > getValueFunc(b) ? -1 : 1
+
+            this.sorting.column = column.toUpperCase()
+            this.report.projects = this.report.projects.sort(sortFunc)
+          }
         }
       }).mount('#app')
     </script>

runner/index.ts

@@ -1,11 +1,11 @@
 import 'dotenv/config'
-import { Config, Project, PluginInput, PluginOtput, ProjectOutput, Check, Status } from './types'
+import { Config, Project, PluginInput, PluginOutput, ProjectOutput, CheckOutput } from './types'
 import { getRepositories, getRepository } from './providers/provider-github'
 import { calculateStats } from './features'
 
 const SERVICE_SCAN_TIMEOUT = 100
 
-async function runPlugins(project: PluginInput, config: Config): Promise<PluginOtput> {
+async function runPlugins(project: PluginInput, config: Config): Promise<PluginOutput> {
   const data = await Promise.all(
     Object.entries(config.plugins).map(async ([name, plugin]) => {
       return [name, await plugin(project)]
@@ -14,13 +14,18 @@ async function runPlugins(project: PluginInput, config: Config): Promise<PluginO
   return Object.fromEntries(data)
 }
 
-async function runChecks(project: Project, config: Config): Promise<Check[]> {
+async function runChecks(project: Project, config: Config): Promise<CheckOutput[]> {
   return Promise.all(
-    config.goals.map(async ({ check }): Promise<Check> => {
+    config.goals.map(async ({ check, name }): Promise<CheckOutput> => {
       try {
-        return await check(project)
+        const checkResult = await check(project)
+        return {
+          ...checkResult,
+          name,
+        }
       } catch(err) {
         return {
+          name,
           status: 'error',
           value: err.message
         }
@@ -71,7 +76,9 @@ export async function run(config: Config) {
       const { stats, percentage } = calculateStats(checks)
 
       return {
-        ...project,
+        repo: project.repo,
+        description: project.description,
+        url: project.url,
         stats,
         achieved: config.checkAchieved(percentage),
         checks,

runner/types.ts

@@ -5,6 +5,10 @@ export interface Check {
   value?: string | number | undefined
 }
 
+export interface CheckOutput extends Check {
+  name: string
+}
+
 interface Goal {
   name: string
   description: string
@@ -35,11 +39,11 @@ export type PluginInput = Project & {
   defaultBranchName: string
 }
 
-export type PluginOtput = {
+export type PluginOutput = {
   [key: string]: unknown
 }
 
-export type ProjectOutput = PluginInput & PluginOtput & {
+export type ProjectOutput = PluginInput & PluginOutput & {
   active: boolean
   url: string
   description: string