web-cli
web-cli copied to clipboard
amiturgman
web based command line interface
web-cli
Web-cli is an extensible web-based command line interface component. It's a Polymer component wrapping the aCLI project, making it easier to consume and use.
Features
- Manages environment variables and use them as part of the command line.
- Supports plugins- remote commands integrated into the console, using docRouter metadata.
Supporting plugins with client side processing and styling. - Maintains command line history, installed plugins and environment variables.
- Pin Panel which is kind of a dashboard for keeping command execution results on-screen.
- Html visualization for json results with collapsing feature.
- Supports working in parallel with few instances/tabs.
Installing
bower install web-cli
Getting Started
Follow the sample app for extended example of how to use this component. The sample app includes varaiety of plugins and examples for commands you can use as a reference.
The following is an example of how to quickly start using the component.
<!DOCTYPE HTML>
<html>
<head>
<title>corpus to graph admin console</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/web-cli/web-cli.html">
<style>
.promptImage {
vertical-align: middle;
}
</style>
</head>
<body>
<web-cli id="webCli"></web-cli>
</body>
<script>
$(function () {
// get plugins and user details from the server.
// we could have also provided the pluginsUrl property on the control itselft, and the control would have fetched this data.
// since we need to get the user details anyway, we're using the same request to get all the data at once and providing the plugins explicitely.
$.getJSON('pathToApi', function (cliData) {
var user = cliData.user;
// environment variables to use by this console instance
var environmentVars = {
app: { type: 'string', value: 'console', description: 'The current app name', userReadOnly: false },
username: { type: 'string', value: user.username, description: 'The current username', userReadOnly: true },
userImageUrl: { type: 'string', value: user.image, description: 'The current user image url', userReadOnly: true },
};
// get a reference to the control
var webCli = $('web-cli')[0];
// listen on envronment variables changes and update the console prompt string accordingly.
// in this case, we'de like to reflect the change in the app name.
webCli.addEventListener('envChanged', function(e) {
console.log('envChanged!', e.detail);
updatePrompt();
});
// webCli is ready to be initialized
webCli.onReady = function () {
// init the console
webCli.init({
environment: environmentVars,
plugins: cliData.apis,
commands: getLocalCommands()
});
updatePrompt();
}
// updates the prompt string
function updatePrompt() {
var app = webCli.env('app');
var image = user.image ? "<img src='" + user.image + "' class='promptImage' width='18px'/>" : '';
var prompt = image + ' [';
if (user.name) prompt += user.name + '\\';
if (app) prompt += '' + app + '';
prompt += ']>';
webCli.prompt(prompt);
}
});
// this is the place to extend the console
// with more client-side commands
function getLocalCommands() {
var versionCommand = {
name: 'version',
description: "gets the version of this console",
usage: 'version',
example: 'version',
params: [],
exec: function (args, context) {
return '1.0';
}
};
var commands = [versionCommand];
return commands;
}
});
</script>
</html>
Design
The web-cli internal design in addition to more documentation can be found in the original aCLI repository docs folder
License
MIT
amiturgman