webservices-app/src/routes/+page.svelte

<script>
	// get the data from the JSON Webservices feed in +page.js
	export let data;
	const { webservices } = data;

	import { references } from '$lib/references.js';
	import { colours } from '$lib/colours.js';

	// the filters
	import { setFilter, getFilter } from '$lib/components/filter.js';
	import Filterable from '$lib/components/Filterable.svelte';
	// collapsible sections
	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
	import TechnologyTile from '$lib/components/TechnologyTile.svelte';

	let tabindex = 0; // a counter which facilitates keyboard navigation.

    //
    // digest and return useful info from the Webservices JSON feed
    function processData(webservices) {
        let stats = { 'instances': 0, 'technologies': 0, 'licenses': 0,'weak': 0, 'copyleft': 0 };
        let all = []; // all services
        let current = []; // those with active instances
        let future = []; // those that are planned
        // properties of technologies
        let category_list = [];
        let analogue_list = [];
        let license_list = [];
        // properties of instances
        let status_list = [];
        let affiliate_list = [];
        let host_list = [];

        // actual objects
        let hosts = [];
        let affiliates = [];

        //
        // just a trivial reassignment
        //let hosts = webservices.hosts;
        //
        // pull out relevant info in useful chunks.
        for (let key in webservices.technologies) {
            let tech = webservices.technologies[key];
            tech['name'] = key;
            console.log('tech '+key+' ('+tech.categories.length+'):', tech.categories);
            if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array) {
                //console.log('tech '+key+' ('+tech.categories.length+'):', tech.categories);
                tech.categories.forEach(function (category, index) {
                    if (category_list.hasOwnProperty(category)) category_list[category]++;
                    else category_list[category] = 1;
                });
            }
            if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array) {
                tech.analogues.forEach(function (analogue, index) {
                    if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
                    else analogue_list[analogue] = 1;
                });
            }
            if (tech.hasOwnProperty('license')) {
                let license = tech.license;
                if (license_list.hasOwnProperty(license)) license_list[license]++;
                else license_list[license] = 1;
            }
            if (hasInstances(tech)) {
                current.push(tech);
                //console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                tech.instances.forEach(function (instance, i) {
					stats.instances++;
                    if (instance.hasOwnProperty('status')) {
                        let tag = instance.status;
                        if (status_list.hasOwnProperty(tag)) status_list[tag]++;
                        else status_list[tag] = 1;
                    }
                    if (instance.hasOwnProperty('affiliation')) {
                        let tag = instance.affiliation;

                        if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
                        else affiliate_list[tag] = 1;
                    }
                    if (instance.hasOwnProperty('host')) {
                        let tag = instance.host;
                        if (host_list.hasOwnProperty(tag)) host_list[tag]++;
                        else host_list[tag] = 1;
                    }
                });
            } else {
                future[key] = tech;
            }
            all[key] = tech;
        }
        for (let key in webservices.hosts) {
            //console.log('key: ', key);
            let host = webservices.hosts[key];
            host['name'] = key;
            //console.log('host: ', host);
            if (
                host.hasOwnProperty('domain') &&
                !(host.hasOwnProperty('status') && host.status == 'retired')
            ) {
                hosts[key] = host;
            }
        }
        for (let key in webservices.affiliates) {
            let affiliate = webservices.affiliates[key];
            affiliates[key] = affiliate;
        }

		// assign stats based on gathered data...
		stats.current = current.length;
		stats.future = future.length;
		console.log('license_list: ', license_list);
		stats.licenses = license_list.length;

        return {
            stats: stats,
            all_services: all,
            active_services: current,
            candidate_services: future,
            tech_lists: {
                category_list: category_list,
                analogue_list: analogue_list,
                license_list: license_list
            },
            instance_lists: {
                status_list: status_list,
                affiliate_list: affiliate_list,
                host_list: host_list
            },
            hosts: hosts,
            affiliates: affiliates
        };
    }

	// return an object with ob's keys ordered alphabetically, with an id from an object
	function getSortedFilter(ob) {
		let keys = [];
		let i = 0;
		let key_array = [];
		// first create a flat array.
		for (let key in ob) {
			keys.push(key);
		}
		// sort the array alphabetically
		keys.sort();
		// then create a dictionary of them
		keys.forEach(function(name) {
			key_array.push({ "id": i++, "name": name, "active": true });
		});
		return key_array;
	}

	// return true if a tech object includes valid instances
	function hasInstances(tech) {
		if (
			tech.hasOwnProperty('instances') &&
			tech.instances.constructor === Array &&
			tech.instances.length
		) return true;
		return false;
	}


	// get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
	function getIntersection(a, b) {
		const set1 = new Set(a);
		const set2 = new Set(b);

		const intersection = [...set1].filter((element) => set2.has(element));

		return intersection;
	}


	// assign colours from a set of differentiated colours to a list of tags...
	// this one is for 'hosts'
	//
	// host_list is in the form of
	function hostColours(host_list, colours, hosts) {
		let host_array = {};
		let i = 0;

		console.log('hosts:', hosts);
		console.log('host_list:', host_list);

		for (let index in host_list) {
			console.log(host_list[index]);
			let hostname = host_list[index].name;
			if (hosts[hostname].hasOwnProperty('domain') && hosts[hostname].hasOwnProperty('affiliation')) {
				host_array[hostname] = {
					colour: colours[i++],
					domain: hosts[hostname].domain,
					affiliation: hosts[hostname].affiliation
				};
			}
		}
		return host_array;
	}

	// assign colours from a set of differentiated colours to a list of tags...
	// this one is for 'affiliates'
	function affiliateColours(affiliate_list, colours, affiliates) {
		let affiliate_result = {};
		let i = 0;

		//console.log('affiliates:', affiliates);
		console.log('affiliate_list:', affiliate_list);

		for (let index in affiliate_list) {
			//console.log('affiliate:', affiliate);
			let affiliate = affiliate_list[index].name;
			if (
				affiliates[affiliate].hasOwnProperty('name') &&
				affiliates[affiliate].hasOwnProperty('website')
			) {
				affiliate_result[affiliate] = {
					colour: colours[i++],
					name: affiliates[affiliate].name,
					website: affiliates[affiliate].website
				};
			}
		}
		return affiliate_result;
	}

	// sort technologies alphabetically by name
	function sortTechnologies(technologies) {
		return technologies.sort((a, b) => a.name.localeCompare(b.name));
	}

	// generic function to find the intersection of two arrays
	// approach ref: https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
	function inCommon(a, b) {
		const set1 = new Set(a);
		const set2 = new Set(b);

		const intersection = [...set1].filter((element) => set2.has(element));
		//console.log('intersection = ', intersection);
		return intersection;
	}

	// converts a filter with id, name, and active fields into an array of names
	function flattenFilter(filter) {
		let flat = [];
	    if (filter.constructor === Array) {
			filter.forEach(function(e) { if (e.active) flat.push(e.name) });
	    }
		return flat;
	}

	// filter technologies based on an array of filterables on tech and a list of filters
	function filterTechnologiesByArray(technologies, field, list) {
		const included = [];
		technologies.forEach(function (tech) {
			if (hasInstances(tech)) {
			    let arr = tech[field]
				const intersection = inCommon(arr, list);
				if (intersection && intersection.constructor === Array) {
					console.log('intersection length: ', intersection.length);
					if (intersection.length > 0) {
						included.push(tech);
					}
				}
			}
		});
		//console.log('found ' + included.length + ' technologies.');
		return included;
	}

	// filter technologies based on a single filterable value on tech and a list of filters
	function filterTechnologiesByValue(technologies, field, list) {
		const included = [];
		technologies.forEach(function (tech) {
			if (hasInstances(tech)) {
				let arr = [tech[field]];
				const intersection = inCommon(arr, list);
				if (intersection && intersection.constructor === Array) {
					console.log('intersection length: ', intersection.length);
					if (intersection.length > 0) {
						included.push(tech);
					}
				}
			}
		});
		//console.log('found ' + included.length + ' technologies.');
		return included;
	}

	//
	// process the data received by the web request!
	const results = processData(webservices);

	//const technologies = webservices.technologies;
	//console.log(technologies);

	// set up filters for each type
	setFilter('categories');
	setFilter('analogues');
	setFilter('licenses');
	setFilter('statuses');
	setFilter('affiliates');
	setFilter('hosts');

	// define the handle for each writable
	const categoryFilter = getFilter('categories');
	const analogueFilter = getFilter('analogues');
	const licenseFilter = getFilter('licenses');
	const statusFilter = getFilter('statuses');
	const affiliateFilter = getFilter('affiliates');
	const hostFilter = getFilter('hosts');

	// populate the writable with actual data
	$categoryFilter = getSortedFilter(results.tech_lists.category_list);
	$analogueFilter = getSortedFilter(results.tech_lists.analogue_list);
	$licenseFilter = getSortedFilter(results.tech_lists.license_list);
	$statusFilter = getSortedFilter(results.instance_lists.status_list);
	$affiliateFilter = getSortedFilter(results.instance_lists.affiliate_list);
	$hostFilter = getSortedFilter(results.instance_lists.host_list);

	const hosts = results.hosts;
	console.log('host_data: ', results.hosts);
	const affiliates = results.affiliates;
	console.log('affiliate_data: ', results.affiliates);
	const host_colours = hostColours($hostFilter, colours, hosts);
	console.log('host_colours:', host_colours);
	colours.sort();
	const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
	console.log('affiliate_colours:',affiliate_colours);

	let filteredTechnologies;
	let technologies;

	// reactive stuff...
	$: {
		console.log('about to filterTechnologiesByCategoryList');
		// filter by categories
		filteredTechnologies = filterTechnologiesByArray(results.active_services, 'categories',
			flattenFilter($categoryFilter));
		// filter by analogues
		filteredTechnologies = filterTechnologiesByArray(filteredTechnologies, 'analogues',
			flattenFilter($analogueFilter));
		filteredTechnologies = filterTechnologiesByValue(filteredTechnologies, 'license',
			flattenFilter($licenseFilter));

		//filteredTechnologies = filterTechnologiesByCategoryList(results.all_services, flattenFilter($categoryFilter));
		const technologies = sortTechnologies(filteredTechnologies);
	}

</script>

<div class="webservices">
	<div class="introduction">
		<div class="summary-wrapper">
			<div class="summary">
				<h2>Statistics</h2>
				<ul>
					<li><span class="label">Number of individual services: <span class="number">{results.stats.instances}</span></li>
					<li><span class="label">Number of individual technologies: <span class="number">{results.stats.current}</span></li>
					<li><span class="label">Number of new technologies to be added: <span class="number">{results.stats.future}</span></li>
					<li><span class="label">Number of libre licenses used by these technologies: <span class="number">{results.stats.licenses}</span>
					<ul>
						<li><span class="label">'weak' corporate-exploitation-friendly open source licenses : <span class="number">{results.stats.weak}</span></li>
						<li><span class="label">'strong' user-protecting copyleft licenses: <span class="number">{results.stats.copyleft}</span></li>
					</ul>
					</li>

					<li><span class="label">Total number of services: <span class="number">{results.stats.instances}</span></li>
				</ul>
			</div>
		</div>
		<h1>Web Services</h1>
		<p>This sites exists to provide an 'always-up-to-date', in-depth description of the
			<a href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values"
			title="What do I mean by 'libre' software?">libre software</a> web services I (<a href="https://davelane.nz" title="Who is this Dave Lane character?">Dave Lane</a>) have set up and maintain.
		</p>
		<p>These services are run primarily on commodity Linux Virtual Private Servers, aka 'hosts', which I also maintain. Some systems are also run on real physical hosts either in my home hosting facility or in commercial hosting facilities. These hosts are based in Aotearoa NZ, Singapore, the US, and in Germany. Almost all run an LTS (Long Term Support) version of Ubuntu Linux although a few hosts run Debian Linux.</p>
		<p>Almost all the hosts are <a href="https://tech.oeru.org/creating-your-own-oer-foundation-style-libre-self-hosting-infrastructure-docker-compose-and-ubuntu">configured in a particular way</a> which allows multiple services to run harmoniously on the same host. I use a set of somewhere between one and twenty-one Docker containers (which I run via Docker Compose) for each service, to keep different services, each of which has different software dependencies, from interfering with one another. Each service is made available to the Internet via a 'reverse proxy' (for which I use Nginx) and user interactions with them are secured (encrypted) with Let's Encrypt SSL certificates (which renew automatically).
		</p>
		<p>To manage the servers and keep them up-to-date, I use SSH to establish secure encrypted connections to them (via key-based authentication). I run updates of the hosts manually, and update individual services when required (urgently if updates are security-related). Some of the Docker containers I run I have built myself, in other cases I use those supplied by the communities developing the service.</p>
		<p>One huge advantage of the Docker Compose pattern is that I can rapidly move services between different hosts, or even replicate services very rapidly for development or staging purposes. Using them has revolutionised my hosting processes.</p>
	</div>
	<CollapsibleSection  headerText={'Filters'}>
		<div class="filters">
			<CollapsibleSection  headerText={'Software Catergory Filter'}>
				<div class="filter-group categories">
					<Filterable filterValues={categoryFilter}
						histogram={results.tech_lists.category_list} context={'categories'}>
						<h2 slot="title">Categories</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
			<CollapsibleSection  headerText={'Software Analogue Filter'}>
				<div class="filter-group analogues">
					<Filterable filterValues={analogueFilter}
						tabindex={tabindex}
						histogram={results.tech_lists.analogue_list} context={'analogues'}>
						<h2 slot="title">Analogues</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
			<CollapsibleSection  headerText={'License Filter'}>
				<div class="filter-group licenses">
					<Filterable filterValues={licenseFilter}
						tabindex={tabindex}
						histogram={results.tech_lists.license_list} context={'licenses'}>
						<h2 slot="title">Open Source & Copyleft Licenses</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
			<CollapsibleSection  headerText={'Service Status Filter'}>
				<div class="filter-group statuses">
					<Filterable filterValues={statusFilter}
						tabindex={tabindex}
						histogram={results.instance_lists.status_list} context={'statuses'}>
						<h2 slot="title">Statuses</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
			<CollapsibleSection  headerText={'Service Affiliates Filter'}>
				<div class="filter-group affilates">
					<Filterable filterValues={affiliateFilter}
						tabindex={tabindex}
						histogram={results.instance_lists.affiliate_list}
						context={'affiliates'}><h2 slot="title">Affiliates</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
			<CollapsibleSection  headerText={'Service Host filter'}>
				<div class="filter-group hosts">
					<Filterable filterValues={hostFilter}
						tabindex={tabindex}
						histogram={results.instance_lists.host_list} context={'hosts'}>
						<h2 slot="title">Hosts</h2>
					</Filterable>
				</div>
			</CollapsibleSection>
		</div>
	</CollapsibleSection>
	<div class="tiles">
		{#each filteredTechnologies as technology}
		<TechnologyTile technology={technology} affiliate_colours={affiliate_colours} />
		{/each}
	</div>
</div>

<style>
	.webservices {
		display: grid;
		margin: 0 auto 3em auto;
		padding: 0;
		position: relative;
	}
	.introduction {
	    width: 100%;
	}
	.summary-wrapper {
		content: '';
		display: block;
		float: right;
		padding: 0;
		margin: 0;
	}
	.summary {
		border-radius: 15px;
	    float: right;
	    clear: both;
	    /*display: block;*/
	    background-color: #ccc;
	    /*display: block;*/
	    max-width: 30%;
	    min-width: 30em;
	    border: 2px #aaa solid;
	    margin: 0 15px 20px 6px;
	    padding: 0 20px;
	    box-shadow: 6px 6px 20px #999;
	}
	.summary .label { color: #666; }
	.summary .number { color: #000; }
	@media screen and (max-width: 600px) {
		.summary {
			float: none;
			width: 90%;
			margin: auto;
		}
	}
</style>