http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/coreDeveloper.md ---------------------------------------------------------------------- diff --git a/console/app/core/doc/coreDeveloper.md b/console/app/core/doc/coreDeveloper.md new file mode 100644 index 0000000..5d2e535 --- /dev/null +++ b/console/app/core/doc/coreDeveloper.md @@ -0,0 +1,49 @@ +### Core plugin features + +#### User Notifications + +Notifications are provided by toastr.js. In hawtio there's a simple function that wraps invoking toastr so it's pretty easy to pop up a notification: + +``` +notification('error', 'Oh no!'); +notification('warning', 'Better watch out!'); +``` + +The available levels are 'info', 'success', 'warning' and 'error'. It's also possible to supply an options object as the last argument, a good way to use this is to provide an onClick handler, for example: + +``` +notification('error', 'Help me!', { onclick: function() { Logger.info('hey!'); } }); +``` + +onHidden can be another good way to trigger something when the notification disappears: + +``` +notification('info', 'Did Stuff!', { onHIdden: function() { Logger.info('message hidden!') } }); +``` + +By default for warning or error notifications clicking on the notification will show hawtio's log console, but it will also still execute the onclick afterwards if passed. If some other behavior is desired or if it wouldn't make sense to open the console just pass an options object with a do-nothing onclick function. + + +#### Logging + +Logging in hawtio plugins can be done either by using console.* functions or by using hawtio's Logging service. In either case logs are routed to hawtio's logging console as well as the javascript console. The log level is controlled in the preferences page. + +The logging API is consistent with many other log APIs out there, for example: + +``` +Logger.info("Some log at info level"); +Logger.warn("Oh snap!"); +``` + +The Logger object has 4 levels it can log at, debug, info, warn and error. In hawtio messages logged at either warn or error will result in a notification. + +It's also possible to create a named logger. Named loggers just prefix the log statements, for example: + +``` +Logger.get('MyPlugin').debug('Hey, something happened!'); +``` + + + + +
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/developer.md ---------------------------------------------------------------------- diff --git a/console/app/core/doc/developer.md b/console/app/core/doc/developer.md new file mode 100644 index 0000000..0a5c70d --- /dev/null +++ b/console/app/core/doc/developer.md @@ -0,0 +1,10 @@ +### Developer Guide + +[hawtio](http://hawt.io/) is designed around a large suite of [plugins](http://hawt.io/plugins/index.html) and active [community](http://hawt.io/community/index.html) and we love [contributions](http://hawt.io/contributing/index.html)! + +For more background on how to build your own plugins for **hawtio** check out the [developer help](http://hawt.io/developers/index.html). + +**hawtio** also includes a number of developer focused plugins to help developers create even better plugins. + +Click on the links on the left to see more! + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/img/help-preferences.png ---------------------------------------------------------------------- diff --git a/console/app/core/doc/img/help-preferences.png b/console/app/core/doc/img/help-preferences.png new file mode 100644 index 0000000..3586365 Binary files /dev/null and b/console/app/core/doc/img/help-preferences.png differ http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/img/help-subtopic-nav.png ---------------------------------------------------------------------- diff --git a/console/app/core/doc/img/help-subtopic-nav.png b/console/app/core/doc/img/help-subtopic-nav.png new file mode 100644 index 0000000..d9c2381 Binary files /dev/null and b/console/app/core/doc/img/help-subtopic-nav.png differ http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/img/help-topic-nav.png ---------------------------------------------------------------------- diff --git a/console/app/core/doc/img/help-topic-nav.png b/console/app/core/doc/img/help-topic-nav.png new file mode 100644 index 0000000..753a024 Binary files /dev/null and b/console/app/core/doc/img/help-topic-nav.png differ http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/overview.md ---------------------------------------------------------------------- diff --git a/console/app/core/doc/overview.md b/console/app/core/doc/overview.md new file mode 100644 index 0000000..41be7b8 --- /dev/null +++ b/console/app/core/doc/overview.md @@ -0,0 +1,28 @@ +<h3 class="help-header">Welcome to <span ng-include="'app/core/html/branding.html'"></span> Help</h3> + +##### Plugin Help ##### +Click the Help icon (<i class='icon-question-sign'></i>) in the main navigation bar to access [{{branding.appName}}](http://hawt.io "{{branding.appName}}")'s help system. Browse the available help topics for plugin-specific documentation using the help navigation bar on the left. + + + +Available sub-topics for each plugin can be selected via the secondary navigation bar above the help display area. + + + +##### Preferences ##### +The Preferences is accessible by clicking the user icon (<i class='icon-user'></i>) in the main navigation bar, +and then clicking the Preferences icon (<i class='icon-cogs'></i>), as shown below: + + + +##### Logging Console ##### +The logging console is accessible by clicking the icon (<i class='icon-desktop'></i>) in the main navigation bar. +Information from the console can be useful when reporting issues to the <a href="http://hawt.io/community/index.html";>hawtio community</a>. +And from the Preferences you can configure the logging level use by the console logger. + +##### Further Reading ##### +- [hawtio](http://hawt.io "hawtio") website +- Chat with the hawtio team on IRC by joining **#hawtio** on **irc.freenode.net** +- Help improve [hawtio](http://hawt.io "hawtio") by [contributing](http://hawt.io/contributing/index.html) +- [hawtio on github](https://github.com/hawtio/hawtio) + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/preferences.md ---------------------------------------------------------------------- diff --git a/console/app/core/doc/preferences.md b/console/app/core/doc/preferences.md new file mode 100644 index 0000000..02d04a8 --- /dev/null +++ b/console/app/core/doc/preferences.md @@ -0,0 +1,6 @@ +### Preferences + +The preferences page is used to configure {{branding.appName}} and the plugins. + +The Preferences is accessible by clicking the user icon (<i class='icon-user'></i>) in the main navigation bar, +and then clicking the Preferences icon (<i class='icon-cogs'></i>). http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/doc/welcome.md ---------------------------------------------------------------------- diff --git a/console/app/core/doc/welcome.md b/console/app/core/doc/welcome.md new file mode 100644 index 0000000..4d66d77 --- /dev/null +++ b/console/app/core/doc/welcome.md @@ -0,0 +1,27 @@ +<h3 class="help-header centered">Welcome to <span ng-include="'app/core/html/branding.html'"></span></h3> + +<b>{{branding.appName}}</b> is a lightweight and <a href="http://hawt.io/plugins/index.html";>modular</a> HTML5 web console with <a href="http://hawt.io/plugins/index.html";>lots of plugins</a> for managing your Java stuff + +##### General Navigation ##### +Primary navigation in [{{branding.appName}}](http://hawt.io "{{branding.appName}}") is via the top navigation bar. + +Clicking on a navigation link will take you to that plugin's main page. + +##### Switching Perspectives ##### +You can switch between perspectives in {{branding.appName}} by clicking the (<i class='icon-caret-down'></i>) perspective menu, which is the left-most item in the main navigation bar. The perspective menu also maintains the last 5 remote connections that have been made so that you can quickly connect to other JVMs. If there is only one active perspective or if you have not connected to another JVM previously, then the (<i class='icon-caret-down'></i>) perspective menu may not be shown. + +##### Getting Help ##### +Click the Help icon (<i class='icon-question-sign'></i>) in the main navigation bar to access [{{branding.appName}}](http://hawt.io "{{branding.appName}}")'s help system. +Browse the available help topics for plugin-specific documentation using the help navigation bar on the left. + +##### Logging Console ##### +The logging console is accessible by clicking the icon (<i class='icon-desktop'></i>) in the main navigation bar. +Information from the console can be useful when reporting issues to the <a href="http://hawt.io/community/index.html";>hawtio community</a>. +And from the Preferences you can configure the logging level use by the console logger. + +##### Preferences ##### +The Preferences is accessible by clicking the user icon (<i class='icon-user'></i>) in the main navigation bar, +and then clicking the Preferences icon (<i class='icon-cogs'></i>). + +In the Preferences you can among others configure whether to show this welcome page on startup or not. + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/about.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/about.html b/console/app/core/html/about.html new file mode 100644 index 0000000..20229a4 --- /dev/null +++ b/console/app/core/html/about.html @@ -0,0 +1,5 @@ +<div ng-controller="Core.AboutController"> + <div class="welcome"> + <div class="about-display" compile="html"></div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/branding.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/branding.html b/console/app/core/html/branding.html new file mode 100644 index 0000000..5af76ff --- /dev/null +++ b/console/app/core/html/branding.html @@ -0,0 +1,6 @@ +<img class="no-shadow" + ng-show="branding.appLogo" + ng-src="{{branding.appLogo}}" + ng-class="branding.logoClass()"/> +<strong ng-hide="branding.logoOnly" + ng-bind-html-unsafe="branding.appName"></strong> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/corePreferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/corePreferences.html b/console/app/core/html/corePreferences.html new file mode 100644 index 0000000..4c40e34 --- /dev/null +++ b/console/app/core/html/corePreferences.html @@ -0,0 +1,94 @@ +<div ng-controller="Core.CorePreferences"> + <form class="form-horizontal"> + + <div class="control-group"> + <label class="control-label">Welcome page</label> + + <div class="controls"> + <input type="checkbox" ng-model="showWelcomePage"> + <span class="help-block">Show welcome page on startup</span> + </div> + </div> + + <div class="control-group"> + <label class="control-label" for="updateRate">Update rate</label> + + <div class="controls"> + <select id="updateRate" ng-model="updateRate"> + <option value="0">No refreshes</option> + <option value="1000">1 second</option> + <option value="2000">2 seconds</option> + <option value="5000">5 seconds</option> + <option value="10000">10 seconds</option> + <option value="30000">30 seconds</option> + </select> + <span class="help-block">How frequently the data is updated in the browser + <br/><i class='yellow text-shadowed icon-warning-sign'></i> <strong>Note:</strong> Setting this to "No Refreshes" will disable charting, as charting requires fetching periodic metric updates. + </span> + </div> + </div> + + <div class="control-group"> + <label class="control-label">Host identification</label> + + <div class="controls"> + <button class="btn" ng-click="addRegexDialog.open()" title="Add regex"><i class="icon-plus"></i></button> + <table ng-show="regexs.length"> + <thead> + <tr> + <th></th> + <th>Name</th> + <th>Regex</th> + <th></th> + </tr> + </thead> + <tbody> + <tr ng-repeat='regex in regexs track by $index'> + <td> + <i class="icon-remove clickable" ng-click="delete($index)"></i> + <i class="icon-caret-up clickable" ng-hide="$first" ng-click="moveUp($index)"></i> + <i class="icon-caret-down clickable" ng-hide="$last" ng-click="moveDown($index)"></i> + </td> + <td> + {{regex.name}} + <!-- + <editable-property class="inline-block" ng-model="regex" property="name"></editable-property> + --> + </td> + <td> + {{regex.regex}} + <!-- + <editable-property class="inline-block" ng-model="regex" property="regex"></editable-property> + --> + </td> + <td> + <div hawtio-color-picker='regex.color'></div> + </td> + </tr> + </tbody> + </table> + + <div modal="addRegexDialog.show" ok-button-text="Add"> + <div class="modal-header"><h4>Add Host Regex</h4></div> + <div class="modal-body dialog-body"> + <div simple-form name="hostRegexForm" data='hostSchema' entity='newHost' onSubmit="onOk()"> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-danger" + ng-click="addRegexDialog.close()"> + <i class="icon-remove"></i> Cancel + </button> + <button class="btn btn-primary" + hawtio-submit="hostRegexForm" + ng-disabled="!forms.hostRegexForm.$valid"> + <i class="icon-plus"></i> Add + </button> + </div> + </div> + + <span class="help-block">For associating a label and colour in the bottom left indicator when connecting to different containers</span> + </div> + </div> + </form> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/debug.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/debug.html b/console/app/core/html/debug.html new file mode 100644 index 0000000..43ad91f --- /dev/null +++ b/console/app/core/html/debug.html @@ -0,0 +1,7 @@ +<div> + attributes json: <textarea class=".span6" cols="120" rows="40">{{attributes | json}}</textarea> +</div> + +<div> + node json: <textarea class=".span6" cols="120" rows="8">{{workspace.selection | json}}</textarea> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/fileUpload.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/fileUpload.html b/console/app/core/html/fileUpload.html new file mode 100644 index 0000000..8b98fea --- /dev/null +++ b/console/app/core/html/fileUpload.html @@ -0,0 +1,41 @@ +<div class="file-upload"> + + <div ng-show="showFiles" class="row-fluid"> + <table class="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Size</th> + <th></th> + </tr> + </thead> + <tbody> + <tr ng-repeat="file in files"> + <td>{{file.fileName}}</td> + <td>{{file.length}}</td> + <td><span class="clickable red"><i class="icon-remove" title="Delete {{file.filename}}" ng-click="delete(file.fileName)"></i></span></td> + </tr> + <tr> + <td colspan="3" style="background: inherit;"> + </td> + </tr> + </tbody> + </table> + </div> + + <div class="row-fluid"> + <form class="no-bottom-margin" name="file-upload" action="upload" method="post" enctype="multipart/form-data"> + <fieldset> + <input type="hidden" name="parent" value="{{target}}"> + <input type="file" style="display: none;" name="files[]" multiple> + <div class="input-prepend"> + <input type="button" class="btn" value="Add"> + <div class="progress progress-striped"> + <div class="bar" style="width: {{percentComplete}}%;"></div> + </div> + </div> + </fieldset> + </form> + </div> + +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/help.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/help.html b/console/app/core/html/help.html new file mode 100644 index 0000000..84abe78 --- /dev/null +++ b/console/app/core/html/help.html @@ -0,0 +1,26 @@ +<div ng-controller="Core.HelpController"> + <div class="row-fluid"> + <div class="span2"> + <ul class="nav help-sidebar"> + <li ng-repeat="section in sections" ng-class="{active : section.active}"> + <a ng-href="{{sectionLink(section)}}">{{section.label}}</a> + </li> + </ul> + </div> + <div class="span1 help-spacer"></div> + <div class="span8"> + <div class="row"> + <ul class="nav nav-tabs connected"> + <li ng-repeat="breadcrumb in breadcrumbs" ng-class="{active : breadcrumb.active}"> + <a ng-href="#/help/{{breadcrumb.topic}}/{{breadcrumb.subTopic}}">{{breadcrumb.label}}</a> + </li> + </ul> + </div> + <div class="row help-display"> + <div ng-hide="!html"> + <div compile="html"></div> + </div> + </div> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/jolokiaPreferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/jolokiaPreferences.html b/console/app/core/html/jolokiaPreferences.html new file mode 100644 index 0000000..f68e88e --- /dev/null +++ b/console/app/core/html/jolokiaPreferences.html @@ -0,0 +1,30 @@ +<div ng-controller="Core.JolokiaPreferences"> + <form class="form-horizontal"> + + <div class="control-group"> + <label class="control-label" for="maxDepth">Max Depth</label> + + <div class="controls"> + <input type="number" id="maxDepth" ng-model="maxDepth" min="0"> + <span class="help-block">The number of levels jolokia will marshal an object to json on the server side before returning</span> + </div> + </div> + + <div class="control-group"> + <label class="control-label" for="maxCollectionSize">Max Collection Size</label> + + <div class="controls"> + <input type="number" id="maxCollectionSize" ng-model="maxCollectionSize" min="0"> + <span class="help-block">The maximum number of elements in an array that jolokia will marshal in a response</span> + </div> + </div> + + <div class="control-group"> + <div class="controls"> + <button class="btn btn-primary" ng-click="reboot()">Apply</button> + <span class="help-block">Restart hawtio with the new values in effect</span> + </div> + </div> + + </form> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/layoutFull.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/layoutFull.html b/console/app/core/html/layoutFull.html new file mode 100644 index 0000000..818c7f6 --- /dev/null +++ b/console/app/core/html/layoutFull.html @@ -0,0 +1,6 @@ +<div class="row-fluid"> + <div ng-controller="Jmx.MBeansController"></div> + <div ng-view></div> +</div> + + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/layoutTree.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/layoutTree.html b/console/app/core/html/layoutTree.html new file mode 100644 index 0000000..8555edb --- /dev/null +++ b/console/app/core/html/layoutTree.html @@ -0,0 +1,28 @@ +<script type="text/ng-template" id="header"> + <div class="tree-header" ng-controller="Jmx.TreeHeaderController"> + <div class="left"> + </div> + <div class="right"> + <i class="icon-chevron-down clickable" + title="Expand all nodes" + ng-click="expandAll()"></i> + <i class="icon-chevron-up clickable" + title="Unexpand all nodes" + ng-click="contractAll()"></i> + </div> + </div> +</script> + +<hawtio-pane position="left" width="300" header="header"> + <div id="tree-container" + ng-controller="Jmx.MBeansController"> + <div id="jmxtree"></div> + </div> +</hawtio-pane> + +<div class="row-fluid"> + <ng-include src="'app/jmx/html/subLevelTabs.html'"></ng-include> + <div id="properties" ng-view></div> +</div> + + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/loggingPreferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/loggingPreferences.html b/console/app/core/html/loggingPreferences.html new file mode 100644 index 0000000..fbd7bb0 --- /dev/null +++ b/console/app/core/html/loggingPreferences.html @@ -0,0 +1,30 @@ +<div ng-controller="Core.LoggingPreferences"> + <form class="form-horizontal"> + + <div class="control-group"> + <label class="control-label" for="logLevel">Log level</label> + + <div class="controls"> + <select id="logLevel" ng-model="logLevel"> + <option value='{"value": 99, "name": "OFF"}'>Off</option> + <option value='{"value": 8, "name": "ERROR"}'>Error</option> + <option value='{"value": 4, "name": "WARN"}'>Warn</option> + <option value='{"value": 2, "name": "INFO"}'>Info</option> + <option value='{"value": 1, "name": "DEBUG"}'>Debug</option> + </select> + <span class="help-block">Level of logging for the logging console (<i class='icon-desktop'></i>)</span> + </div> + </div> + + <div class="control-group"> + <label class="control-label" for="logBuffer">Log buffer</label> + + <div class="controls"> + <input type="number" id="logBuffer" ng-model="logBuffer" min="0"> + <span class="help-block">The number of log statements to keep available in the logging console (<i + class='icon-desktop'></i>)</span> + </div> + </div> + + </form> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/login.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/login.html b/console/app/core/html/login.html new file mode 100644 index 0000000..7710e78 --- /dev/null +++ b/console/app/core/html/login.html @@ -0,0 +1,44 @@ +<div ng-controller="Core.LoginController"> + + + <div class="login-wrapper"> + <div class="login-form"> + <form name="login" class="form-horizontal no-bottom-margin" ng-submit="doLogin()"> + <fieldset> + <div class="login-logo"> + <img ng-src="{{branding.appLogo}}" + ng-show="branding.appLogo" + ng-class="branding.logoClass()"> + <span ng-show="branding.appName && !branding.logoOnly">{{branding.appName}}</span> + </div> + <div class="control-group"> + <label class="control-label" for="username">Username </label> + <div class="controls"> + <input id="username" type="text" class="input-medium" required ng-model="entity.username" autofill autofocus> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="password">Password </label> + <div class="controls"> + <input id="password" type="password" class="input-medium" required ng-model="entity.password" autofill> + </div> + </div> + + <div class="control-group"> + <div class="controls"> + <label class="checkbox" for="rememberMe"> + <input id="rememberMe" type="checkbox" ng-model="rememberMe"> Remember me + </label> + <button type="submit" class="btn btn-success"></i> Log in</button> + </div> + </div> + + + </fieldset> + </form> + </div> + </div> + + +</div> + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/pluginPreferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/pluginPreferences.html b/console/app/core/html/pluginPreferences.html new file mode 100644 index 0000000..6eaf128 --- /dev/null +++ b/console/app/core/html/pluginPreferences.html @@ -0,0 +1,67 @@ +<div ng-controller="Core.PluginPreferences"> + <form class="form-horizontal"> + + <div class="control-group"> + <label class="control-label">Perspective</label> + + <div class="controls"> + <select ng-model="perspectiveId" required="required" ng-options="p.id as p.title for p in perspectives"> + </select> + <span class="help-block">Configure plugins in selected perspective<br/><br/>Click icon to toggle state on the plugin, and click the apply button to save changes.</span> + </div> + </div> + <div class="control-group"> + + <div class="span6"> + + <div class="controls"> + <div> + <table class="table table-condensed table-striped"> + <tr> + <th><i class="icon-double-angle-down"></i>/<i class="icon-double-angle-up"></i></th> + <th>Plugin</th> + <th>Enabled</th> + <th>Default</th> + </tr> + <tr ng-repeat="plugin in plugins"> + <td> + <i class="icon-double-angle-up clickable" ng-hide="$first" ng-click="pluginMoveUp($index)" + title="Click to move this plugin up in the navigation bar"></i> + <i class="icon-double-angle-down clickable" ng-hide="$last" ng-click="pluginMoveDown($index)" + title="Click to move this plugin down in the navigation bar"></i> + </td> + <td title="This is the name of the plugin"> + {{plugin.displayName}} + </td> + <td> + <i class="orange icon-off clickable" ng-hide="plugin.enabled" ng-click="pluginEnable($index)" + title="This plugin is disabled and not available on the navigation bar"></i> + <i class="green icon-play-circle clickable" ng-hide="!plugin.enabled" ng-click="pluginDisable($index)" + title="This plugin is enabled"></i> + </td> + <td> + <i class="icon-check-empty clickable" ng-hide="plugin.isDefault" ng-click="pluginDefault($index)" + title="Click to select this plugin as the default plugin to use on startup"></i> + <i class="icon-check clickable" ng-hide="!plugin.isDefault" ng-click="pluginDefault($index)" + title="This is the default plugin"></i> + </td> + </tr> + </table> + <button class="btn btn-primary" ng-disabled="!pluginDirty" ng-click="pluginApply()">Apply plugin changes</button> + </div> + </div> + </div> + </div> + + <div class="control-group"> + <label class="control-label">Auto refresh</label> + + <div class="controls"> + <input type="checkbox" ng-model="autoRefresh"> + <span class="help-block">Automatically refresh the app when a plugin is updated</span> + </div> + </div> + + </form> +</div> + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/preferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/preferences.html b/console/app/core/html/preferences.html new file mode 100644 index 0000000..22f5877 --- /dev/null +++ b/console/app/core/html/preferences.html @@ -0,0 +1,12 @@ +<div ng-controller="Core.PreferencesController" title="" + class="prefs"> + <div class="row-fluid"> + <div class="tabbable" ng-model="pref"> + <div ng-repeat="(name, panel) in panels" + value="{{name}}" + class="tab-pane" + title="{{name}}" + ng-include="panel.template"></div> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/resetPreferences.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/resetPreferences.html b/console/app/core/html/resetPreferences.html new file mode 100644 index 0000000..03410b4 --- /dev/null +++ b/console/app/core/html/resetPreferences.html @@ -0,0 +1,17 @@ +<div ng-controller="Core.ResetPreferences"> + <form class="form-horizontal"> + <fieldset> + <div class="control-group"> + <label class="control-label"> + <strong> + <i class='yellow text-shadowed icon-warning-sign'></i> Reset settings + </strong> + </label> + <div class="controls"> + <button class="btn btn-danger" ng-click="doReset()">Reset to defaults</button> + <span class="help-block">Wipe settings stored by {{branding.appName}} in your browser's local storage</span> + </div> + </div> + </fieldset> + </form> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/core/html/welcome.html ---------------------------------------------------------------------- diff --git a/console/app/core/html/welcome.html b/console/app/core/html/welcome.html new file mode 100644 index 0000000..06cba49 --- /dev/null +++ b/console/app/core/html/welcome.html @@ -0,0 +1,13 @@ +<div ng-controller="Core.WelcomeController"> + <div class="welcome"> + <div compile="html"></div> + + <div class="centered"> + <button class="btn btn-primary" + ng-click="stopShowingWelcomePage()"> + Do not show welcome page on startup + </button> + </div> + + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/datatable/doc/developer.md ---------------------------------------------------------------------- diff --git a/console/app/datatable/doc/developer.md b/console/app/datatable/doc/developer.md new file mode 100644 index 0000000..15bf326 --- /dev/null +++ b/console/app/datatable/doc/developer.md @@ -0,0 +1,34 @@ +### Datatable + +This plugin provides a programming API similar to [ng-grid](http://angular-ui.github.com/ng-grid/) for writing table/grids in angularjs but uses [jQuery DataTables](http://datatables.net/) as the underlying implementation. + +For example if you are using ng-grid in some HTML: + + <div class="gridStyle" ng-grid="gridOptions"></div> + +You can switch to jQuery DataTables using: + + <div class="gridStyle" hawtio-datatable="gridOptions"></div> + +It supports most things we use in ng-grid like cellTemplate / cellFilter / width etc (though width's with values starting with "*" are ignored). We also support specifying external search text field & keeping track of selected items etc. To see it in action try the [log plugin](http://hawt.io/plugins/logs/) or check its [HTML](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/log/html/logs.html#L47) or [column definitions](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/log/js/logs.ts#L64) + +### Simple Table + +In addition, for cases where you don't want a fixed sized table but want a simple HTML table populated with the same JSON model as ng-grid or hawtio-datatable there is the simple table: + + <table class="table table-striped" hawtio-simple-table="mygrid"></table> + +This lets you create a regular table element with whatever metadata you like and the <thead> and <tbody> will be generated from the column definitions to render the table dynamically; using the same kind of JSON configuration. + +This means you can switch between ng-grid, hawtio-datatable and hawtio-simple-table based on your requirements and tradeoffs (layout versus performance versus dynamic, user configurable views etc). + +#### Keep selection on data change + +The simple table uses a function evaluated as a primary key for the selected row(s). This ensures that the rows can be kept selected, when the underlying data changes due live updated. +When the data is changed, then it is often easier for a plugin to just create the data from scratch, instead of updating existing data. This allows developers to use the same logic +in the plugin for the initial data load, as well for subsequent data updates. + +For an example see the [quartz](https://github.com/hawtio/hawtio/tree/master/hawtio-web/src/main/webapp/app/quartz) plugin, using the function as shown below: + + primaryKeyFn: (entity, idx) => { return entity.group + "/" + entity.name } + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/datatable/html/test.html ---------------------------------------------------------------------- diff --git a/console/app/datatable/html/test.html b/console/app/datatable/html/test.html new file mode 100644 index 0000000..4b2440d --- /dev/null +++ b/console/app/datatable/html/test.html @@ -0,0 +1,70 @@ +<div ng-controller="SimpleTableTestController"> + <div class="row-fluid"> + <div class="section-header"> + + <div class="section-filter"> + <input type="text" class="search-query" placeholder="Filter..." ng-model="mygrid.filterOptions.filterText"> + <i class="icon-remove clickable" title="Clear filter" ng-click="mygrid.filterOptions.filterText = ''"></i> + </div> + + </div> + </div> + + <h3>hawtio-simple-table example</h3> + + <table class="table table-striped" hawtio-simple-table="mygrid"></table> + + <div class="row-fluid"> + <p>Selected folks:</p> + <ul> + <li ng-repeat="person in selectedItems">{{person.name}}</li> + </ul> + + <p> + <a class="btn" href="#/datatable/test?multi={{!mygrid.multiSelect}}">multi select is: {{mygrid.multiSelect}}</a> + </p> + </div> +</div> + + +<script type="text/javascript"> + function SimpleTableTestController($scope, $location) { + $scope.myData = [ + { name: "James", twitter: "jstrachan" }, + { name: "Stan", twitter: "gashcrumb" }, + { name: "Claus", twitter: "davsclaus" } + ]; + + $scope.selectedItems = []; + + + $scope.mygrid = { + data: 'myData', + showFilter: false, + showColumnMenu: false, + multiSelect: ($location.search()["multi"] || "").startsWith("f") ? false : true, + filterOptions: { + filterText: "", + useExternalFilter: false + }, + selectedItems: $scope.selectedItems, + rowHeight: 32, + selectWithCheckboxOnly: true, + columnDefs: [ + { + field: 'name', + displayName: 'Name', + width: "***" + //width: 300 + }, + { + field: 'twitter', + displayName: 'Twitter', + cellTemplate: '<div class="ngCellText">@{{row.entity.twitter}}</div>', + //width: 400 + width: "***" + } + ] + } + } +</script> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/elasticsearch/doc/help.md ---------------------------------------------------------------------- diff --git a/console/app/elasticsearch/doc/help.md b/console/app/elasticsearch/doc/help.md new file mode 100644 index 0000000..3521212 --- /dev/null +++ b/console/app/elasticsearch/doc/help.md @@ -0,0 +1,10 @@ +### Elasticsearch + +This hawtio plugin allows to connect to a ElasticSearch (http://www.elasticsearch.org/) server running on a machine (e.g : localhost:9200) and can be query to retrieve +documents from indices. By default the 'index Sample Docs' will populate an indices 'twitter' and create documents of type 'tweet'. + +Remarks : + + - Elasticsearch server must be started locally using command './elasticsearch -f' + - By default values can be changed in the config.js file + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/elasticsearch/html/es.html ---------------------------------------------------------------------- diff --git a/console/app/elasticsearch/html/es.html b/console/app/elasticsearch/html/es.html new file mode 100644 index 0000000..6b2aaa9 --- /dev/null +++ b/console/app/elasticsearch/html/es.html @@ -0,0 +1,187 @@ +<div ng-controller="ES.SearchCtrl"> + <div class=""> + <div class=""> + <div class="container-fluid"> + <button ng-click="indexSampleDocs()" class="btn btn-inverse pull-right">Index sample docs</button> + </div> + <br/> + <!--<a href="#/search"> <i class="icon-search"></i> Return to Search</a>--> + <table> + <tr> + <!-- Form --> + <td> + <div class="row-fluid"> + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="esServer" title="Default ES server">ES server</label> + + <div class="controls"> + <input id="esServer" name="esServer" type="text" ng-model="esServer"/> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="QueryTerm" title="Enter a term to query. Could be *">Query term</label> + + <div class="controls"> + <input id="QueryTerm" name="QueryTerm" type="text" ng-model="queryTerm"/> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="facetField" title="Enter facet field.">Facet field</label> + + <div class="controls"> + <input id="facetField" name="facetField" type="text" ng-model="facetField"/> + </div> + </div> + + <div class="control-group"> + <label class="control-label" for="facetType" title="Facet type (table, date histogram)">Facet type</label> + + <div class="controls"> + <select id="facetType" ng-model="facetType"> + <option selected value="terms">Table</option> + <option value="histogram">Histogram</option> + <option value="date_histogram">Date histogram</option> + </select> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="indice" title="Enter an index. By example - 'twitter'">Indice to be searched</label> + + <div class="controls"> + <input id="indice" name="indice" type="text" ng-model="indice"/> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="docType" title="Enter a document type. By example - 'tweet'">Document type</label> + + <div class="controls"> + <input id="docType" name="docType" type="text" ng-model="docType"/> + </div> + </div> + <div class="control-group" ng-show="facetType == 'terms'"> + <div class="controls"> + <input type="submit" value="ES Search" class="btn" ng-click="search()"/> + </div> + </div> + <div class="control-group" ng-show="facetType == 'histogram'"> + <div class="controls"> + <input type="submit" value="ES Histogram Facet Search" class="btn" ng-click="facetTermsSearch()"/> + </div> + </div> + <div class="control-group" ng-show="facetType == 'date_histogram'"> + <div class="controls"> + <input type="submit" value="ES Date Histogram Facet Search" class="btn" ng-click="facetDateHistogramSearch()"/> + </div> + </div> + </form> + </div> + </td> + <!-- Histogram --> + <td ng-show="facetType == 'histogram'"> + <div class="span10" style="height:350px"> + <span class="title">Histogram</span> + <fs:bar + width="900" + height="175" + duration="750" + bind="results.facets.termFacet" + /> + </div> + </td> + <td ng-show="facetType == 'date_histogram'"> + <div class="span8" style="height:350px"> + <span class="title">Date Histogram</span> + <fs:date-histo + duration="750" + interval="minute" + bind="results.facets.dateHistoFacet" + /> + </div> + </td> + </tr> + </table> + </div> + <div class="row-fluid"> + <div> + Documents Found : {{results.hits.total}} + <!--<a ng-ref="/search"> <i class="icon-search"></i> Return to Search</a>--> + <table class="table table-striped table-hover"> + <thead> + <tr> + <th>User</th> + <th>Posted Date</th> + <th>Message</th> + <th>Tags</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="doc in results.hits.hits"> + <td>{{doc._source.user}}</td> + <td>{{doc._source.postedDate}}</td> + <td>{{doc._source.message}}</td> + <td ng-repeat="tag in doc._source.tags">{{tag}}</td> + </tr> + </tbody> + </table> + </div> + </div> + + + <!-- TODO Error Panel + <div class="row-fluid"> + <div class="span12 alert alert-error panel-error" ng-hide="!panel.error"> + <a class="close" ng-click="panel.error=false">×</a> + <i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}} + </div> + </div> + --> + + <!-- + <div> + <div ng-controller='histogram' ng-init="init()" style="height:4"> + <style> + .histogram-legend { + display: inline-block; + padding-right: 5px + } + + .histogram-legend-dot { + display: inline-block; + height: 10px; + width: 10px; + border-radius: 5px; + } + + .histogram-legend-item { + display: inline-block; + } + + .histogram-chart { + position: relative; + } + </style> + <span ng-show="panel.spyable" class='spy panelextra pointer'> + <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i> + </span> + + <div> + <span ng-show='panel.zoomlinks && data'> + <a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a> + <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> | + </span> + <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend"> + <i class='icon-circle' ng-style="{color: series.info.color}"></i> + <span class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</span> + </span> + <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span> + </div> + + <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center> + <div histogram-chart class="histogram-chart" params="{{panel}}"></div> + </div> + </div> + --> + </div> + +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/forms/doc/developer.md ---------------------------------------------------------------------- diff --git a/console/app/forms/doc/developer.md b/console/app/forms/doc/developer.md new file mode 100644 index 0000000..0b8bbf2 --- /dev/null +++ b/console/app/forms/doc/developer.md @@ -0,0 +1,191 @@ +### Forms + +This plugin provides an easy way, given a [JSON Schema](http://json-schema.org/) model of generating a form with 2 way binding to some JSON data. + +For an example of it in action, see the [test.html](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/forms/html/test.html) or run it via [http://localhost:8282/hawtio/#/forms/test](http://localhost:8282/hawtio/#/forms/test). + +## Customizing the UI with tabs + +The easiest way to customise the generated form is to specify which order you want the fields to appear; or to move different fields onto different tabs using the **tabs** object on a json schema type. +e.g. + + tabs: { + 'Tab One': ['key', 'value'], + 'Tab Two': ['*'], + 'Tab Three': ['booleanArg'], + 'Tab Four': ['foo\\..*'] + } + +You can use "*" to refer to all the other properties not explicitly configured. + +In addition you can use regular expressions to bind properties to a particular tab (e.g. so we match foo.* nested properties to Tab Four above). + +## Hiding fields + +You can add a **hidden** flag on a property in a JSON schema to hide it from the auto-generated forms. Or you can set its type to be **hidden**. + +e.g. + + properties: { + foo: { + type: "string", + label: "My Foo Thingy" + }, + bar: { + type: "string", + hidden: true + } + } + +in the above, the _bar_ property will be hidden from the generated form + +## Customizing the labels and tooltips + +If you wish to specify a custom label for a property (as by default it will just humanize the id of the property), you can just specify the 'label' property inside the JSON Schema as follows: + + + properties: { + foo: { + type: "string", + label: "My Foo Thingy", + tooltip: "My tool tip thingy" + } + } + +The **label** and **tooltip** properties are not part of JSON Schema; but an extension like the **tabs** property above. + +### Disabling the 'humanize' of default labels + +If your schema doesn't have actual labels the default behaviour is to take the property keys and to _humanize_ them; to turn camelCaseWords into "Camel case words" and so forth. + +However if you wish to preserve exactly the keys/ids of the model on the form, you can specify the **disableHumanizeLabel** flag on the schema... + + schema: { + disableHumanizeLabel: true + properties: { + foo: { + type: "string", + } + } + } + +## Customising the element or attributes of the control + +There are various extra directives you can add to <input> controls like [ng-hide](http://docs.angularjs.org/api/ng.directive:ngHide), [typeahead](http://angular-ui.github.io/bootstrap/#/typeahead) and so forth which you can do using a nested **input-attributes** object. + + properties: { + foo: { + type: "string", + + 'input-attributes': { + typeahead: "title for title in myQuery($viewValue) | filter:$viewValue" + } + } + } + +The above would use the typehead directive to present a pick list of possible values; passing the current text field value so we can more efficiently filter results back from any remote method invocation. + +To define a custom [select widget](http://docs.angularjs.org/api/ng.directive:select) you can use the **input-element** value to specify a different element name to 'input' such as 'select': + + properties: { + foo: { + type: "string", + + 'input-element': "select" + 'input-attributes': { + 'ng-options': "c.name for c in colors" + } + } + } + +The above would generate HTML like this... + +``` + <select ng-options="c.name for c in colors" ng-model="..." title="..."></select> +``` + +### Autofocus on a field + +You can pass in the [autofocus attribute](http://davidwalsh.name/autofocus) on one of the fields so the browse will auto-focus on one field on startup via + +``` +# lets customise an existing schema +Core.pathSet(schema.properties, ['myField', 'input-attributes', 'autofocus'], 'true'); +``` + +or explicitly via + + properties: { + foo: { + type: "string", + 'input-attributes': { + autofocus: "true" + } + } + } + + +### Showing or hiding controls dynamically + +Use the **control-group-attributes** or **control-attributes** object to add ng-hide / ng-show expressions to controls to dynamically show/hide them based on the entity's values. e.g. to conditionally hide the entire control-group div with label and control use this: + + properties: { + foo: { + type: "string", + + 'control-group-attributes': { + 'ng-hide': "entity.bar == 'xyz'" + } + } + } + +### Customising label attributes + +Use the **label-attributes** object to add custom attributes for labels such as for the css class + + properties: { + foo: { + type: "string", + + 'label-attributes': { + 'class': 'control-label' + } + } + } + +### Ignoring prefix of deeply nested properties + + +If you use nested properties, the labels may include an unnecessary prefix if you use sub-tabs to show related nested properties. + +To avoid this add a flag called **ignorePrefixInLabel** to the type which contains the **properties** you wish to ignore the prefixes of. + +e.g. + + var myType = { + "type" : "object", + "properties" : { + "foo" : { + "properties" : { + "value" : { + "type" : "string" + } + } + }, + "bar" : { + ... + } + }, + ignorePrefixInLabel: true + } + +In the above the label for **foo.value** would just show _value_ rather than _foo value_ as the label. + +## Using custom controls + +To use a custom control use the **formTemplate** entry on a property to define the AngularJS partial to be used to render the form control. This lets you use any AngularJS directive or widget. + +For example if you search for **formTemplate** in the [code generated Camel json schema file](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/lib/camelModel.js#L120) you will see how the **description** property uses a _textarea_ + +## Live example +<div ng-include="'app/forms/html/test.html'"></div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/forms/html/formGrid.html ---------------------------------------------------------------------- diff --git a/console/app/forms/html/formGrid.html b/console/app/forms/html/formGrid.html new file mode 100644 index 0000000..eeb5002 --- /dev/null +++ b/console/app/forms/html/formGrid.html @@ -0,0 +1,62 @@ +<div> + + <script type="text/ng-template" id="heroUnitTemplate.html"> + <div class="hero-unit"> + <h5>No Items Added</h5> + <p><a href="" ng-click="addThing()">Add an item</a> to the table</p> + </div> + </script> + + <script type="text/ng-template" id="headerCellTemplate.html"> + <th>{{label}}</th> + </script> + + <script type="text/ng-template" id="emptyHeaderCellTemplate.html"> + <th></th> + </script> + + <script type="text/ng-template" id="deleteRowTemplate.html"> + <td ng-click="removeThing({{index}})" class="align-center"> + <i class="icon-remove red mouse-pointer"></i> + </td> + </script> + + <script type="text/ng-template" id="cellTemplate.html"> + <td> + <editable-property ng-model="{{row}}" + type="{{type}}" + property="{{key}}"></editable-property> + </td> + </script> + + <script type="text/ng-template" id="cellNumberTemplate.html"> + <td> + <editable-property ng-model="{{row}}" + type="{{type}}" + property="{{key}}" min="{{min}}" max="{{max}}"></editable-property> + </td> + </script> + + <script type="text/ng-template" id="rowTemplate.html"> + <tr></tr> + </script> + + <div ng-show="configuration.rows.length == 0" class="row-fluid"> + <div class="span12 nodata"> + </div> + </div> + <div ng-hide="configuration.rows.length == 0" class="row-fluid"> + <div class="span12"> + <h3 ng-show="configuration.heading">{{getHeading()}}</h3> + <table class="table table-striped"> + <thead> + </thead> + <tbody> + </tbody> + </table> + </div> + <div ng-click="addThing()" class="centered mouse-pointer"> + <i class="icon-plus green"></i><span ng-show="configuration.rowName"> Add {{configuration.rowName.titleize()}}</span> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/forms/html/formMapDirective.html ---------------------------------------------------------------------- diff --git a/console/app/forms/html/formMapDirective.html b/console/app/forms/html/formMapDirective.html new file mode 100644 index 0000000..d579da3 --- /dev/null +++ b/console/app/forms/html/formMapDirective.html @@ -0,0 +1,37 @@ +<div class="control-group"> + <label class="control-label" for="keyValueList">{{data[name].label || name | humanize}}:</label> + <div class="controls"> + <ul id="keyValueList" class="zebra-list"> + <li ng-repeat="(key, value) in entity[name]"> + <strong>Key:</strong> {{key}} <strong>Value:</strong> {{value}} + <i class="pull-right icon-remove red mouse-pointer" ng-click="deleteKey(key)"></i> + </li> + <li> + <button class="btn btn-success" ng-click="showForm = true" ng-hide="showForm"><i class="icon-plus"></i></button> + <div class="well" ng-show="showForm"> + <form class="form-horizontal"> + <fieldset> + <div class="control-group"> + <label class="control-label" for="newItemKey">Key:</label> + <div class="controls"> + <input id="newItemKey" type="text" ng-model="newItem.key"> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="newItemKey">Value:</label> + <div id="valueInput" class="controls"> + <input id="newItemValue" type="text" ng-model="newItem.value"> + </div> + </div> + <p> + <input type="submit" class="btn btn-success pull-right" ng-disabled="!newItem.key && !newItem.value" ng-click="addItem(newItem)" value="Add"> + <span class="pull-right"> </span> + <button class="btn pull-right" ng-click="showForm = false">Cancel</button> + </p> + </fieldset> + </form> + </div> + </li> + </ul> + </div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/forms/html/test.html ---------------------------------------------------------------------- diff --git a/console/app/forms/html/test.html b/console/app/forms/html/test.html new file mode 100644 index 0000000..23a41d2 --- /dev/null +++ b/console/app/forms/html/test.html @@ -0,0 +1,96 @@ +<div ng-controller='Forms.FormTestController'> + + <div class="row-fluid"> + <h3>Basic form</h3> + <p>Here's a basic form generated from some JSON schema</p> + + <p>Here's some example JSON schema definition</p> + <div hawtio-editor="basicFormEx1Schema" mode="javascript"></div> + <button class='btn' ng-click="updateSchema()"><i class="icon-save"></i> Update form</button> + + <p>You can define an entity object to have default values filled in</p> + <div hawtio-editor="basicFormEx1EntityString" mode="javascript"></div> + <button class='btn' ng-click="updateEntity()"><i class="icon-save"></i> Update form</button> + + <p>And here is the code for the form</p> + <div hawtio-editor="basicFormEx1" mode="html"></div> + + <p>The resulting form</p> + <div class="directive-example"> + <div compile="basicFormEx1"></div> + </div> + + <h3>Form related controls</h3> + <p>There's also directives to take care of resetting or submitting a form</p> + + <p></p> + <p>Clearing a form is done using the hawtio-reset directive</p> + <div hawtio-editor="hawtioResetEx" mode="html"></div> + <p>Click the button below to clear the above form</p> + <div class="directive-example"> + <div compile="hawtioResetEx"></div> + </div> + + <p>And to submit a form use hawtio-submit</p> + + <div hawtio-editor="hawtioSubmitEx" mode="html"></div> + <div class="directive-example"> + <div compile="hawtioSubmitEx"></div> + </div> + + <p>Fill in the form and click the submit button above to see what the form produces</p> + <div hawtio-editor="basicFormEx1Result" mode="javascript"></div> + <p></p> + <p></p> + <p></p> + <p></p> + </div> + + <!-- + + <h3>Form Testing</h3> + + <div> + <div class="control-group"> + <a class='btn' ng-href="" hawtio-submit='form-with-inline-arguments'><i class="icon-save"></i> Save</a> + <a class='btn' ng-href="" hawtio-reset='form-with-inline-arguments'><i class="icon-refresh"></i> Clear</a> + </div> + Form with inline arguments + <div simple-form name='form-with-inline-arguments' action='#/forms/test' method='post' data='setVMOption' entity='cheese' onSubmit="derp()"></div> + </div> + + <hr> + + <div> + Read Only Form with config object + <div class="row-fluid"> + <button class="btn" ng-click="toggleEdit()">Edit</button> + </div> + <div simple-form data='setVMOption' entity='cheese' mode='view'></div> + </div> + + <hr> + + <div> + Form with config object + <div simple-form='config'></div> + </div> + + <hr> + + <div> + form with inline json config + <div simple-form name='form-with-inline-json-config' action='#/forms/test' method='post' showTypes='false' json=' + { + "properties": { + "key": { "description": "Argument key", "type": "java.lang.String" }, + "value": { "description": "Argument value", "type": "java.lang.String" }, + "longArg": { "description": "Long argument", "type": "Long" }, + "intArg": { "description": "Int argument", "type": "Integer" }}, + "description": "Show some stuff in a form from JSON", + "type": "java.lang.String" + }'></div> + </div> + + --> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/forms/html/testTable.html ---------------------------------------------------------------------- diff --git a/console/app/forms/html/testTable.html b/console/app/forms/html/testTable.html new file mode 100644 index 0000000..6cf40f6 --- /dev/null +++ b/console/app/forms/html/testTable.html @@ -0,0 +1,10 @@ +<div ng-controller='Forms.FormTestController'> + + <h3>Input Table Testing</h3> + + <div> + input table with config object + <div hawtio-input-table="inputTableConfig" entity="inputTableData" data="inputTableConfig" property="rows"></div> + </div> + +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/ide/doc/developer.md ---------------------------------------------------------------------- diff --git a/console/app/ide/doc/developer.md b/console/app/ide/doc/developer.md new file mode 100644 index 0000000..a462ed2 --- /dev/null +++ b/console/app/ide/doc/developer.md @@ -0,0 +1,13 @@ +### IDE + +The IDE plugin makes it easy to be able to link to a source file on a hawtio view so that it can opened for editing in your IDE. Currently supported IDEs are: + +* [IDEA](http://www.jetbrains.com/idea/) + +To use the directive just include the following markup on a page... + + <hawtio-open-ide file-name="Foo.java" class-name="com.acme.Foo" line="20" column="3"></hawtio-open-ide> + +The class-name attribute is often included in log files and stack traces; often the file name has no directory part; so the directive combines as best it can the path information from the package with the file name; then uses the IdeFacadeMBean's [findClassAbsoluteFileName() method](https://github.com/hawtio/hawtio/blob/master/hawtio-ide/src/main/java/io/hawt/ide/IdeFacadeMBean.java#L14-14) to find the absolute file locally on disk so that it can be opened up in IDEA. + +Then you can enable/disable whichever IDEs you like to use; so the right links/buttons appear for you (or you can hide them). \ No newline at end of file http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/ide/img/intellijidea.png ---------------------------------------------------------------------- diff --git a/console/app/ide/img/intellijidea.png b/console/app/ide/img/intellijidea.png new file mode 100644 index 0000000..8f30117 Binary files /dev/null and b/console/app/ide/img/intellijidea.png differ http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/log/doc/help.md ---------------------------------------------------------------------- diff --git a/console/app/log/doc/help.md b/console/app/log/doc/help.md new file mode 100644 index 0000000..b8fe03c --- /dev/null +++ b/console/app/log/doc/help.md @@ -0,0 +1,60 @@ +### Logs + +When we run middleware we spend an awful lot of time looking at and searching logs. With [hawtio](http://hawt.io/) we don't just do logs, we do _hawt logs_. + +Sure logs are nicely coloured and easily filtered as you'd expect. But with hawtio we try to link all log statements and exception stack traces to the actual lines of code which generated them; so if a log statement or line of exception doesn't make sense - just click the link and view the source code! Thats _hawt_! + +We can't guarantee to always be able to do download the source code; we need to find the maven coordinates (group ID, artifact ID, version) of each log statement or line of stack trace to be able to do this. So awesomeness is not guaranteed, but it should work for projects which have published their source code to either the global or your local maven repository. + +We should try encourage all projects to publish their source code to maven repositories (even if only internally to an internal maven repo for code which is not open source). + +##### How to enable hawtio logs + +Hawtio uses an MBean usually called LogQuery which implements the [LogQuerySupportMBean interface](https://github.com/fusesource/fuse/blob/master/insight/insight-log-core/src/main/java/org/fusesource/insight/log/support/LogQuerySupportMBean.java#L26) from either the [insight-log](https://github.com/fusesource/fuse/tree/master/insight/insight-log) or [insight-log4j](https://github.com/fusesource/fuse/tree/master/insight/insight-log4j) bundles depending on if you are working inside or outside of OSGi respectively. + +If you are using OSGi and use [Fuse Fabric](http://fuse.fusesource.org/fabric/) or [Fuse ESB](http://fusesource.com/products/fuse-esb-enterprise/) you already have [insight-log](https://github.com/fusesource/fuse/tree/master/insight/insight-log) included. If not, or you are just using Apache Karaf just add the **insight-log** bundle. + +If you are not using OSGi then you just need to ensure you have [insight-log4j](https://github.com/fusesource/fuse/tree/master/insight/insight-log4j) in your WAR when you deploy hawtio; which is already included in the [hawtio sample war](https://github.com/hawtio/hawtio/tree/master/sample). + +Then you need to ensure that the LogQuery bean is instantiated in whatever dependency injection framework you choose. For example this is [how we initialise LogQuery](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/test/resources/applicationContext.xml#L18) in the [sample war](https://github.com/hawtio/hawtio/tree/master/sample) using spring XML: + + <bean id="logQuery" class="io.fabric8.insight.log.log4j.Log4jLogQuery" + lazy-init="false" scope="singleton" + init-method="start" destroy-method="stop"/> + +##### Things that could go wrong + +* If you have no Logs tab in hawtio, then + * if you are in OSGi it means you are not running either the [insight-log bundle](https://github.com/fusesource/fuse/tree/master/insight/insight-log) + * if you are outside of OSGi it means you have not added the [insight-log4j jar](https://github.com/fusesource/fuse/tree/master/insight/insight-log4j) to your hawtio web app or you have not properly initialised the insight-log4j jar to then initialise the LogQuery mbean +* If links don't appear in the Logger column on the logs tab of your hawtio then the maven coordinates cannot be resolved for some reason +* If links are there but clicking on them cannot find any source code it generally means the maven repository resolver is not working. You maybe need to configure a local maven repository proxy so hawtio can access the source jars? Or maybe you need to start publishing the source jars? + +##### How hawtio logs work + +To be able to link to the source we need the maven coordinates (group ID, artifact ID, version), the relative file name and line number. + +Most logging frameworks generate the className and/or file name along with the line number; the maven coordinates are unfortunately not yet common. + +There's been [an idea to add better stack traces to log4j](http://macstrac.blogspot.co.uk/2008/09/better-stack-traces-in-java-with-log4j.html) along with a [patch](https://issues.apache.org/bugzilla/show_bug.cgi?id=45721) which is now included in log4j. Then a similar patch has been added to [logback](http://jira.qos.ch/browse/LOGBACK-690) + +The missing part is to also add maven coordinates to non-stack traces; so all log statements have maven coordinates too. This is then implemented by either the [insight-log](https://github.com/fusesource/fuse/tree/master/insight/insight-log) or [insight-log4j](https://github.com/fusesource/fuse/tree/master/insight/insight-log4j) bundles depending on if you are working inside or outside of OSGi respectively. + +##### The hawtio source plugin + +Once we've figured out the maven coordinates, class & file name and line number we need to link to the source code from the [log plugin](https://github.com/hawtio/hawtio/tree/master/hawtio-web/src/main/webapp/app/log). This is where the [source plugin](https://github.com/hawtio/hawtio/tree/master/hawtio-web/src/main/webapp/app/source) comes in. + +If you wish to use links to source code from any other [hawtio plugin](http://hawt.io/plugins/index.html) just use the following link syntax for your hypertext link: + + #/source/view/:mavenCoords/:className/:fileName + +e.g. to link to a line of the camel source code you could use the following in your HTML: + + <a href="#/source/view/org.apache.camel:camel-core:2.10.0/org.apache.camel.impl.DefaultCamelContext/DefaultCamelContext.java?line=1435"> + org.apache.camel.impl.DefaultCamelContext.java line 1435</a> + +Note that the className argument is optional; its usually there as often logging frameworks have the fully qualified class name, but just a local file name (like _DefaultCamelContext.java_ above). + +You can also specify a list of space separated maven coordinates in the mavenCoords parameter; the server will scan each maven coordinate in turn looking for the file. This helps deal with some uberjars which really combine multiple jars together and so require looking into the source of each of their jars. + + http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/log/html/logs.html ---------------------------------------------------------------------- diff --git a/console/app/log/html/logs.html b/console/app/log/html/logs.html new file mode 100644 index 0000000..9d23bb4 --- /dev/null +++ b/console/app/log/html/logs.html @@ -0,0 +1,200 @@ +<div ng-controller="Log.LogController"> + <div ng-hide="inDashboard" class="logbar"> + <div class="logbar-container"> + <hawtio-filter ng-model="searchText" placeholder="Filter logs..." save-as="logs-text-filter"></hawtio-filter> + <div class="control-group inline-block"> + <form class="form-inline no-bottom-margin"> + <label> Level: </label> + + <select ng-model="filter.logLevelQuery" id="logLevelQuery"> + <option value="" selected="selected">None...</option> + <option value="TRACE">TRACE</option> + <option value="DEBUG">DEBUG</option> + <option value="INFO">INFO</option> + <option value="WARN">WARN</option> + <option value="ERROR">ERROR</option> + </select> + + <label>Exact: + <input type="checkbox" ng-model="filter.logLevelExactMatch" + title="Only match exact logging levels rather than using ranges"/> + </label> + + <label>Message Only: + <input type="checkbox" ng-model="filter.messageOnly" + title="Only search inside the message field"/> + </label> + </form> + </div> + + <div class="pull-right"> + <div class="control-group inline-block"> + <a class="btn" ng-href="{{addToDashboardLink()}}" title="Add this view to a dashboard"> + <i class="icon-share"></i> + </a> + </div> + </div> + </div> + </div> + + <div class="controller-section log-main" ng-show="logs.length > 0"> + + <!-- + <div class="gridStyle" hawtio-datatable="gridOptions"></div> + --> + + <ul class="log-table" ng-class="isInDashboardClass()"> + <li class="table-head"> + <div> + <div></div> + <div><span><i ng-class="sortIcon"></i> Timestamp</span></div> + <div>Level</div> + <div>Logger</div> + <div>Message</div> + </div> + </li> + <li class="table-row" ng-repeat="log in logs" ng-show="filterLogMessage(log)" ng-class="selectedClass($index)"> + <div ng-click="selectRow($index)"> + <div class="title"> + <i class="expandable-indicator"></i> + </div> + <!-- we may have the timestamp with milli seconds (not available in all containers) --> + <div class="title">{{log | logDateFilter}}</div> + <div class="title"><span class="text-{{logClass(log)}}"><i class="{{logIcon(log)}}"></i> {{log.level}}</span></div> + <div title="{{log.logger}}" ng-switch="hasLogSourceHref(log)"> + <a ng-href="{{logSourceHref(log)}}" ng-switch-when="true">{{log.logger}}</a> + <span ng-switch-default>{{log.logger}}</span> + </div> + <div class="title" ng-bind-html-unsafe="log.message | highlight:searchText:caseSensitive"></div> + <!-- + <div class="expandable-body well"> + {{log.message}} + <dl class="log-stack-trace" ng-hide="!log.exception"> + <dt>Stack Trace:</dt> + <dd ng-bind-html-unsafe="formatStackTrace(log.exception)"></dd> + </dl> + + </div> + --> + </div> + </li> + </ul> + + </div> + + <div ng-show="showRowDetails" class="log-info-panel"> + <div class="log-info-panel-frame"> + <div class="log-info-panel-header"> + + <div class="row-fluid"> + <button class="btn" ng-click="showRowDetails = false"><i class="icon-remove"></i> Close</button> + <div class="btn-group" + style="margin-top: 9px;" + hawtio-pager="logs" + on-index-change="selectRow" + row-index="selectedRowIndex"> + </div> + <span>{{selectedRow | logDateFilter}}</span> + <span class="text-{{logClass(selectedRow)}}"><i class="{{logIcon(selectedRow)}}"></i> <strong>{{selectedRow.level}}</strong></span> + </div> + + <div class="row-fluid"> + <span title="{{selectedRow.logger}}" ng-switch="hasLogSourceHref(selectedRow)"> + <strong>Logger:</strong> + <a ng-href="{{logSourceHref(selectedRow)}}" ng-switch-when="true">{{selectedRow.logger}}</a> + <span ng-switch-default>{{selectedRow.logger}}</span> + </span> + </div> + </div> + + <div class="log-info-panel-body"> + + <div class="row-fluid" ng-show="hasLogSourceLineHref(selectedRow)"> + <span><strong>Class:</strong> <span class="green">{{selectedRow.className}}</span></span> + <span><strong>Method:</strong> {{selectedRow.methodName}}</span> + <span><strong>File:</strong> <span class="blue">{{selectedRow.fileName}}</span>:<span class="green">{{selectedRow.lineNumber}}</span></span> + </div> + + <div class="row-fluid"> + <span ng-show="selectedRow.host"><strong>Host:</strong> {{selectedRow.host}}</span> + <span><strong>Thread:</strong> {{selectedRow.thread}}</span> + </div> + + <div class="row-fluid" ng-show="hasOSGiProps(selectedRow)"> + <span ng-show="selectedRow.properties['bundle.name']"> + <strong>Bundle Name:</strong> <span class="green">{{selectedRow.properties['bundle.name']}}</span> + </span> + <span ng-show="selectedRow.properties['bundle.id']"> + <strong>Bundle ID:</strong> {{selectedRow.properties['bundle.id']}} + </span> + <span ng-show="selectedRow.properties['bundle.version']"> + <strong>Bundle Version:</strong> {{selectedRow.properties['bundle.version']}} + </span> + </div> + + <div class="row-fluid"> + <dl class="log-message"> + <dt> + <span>Message:</span> + <button class="btn" + zero-clipboard + data-clipboard-text="{{selectedRow.message}}" + title="Click to copy this message to the clipboard"> + <i class="icon-copy"></i> + </button> + </dt> + <dd><div hawtio-editor="selectedRow.message" read-only="true"></div></dd> + </dl> + <dl class="log-stack-trace" ng-hide="!selectedRow.exception"> + <dt> + <span>Stack Trace:</span> + <button class="btn" + zero-clipboard + data-clipboard-text="{{selectedRow.exception}}" + title="Click to copy this stacktrace to the clipboard"> + <i class="icon-copy"></i> + </button> + </dt> + <dd ng-bind-html-unsafe="formatStackTrace(selectedRow.exception)"></dd> + </dl> + </div> + + <!-- + <div class="expandable" model="showRaw"> + <div class="title"> + <i class="expandable-indicator"></i><span> Show JSON</span> + </div> + <div class="expandable-body"> + <div hawtio-editor="getSelectedRowJson()" read-only="true" mode="javascript"></div> + </div> + </div> + --> + + </div> + </div> + </div> + + <div class="controller-section no-log" ng-show="logs.length == 0"> + Loading... + </div> + + <!-- + <script type="text/ng-template" id="logDetailTemplate"> + <div class="title"> + {{row.message}} + </div> + + <dl ng-hide="!row.exception"> + <dt>Stack Trace:</dt> + <dd> + <ul class="unstyled" ng-repeat="line in row.exception"> + + <li class="stacktrace" ng-bind-html-unsafe="formatException(line)"></li> + </ul> + </dd> + </dl> + + </script> + --> + +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/3c9a22b4/console/app/log/html/preferences.html ---------------------------------------------------------------------- diff --git a/console/app/log/html/preferences.html b/console/app/log/html/preferences.html new file mode 100644 index 0000000..d8e258b --- /dev/null +++ b/console/app/log/html/preferences.html @@ -0,0 +1,43 @@ +<div ng-controller="Log.PreferencesController"> + + <form class="form-horizontal"> + <label class="control-label">Sort ascending</label> + <div class="control-group"> + <div class="controls"> + <input type="checkbox" ng-model="logSortAsc"> + <span class="help-block">Ascending inserts new log lines in the bottom, descending inserts new log lines in the top</span> + </div> + </div> + </form> + + <form class="form-horizontal"> + <label class="control-label">Auto scroll</label> + <div class="control-group"> + <div class="controls"> + <input type="checkbox" ng-model="logAutoScroll"> + <span class="help-block">Whether to automatic scroll window when new log lines are added</span> + </div> + </div> + </form> + + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="logCacheSize" title="The number of log messages to keep in the browser">Log + cache size</label> + <div class="controls"> + <input id="logCacheSize" type="number" ng-model="logCacheSize" min="0"/> + </div> + </div> + </form> + + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="logBatchSize" title="The maximum number of log messages to retrieve when loading new log lines">Log + batch size</label> + <div class="controls"> + <input id="logBatchSize" type="number" ng-model="logBatchSize" min="1" max="1000"/> + </div> + </div> + </form> + +</div> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@qpid.apache.org For additional commands, e-mail: commits-h...@qpid.apache.org
