app/views/admin/manage-experiments.blade.php

@extends('layout.basic') @section('page-header') @parent {{ HTML::style('css/admin.css')}} {{ HTML::style('css/datetimepicker.css')}} @stop @section('content') <div id="wrapper">  @include( 'partials/dashboard-block') <div id="page-wrapper"> <div class="col-md-12"> <h2>Experiments</h2> </div> <div class="container-fluid"> <div class="well form-group form-horizontal col-md-12"> <label class="col-md-3">Enter Experiment Id to View Summary :</label> <div class="col-md-6"> <input type="text" class="form-control experimentId"/> </div> <button class="col-md-3 btn btn-primary get-experiment" disabled="disabled">Get</button> <div class="loading-img hide text-center"><img src="{{URL::to('/')}}/assets/ajax-loader.gif"/></div> </div> </div>  <ul class="nav nav-tabs" role="tablist" id="myTabs"> <li role="presentation" class="active"><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a></li>  </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="overview"> <div class="well col-md-12"> <div class="col-md-10"> <div class="row"> <div class='col-md-5'> <div class="form-group"> <input type='button' class="oneDayExp form-control btn-primary" value="Get Experiments from Last 24 hours"/> </div> </div> <div class='col-md-5'> <div class="form-group"> <input type='button' class="oneWeekExp form-control btn-primary" value="Get Experiments from Last Week"/> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h4>Select dates between which you want to review experiment statistics.</h4> </div> </div> <div class="row"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker9'> <input type='text' class="form-control" placeholder="From Date" name="from-date"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker10'> <input type='text' class="form-control" placeholder="To Date" name="to-date"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class="col-md-2"> <button name="getStatistics" id="getStatistics" type="submit" class="btn btn-primary" value="GetStatistics"><span class="glyphicon glyphicon-search"></span> Get Statistics </button> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="btn-group"> <button id="add-filter-dropdown" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Add Filter <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a id="add-username-filter" href="#">Username</a></li> <li><a id="add-appname-filter" href="#">Application Name</a></li> <li><a id="add-hostname-filter" href="#">Hostname</a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-md-5 hide" id="username-filter-row"> <div class="form-group"> <div class='input-group'> <input type='text' class="form-control" placeholder="Username" id="username" name="username"/> <div class="input-group-btn"> <button id="remove-username-filter" class="btn btn-default" type="button"> <span class="glyphicon glyphicon-remove"></span> </button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5 hide" id="appname-filter-row"> <div class="form-group"> <div class='input-group'> <select id="appname" name="appname" class="form-control"> <option value="">Select Application</option> @foreach ($applications as $applicationId => $applicationName) <option value="{{ $applicationId }}">{{{ $applicationName }}}</option> @endforeach </select> <div class="input-group-btn"> <button id="remove-appname-filter" class="btn btn-default" type="button"> <span class="glyphicon glyphicon-remove"></span> </button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5 hide" id="hostname-filter-row"> <div class="form-group"> <div class='input-group'> <select id="hostname" name="hostname" class="form-control"> <option value="">Select Hostname</option> @foreach ($hostnames as $hostnameId => $hostname) <option value="{{ $hostnameId }}">{{{ $hostname }}}</option> @endforeach </select> <div class="input-group-btn"> <button id="remove-hostname-filter" class="btn btn-default" type="button"> <span class="glyphicon glyphicon-remove"></span> </button> </div> </div> </div> </div> </div> </div> </div> <div class="experiment-statistics"></div> <div class="loading-img-statistics hide text-center"><img src="{{URL::to('/')}}/assets/ajax-loader.gif"/></div>                                                                                                                                                                                                         </div>  </div> </div>  </div>  </div> @stop @section('scripts') @parent {{ HTML::script('js/gateway.js') }} {{ HTML::script('js/moment.js')}} {{ HTML::script('js/datetimepicker-3.1.3.js')}}     {{ HTML::script('js/time-conversion.js')}} {{ HTML::script('js/util.js')}} <script> //make first tab of accordion open by default. //temporary fix $("#accordion2").children(".panel").children(".collapse").addClass("in"); $(".add-tenant").slideUp(); $(".toggle-add-tenant").click(function () { $(".add-tenant").slideDown(); }); $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').on('click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); }); $(".experimentId").keyup( function(){ if( $.trim( $(this).val()) == "") $(".get-experiment").attr("disabled", "disabled"); else $(".get-experiment").removeAttr("disabled"); }); $(".get-experiment").click(function () { var expId = $(".experimentId").val(); var expHTMLId = util.sanitizeHTMLId(expId); if( $("#" + expHTMLId).length <= 0){ $(".loading-img").removeClass("hide"); $.ajax({ url: 'experiment/summary?expId=' + encodeURIComponent(expId), type: 'get', success: function (data) { $("#myTabs").append('<li role="presentation"><a href="#' + expHTMLId + '" aria-controls="' + expHTMLId + '" role="tab" data-toggle="tab"><span class="expid-label"></span><button type="button" style="margin-left:10px;" class="close pull-right close-tab" aria-label="Close"><span aria-hidden="true">×</span></button></a></li>'); // Set expId with .text() so it gets properly escaped $('#myTabs a[href="#' + expHTMLId + '"] .expid-label').text(expId); $(".tab-content").append('<div role="tabpanel" class="tab-pane" id="' + expHTMLId + '"></div>'); $(".tab-content #" + expHTMLId).html(data); $('#myTabs a[href="#' + expHTMLId + '"]').tab('show'); // Select tab by name //$('#myTabs a[href="#expsummary"]').tab('show') // Select tab by name //from time-conversion.js updateTime(); } }).complete(function () { $(".loading-img").addClass("hide"); }); } else { // Experiment data already loaded so just show it $('#myTabs a[href="#' + expHTMLId + '"]').tab('show'); } }); $(".experiment-statistics").on("click", ".get-exp-stats", function(){ var expId = $(this).data("expid"); $(".experimentId").val( expId); $(".get-experiment").click(); $('html, body').animate({ scrollTop: $(".get-experiment").offset().top - 100 }, 1000); }); $("body").on("click", ".close-tab", function(){ var tabContentSelector = $(this).closest("a").attr("href"); // Remove tab and tab's content $(this).closest("li").remove(); $(tabContentSelector).remove(); // Show the overview tab $('#myTabs a[href="#overview"]').tab('show'); }); //Experiment stages are under development. $(".tree").parent().addClass("hide"); /* making datetimepicker work for exp stat search */ $('#datetimepicker9').datetimepicker({ pick12HourFormat: false }); $('#datetimepicker10').datetimepicker({ pick12HourFormat: false }); $("#datetimepicker9").on("dp.change", function (e) { $('#datetimepicker10').data("DateTimePicker").setMinDate(e.date); //hack to close calendar on selecting date $(this).find(".glyphicon-calendar").click(); }); $("#datetimepicker10").on("dp.change", function (e) { $('#datetimepicker9').data("DateTimePicker").setMaxDate(e.date); //hack to close calendar on selecting date $(this).find(".glyphicon-calendar").click(); }); // Clear any lingering values in the additional filter fields $('#username, #appname, #hostname').val(''); $(".oneDayExp").click( function(){ var todayDate = getCurrentDate(); var ydayDate = getCurrentDate(1); $("#datetimepicker9").find("input").val( ydayDate); $("#datetimepicker10").find("input").val( todayDate); todayDate = moment(todayDate).utc().format('MM/DD/YYYY hh:mm a'); ydayDate = moment(ydayDate).utc().format('MM/DD/YYYY hh:mm a'); var msg = "Experiments statistics from last 24 hours"; var username = $('#username').val().trim(); var appname = $('#appname').val().trim(); var hostname = $('#hostname').val().trim(); getExperiments( ydayDate, todayDate, username, appname, hostname, msg); }); $(".oneWeekExp").click( function(){ var todayDate = getCurrentDate(); var ydayDate = getCurrentDate(7); $("#datetimepicker9").find("input").val( ydayDate); $("#datetimepicker10").find("input").val( todayDate); todayDate = moment(todayDate).utc().format('MM/DD/YYYY hh:mm a'); ydayDate = moment(ydayDate).utc().format('MM/DD/YYYY hh:mm a'); var msg = "Experiments statistics from last week"; var username = $('#username').val().trim(); var appname = $('#appname').val().trim(); var hostname = $('#hostname').val().trim(); getExperiments( ydayDate, todayDate, username, appname, hostname, msg); }) $("#getStatistics").click(function () { $fromTime = $("#datetimepicker9").find("input").val(); $fromTime = moment($fromTime).utc().format('MM/DD/YYYY hh:mm A'); $toTime = $("#datetimepicker10").find("input").val(); $toTime = moment($toTime).utc().format('MM/DD/YYYY hh:mm A'); var username = $('#username').val().trim(); var appname = $('#appname').val().trim(); var hostname = $('#hostname').val().trim(); if ($fromTime == '' || $toTime == '') { alert("Please Select Valid Date Inputs!"); } else { getExperiments( $fromTime, $toTime, username, appname, hostname); } }); $("#add-username-filter").click(function() { $("#username-filter-row").removeClass("hide"); $("#username-filter-row input").focus(); $("#add-filter-dropdown").dropdown('toggle'); $("#add-username-filter").addClass("hide"); return false; }); $("#remove-username-filter").click(function() { $("#username-filter-row").addClass("hide"); $("#username-filter-row input").val(''); $("#add-username-filter").removeClass("hide"); }); $("#add-appname-filter").click(function() { $("#appname-filter-row").removeClass("hide"); $("#appname-filter-row select").focus(); $("#add-filter-dropdown").dropdown('toggle'); $("#add-appname-filter").addClass("hide"); return false; }); $("#remove-appname-filter").click(function() { $("#appname-filter-row").addClass("hide"); $("#appname-filter-row select").val(''); $("#add-appname-filter").removeClass("hide"); }); $("#add-hostname-filter").click(function() { $("#hostname-filter-row").removeClass("hide"); $("#hostname-filter-row select").focus(); $("#add-filter-dropdown").dropdown('toggle'); $("#add-hostname-filter").addClass("hide"); return false; }); $("#remove-hostname-filter").click(function() { $("#hostname-filter-row").addClass("hide"); $("#hostname-filter-row select").val(''); $("#add-hostname-filter").removeClass("hide"); }); // get statistics if user presses ENTER key in username filter field $("#username").keydown(function(e) { if (e.which === 13) { $('#getStatistics').click(); return false; } }); // Load experiments from the last 24 hours on page load. $(".oneDayExp").click(); function getExperiments( startTime, endTime, username, appname, hostname, msg){ $(".experiment-statistics").html(""); $(".loading-img-statistics").removeClass("hide"); $.ajax({ url: 'experimentStatistics?fromTime=' + startTime + '&' + 'toTime=' + endTime + (username ? '&username=' + encodeURIComponent(username) : '') + (appname ? '&appname=' + encodeURIComponent(appname) : '') + (hostname ? '&hostname=' + encodeURIComponent(hostname) : ''), type: 'get', success: function (data) { if( msg == null){ start = new Date(startTime + ' UTC'); end = new Date(endTime + ' UTC'); msg = "Experiment Statistics from " + start.toLocaleString() + " to " + end.toLocaleString(); } // TODO: update message to include username, appname and hostname? $(".experiment-statistics").html( "<h2 class='text-center'>" + msg + "</h2><hr/>" + data); } }).complete(function () { $(".loading-img-statistics").addClass("hide"); }); } function getCurrentDate( subtractDaysFromToday){ var cd = new Date(); if( subtractDaysFromToday!= null) { cd = new Date( cd.setDate( cd.getDate() - subtractDaysFromToday) ); } var hours = cd.getHours(); month = cd.getMonth() + 1; //getmonth()starts from 0 for some reason var timeOfDay = "AM"; if(hours >= 12) { timeOfDay = "PM" if(hours != 12) hours = hours - 12; } var date = cd.getDate(); var todayDate = month + "/" + date + "/" + cd.getFullYear() + " " + hours + ":" + cd.getUTCMinutes() + " " + timeOfDay; return todayDate; } $ </script> @stop

app/views/admin/manage-experiments.blade.php (363 lines of code) (raw):