[WIP] Add a GUI

bin/run

@@ -31,6 +31,9 @@ const cachePath = XDG_CACHE_DIR ? path.join(XDG_CACHE_DIR, '.repo-report') : pat
 const getCommandMeta = (yargs) => yargs
 	.usage('Usage: $0 [options]')
 
+	.option('gui', {
+		describe: 'Show output in the form of a webpage',
+	})
 	.option('unactionable', {
 		describe: `Shows values of metrics you lack permissions to change, with a ${symbols.unactionable} next to it`,
 	})

package.json

@@ -11,7 +11,8 @@
 		"tests-only": "nyc tape 'test/**/*.js'| tap-spec",
 		"lint": "eslint ./bin/* .",
 		"pretest": "npm run lint",
-		"posttest": "aud --production"
+		"posttest": "aud --production",
+		"build:css": "postcss src/static/tailwind.css -o src/static/style.css"
 	},
 	"engines": {
 		"node": ">=14"
@@ -21,22 +22,34 @@
 	"license": "MIT",
 	"private": false,
 	"dependencies": {
+		"@fullhuman/postcss-purgecss": "^4.0.3",
 		"@octokit/graphql": "^4.8.0",
 		"cli-table": "^0.3.6",
 		"colors": "^1.4.0",
+		"cssnano": "^5.0.8",
 		"dotenv": "^10.0.0",
+		"ejs": "^3.1.6",
+		"express": "^4.17.1",
+		"express-handlebars": "^5.3.4",
 		"jsonschema": "^1.4.0",
 		"minimatch": "^3.0.4",
 		"mkdirp": "^1.0.4",
-		"yargs": "^17.2.1"
+		"open": "^8.3.0",
+		"postcss": "^8.1.2",
+		"postcss-cli": "^8.1.0",
+		"yargs": "^17.2.1",
+		"yargs-parser": "^20.2.9"
 	},
 	"devDependencies": {
 		"@ljharb/eslint-config": "^18.0.0",
 		"aud": "^1.1.5",
+		"autoprefixer": "^10.3.7",
 		"eslint": "^7.32.0",
 		"fetch-mock": "^9.11.0",
 		"isomorphic-fetch": "^3.0.0",
 		"nyc": "^15.1.0",
+		"postcss": "^8.3.11",
+		"tailwindcss": "^2.2.17",
 		"tap-spec": "^5.0.0",
 		"tape": "^5.3.1"
 	}

postcss.config.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/* eslint-disable global-require */
+const purgecss = require('@fullhuman/postcss-purgecss');
+const cssnano = require('cssnano');
+
+module.exports = {
+	plugins: [
+		require('tailwindcss'),
+		require('autoprefixer'),
+		cssnano({
+			preset: 'default',
+		}),
+		purgecss({
+			content: ['./views/**/*.ejs'],
+			defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+		}),
+	],
+};

src/commands/detail.js

@@ -7,9 +7,11 @@ const {
 	printAPIPoints,
 	getRepositories,
 	generateDetailTable,
+	generateGui,
 } = require('../utils');
 
 const { getMetrics } = require('../metrics');
+const { server } = require('../server/app.js');
 
 // Metric names and their extraction method to be used on the query result (Order is preserved)
 const metricNames = [
@@ -157,7 +159,13 @@ const detail = async (flags) => {
 	});
 
 	if (table) {
-		console.log(table.toString());
+		if (flags.serve) {
+			return table;
+		} else if (flags.gui) {
+			server(generateGui(table));
+		} else {
+			console.log(table.toString());
+		}
 	}
 
 	printAPIPoints(points);

src/server/app.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const express = require('express');
+const { executeCommand } = require('./controllers');
+const path = require('path');
+// const open = require('open');
+
+const server = (table) => {
+	const app = express();
+	const port = 3000;
+	app.use(express.json());
+	app.use(express.urlencoded({ extended: true }));
+	app.set('view engine', 'ejs');
+	app.get('/', (req, res) => {
+		res.render('index', { table });
+	});
+	app.use('/public', express.static(path.join(__dirname, 'static')));
+	app.post('/command', executeCommand);
+	app.listen(port, () => {
+		console.log(`app is listening on port ${port}`);
+	});
+};
+
+module.exports = {
+	server,
+};

src/server/controllers.js

@@ -0,0 +1,177 @@
+'use strict';
+
+const SUCCESS_RES_CODE = 200;
+const parse = require('yargs-parser');
+const {
+	listMetrics,
+	getRepositories,
+	generateDetailTable,
+} = require('../utils');
+
+const { getMetrics } = require('../metrics');
+
+// Metric names and their extraction method to be used on the query result (Order is preserved)
+const metricNames = [
+	'Repository',
+	'isFork',
+	'Access',
+	'IssuesEnabled',
+	'ProjectsEnabled',
+	'WikiEnabled',
+	'AllowsForking',
+	'Archived',
+	'AutoMergeAllowed',
+	'BlankIssuesEnabled',
+	'SecurityPolicyEnabled',
+	'License',
+	'MergeStrategies',
+	'DeleteOnMerge',
+	'HasStarred',
+	'Subscription',
+	'DefBranch',
+	'AllowsForcePushes',
+	'AllowsDeletions',
+	'DismissesStaleReviews',
+	'ReqApprovingReviewCount',
+	'ReqApprovingReviews',
+	'ReqCodeOwnerReviews',
+	'ReqConversationResolution',
+	'isPrivate',
+];
+
+const generateQuery = (endCursor, {
+	f,
+}) => {
+	let showForks = false;
+	let showSources = true;
+	let showPrivate = false;
+	let showPublic = true;
+	if (f && f.length) {
+		showForks = f.includes('forks');
+		showSources = f.includes('sources');
+		showPrivate = f.includes('private');
+		showPublic = f.includes('public');
+	}
+	return (
+		`query {
+  viewer {
+	repositories(
+	  first: 100
+	  affiliations: [OWNER, ORGANIZATION_MEMBER, COLLABORATOR]
+	  ${endCursor ? `after: "${endCursor}"` : ''}
+	  ${showForks === showSources ? '' : showForks ? 'isFork: true' : 'isFork: false'}
+	  ${showPrivate === showPublic ? '' : showPublic ? 'privacy: PUBLIC' : 'privacy: PRIVATE'}
+	) {
+	  totalCount
+	  pageInfo {
+		endCursor
+		hasNextPage
+	}
+	nodes {
+		name
+		nameWithOwner
+		defaultBranchRef {
+			name
+			branchProtectionRule {
+				allowsForcePushes
+				allowsDeletions
+				dismissesStaleReviews
+				requiredApprovingReviewCount
+				requiresApprovingReviews
+				requiresCodeOwnerReviews
+				requiresConversationResolution
+				restrictsPushes
+			}
+		}
+		deleteBranchOnMerge
+		hasIssuesEnabled
+		hasProjectsEnabled
+		hasWikiEnabled
+		forkingAllowed
+		isArchived
+		autoMergeAllowed
+		isBlankIssuesEnabled
+		isFork
+		isPrivate
+		isSecurityPolicyEnabled
+		isTemplate
+		licenseInfo {
+			name
+		}
+		mergeCommitAllowed
+		owner {
+			login
+		}
+		rebaseMergeAllowed
+		squashMergeAllowed
+		createdAt
+		updatedAt
+		pushedAt
+		viewerHasStarred
+		viewerPermission
+		viewerSubscription
+	  }
+	}
+  }
+  rateLimit {
+	cost
+	remaining
+  }
+}
+`);
+};
+
+const detail = async (flags) => {
+	if (flags.m) {
+		return listMetrics(getMetrics(metricNames));
+	}
+	let metrics;
+	if (flags.p?.length > 0) {
+		metrics = getMetrics([
+			'Repository',
+			'isFork',
+			'isPrivate',
+			...metricNames.filter((name) => flags.p.includes(name)),
+		]);
+	} else {
+		metrics = getMetrics(metricNames);
+	}
+
+	// Additional Filter on repos
+	let filter;
+	if (flags.f?.length === 1 && flags.f[0] === 'templates') {
+		filter = (repo) => repo.isTemplate;
+	}
+	// Get all repositories
+	const { repositories } = await getRepositories(generateQuery, flags, filter);
+	if (!flags.s) {
+		repositories.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
+	}
+	// Generate output table
+	const table = generateDetailTable(metrics, repositories, {
+		actual: flags.actual, all: flags.all, goodness: flags.goodness, sort: flags.s, unactionable: flags.unactionable,
+	});
+
+	if (table) {
+		if (flags.serve) {
+			return table;
+		}
+	}
+	return null;
+};
+
+const executeCommand = async (req, res) => {
+	const { command } = req.body;
+	const argv = parse(command);
+	argv.serve = true;
+	argv.token = process.env.GH_TOKEN; // Is there perhaps a better way or a better place to fetch the token?
+	const output = await detail(argv);
+
+	return res.status(SUCCESS_RES_CODE).json({
+		output,
+	});
+};
+
+module.exports = {
+	executeCommand,
+};

src/static/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/utils.js

@@ -328,9 +328,31 @@ const generateDetailTable = (metrics, rowData, {
 	return table;
 };
 
+const generateGui = (table) => {
+
+	const output = {
+		metrics: [],
+		repos: [],
+		rows: [],
+	};
+
+	for (let i = 0; i < table.length; i++) {
+		output.rows.push(table[i.toString()]
+			.filter((e, j) => j !== 0)
+			.map((e) => (e === symbols.error ? 0 : 1)));
+		output.repos.push(table[i.toString()]
+			.filter((e, j) => j === 0));
+	}
+
+	table.options.head.forEach((element) => output.metrics.push(element));
+	output.metrics.shift();
+	return output;
+};
+
 module.exports = {
 	dumpCache,
 	generateDetailTable,
+	generateGui,
 	getDiffSymbol,
 	getRepositories,
 	isConfigValid,

tailwind.config.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+	darkMode: false,
+	plugins: [],
+	purge: ['./views/**/*.{ejs}'],
+	theme: {
+		extend: {},
+	},
+	variants: {
+		extend: {},
+	},
+};