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

azbarcea · 2015-08-23T22:48:28Z

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 · 2015-08-23T23:06:54Z

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 · 2015-08-23T23:07:29Z

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

tbouron · 2015-08-26T07:40:31Z

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 · 2015-08-26T11:18:19Z

@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 · 2015-08-26T14:39:17Z

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 · 2015-08-26T18:14:58Z

@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 · 2015-08-26T19:41:32Z

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" [email protected] 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 · 2015-08-27T08:01:48Z

I think it's this page, right?

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

tbouron · 2015-08-27T08:10:50Z

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

tbouron · 2015-08-27T08:17:51Z

@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 · 2015-09-08T13:50:37Z

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 · 2015-09-08T13:51:01Z

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

ahgittin · 2015-09-15T16:49:46Z

ping @azbarcea

asfbot · 2015-09-18T00:04:33Z

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

azbarcea · 2015-09-18T00:06:32Z

@ahgittin, @CMoH - fixed CodeMirror integration.

Please review. I look forward to your feedback.

azbarcea · 2015-09-18T00:52:15Z

fixed merge ... with latest code base

asfbot · 2015-09-18T00:55:26Z

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

tbouron · 2015-09-18T06:25:30Z

usage/jsgui/src/main/webapp/assets/css/brooklyn.css

@@ -25,7 +25,7 @@ BODY {
 textarea {
    white-space: pre;
    word-wrap: normal;
-    overflow-x: scroll;
+/*    overflow-x: scroll; */


This line can be removed

azbarcea · 2015-09-18T21:13:53Z

I fixed the indentation ... any thoughts?

azbarcea · 2015-11-18T13:19:54Z

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 · 2015-11-18T15:31:46Z

@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 · 2015-11-19T03:58:12Z

@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!

Conflicts: - trivial - license inclusion updates nearby, and apidoc removed where editordoc added usage/jsgui/src/main/license/files/LICENSE usage/jsgui/src/main/license/source-inclusions.yaml usage/jsgui/src/main/webapp/assets/js/router.js

ahgittin · 2015-11-27T09:53:10Z

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

ahgittin · 2015-11-27T09:57:40Z

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 · 2015-11-27T10:07:19Z

usage/jsgui/src/main/webapp/index.html

@@ -26,6 +26,11 @@

    <title>Brooklyn JS REST client</title>

+    <!-- TODO: following CSS to config.js -->


what does this mean?

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 · 2015-11-27T10:15:32Z

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 · 2015-11-27T10:19:44Z

usage/jsgui/src/main/webapp/assets/js/router.js

@@ -18,14 +18,15 @@
 */
 define([
    "brooklyn", "underscore", "jquery", "backbone",
+    "codemirror",


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 · 2015-11-27T10:32:47Z

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 · 2015-11-27T10:36:40Z

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

…master

azbarcea · 2015-11-27T14:39:01Z

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

…irror Continuatiion of work started in apache/incubator-brooklyn#865 for BROOKLYN-166

azbarcea added 4 commits September 17, 2015 20:26

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

9d0ff3a

[BROOKLYN-166] fix old-editor redraw; catalog entry yaml editor

c1a40a7

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

f68bbcc

[BROOKLYN-166] fix old-editor redraw; catalog entry yaml editor

b42ebdb

azbarcea force-pushed the codemirror-yaml branch from 72a9ebf to b42ebdb Compare September 18, 2015 00:35

tbouron reviewed Sep 18, 2015
View reviewed changes

fix identation; remove unused code

6008c5e

azbarcea added 4 commits November 14, 2015 14:57

remove yamlTab from ModalWizzard

c4f0c79

add editor tab; copied from apidoc

2dfe4d1

add catalog and tab section for editor tab

c900952

merge with editor branch

b90bb46

azbarcea and others added 6 commits November 22, 2015 18:07

fix identation for brooklyn.css

95c4c27

remove catalog pane from composer

4e6de63

add codemirror editor

59968ea

add run; onSubmissionComplete

3839319

Merge branch 'codemirror3' into codemirror-yaml

d925dcc

This closes apache#865

5ace388

Conflicts: - trivial - license inclusion updates nearby, and apidoc removed where editordoc added usage/jsgui/src/main/license/files/LICENSE usage/jsgui/src/main/license/source-inclusions.yaml usage/jsgui/src/main/webapp/assets/js/router.js

ahgittin reviewed Nov 27, 2015
View reviewed changes

correct router.js args mismatch re CodeMirror

bce8d79

azbarcea added 3 commits November 27, 2015 09:26

fix missplaced license for CodeMirror

3c9cbcc

add error div

1125983

merge ahgittin/ui; fix for the router.js; fix merge conflicts apache/…

31091a8

…master

Merge branch 'apache-master' into codemirror-yaml

b2fbc4b

m4rkmckenna added a commit to m4rkmckenna/brooklyn-ui that referenced this pull request Feb 2, 2016

Replace existing textareas for editing YAML with Composer Tab + Codem…

df7c009

…irror Continuatiion of work started in apache/incubator-brooklyn#865 for BROOKLYN-166

m4rkmckenna added a commit to m4rkmckenna/brooklyn-ui that referenced this pull request Feb 2, 2016

Replace existing textareas for editing YAML with Composer Tab + Codem…

4174bdb

…irror Continuatiion of work started in apache/incubator-brooklyn#865 for BROOKLYN-166

m4rkmckenna mentioned this pull request Feb 2, 2016

[BROOKLYN-166] Replace existing textareas for editing YAML with Composer Tab + Codemirror apache/brooklyn-ui#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

azbarcea commented Aug 23, 2015

azbarcea commented Aug 23, 2015

asfbot commented Aug 23, 2015

tbouron commented Aug 26, 2015

hzbarcea commented Aug 26, 2015

ahgittin commented Aug 26, 2015

azbarcea commented Aug 26, 2015

ahgittin commented Aug 26, 2015

CMoH commented Aug 27, 2015

tbouron commented Aug 27, 2015

tbouron commented Aug 27, 2015

ahgittin commented Sep 8, 2015

ahgittin commented Sep 8, 2015

ahgittin commented Sep 15, 2015

asfbot commented Sep 18, 2015

azbarcea commented Sep 18, 2015

azbarcea commented Sep 18, 2015

asfbot commented Sep 18, 2015

tbouron Sep 18, 2015

azbarcea commented Sep 18, 2015

azbarcea commented Nov 18, 2015

ahgittin commented Nov 18, 2015

azbarcea commented Nov 19, 2015

ahgittin commented Nov 27, 2015

ahgittin commented Nov 27, 2015

ahgittin Nov 27, 2015

azbarcea Nov 27, 2015

ahgittin commented Nov 27, 2015

ahgittin Nov 27, 2015

ahgittin commented Nov 27, 2015

ahgittin commented Nov 27, 2015

azbarcea commented Nov 27, 2015

		@@ -26,6 +26,11 @@

		<title>Brooklyn JS REST client</title>

		<!-- TODO: following CSS to config.js -->

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

Are you sure you want to change the base?

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

Conversation

azbarcea commented Aug 23, 2015

azbarcea commented Aug 23, 2015

asfbot commented Aug 23, 2015

tbouron commented Aug 26, 2015

hzbarcea commented Aug 26, 2015

ahgittin commented Aug 26, 2015

azbarcea commented Aug 26, 2015

ahgittin commented Aug 26, 2015

CMoH commented Aug 27, 2015

tbouron commented Aug 27, 2015

tbouron commented Aug 27, 2015

ahgittin commented Sep 8, 2015

ahgittin commented Sep 8, 2015

ahgittin commented Sep 15, 2015

asfbot commented Sep 18, 2015

azbarcea commented Sep 18, 2015

azbarcea commented Sep 18, 2015

asfbot commented Sep 18, 2015

tbouron Sep 18, 2015

Choose a reason for hiding this comment

azbarcea commented Sep 18, 2015

azbarcea commented Nov 18, 2015

ahgittin commented Nov 18, 2015

azbarcea commented Nov 19, 2015

ahgittin commented Nov 27, 2015

ahgittin commented Nov 27, 2015

ahgittin Nov 27, 2015

Choose a reason for hiding this comment

azbarcea Nov 27, 2015

Choose a reason for hiding this comment

ahgittin commented Nov 27, 2015

ahgittin Nov 27, 2015

Choose a reason for hiding this comment

ahgittin commented Nov 27, 2015

ahgittin commented Nov 27, 2015

azbarcea commented Nov 27, 2015