[WIP] Add a GUI

.env.sample

@@ -0,0 +1,3 @@
+GH_TOKEN=<Your Github Token>
+port=3000
+XDG_CONFIG_HOME=

README.md

@@ -9,12 +9,13 @@
 
 [![npm badge][npm-badge-png]][package-url]
 
+
 CLI to list all repos a user has access to, and report on their configuration in aggregate.
 
 # Installation
 
 - `npm install` to install all dependencies
-- create `.env` file and initialize `GH_TOKEN` or `GITHUB_TOKEN` (in order of precedence) with your Github token
+- run `cp .env.sample .env` and initialize GH_TOKEN or GITHUB_TOKEN (in order of precedence) with your Github token, set the port on which the gui will be served (default=3000) in the newly generated `.env` file.
 
 # Usage (for public)
 

bin/commands/detail.js

@@ -37,6 +37,9 @@ module.exports.builder = (yargs) => {
 			describe: 'Show available metrics',
 			type: 'boolean',
 		})
+		.option('gui', {
+			describe: 'Show output in the form of a webpage',
+		})
 		.help('help')
 		.strict();
 

package.json

@@ -29,13 +29,18 @@
 	"private": false,
 	"dependencies": {
 		"@octokit/graphql": "^4.8.0",
+		"axios": "^0.24.0",
 		"cli-table": "^0.3.11",
 		"colors": "^1.4.0",
 		"dotenv": "^10.0.0",
+		"express": "^4.17.1",
+		"http-status-codes": "^2.2.0",
 		"jsonschema": "^1.4.0",
 		"minimatch": "^3.0.4",
 		"mkdirp": "^1.0.4",
-		"yargs": "^17.3.0"
+		"open": "^8.3.0",
+		"yargs": "^17.3.0",
+		"yargs-parser": "^20.2.9"
 	},
 	"devDependencies": {
 		"@ljharb/eslint-config": "^20.0.0",

src/commands/detail.js

@@ -8,6 +8,7 @@ const {
 	generateDetailTable,
 } = require('../utils');
 
+const server = require('../server/app.js');
 const getMetrics = require('../metrics');
 const Metrics = require('../../config/metrics.js');
 
@@ -124,7 +125,12 @@ module.exports = async function detail(flags) {
 	});
 
 	if (table) {
-		console.log(String(table));
+		if (flags.gui) {
+			server();
+		} else {
+			console.log(String(table));
+		}
+
 	}
 
 	printAPIPoints(points);

src/server/app.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const express = require('express');
+const { executeCommand } = require('./controllers');
+const path = require('path');
+const open = require('open');
+
+module.exports = function server() {
+	const app = express();
+	const { port } = process.env;
+	app.use(express.json());
+	app.use(express.urlencoded({ extended: true }));
+	app.use('/', express.static(path.join(__dirname, '../static')));
+	app.post('/command', executeCommand);
+	app.listen(port, () => {
+		console.log(`Api is listening on port ${port}`);
+		console.log(`View the gui on: http://localhost:${port}/`);
+	});
+	open(`http://localhost:${port}/`);
+};

src/server/controllers.js

@@ -0,0 +1,194 @@
+/* eslint-disable no-magic-numbers */
+
+'use strict';
+
+const { StatusCodes } = require('http-status-codes');
+
+const parse = require('yargs-parser');
+const {
+	listMetrics,
+	getRepositories,
+	generateDetailTable,
+	generateGui,
+} = 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 (Array.isArray(f)) {
+		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
+  }
+}
+`);
+};
+
+/*
+ * DOUBT: Copy-Pasted this function here as I was having issues with importing the function
+ * from src/commands/detail.js
+ */
+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,
+	});
+
+	return table || null;
+};
+
+const executeCommand = async (req, res) => {
+	const { command } = req.body;
+	const argv = parse(command);
+	argv.goodness = true;
+
+	if (!argv.token) {
+		// token not present, so check positional argument to check if GH_TOKEN or GITHUB_TOKEN is present
+		argv._.forEach((element) => {
+			const [key, val] = element.split('=');
+			if (key === 'GH_TOKEN' || key === 'GITHUB_TOKEN') {
+				argv.token = val;
+			}
+		});
+		if (!argv.token) {
+			// no token provided in frontend, hence return 403
+			return res.status(StatusCodes.FORBIDDEN).json({
+				msg: 'env variable GH_TOKEN or GITHUB_TOKEN, or `--token` argument, not found.',
+				success: 0,
+			});
+		}
+	}
+	let output = await detail(argv);
+	output = generateGui(output);
+	return res.status(StatusCodes.OK).json({ output });
+};
+
+module.exports = {
+	executeCommand,
+};