[BREAK] Federation refactor with addition of chained events

app/federation/client/admin/dashboard.html

@@ -16,11 +16,10 @@
 							{{/each}}
 						</div>
 						<div class="group left wrap border-component-color">
-							{{#each federationPeerStatuses}}
+							{{#each federationPeers}}
 							<div class="overview-column small">
-								<div class="overview-pill" title="{{status}} - {{statusAt}}">
-									<div class="status {{status}}"></div>
-									<span class="title">{{peer}}</span>
+								<div class="overview-pill">
+									<span class="title">{{domain}}</span>
 								</div>
 							</div>
 							{{/each}}

app/federation/client/admin/dashboard.js

@@ -21,7 +21,6 @@ const updateOverviewData = () => {
 			console.log(error);
 
 			return;
-			// return handleError(error);
 		}
 
 		const { data } = result;
@@ -30,32 +29,31 @@ const updateOverviewData = () => {
 	});
 };
 
-const updatePeerStatuses = () => {
-	Meteor.call('federation:getPeerStatuses', (error, result) => {
+const updateServers = () => {
+	Meteor.call('federation:getServers', (error, result) => {
 		if (error) {
 			console.log(error);
 
 			return;
-			// return handleError(error);
 		}
 
 		const { data } = result;
 
-		templateInstance.federationPeerStatuses.set(data);
+		templateInstance.federationPeers.set(data);
 	});
 };
 
 const updateData = () => {
 	updateOverviewData();
-	updatePeerStatuses();
+	updateServers();
 };
 
 Template.dashboard.helpers({
 	federationOverviewData() {
 		return templateInstance.federationOverviewData.get();
 	},
-	federationPeerStatuses() {
-		return templateInstance.federationPeerStatuses.get();
+	federationPeers() {
+		return templateInstance.federationPeers.get();
 	},
 });
 
@@ -64,7 +62,7 @@ Template.dashboard.onCreated(function() {
 	templateInstance = Template.instance();
 
 	this.federationOverviewData = new ReactiveVar();
-	this.federationPeerStatuses = new ReactiveVar();
+	this.federationPeers = new ReactiveVar();
 });
 
 Template.dashboard.onRendered(() => {

app/federation/client/admin/visualizer.css

@@ -0,0 +1,141 @@
+.status {
+	flex: 0 0 auto;
+
+	width: 6px;
+	height: 6px;
+	margin: 0 7px;
+
+	border-radius: 50%;
+}
+
+.status.stable {
+	background-color: #2de0a5;
+}
+
+.status.unstable {
+	background-color: #ffd21f;
+}
+
+.status.failing {
+	background-color: #f5455c;
+}
+
+.frame {
+	display: flex;
+	flex-direction: row;
+}
+
+.group {
+	display: flex;
+	flex-direction: row;
+	flex: 100%;
+
+	max-width: 100%;
+	margin: 10px;
+
+	border-width: 1px;
+	align-items: center;
+	justify-content: center;
+}
+
+.group.left {
+	justify-content: flex-start;
+}
+
+.group.wrap {
+	flex-wrap: wrap;
+}
+
+.overview-column {
+	flex: 100%;
+
+	min-height: 20px;
+	margin: 15px 0;
+}
+
+.overview-column.small {
+	max-width: 20%;
+}
+
+.group .overview-column:not(:last-child) {
+	border-right: 1px solid #e9e9e9;
+}
+
+.group .overview-column:nth-child(5n) {
+	border-right: 0;
+}
+
+.overview-pill {
+	display: flex;
+
+	width: 100%;
+	padding: 0 10px;
+
+	user-select: text;
+	text-align: center;
+	align-items: center;
+}
+
+.overview-item {
+	width: 100%;
+
+	user-select: text;
+	text-align: center;
+}
+
+.overview-item > .title {
+	display: inline-block;
+
+	margin-top: 8px;
+
+	text-transform: uppercase;
+
+	color: #9ea2a8;
+
+	font-size: 0.875rem;
+	font-weight: 300;
+}
+
+.overview-item > .value {
+	display: inline-block;
+
+	width: 100%;
+
+	text-transform: capitalize;
+
+	color: #383838;
+
+	font-size: 1.75rem;
+	font-weight: 400;
+	line-height: 1;
+}
+
+@media screen and (max-width: 925px) {
+	.overview-item > .title {
+		font-size: 0.5rem;
+	}
+
+	.overview-item > .value {
+		font-size: 1rem;
+	}
+}
+
+@media screen and (max-width: 800px) {
+	.overview-item > .title {
+		font-size: 0.875rem;
+	}
+
+	.overview-item > .value {
+		font-size: 1.75rem;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.overview-item > .title {
+		font-size: 0.5rem;
+	}
+
+	.overview-item > .value {
+		font-size: 1rem;
+	}
+}

app/federation/client/admin/visualizer.html

@@ -0,0 +1,10 @@
+<template name="dashboard">
+	<div class="main-content-flex">
+		<section class="page-container page-list flex-tab-main-content">
+			{{> header sectionName="Federation_Dashboard"}}
+			<div class="content">
+				<div id="network" style="height: 900px"></div>
+			</div>
+		</section>
+	</div>
+</template>

app/federation/client/admin/visualizer.js

@@ -0,0 +1,141 @@
+import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { BlazeLayout } from 'meteor/kadira:blaze-layout';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+import vis from 'vis';
+import moment from 'moment';
+
+import { AdminBox } from '../../../ui-utils';
+import { hasRole } from '../../../authorization';
+
+import './visualizer.html';
+import './visualizer.css';
+
+// Template controller
+let templateInstance;		// current template instance/context
+
+// Vis datasets
+const visDataSets = {
+	nodes: new vis.DataSet(),
+	edges: new vis.DataSet(),
+};
+
+
+let latestEventTimestamp = moment().startOf('week');
+
+// Methods
+const loadContextEvents = () => {
+	Meteor.call('federation:loadContextEvents', latestEventTimestamp.toISOString(), (error, result) => {
+		if (error) {
+			console.log(error);
+
+			return;
+		}
+
+		for (const event of result) {
+			let label = '';
+
+			switch (event.type) {
+				case 'genesis':
+					label = `[${ event.origin }] Genesis`;
+					break;
+				case 'room_add_user':
+					label = `[${ event.origin }] Added user => ${ event.data.user.username }`;
+					break;
+				case 'room_message':
+					label = `[${ event.origin }] New message => ${ event.data.message.msg.substring(0, 10) }`;
+					break;
+			}
+
+			visDataSets.nodes.add({
+				id: event._id,
+				label,
+			});
+
+			for (const previous_id of event.parentIds) {
+				visDataSets.edges.add({
+					id: `${ event._id }${ previous_id }`,
+					from: previous_id,
+					to: event._id,
+				});
+			}
+
+			if (latestEventTimestamp === null || event.timestamp > latestEventTimestamp) {
+				latestEventTimestamp = event.timestamp;
+			}
+		}
+	});
+};
+
+const updateData = () => {
+	// updateOverviewData();
+	// updatePeerStatuses();
+
+	loadContextEvents();
+};
+
+Template.dashboard.helpers({
+	federationOverviewData() {
+		return templateInstance.federationOverviewData.get();
+	},
+	federationPeerStatuses() {
+		return templateInstance.federationPeerStatuses.get();
+	},
+});
+
+// Events
+Template.dashboard.onCreated(function() {
+	templateInstance = Template.instance();
+
+	this.federationOverviewData = new ReactiveVar();
+	this.federationPeerStatuses = new ReactiveVar();
+});
+
+Template.dashboard.onRendered(() => {
+	Tracker.autorun(updateData);
+
+	// Setup vis.js
+	new vis.Network(templateInstance.find('#network'), visDataSets, {
+		layout: {
+			hierarchical: {
+				direction: 'UD',
+				sortMethod: 'directed',
+			},
+		},
+		interaction: { dragNodes: false },
+		physics: {
+			enabled: false,
+		},
+		configure: {
+			filter(option, path) {
+				if (path.indexOf('hierarchical') !== -1) {
+					return true;
+				}
+				return false;
+			},
+			showButton: false,
+		},
+	});
+
+	setInterval(updateData, 5000);
+});
+
+// Route setup
+
+FlowRouter.route('/admin/federation-dashboard', {
+	name: 'federation-dashboard',
+	action() {
+		BlazeLayout.render('main', { center: 'dashboard', old: true });
+	},
+});
+
+AdminBox.addOption({
+	icon: 'discover',
+	href: 'admin/federation-dashboard',
+	i18nLabel: 'Federation Dashboard',
+	permissionGranted() {
+		return hasRole(Meteor.userId(), 'admin');
+	},
+});

app/federation/client/index.js

@@ -1,2 +1,6 @@
-import './messageTypes';
 import './admin/dashboard';
+
+import './tabBar';
+
+import './views/federationFlexTab.html';
+import './views/federationFlexTab.js';