[Editor] Providing front end design for Streaming Integrator extension-installation features #1781

SinthujanSintha · 2020-01-28T10:08:55Z

Purpose

$Subject

Goals

Provide the front end design facility to user which is she or he can install or uninstall extension by clicking related button and also provide more details about extensions.

Approach

In this PR I had developed the code only for front end designing with hard code json to the above mentioned features.In order to to that I added one new js file and edited some other existing js file to providing front end platform for user to install /uninstall extensions through editor.

Security checks

Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no
Ran FindSecurityBugs plugin and verified report? yes/no
Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no

Samples

Test environment

Chrome,Fire fox

dnwick · 2020-01-28T10:21:48Z

...s/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js

+                        ,
+                    }
+                },
+                {name: "kafka", status: "not-installed"},


is this json has the latest format ? @senthuran16 please check

no its not a latest format i will change this json data as @senthuran16 shared json data.

88cbc98 this commit will fix this change request

dnwick · 2020-01-28T10:22:59Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

+        /**
+         * functions to get the not installed extension array details.
+         */
+        var getNotInstalledExtensionDetails = function () {


change to getUninstalledExtensionDetails

88cbc98 this commit will fix this change request

@dnwick Shall we say getNonInstalledExtensionDetails ? 'Uninstalled' might give the wrong idea as "Installed, and removed later"

since @dnwick asked me to change that as getUninstalledExtensionDetails,I have changed as that.If he ok with this i will be ok

dnwick · 2020-01-28T10:23:48Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

+                    if (isNotInstalledExtension(operatorExtension)) {
+                        keyResult.push({
+                            extension: getNotInstalledExtensionObject(operatorExtension),
+                            status: "Not-Installed",


use constants please

88cbc98 this commit will fix this change request

accidently approved

senthuran16 · 2020-01-29T14:32:57Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

@@ -309,11 +309,11 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils','
        /**
         * functions to get the not installed extension array details.
         */
-        var getNotInstalledExtensionDetails = function () {
+        var getUninstalledExtensionDetails = function () {


@dnwick & @SinthujanSintha Shall we say getNonInstalledExtensionDetails ? 'Uninstalled' might give the wrong idea as "Installed, and removed later"

...ddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js

dnwick · 2020-01-31T04:20:21Z

...ddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js

-                            if (extension.manuallyInstall) {
-                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed' +
+                    extensionsRendering();
+                    var callbackUpdateForExtensionFileBrowser = function (updatedExtension, isUpdated) {


what is isUpdated means ? do u need to it

dnwick · 2020-01-31T04:23:14Z

...ddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js

                                createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
-                            } else {
+                                extensionTableBodyData.find("button").click(function () {


you can take this code out whithout duplicating in each case

dnwick · 2020-01-31T04:24:35Z

...s/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js

+                            "lookupRegex": "grpc-server-(.+).jar"
+                        }
+                    ]
+                },


@senthuran16 please check whether json config is correct

Yes, this json config is correct.

dnwick · 2020-01-31T04:25:03Z

...s/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js

+                alert(updateData.name + " " + updateData.action);
+                //this updatedExtension data should come from backend.
+                var updatedExtension = {
+                    // "extensionStatus": "PARTIALLY_INSTALLED",


remove comments

dnwick · 2020-01-31T04:25:32Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

@@ -309,11 +309,11 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils','
        /**
         * functions to get the not installed extension array details.
         */
-        var getNotInstalledExtensionDetails = function () {
+        var getUninstalledExtensionDetails = function () {


dnwick · 2020-01-31T04:27:34Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

+        var isPartialInstalledExtension = function (operatorExtension) {
+            var partiallyInstalledExtensionArray = getPartiallyInstalledExtensionDetails();
+            for (var extension of partiallyInstalledExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) return true;


do not use if clauses without pranthesis even though u can write it in one line. its hard to read the code

dnwick · 2020-01-31T04:37:57Z

...arbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js

@@ -368,14 +435,34 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils','
                    if (isNotInstalledExtension(operatorExtension)) {


For each operator in order to check whether its uninstalled extension aren't you creating the same array again again in the getUninstalledExtensionDetails method ? I think that is same for isPartialInstalledExtension , isInstalledExtension functions. Create the the arrays one time and use else this will be a huge process

dnwick · 2020-01-31T09:12:02Z

...ddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js

+                    };
+                    var extensionTable;
+
+                    function renderExtensions() {


can you move this funtion to higher level like this.render = function () {

Add front end design for extension installation features

9191de8

dnwick previously approved these changes Jan 28, 2020

View reviewed changes

dnwick self-requested a review January 28, 2020 10:25

Add front end design changes based on json changes

88cbc98

senthuran16 reviewed Jan 29, 2020

View reviewed changes

Add changes to the front design.

a5094e6

dnwick suggested changes Jan 31, 2020

View reviewed changes

SinthujanSintha added 2 commits January 31, 2020 13:32

Add the refactor changes.

f322433

changes back end data into console log.

62e8280

dnwick approved these changes Jan 31, 2020

View reviewed changes

Change the render function as class function

ed1165c

dnwick approved these changes Feb 13, 2020

View reviewed changes

dnwick merged commit de8c0ac into wso2:master Feb 13, 2020

senthuran16 mentioned this pull request Feb 24, 2020

Connect Siddhi Extensions Installer front end and back end #1793

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Editor] Providing front end design for Streaming Integrator extension-installation features #1781

[Editor] Providing front end design for Streaming Integrator extension-installation features #1781

SinthujanSintha commented Jan 28, 2020

dnwick Jan 28, 2020

SinthujanSintha Jan 28, 2020

SinthujanSintha Jan 29, 2020

dnwick Jan 28, 2020

SinthujanSintha Jan 29, 2020

senthuran16 Jan 29, 2020 •

edited

Loading

SinthujanSintha Jan 29, 2020

dnwick Jan 28, 2020

SinthujanSintha Jan 29, 2020

senthuran16 Jan 29, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

senthuran16 Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

dnwick Jan 31, 2020

		@@ -368,14 +435,34 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils','
		if (isNotInstalledExtension(operatorExtension)) {

[Editor] Providing front end design for Streaming Integrator extension-installation features #1781

[Editor] Providing front end design for Streaming Integrator extension-installation features #1781

Conversation

SinthujanSintha commented Jan 28, 2020

Purpose

Goals

Approach

Security checks

Samples

Test environment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

senthuran16 Jan 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

senthuran16 Jan 29, 2020 •

edited

Loading