Skip to content

Commit

Permalink
added a mapreduce page and a couple of images and some js
Browse files Browse the repository at this point in the history
  • Loading branch information
jgnewman committed May 24, 2012
1 parent 2638a66 commit d71b289
Show file tree
Hide file tree
Showing 7 changed files with 484 additions and 21 deletions.
Binary file added priv/admin/images/add-phase.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified priv/admin/images/close-error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion priv/admin/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
<li id="nav-snapshot" class="nav-li"><a class="gui-text-bold nav-item">Snapshot</a></li>
<li id="nav-cluster" class="nav-li"><a class="gui-text-bold nav-item">Cluster</a></li>
<li id="nav-ring" class="nav-li"><a class="gui-text-bold nav-item">Ring</a></li>
<li id="nav-mapreduce" class="nav-li"><a class="gui-text-bold nav-item">MapReduce</a></li>
<li id="nav-objects" class="nav-li-disabled"><a class="gui-text-bold nav-item">Objects</a></li>
<li id="nav-mapreduce" class="nav-li-disabled"><a class="gui-text-bold nav-item">Map/Reduce</a></li>
<li id="nav-graphs" class="nav-li-disabled"><a class="gui-text-bold nav-item">Graphs</a></li>
<li id="nav-logs" class="nav-li-disabled"><a class="gui-text-bold nav-item">Logs</a></li>
<li id="nav-support" class="nav-li-disabled"><a class="gui-text-bold nav-item">Support</a></li>
Expand Down
140 changes: 140 additions & 0 deletions priv/admin/js/mapreduce.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@

$(document).ready(function () {

var this_node = undefined;

var stopping = {};

var pingAllowed = true;

/* MAKE SLIDING SWITCHES WORK */
// Define a function that will show the proper message when the slider moves
function showMsg(elem) {
var me = elem;
var myHandle = me.find('.ui-slider-handle');
var handlePos = parseInt(myHandle.css('left'));
var myMsg = me.parent().find('.gui-slider-msg');
if (handlePos > 99) {
myMsg.filter('.isRight').fadeIn(200);
} else if (handlePos === 0) {
myMsg.filter('.isLeft').fadeIn(200);
}
}
// Enable jQuery UI slider method on divs classed 'gui-slider-groove'.
// Contains some extra handling for when someone lets go of the slider
// before it has moved all the way over and for handling the message
// as well.
$(document).on('initSlider', '.gui-slider-groove', function () {
$(this).slider({
start : function () {
// Disallow pings while the slider handle is dragging
pingAllowed = false;
},
slide : function() {
var me = $(this);
var myMsg = me.parent().find('.gui-slider-msg');
myMsg.fadeOut(200);
},
change: function() {
showMsg($(this));
},
stop : function() {
var me = $(this);
var myHandle = me.find('.ui-slider-handle');
var handlePos = myHandle.css('left');
//var node = $(this).closest('tr').find('.name').text();
//var siblingRowName = $(this).closest('tr').attr('name') + '-more-actions';
// Re-allow pings when we let go of the slider handle
// And tell it to ping since the ping loop will have died
pingAllowed = true;
//get_cluster_status();
if (handlePos === '100%') {
//leave_cluster(node);
//open_sibling_row(siblingRowName, node);
} else if (parseInt(handlePos) < (me.width() * .66)) {
myHandle.animate({left:'0px'},{
queue:false,
duration:200,
complete:function() {
showMsg($(this).parent());
//close_sibling_row(siblingRowName);
}
});
} else {
myHandle.animate({left:'100%'},{
queue:false,
duration:200,
complete:function () {
//var node = $(this).closest('tr').find('.name').text();
//var siblingRowName = $(this).closest('tr').attr('name') + '-more-actions';
showMsg($(this).parent());
//open_sibling_row(siblingRowName, node);
}
});
}
}
});
$(this).find('a').removeAttr('href');
});
/*
Enable this section if your slider message container does not extend to the edge
of the slider.
*/
$(document).on('click', '.gui-slider-activate', function() {
var me = $(this);
var myHandle = me.next('.gui-slider-groove').find('.ui-slider-handle');
var handlePos = parseInt(myHandle.css('left'));
me.next('.gui-slider-groove').find('.gui-slider-msg').fadeOut(200);
if (handlePos < 100) {
myHandle.animate({left:'100%'},{
queue:false,
duration:200,
complete:function () {
var node = $(this).closest('tr').find('.name').text();
var siblingRowName = $(this).closest('tr').attr('name') + '-more-actions';
showMsg($(this).parent());
open_sibling_row(siblingRowName, node);
}
});
}
});
// END CODE FOR SLIDING SWITCHES

// Code for opening rows and whatnot
$(document).on('click', '.edit-phase-button', function () {
var parentRow = $(this).parent().parent(),
siblingRow = parentRow.next('tr'),
editButton = parentRow.find('.edit-phase-button');
parentRow.addClass('highlight');
siblingRow.show();
editButton.fadeOut();
$('.query-content', siblingRow).slideDown();
});
$(document).on('click', '.update-query-content', function () {
var contentBox = $(this).closest('.query-content'),
parentRow = contentBox.closest('.query-specifics'),
siblingRow = parentRow.prev('tr'),
editButton = siblingRow.find('.edit-phase-button');
editButton.fadeIn();
contentBox.slideUp('fast', function () {
parentRow.hide();
siblingRow.removeClass('highlight');
});
});
// End code for opening rows and whatnot


function prepPage() {
$('.gui-slider-groove').trigger('initSlider');
$('.gui-dropdown').trigger('change');
}

$.riakControl.sub('templateSwitch', function (templateName) {
if (templateName === 'mapreduce') {
prepPage();
}
});

prepPage();

});
8 changes: 8 additions & 0 deletions priv/admin/js/pjax-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,14 @@ $(function () {
});
});

// Calling the ring page on nav click...
$('#nav-mapreduce').on('click', function () {
return grabPjax('/admin/ui/templates/mapreduce.pjax', function () {
appendScript('#mapreduce-script', '/admin/ui/js/mapreduce.js');
$.riakControl.pub('templateSwitch', ['mapreduce']);
});
});

// Getting places when you're not clicking on the left hand nav
$(document).on('click', '.go-to-cluster', function () {
$('#nav-cluster').trigger('click');
Expand Down
175 changes: 155 additions & 20 deletions priv/admin/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,23 @@ h2 {
}

h3 {
font-size: 22px;
font-size: 24px;
display: block;
padding-bottom: 8px;
letter-spacing: 1px;
}
h3.no-pad {
padding: 0;
}

h4 {
font-size: 20px;
font-size: 19px;
padding-bottom: 0px;
letter-spacing: 1px;
}
h4.pad-bottom {
padding-bottom: 7px;
}


#tooltips {
Expand Down Expand Up @@ -287,10 +291,16 @@ h4 {
}

/* CODE FOR DROPDOWNS */

.gui-dropdown-wrapper {
height: 30px;
background: url(/admin/ui/images/dropdown-left.png) left top no-repeat transparent;
position: relative;
max-width: 250px;
}
.gui-dropdown-wrapper.long {
max-width: 1000px;
width: 292px;
}
.gui-dropdown-bg {
padding-top: 8px;
Expand Down Expand Up @@ -385,6 +395,35 @@ h4 {
}
/* END CODE FOR TEXT FIELDS */

/* CODE FOR TEXTAREAS */
.gui-textarea-wrapper {
padding: 10px;
background: rgba(0, 0, 0, .38);
border-bottom: 1px solid rgba(255, 255, 255, .18);
-webkit-box-shadow: inset 0 2px 1px #1f1f1f;
-moz-box-shadow: inset 0 2px 1px #1f1f1f;
box-shadow: inset 0 2px 1px #1f1f1f;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.gui-textarea-padder {

}
.gui-textarea {
width: 100%;
min-height: 155px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: menlo, monospace;
}
.gui-textarea, .gui-textarea:focus {
outline: none;
}
/* END CODE FOR TEXTAREAS */

/* CODE FOR POINT BUTTONS */
.gui-point-button, .gui-rect-button {
display: block;
Expand Down Expand Up @@ -907,28 +946,124 @@ ul.bulleted li {
/* END CODE FOR RING CONTENT*/


/* CODE FOR MAPREDUCE PAGE */

.phase-status {
width: 195px;
padding-left: 5px;
}

.phase-type {
width: 100px;
padding-right: 15px;
}

.phase-language {
padding-right: 15px;
}

.phase-edit {
width: 137px;
padding-right: 15px;
}

.phase-delete {
width: 20px;
padding-right: 10px;
}

.remove-phase {
background: url(/admin/ui/images/close-error.png) left top no-repeat transparent;
padding: 0 10px;
opacity: .4;
filter: alpha(opacity=40);
cursor: pointer;
}
.remove-phase:hover, .remove-phase.red, .highlight .remove-phase {
background-position: left -98px;
filter: none;
opacity: 1;
}

#mapreduce-table .query:hover, #mapreduce-table .query.highlight, .query-specifics.highlight {
background: url(/admin/ui/images/node-bg.png) left top repeat transparent;
background: rgba(255,255,255,.1);
}

.query .gui-dropdown-wrapper {
display: none;
}
.query.highlight .gui-dropdown-wrapper {
display: block;
}
.query.highlight .gui-field {
display: none;
}

.add-phase {
background: url(/admin/ui/images/add-phase.png) left top no-repeat transparent;
padding: 5px 0 0 26px;
margin-left: 7px;
cursor: pointer;
}
.add-phase:hover {
color: #fff;
}

.query-specifics {
display: none;
}

.query-content {
display: none;
padding: 15px 10px 5px;
}

.stored-funcs {
width: 175px;
padding-right: 15px;
}

.inputs {
padding-top: 15px;
}

.inputs-table {
width: 100%;
}

.run-query {
width: 137px;
padding-left: 15px;
}

/* END CODE FOR MAPREDUCE */



/* CASCADING STYLES */
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.clearl {clear: left;}
.clearr {clear: right;}
.block {display: block;}
.i-block {display: inline-block;}
.inline {display: inline;}
.inblock {display: inline-block;}
.cut {height: 2px; background: url(/admin/ui/images/cut-bg.png) left bottom repeat-x transparent;}
.has-cut {background: url(/admin/ui/images/cut-bg.png) left bottom repeat-x transparent;}
.hide {display: none;}
.monospace {font-family: menlo, monospace;}
.bold {font-weight: bold;}
.emphasize {font-size: 110%;}
.smaller {font-size: 90%;}
.relative {position: relative;}
.gray-text {color: #666;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.clearl {clear: left;}
.clearr {clear: right;}
.block {display: block;}
.i-block {display: inline-block;}
.inline {display: inline;}
.inblock {display: inline-block;}
.cut {height: 2px; background: url(/admin/ui/images/cut-bg.png) left bottom repeat-x transparent;}
.has-cut {background: url(/admin/ui/images/cut-bg.png) left bottom repeat-x transparent;}
.hide {display: none;}
.monospace {font-family: menlo, monospace;}
.bold {font-weight: bold;}
.emphasize {font-size: 110%;}
.smaller {font-size: 90%;}
.relative {position: relative;}
.gray-text {color: #666;}
.pad-bottom {padding-bottom: 12px;}
.nudge-bottom{margin-bottom: 12px;}
.push-bottom {margin-bottom: 25px;}
.full-width {width: 100%;}

.vertical-padding-small {padding: 10px 0;}

Expand Down
Loading

0 comments on commit d71b289

Please sign in to comment.