Permalink
Browse files

added a mapreduce page and a couple of images and some js

  • Loading branch information...
1 parent 2638a66 commit d71b28964787d4675d55cd0e2ad8a6a53abbd21a @jgnewman jgnewman committed May 24, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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>
View
@@ -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();
+
+});
@@ -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');
View
@@ -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 {
@@ -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;
@@ -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;
@@ -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;}
Oops, something went wrong.

0 comments on commit d71b289

Please sign in to comment.