[BROOKLYN-166] add codemirror, yaml syntax-highlighting, autocompletion)

[azbarcea]

I was looking into the codemirror integration.

I didn't integrate it in all the views, only in application-add-wizard.js, and I look forward to your feedback.

I tried to improve the scroll down and now, there aren't 2 scrollers. There is only one for the editor.

The following things are still open:

• I excluded rat-plugin for the files added (actually, right now excludes the whole src).
• I had to modify the original codemirror addons and modes to include codemirror instead of ../../lib/codemirror
• The way angular.js views and require.js is used (using the config.js), make the presumptions the javascript libraries are static in libs. Similar to mvn, I propose grunt and npm to be used, so that the whole libs directory to disappear.
• I have no yaml-hint.js, or even camp-hint.js. I need to study further the CAMP spec for it. I think also that brooklyn has a little different spec for .yaml files, extending the language. I am right? Right now, I used the anyword-hint.js, which adds to the hints (auto-completion), the words that already exist in the document.
• There are many themes that can be added, I will also add a configuration for: addons, modes, themes to be used globally. Maybe this should be at user profile level ?!?

[azbarcea]

Testing from usage/dist/target/brooklyn-dist/brooklyn/bin/brooklyn launch doesn't work.

Tested with

org.apache.brooklyn.rest.jsgui.BrooklynJavascriptGuiLauncher -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005

I'll take a look at what's missing, tomorrow

[asfbot]

incubator-brooklyn-pull-requests #1728 SUCCESS
This pull request looks good

[tbouron]

Tested, it works great. There are indeed two scrolls but that should be easily fixable with a bit of CSS. Also, the editor is only one line height, could we extend to the height of the pop-up by default?

Regarding the autocompletion, my view on that is first to pull out the catalogue entities when we are on a type: line. We can even imagine to have specific hints based on where we are, like having all the provisioning properties after a provisioning.properties: and so on.

[hzbarcea]

@tbouron, regarding extending to the hight of the pop-up, we could integrate the tree view you proposed a while back. I don't know if that could be done without enlarging the pop-up which will impact the other tabs. Unless we make it a different pop-up or view. WDYT?

[ahgittin]

A few comments:

• If I have nothing in the catalog, it shows me YAML editor and it looks nice. Surprising at first how lines are added but it's nice. Cut and paste and other things work as expected.
• If I then click on the "catalog" tab, with nothing there, i have option to write YAML blueprint. I click that button and it returns me to the YAML tab, but a new editor is added. This looks like a bug.
• If I leave the wizard, go to the catalog and add some YAML (e.g. default.catalog.bom from CLI project), then open the add wizard, I have the catalog tab selected (good), but then when I go to the YAML editor I get the old YAML view.

Of course we need RAT re-enabled.

Code completion will require some REST API enhancements or better understanding of the model in the client. I'd also like to see this as a separate main tab, rather than a wizard. But we can leave these for a follow-on PR, as with the bug fixes before this paragraph resolved, this is a nice improvement.

[azbarcea]

@ahgittin - I will take a look to the bug. Also keep in mind that is not integrated in all the views, neither the events aren't propagated.

@tbouron, is there a documentation for the CAMP syntax/semantics (for hint) besides the spec?

[ahgittin]

There is a Brooklyn camp yaml reference on the website. Most useful thin
would be autocomplete for catalog item types and their configuration keys
both of which are exposed through rest api.
On 26 Aug 2015 19:15, "Alexandru Zbarcea" notifications@github.com wrote:

@ahgittin https://github.com/ahgittin - I will take a look to the bug.
Also keep in mind that is not integrated in all the views, neither the
events aren't propagated.

@tbouron https://github.com/tbouron, is there a documentation for the
CAMP syntax/semantics (for hint) besides the spec
http://docs.oasis-open.org/camp/camp-spec/v1.1/camp-spec-v1.1.html?

—
Reply to this email directly or view it on GitHub
#865 (comment)
.

Cloudsoft Corporation Limited, Registered in Scotland No: SC349230.
Registered Office: 13 Dryden Place, Edinburgh, EH9 1RP

This e-mail message is confidential and for use by the addressee only. If
the message is received by anyone other than the addressee, please return
the message to the sender by replying to it and then delete the message
from your computer. Internet e-mails are not necessarily secure. Cloudsoft
Corporation Limited does not accept responsibility for changes made to this
message after it was sent.

Whilst all reasonable care has been taken to avoid the transmission of
viruses, it is the responsibility of the recipient to ensure that the
onward transmission, opening or use of this message and any attachments
will not adversely affect its systems or data. No responsibility is
accepted by Cloudsoft Corporation Limited in this regard and the recipient
should carry out such virus and other checks as it considers appropriate.

[CMoH]

I think it's this page, right?

https://brooklyn.incubator.apache.org/v/latest/yaml/yaml-reference.html

[tbouron]

Yes @CMoH, this is the page that @hzbarcea was looking for.

[tbouron]

@hzbarcea To be honest, I'm not so sure anymore about the drag and drop editor. It is certainly a good feature for a sales point of view but I'm wondering about the usability. I think that having a good YAML editor with a good autocompletion feature over Brooklyn CAMP spec is a better approach for now.

We could also imagine to have something a bit like swagger, i.e. having a live representation of the YAML as a tree or nodes. That would be great!

[ahgittin]

I think a drag-and-drop editor is very important for new users, especially if it generates the YAML which will help them move to become advanced users.

[ahgittin]

@azbarcea can you address the issues blocking this being merged?

[ahgittin]

ping @azbarcea

[asfbot]

incubator-brooklyn-pull-requests #1815 FAILURE
Looks like there's a problem with this pull request

[azbarcea]

@ahgittin, @CMoH - fixed CodeMirror integration.

Please review. I look forward to your feedback.

[azbarcea]

fixed merge ... with latest code base

[asfbot]

incubator-brooklyn-pull-requests #1816 SUCCESS
This pull request looks good

[tbouron]

This line can be removed

[azbarcea]

I fixed the indentation ... any thoughts?

[azbarcea]

Having issues with the current Modal Wizzard and adding the CodeMirror editor, I'm proposing having the Editor as a tab next to Home.

The proposal and the updates will continue on this PR.

[ahgittin]

@azbarcea +1. maybe call it "Composer" rather than "Editor", and I think don't show the catalog on this tab (we have the catalog tab).

[azbarcea]

@ahgittin I'll rename it to composer! +1

Regarding the Catalog, I think is a good proposal (+1), and I can have propose it as a different PR, based also on the community feedback.

I'm working to resolve the Jenkins build also ... I'll do the merge!

[ahgittin]

merge conflicts with recent swagger changes but i've resolved those; now reviewing

[ahgittin]

a lot of log statements in the JS -- probably okay but looks a little weird if someone opens the JS console. maybe logging should be disabled by default (ie log(...) has no effect) but there would be an easy way to enable logging.

[ahgittin]

what does this mean?

[azbarcea]

this line means that the CSS from index.html should be minimized as well ... I will address this issue!

I will remove the logs. They had some meaning for me, but definitely doesn't make sense for everybody. The logs should be removed though by the minification step.

[ahgittin]

the following issues are still outstanding:

• check/fix overflow-x: scroll for textareas, likely others depend on this style you've removed -- https://github.com/apache/incubator-brooklyn/pull/865/files#diff-2c00b2e9ba84934a94b937199763e780L28
• 3rd party deps into libs/ like the others, not in lib/ and addons/ (or say why not)
• revert auto-scanning of classpath for REST API; it significantly increases startup time and typically we don't want it (you can trigger a scan by POSTing a suitable catalog.bom if you need to, or add those explicit items you wish to have); if you think it should be there, please give more details -- https://github.com/apache/incubator-brooklyn/pull/865/files#diff-b8eba103a5475b653aaba9dd4fe8827cR55

new ones:

• UI does not run: :8081/assets/js/router.js:39 Uncaught TypeError: serverStatus.addCallback is not a function (and we get the same error with JS jasmine tests: [ERROR] java.lang.RuntimeException: org.openqa.selenium.WebDriverException: com.gargoylesoftware.htmlunit.ScriptException: Wrapped com.gargoylesoftware.htmlunit.ScriptException: Wrapped com.gargoylesoftware.htmlunit.ScriptException: TypeError: Cannot find function addCallback in object [object Object]. (http://localhost:57004/src/js/router.js#39))
• license metadata needs to be added to overrides.yaml (the LICENSE files are autogenerated from this) - https://github.com/apache/incubator-brooklyn/pull/865/files#diff-001a0bdd771ea5cf50f47cd08ce6a0dcR356

ability to test is limited by the above issues!

[ahgittin]

this is what is breaking the run -- we don't use it locally so we can remove it I think; but if it's added of course there needs to be a corresponding CodeMirror argument to the following function

[ahgittin]

i've fixed the problem with startup. now looks much better, and tests work.

however:

• i thought "Editor" was going to be called "Composer"
• when using the pop-up wizard there should be a flow by which i can go to the composer populated with the YAML for what i've built (this is what the preview button typically does; maybe we should have the preview enabled even on the first step of the wizard if i have something selected)
• on catalog page, add, if i click "yaml" to add a yaml catalog item, nothing happens -- i think it should take me to the blueprint editor, perhaps pre-populated with a sample item a la http://brooklyn.apache.org/v/latest/ops/catalog/index.html (NB catalog has a different syntax than normal deployments; it also accepts the normal deployment syntax), or see below
• do we want a "Help" button on the composer, e.g. with a dropdown that has "insert template blueprint", "insert template catalog addition", "go to online documentation"
• on the editor page what is "Delete" supposed to do? currently seems to do nothing. perhaps remove? or comment out with TODO if you think it might do something in future. (i'm not sure it does.)
• on the editor page the "Run" button doesn't work; it constructs a POST but it is malformed
• no feedback is given after clicking "Run"; on success it should take you to the "Applications" tab with the app highlighted (you have the app ID in the response code so that should be easy), and on failure it should show a message
• there should be an "Add to Catalog" button on the editor/composer which has same feedback after clicking, taking you to catalog page (same as if you clicked the old catalog add yaml button)

[ahgittin]

my fix for the router.js failure and merge conflicts is at https://github.com/ahgittin/incubator-brooklyn/tree/ui

@azbarcea I suggest you merge it in here

[azbarcea]

merged with @ahgittin ui branch ... will address the above issues ...