Commit c3fb6df3 authored by Leigh B Stoller's avatar Leigh B Stoller
Browse files

Add use of CodeMirror syntax highlighter and editor mode. On the manage

profile page, the Source modal starts an editor that does highlighting and
smart indenting. The XML button does the same, but in display only mode.
Also use on the manifest tab on the status page.
parent fd41e82a
...@@ -26,8 +26,9 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment, ...@@ -26,8 +26,9 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment,
var ajaxurl = ""; var ajaxurl = "";
var amlist = null; var amlist = null;
var modified = false; var modified = false;
var editor = null; var editor = null;
var stepsInitialized = false; var myCodeMirror = null;
var genilibwarned= false;
var manageTemplate = _.template(manageString); var manageTemplate = _.template(manageString);
var waitwaitTemplate = _.template(waitwaitString); var waitwaitTemplate = _.template(waitwaitString);
var rendererTemplate = _.template(rendererString); var rendererTemplate = _.template(rendererString);
...@@ -36,6 +37,7 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment, ...@@ -36,6 +37,7 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment,
var oopsTemplate = _.template(oopsString); var oopsTemplate = _.template(oopsString);
var guestInstTemplate = _.template(guestInstantiateString); var guestInstTemplate = _.template(guestInstantiateString);
var InstTemplate = _.template(instantiateString); var InstTemplate = _.template(instantiateString);
var stepsInitialized = false;
function initialize() function initialize()
{ {
...@@ -89,6 +91,7 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment, ...@@ -89,6 +91,7 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment,
isadmin: window.ISADMIN, isadmin: window.ISADMIN,
history: window.HISTORY, history: window.HISTORY,
activity: window.ACTIVITY, activity: window.ACTIVITY,
manual: window.MANUAL,
snapuuid: (window.SNAPUUID || null), snapuuid: (window.SNAPUUID || null),
general_error: (errors.error || ''), general_error: (errors.error || ''),
}); });
...@@ -198,15 +201,61 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment, ...@@ -198,15 +201,61 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment,
var source = $.trim($('#profile_rspec_textarea').val()); var source = $.trim($('#profile_rspec_textarea').val());
$('#rspec_modal_editbuttons').addClass("hidden"); $('#rspec_modal_editbuttons').addClass("hidden");
$('#rspec_modal_viewbuttons').removeClass("hidden"); $('#rspec_modal_viewbuttons').removeClass("hidden");
$('#modal_profile_rspec_textarea').prop("readonly", true); $('#modal_profile_rspec_textarea').prop("readonly", true);
$('#modal_profile_rspec_textarea').val(source); $('#modal_profile_rspec_textarea').val(source);
$('#rspec_modal').modal({'backdrop':'static','keyboard':false}); $('#rspec_modal').modal({'backdrop':'static','keyboard':false});
$('#rspec_modal').modal('show'); $('#rspec_modal').modal('show');
}); });
$('#rspec_modal').on('shown.bs.modal', function() {
var source = $('#modal_profile_rspec_textarea').val();
var mode = "text/xml";
// Need to determine the mode.
var myRe = /^import/m;
if (myRe.test(source)) {
mode = "text/x-python";
}
myCodeMirror = CodeMirror(function(elt) {
$('#modal_profile_rspec_div').prepend(elt);
}, {
value: source,
lineNumbers: false,
smartIndent: true,
autofocus: true,
mode: mode,
});
//
// Attempt to catch an insertion of python code, either to
// the empty source box, or as a replacement.
//
var watchdog_timer;
myCodeMirror.on("change", function() {
clearTimeout(watchdog_timer);
watchdog_timer =
setTimeout(function() {
var source = myCodeMirror.getValue();
var myRe = /^import/m;
if (myRe.test(source)) {
myCodeMirror.setOption("mode", "text/x-python");
}
}, 500);
});
});
// Collapse; done editing the rspec in the modal. // Collapse; done editing the rspec in the modal.
$('#collapse_rspec_modal_button').click(function (event) { $('#collapse_rspec_modal_button').click(function (event) {
$('#rspec_modal').modal('hide'); $('#rspec_modal').modal('hide');
changeRspec($('#modal_profile_rspec_textarea').val()); changeRspec(myCodeMirror.getValue());
$('.CodeMirror').remove();
$('#modal_profile_rspec_textarea').val("");
});
// Cancel; done editing the rspec in the modal, throw away and cleanup.
$('#cancel_rspec_modal_button, #close_rspec_modal_button')
.click(function (event) {
$('#rspec_modal').modal('hide');
$('.CodeMirror').remove();
$('#modal_profile_rspec_textarea').val(""); $('#modal_profile_rspec_textarea').val("");
}); });
// Auto select the URL if the user clicks in the box. // Auto select the URL if the user clicks in the box.
...@@ -962,9 +1011,18 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment, ...@@ -962,9 +1011,18 @@ function (_, sup, filesize, JacksEditor, ShowImagingModal, moment,
// //
function checkScript(script) function checkScript(script)
{ {
// Beta feature; warn user, prompt for confirmation.
if (!genilibwarned) {
genilibwarned = 1;
var ok = confirm("geni-lib scripts are an experimental feature. "+
"Do you wish to continue?");
if (ok == false) {
return;
}
}
// Save for later. // Save for later.
$('#profile_script_textarea').val(script); $('#profile_script_textarea').val(script);
var callback = function(json) { var callback = function(json) {
sup.HideModal("#waitwait-modal"); sup.HideModal("#waitwait-modal");
console.info(json.value); console.info(json.value);
......
...@@ -669,11 +669,8 @@ function (_, sup, moment, marked, UriTemplate, ShowImagingModal, ...@@ -669,11 +669,8 @@ function (_, sup, moment, marked, UriTemplate, ShowImagingModal,
{ {
var callback = function(json) { var callback = function(json) {
//console.info(json); //console.info(json);
if ($("#manifest_textarea").length) { ShowManifest(json.value);
$("#manifest_textarea").val(json.value);
$("#manifest_textarea").css("height", "300");
}
var xmlDoc = $.parseXML(json.value); var xmlDoc = $.parseXML(json.value);
var xml = $(xmlDoc); var xml = $(xmlDoc);
...@@ -807,6 +804,30 @@ function (_, sup, moment, marked, UriTemplate, ShowImagingModal, ...@@ -807,6 +804,30 @@ function (_, sup, moment, marked, UriTemplate, ShowImagingModal,
xmlthing.done(callback); xmlthing.done(callback);
} }
//
// Show the manifest in the tab, using codemirror.
//
function ShowManifest(manifest)
{
var mode = "text/xml";
$("#manifest_textarea").css("height", "300");
var myCodeMirror = CodeMirror(function(elt) {
$('#manifest_textarea').prepend(elt);
}, {
value: manifest,
lineNumbers: false,
smartIndent: true,
mode: mode,
readOnly: true,
});
$('#show_manifest_tab').on('shown.bs.tab', function (e) {
myCodeMirror.refresh();
});
}
function MakeUriData(xml) function MakeUriData(xml)
{ {
var result = {}; var result = {};
......
...@@ -142,6 +142,7 @@ function SPITFORM($formfields, $errors) ...@@ -142,6 +142,7 @@ function SPITFORM($formfields, $errors)
href='css/jquery.appendGrid-1.3.1.min.css'>\n"; href='css/jquery.appendGrid-1.3.1.min.css'>\n";
# For progress bubbles in the imaging modal. # For progress bubbles in the imaging modal.
echo "<link rel='stylesheet' href='css/progress.css'>\n"; echo "<link rel='stylesheet' href='css/progress.css'>\n";
echo "<link rel='stylesheet' href='css/codemirror.css'>\n";
echo "<script type='text/javascript'>\n"; echo "<script type='text/javascript'>\n";
echo " window.VIEWING = $viewing;\n"; echo " window.VIEWING = $viewing;\n";
...@@ -170,6 +171,7 @@ function SPITFORM($formfields, $errors) ...@@ -170,6 +171,7 @@ function SPITFORM($formfields, $errors)
} }
echo "</script>\n"; echo "</script>\n";
echo "<script src='js/lib/jquery-2.0.3.min.js'></script>\n"; echo "<script src='js/lib/jquery-2.0.3.min.js'></script>\n";
echo "<script src='js/lib/codemirror-min.js'></script>\n";
echo "<script src='js/lib/bootstrap.js'></script>\n"; echo "<script src='js/lib/bootstrap.js'></script>\n";
echo "<script src='js/lib/require.js' data-main='js/manage_profile'> echo "<script src='js/lib/require.js' data-main='js/manage_profile'>
</script>"; </script>";
......
...@@ -156,9 +156,11 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -156,9 +156,11 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
<script src='https://www.emulab.net/emulab_sup.js'></script> <script src='https://www.emulab.net/emulab_sup.js'></script>
</head> </head>
<body style='display: none;'>\n"; <body style='display: none;'>\n";
$manual = ($ISAPT ? "http://docs.aptlab.net" : "http://docs.cloudlab.us");
echo "<script type='text/javascript'>\n"; echo "<script type='text/javascript'>\n";
echo " window.ISCLOUD = " . ($ISAPT ? "0" : "1") . ";\n"; echo " window.ISCLOUD = " . ($ISAPT ? "0" : "1") . ";\n";
echo " window.MANUAL = '$manual';\n";
echo " window.EMBEDDED = $embedded;\n"; echo " window.EMBEDDED = $embedded;\n";
echo "</script>\n"; echo "</script>\n";
......
...@@ -186,12 +186,14 @@ if (isset($extend) && $extend != "") { ...@@ -186,12 +186,14 @@ if (isset($extend) && $extend != "") {
} }
echo "</script>\n"; echo "</script>\n";
echo "<script src='js/lib/jquery-2.0.3.min.js'></script>\n"; echo "<script src='js/lib/jquery-2.0.3.min.js'></script>\n";
echo "<script src='js/lib/codemirror-min.js'></script>\n";
echo "<script src='js/lib/bootstrap.js'></script>\n"; echo "<script src='js/lib/bootstrap.js'></script>\n";
echo "<script src='js/lib/require.js' data-main='js/status'></script>"; echo "<script src='js/lib/require.js' data-main='js/status'></script>";
echo "<link rel='stylesheet' echo "<link rel='stylesheet'
href='css/jquery-ui-1.10.4.custom.min.css'>\n"; href='css/jquery-ui-1.10.4.custom.min.css'>\n";
# For progress bubbles in the imaging modal. # For progress bubbles in the imaging modal.
echo "<link rel='stylesheet' href='css/progress.css'>\n"; echo "<link rel='stylesheet' href='css/progress.css'>\n";
echo "<link rel='stylesheet' href='css/codemirror.css'>\n";
SPITFOOTER(); SPITFOOTER();
?> ?>
...@@ -206,6 +206,15 @@ ...@@ -206,6 +206,15 @@
style='margin-right: 10px;' style='margin-right: 10px;'
id='show_xml_modal_button'> id='show_xml_modal_button'>
XML</button> XML</button>
<a href='#' class='btn btn-xs'
data-toggle='popover'
data-html='true'
data-delay='{"hide":1500}'
data-content="You can supply either an
<a href='<%- manual %>/advanced-topics.html'>
rspec or a geni-lib script</a>">
<span class='glyphicon glyphicon-question-sign'></span>
</a>
</div> </div>
</div> </div>
<textarea name="formfields[profile_rspec]" <textarea name="formfields[profile_rspec]"
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class='modal-header'> <div class='modal-header'>
<div id='rspec_modal_editbuttons'> <div id='rspec_modal_editbuttons'>
<button type='button' class='btn btn-danger btn-xs pull-right' <button type='button' class='btn btn-danger btn-xs pull-right'
data-dismiss='modal' id='cancel_rspec_modal_button'
style='margin-right: 10px;'> style='margin-right: 10px;'>
Cancel</button> Cancel</button>
<button type='button' class='btn btn-primary btn-xs pull-right' <button type='button' class='btn btn-primary btn-xs pull-right'
...@@ -15,22 +15,21 @@ ...@@ -15,22 +15,21 @@
</div> </div>
<div id='rspec_modal_viewbuttons' class='hidden'> <div id='rspec_modal_viewbuttons' class='hidden'>
<button type='button' class='btn btn-danger btn-xs pull-right' <button type='button' class='btn btn-danger btn-xs pull-right'
data-dismiss='modal' id='close_rspec_modal_button'
style='margin-right: 10px;'> style='margin-right: 10px;'>
Close</button> Close</button>
</div> </div>
<h3>Source</h3> <h3>Source</h3>
</div> </div>
<div class='modal-body'> <div class='modal-body' id='modal_profile_rspec_body'>
<div class='panel panel-default'> <div class='panel panel-default'>
<div class='panel-body'> <div id='modal_profile_rspec_div' style='height:300px'></div>
<textarea name=\"formfields[profile_rspec_modal]\" </div>
id='modal_profile_rspec_textarea' <textarea name=\"formfields[profile_rspec_modal]\"
rows=20 id='modal_profile_rspec_textarea'
class='form-control' rows=20
type='textarea'></textarea> class='form-control hidden'
</div> type='textarea'></textarea>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -126,7 +126,8 @@ ...@@ -126,7 +126,8 @@
<a href='#listview' data-toggle='tab'>List View</a> <a href='#listview' data-toggle='tab'>List View</a>
</li> </li>
<li> <li>
<a href='#manifest' data-toggle='tab'>Manifest</a> <a href='#manifest' id='show_manifest_tab'
data-toggle='tab'>Manifest</a>
</li> </li>
</ul> </ul>
<div id='quicktabs_content' class='tab-content'> <div id='quicktabs_content' class='tab-content'>
...@@ -155,8 +156,7 @@ ...@@ -155,8 +156,7 @@
</div> </div>
</div> </div>
<div class='tab-pane' id='manifest'> <div class='tab-pane' id='manifest'>
<textarea id='manifest_textarea' style='width: 100%;' <div id='manifest_textarea' style='width: 100%;'></div>
type='textarea'></textarea>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment