final tweaks, images, mentions, etc

app/federation/client/admin/dashboard.html

@@ -3,7 +3,29 @@
 		<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 class="section">
+					<div class="section-content">
+						<div class="group border-component-color">
+							{{#each federationOverviewData}}
+							<div class="overview-column">
+								<div class="overview-item">
+									<span class="value">{{value}}</span>
+									<span class="title">{{_ title}}</span>
+								</div>
+							</div>
+							{{/each}}
+						</div>
+						<div class="group left wrap border-component-color">
+							{{#each federationPeers}}
+							<div class="overview-column small">
+								<div class="overview-pill">
+									<span class="title">{{domain}}</span>
+								</div>
+							</div>
+							{{/each}}
+						</div>
+					</div>
+				</div>
 			</div>
 		</section>
 	</div>

app/federation/client/admin/dashboard.js

@@ -4,8 +4,6 @@ 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';
@@ -16,72 +14,46 @@ import './dashboard.css';
 // Template controller
 let templateInstance;		// current template instance/context
 
-// Vis datasets
-const visDataSets = {
-	nodes: new vis.DataSet(),
-	edges: new vis.DataSet(),
-};
+// Methods
+const updateOverviewData = () => {
+	Meteor.call('federation:getOverviewData', (error, result) => {
+		if (error) {
+			console.log(error);
 
+			return;
+		}
 
-let latestEventTimestamp = moment().startOf('week');
+		const { data } = result;
 
-// Methods
-const loadContextEvents = () => {
-	Meteor.call('federation:loadContextEvents', latestEventTimestamp.toISOString(), (error, result) => {
+		templateInstance.federationOverviewData.set(data);
+	});
+};
+
+const updateServers = () => {
+	Meteor.call('federation:getServers', (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 { data } = result;
+
+		templateInstance.federationPeers.set(data);
 	});
 };
 
 const updateData = () => {
-	// updateOverviewData();
-	// updatePeerStatuses();
-
-	loadContextEvents();
+	updateOverviewData();
+	updateServers();
 };
 
 Template.dashboard.helpers({
 	federationOverviewData() {
 		return templateInstance.federationOverviewData.get();
 	},
-	federationPeerStatuses() {
-		return templateInstance.federationPeerStatuses.get();
+	federationPeers() {
+		return templateInstance.federationPeers.get();
 	},
 });
 
@@ -90,36 +62,13 @@ Template.dashboard.onCreated(function() {
 	templateInstance = Template.instance();
 
 	this.federationOverviewData = new ReactiveVar();
-	this.federationPeerStatuses = new ReactiveVar();
+	this.federationPeers = 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);
+	setInterval(updateData, 10000);
 });
 
 // Route setup

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>