display modal when connection lost (0ec74b93) · Commits · github_fork / Clip

V1.0-ROADMAP

+0 −2

Original line number	Diff line number	Diff line
		@@ -18,8 +18,6 @@ ROADMAP


		> Core: Frontend
		- show notification when connection lost
		- reconnect on disconnect
		- gauge-view: interval selection dropdown
		- interval selection top like gh.com/graphs/commit-activity) 52w history
		- overview view: gauge list (a'la github graphs landing)

+50 −1

Original line number	Diff line number	Diff line
		@@ -464,3 +464,52 @@ position: relative;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius:2px;
		}

		.flash_msg_over{
		background-color: rgba(0,0,0,0.9);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999999;
		opacity:0;
		-webkit-transition: opacity .3s linear;
		-moz-transition: opacity .3s linear;
		-ms-transition: opacity .3s linear;
		-o-transition: opacity .3s linear;
		transition: opacity .3s linear;
		}

		.flash_msg_over.visible{
		opacity:1;
		}

		.flash_msg_over .inner{ position:fixed; width:600px; height:300px; left:50%; margin-left:-300px; text-align:center; top:30%; }


		.loader_white{
		height: 32px;
		width: 32px;
		background: url('/img/loader_white.gif') no-repeat center center;
		}


		.flash_msg_over h1{
		margin-top: 37px;
		font-weight: bold;
		font-size: 26px;
		color:#444;
		}

		.flash_msg_over h2{
		font-weight: normal;
		font-size: 18px;
		color: #aaa;
		margin-top: 60px;
		}

		.flash_msg_over .loader_white{
		width:auto;
		margin-top:26px;
		}

+3 −0

Original line number	Diff line number	Diff line
		@@ -27,6 +27,9 @@
		%body
		#app

		#preload(style="visibility:hidden;")
		%img(src="/img/loader_white.gif")

		:javascript
		$(document).ready(function(){
		FnordMetric.init(#{current_namespace.to_json});

0 → 100644

+2.49 KiB

Loading image diff...

+25 −5

Original line number	Diff line number	Diff line
		@@ -119,15 +119,12 @@ var FnordMetric = (function(){
		canvasElem = $("<div class='viewport_inner'>");
		canvasElem.addClass('clearfix');

		socket = new WebSocket("ws://localhost:4243");
		socket.onmessage = socketMessage;
		socket.onclose = socketClose;
		socket.onopen = socketOpen;

		var _wrap_elem = $("<div id='wrap'>")
		.append($("<div id='sidebar'>"))
		.append($("<div id='viewport'>").append(canvasElem));

		connect();

		$('#app').html(_wrap_elem);

		$(window).resize(resizeView);
		@@ -136,6 +133,13 @@ var FnordMetric = (function(){
		resizeView();
		};

		function connect(){
		socket = new WebSocket("ws://localhost:4243");
		socket.onmessage = socketMessage;
		socket.onclose = socketClose;
		socket.onopen = socketOpen;
		}

		function publish(obj){
		if(!obj.namespace){
		obj.namespace = FnordMetric.currentNamespace;
		@@ -156,10 +160,26 @@ var FnordMetric = (function(){
		function socketOpen(){
		console.log("connected...");
		publish({"type": "discover_request"});
		$('.flash_msg_over').fadeOut(function(){ $(this).remove(); });
		}

		function socketClose(){
		console.log("socket closed");

		if($('.flash_msg_over').length == 0){
		$(viewport)
		.append($("<div class='flash_msg_over'>")
		.append($("<div class='inner'>")
		.append('<h1>Oopsiedaisy, lost the connection...</h1>')
		.append('<h2>Reconnecting to server...</h2>')
		.append('<div class="loader_white">')));

		window.setTimeout(function(){
		$('.flash_msg_over').addClass('visible');
		}, 20);
		}

		window.setTimeout(connect, 1000);
		}

		function navigateViaHash(){