From d1d345292eeac35c82a0de5c7e9e96097c0653f7 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Fri, 14 Feb 2020 17:32:35 +0530
Subject: [PATCH 1/8] Rearrange code

---
 .../js/dialog/extension-install-dialog.js     | 447 ++++++++++--------
 .../web/editor/commons/js/utils/utils.js      |   1 +
 2 files changed, 239 insertions(+), 209 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
index ca6074aa916..8a9f57109cf 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
@@ -13,224 +13,253 @@ define(['require', 'lodash', 'jquery', 'constants'],
                 this.dialog_containers = $(_.get(options.config.dialog, 'container'));
                 this.extensionList = app.utils.extensionData;
             },
-                /**
-                 * show function for display the ExtensionInstallDialog.
-                 */
-                this.show = function () {
-                    this._extensionListModal.modal('show');
-                },
-
-                /**
-                 * render function for rendering all the contents of ExtensionInstallDialog.
-                 */
-                this.render = function () {
-                    var self = this;
-                    if (!_.isNil(this._extensionListModal)) {
-                        this._extensionListModal.remove();
-                    }
+            /**
+             * show function for display the ExtensionInstallDialog.
+             */
+            this.show = function () {
+                this._extensionListModal.modal('show');
+            },
 
-                    var extensionModelOpen = $(
-                        "<div class='modal fade' id='extensionInstallConfigModalId' tabindex='-1' role='dialog' " +
-                        "aria-hidden='true'>" + "<div class='modal-dialog file-dialog' role='document'>" +
-                        "<div class='modal-content' id='sampleDialog'>" +
-                        "<div class='modal-header'>" +
-                        "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
-                        "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
-                        "</button>" +
-                        "<h4 class='modal-title file-dialog-title'>Extension Details</h4>" +
-                        "<hr class='style1'>" +
-                        "</div>" +
-                        "<div class='modal-body'>" +
-                        "<div class='container-fluid'>" +
-                        "<form class='form-horizontal' onsubmit='return false'>" +
-                        "<div class='form-group'>" +
-                        "<label for='locationSearch' class='col-sm-2 file-dialog-label'>Search :</label>" +
-                        "<input type='text' placeholder='enter the extension name'" +
-                        " class='search-file-dialog-form-control'" +
-                        " id='extensionSearchId' autofocus>" +
-                        "</div>" +
-                        "<div class='form-group'>" +
-                        "<div class='file-dialog-form-scrollable-block' style='padding:10px4px; margin-left:35px;'>" +
-                        "<div id='noResults' style='display:none;'>No extension has found</div>" +
-                        "<div id='extensionTableId' class='samples-pane'>" +
-                        "</div>" +
-                        "<div id='file-browser-error' class='alert alert-danger' style='display: none;'>" +
-                        "</div>" +
-                        "</div>" +
-                        "</div>" +
-                        "<div class='form-group'>" +
-                        "<div class='file-dialog-form-btn'>" +
-                        "<button type='button' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
-                        "</div>" +
-                        "</div>" +
-                        "</form>" +
-                        "<div id='extensionInstallErrorId' class='alert alert-danger'>" +
-                        "<strong>Error!</strong>Something went wrong." +
-                        "</div>" +
-                        "</div>" +
-                        "</div>" +
-                        "</div>" +
-                        "</div>" +
-                        "</div>");
-
-                    var extensionInstallConfigModal = extensionModelOpen.filter("#extensionInstallConfigModalId");
-                    var extensionInstallError = extensionModelOpen.find("#extensionInstallErrorId");
-                    var extensionSearch = extensionModelOpen.find("input").filter("#extensionSearchId");
-
-                    extensionInstallConfigModal.on('shown.bs.modal', function () {
-                        extensionSearch.focus();
-                    });
-                    var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
-
-                    //define the map to store Partially extension modal based on key
-                    var partialExtensionDetailModal = new Map();
-                    renderExtensions();
-                    var callbackExtensionFileBrowser = function (updatedExtension, isUpdated) {
-                        if (isUpdated) {
-                            app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
-                            self.renderExtensions();
-                        }
-                    };
-                    var extensionTable;
-
-                   this.renderExtensions = function () {
-                        extensionContainer.empty();
-                        extensionTable = $('<table class="table table-hover data-table"' +
-                            ' id="extensionTableId"><tbody></tbody></table>');
-                        app.utils.extensionData.forEach(function (extension, key) {
-                            var extensionTableBodyData;
-                            if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
-                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Installed</td><td><button' +
-                                    ' class="btn btn-block btn' +
-                                    ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
-                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
-                            } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
-                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Partially-Installed' +
-                                    '&nbsp; &nbsp;<a data-toggle="modal"' +
-                                    ' id="' + key + '"><i class="fw' +
-                                    ' fw-info"></i></a></td><td><button' +
-                                    ' class="btn btn-block btn' +
-                                    ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
-                                createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
-                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
-
-                            } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
-                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed</td><td><button' +
-                                    ' class="btn btn-block btn' +
-                                    ' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
-                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
-                            }
-                            extensionTable.append(extensionTableBodyData);
-                        });
-                        extensionContainer.append(extensionTable);
+            this.renderExtensions = function (extensionContainer) {
+                var self = this;
+                extensionContainer.empty();
+                extensionTable = $('<table class="table table-hover data-table"' +
+                    ' id="extensionTableId"><tbody></tbody></table>');
+
+                var serviceUrl = window.location.protocol + "//" + window.location.host+ "/siddhi-extensions";
+                var getAllExtensionStatusesUrl = serviceUrl + "/status";
+                console.log("REQUEST", getAllExtensionStatusesUrl)
+                var extensionData = {};
+
+                $.ajax({
+                    type: "GET",
+                    contentType: "json",
+                    url: getAllExtensionStatusesUrl,
+                    async: false,
+                    success: function (data) {
+                        extensionData = new Map(Object.entries(data));
+                    },
+                    error: function (e) {
+                        throw "Unable to read extension statuses";
                     }
-                    extensionSearch.keyup(function () {
-                        searchExtension(extensionTable, extensionSearch.val());
-                    });
-                    $(this.dialog_containers).append(extensionModelOpen);
-                    extensionInstallError.hide();
-                    this._extensionListModal = extensionModelOpen;
-
-                    /**
-                     * insert the onclick function for extension button.
-                     * @param extensionTableBodyData
-                     * @param extension
-                     * @param callbackExtensionFileBrowser
-                     * @returns {*}
-                     */
-                    function extensionButtonFunctionInsert(extensionTableBodyData,extension) {
-                       return extensionTableBodyData.find("button").click(function () {
-                            app.utils.extensionUpdateThroughFile(extension,callbackExtensionFileBrowser);
-                        });
+
+                });
+
+                extensionData.forEach(function (extension, key) {
+                    var extensionTableBodyData;
+                    if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
+                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Installed</td><td><button' +
+                            ' class="btn btn-block btn' +
+                            ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
+                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
+                    } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
+                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Partially-Installed' +
+                            '&nbsp; &nbsp;<a data-toggle="modal"' +
+                            ' id="' + key + '"><i class="fw' +
+                            ' fw-info"></i></a></td><td><button' +
+                            ' class="btn btn-block btn' +
+                            ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
+                        self.createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
+                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
+
+                    } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
+                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed</td><td><button' +
+                            ' class="btn btn-block btn' +
+                            ' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
+                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
                     }
+                    extensionTable.append(extensionTableBodyData);
+                });
+                extensionContainer.append(extensionTable);
+            },
 
-                    /**
-                     * create a alert details model box for extension dependency.
-                     * @param extension object
-                     * @param key map key for object
-                     * @param extensionTableBodyData is modal body
-                     */
-                    function createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData) {
-                        var partialModel = $(
-                            '<div class="modal fade" id="' + key + '">' +
-                            '<div class="modal-dialog">' +
-                            '<div class="modal-content">' +
-                            '<div class="modal-header">' +
-                            "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
-                            "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
-                            "</button>" +
-                            '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
-                            + extension.extensionInfo.name +
-                            '</h2>' +
-                            '<hr class="style1">' +
-                            '</div>' +
-                            '<div id="modalBodyId" class="modal-body">' +
-                            '</div>' +
-                            '<div class="modal-footer">' +
-                            '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
-                            '</div>' +
-                            '</div>' +
+            /**
+             * insert the onclick function for extension button.
+             * @param extensionTableBodyData
+             * @param extension
+             * @param callbackExtensionFileBrowser
+             * @returns {*}
+             */
+            this.extensionButtonFunctionInsert = function (extensionTableBodyData,extension,callbackExtensionFileBrowser) {
+                return extensionTableBodyData.find("button").click(function () {
+                    app.utils.extensionUpdateThroughFile(extension,callbackExtensionFileBrowser);
+                });
+            },
+
+            this.callbackExtensionFileBrowser = function (updatedExtension, isUpdated) {
+                if (isUpdated) {
+                    app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
+                    // self.render(); // TODO not working. look into
+                    console.log("INSTALLED:", updatedExtension)
+                }
+            },
+
+            /**
+             * create a alert details model box for extension dependency.
+             * @param extension object
+             * @param key map key for object
+             * @param extensionTableBodyData is modal body
+             */
+            this.createAlertModalBoxForNotAndPartialExtension = function (extension, key, extensionTableBodyData) {
+                var partialModel = $(
+                    '<div class="modal fade" id="' + key + '">' +
+                    '<div class="modal-dialog">' +
+                    '<div class="modal-content">' +
+                    '<div class="modal-header">' +
+                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                    "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                    "</button>" +
+                    '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
+                    + extension.extensionInfo.name +
+                    '</h2>' +
+                    '<hr class="style1">' +
+                    '</div>' +
+                    '<div id="modalBodyId" class="modal-body">' +
+                    '</div>' +
+                    '<div class="modal-footer">' +
+                    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>');
+
+                var modalBody = partialModel.find("div").filter("#modalBodyId");
+
+                if (extension.manuallyInstall) {
+                    extension.manuallyInstall.forEach(function (dependency) {
+                        modalBody.append($('<h3>' + dependency.name + ' </h3>' +
+                            '<h4>Description</h4>' +
+                            '<div id="partialExtenDescription" style = "text-align:justify">'
+                            + dependency.download.info.description +
                             '</div>' +
-                            '</div>');
-
-                        var modalBody = partialModel.find("div").filter("#modalBodyId");
-
-                        if (extension.manuallyInstall) {
-                            extension.manuallyInstall.forEach(function (dependency) {
-                                modalBody.append($('<h3>' + dependency.name + ' </h3>' +
-                                    '<h4>Description</h4>' +
-                                    '<div id="partialExtenDescription" style = "text-align:justify">'
-                                    + dependency.download.info.description +
-                                    '</div>' +
-                                    '<h4>Install</h4>' +
-                                    '<div id="partialExtenInstall" style = "text-align:justify" >'
-                                    + dependency.download.info.install +
-                                    '</div>'));
-                            });
-                        }
+                            '<h4>Install</h4>' +
+                            '<div id="partialExtenInstall" style = "text-align:justify" >'
+                            + dependency.download.info.install +
+                            '</div>'));
+                    });
+                }
+
+                //define the map to store Partially extension modal based on key
+                var partialExtensionDetailModal = new Map();
+                partialExtensionDetailModal.set(key, partialModel);
+
+                extensionTableBodyData.find("a").filter("#" + key).click(function () {
+                    self.extensionPartialModelDisplay(partialExtensionDetailModal.get(key));
+                });
+            },
+
+            /**
+             * display the inner modal box for the partially installed extension.
+             * @param extensionPartialModel
+             */
+            this.extensionPartialModelDisplay = function (extensionPartialModel) {
+                self._extensionPartialModel = extensionPartialModel;
+                self._extensionPartialModel.modal('show');
+            },
 
-                        partialExtensionDetailModal.set(key, partialModel);
-
-                        extensionTableBodyData.find("a").filter("#" + key).click(function () {
-                            extensionPartialModelDisplay(partialExtensionDetailModal.get(key));
-                        });
-                    };
-
-                    /**
-                     * search function for seek the extensions.
-                     * @param extensionTable
-                     * @param locationSearch
-                     */
-                    function searchExtension(extensionTable, locationSearch) {
-                        var unmatchedCount = 0, filter, table, tr, td, i, txtValue;
-                        var noResultsElement = extensionModelOpen.find("div").filter("#noResults");
-                        filter = locationSearch.toUpperCase();
-                        table = extensionTable[0];
-                        tr = table.getElementsByTagName("tr");
-                        for (i = 0; i < tr.length; i++) {
-                            td = tr[i].getElementsByTagName("td")[0];
-                            if (td) {
-                                txtValue = td.textContent || td.innerText;
-                                if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                                    tr[i].style.display = "";
-                                } else {
-                                    tr[i].style.display = "none";
-                                    unmatchedCount += 1;
-                                }
-                            }
+            /**
+             * search function for seek the extensions.
+             * @param extensionTable
+             * @param locationSearch
+             */
+            this.searchExtension = function (extensionTable, locationSearch) {
+                var unmatchedCount = 0, filter, table, tr, td, i, txtValue;
+                var noResultsElement = extensionModelOpen.find("div").filter("#noResults");
+                filter = locationSearch.toUpperCase();
+                table = extensionTable[0];
+                tr = table.getElementsByTagName("tr");
+                for (i = 0; i < tr.length; i++) {
+                    td = tr[i].getElementsByTagName("td")[0];
+                    if (td) {
+                        txtValue = td.textContent || td.innerText;
+                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                            tr[i].style.display = "";
+                        } else {
+                            tr[i].style.display = "none";
+                            unmatchedCount += 1;
                         }
-                        var isMatched = (unmatchedCount === tr.length);
-                        noResultsElement.toggle(isMatched);
                     }
+                }
+                var isMatched = (unmatchedCount === tr.length);
+                noResultsElement.toggle(isMatched);
+            },
 
-                    /**
-                     * display the inner modal box for the partially installed extension.
-                     * @param extensionPartialModel
-                     */
-                    function extensionPartialModelDisplay(extensionPartialModel) {
-                        self._extensionPartialModel = extensionPartialModel;
-                        self._extensionPartialModel.modal('show');
-                    }
+            /**
+             * render function for rendering all the contents of ExtensionInstallDialog.
+             */
+            this.render = function () {
+                var self = this;
+                if (!_.isNil(this._extensionListModal)) {
+                    this._extensionListModal.remove();
                 }
+
+                var extensionModelOpen = $(
+                    "<div class='modal fade' id='extensionInstallConfigModalId' tabindex='-1' role='dialog' " +
+                    "aria-hidden='true'>" + "<div class='modal-dialog file-dialog' role='document'>" +
+                    "<div class='modal-content' id='sampleDialog'>" +
+                    "<div class='modal-header'>" +
+                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                    "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                    "</button>" +
+                    "<h4 class='modal-title file-dialog-title'>Extension Details</h4>" +
+                    "<hr class='style1'>" +
+                    "</div>" +
+                    "<div class='modal-body'>" +
+                    "<div class='container-fluid'>" +
+                    "<form class='form-horizontal' onsubmit='return false'>" +
+                    "<div class='form-group'>" +
+                    "<label for='locationSearch' class='col-sm-2 file-dialog-label'>Search :</label>" +
+                    "<input type='text' placeholder='enter the extension name'" +
+                    " class='search-file-dialog-form-control'" +
+                    " id='extensionSearchId' autofocus>" +
+                    "</div>" +
+                    "<div class='form-group'>" +
+                    "<div class='file-dialog-form-scrollable-block' style='padding:10px4px; margin-left:35px;'>" +
+                    "<div id='noResults' style='display:none;'>No extension has found</div>" +
+                    "<div id='extensionTableId' class='samples-pane'>" +
+                    "</div>" +
+                    "<div id='file-browser-error' class='alert alert-danger' style='display: none;'>" +
+                    "</div>" +
+                    "</div>" +
+                    "</div>" +
+                    "<div class='form-group'>" +
+                    "<div class='file-dialog-form-btn'>" +
+                    "<button type='button' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
+                    "</div>" +
+                    "</div>" +
+                    "</form>" +
+                    "<div id='extensionInstallErrorId' class='alert alert-danger'>" +
+                    "<strong>Error!</strong>Something went wrong." +
+                    "</div>" +
+                    "</div>" +
+                    "</div>" +
+                    "</div>" +
+                    "</div>" +
+                    "</div>");
+
+                var extensionInstallConfigModal = extensionModelOpen.filter("#extensionInstallConfigModalId");
+                var extensionInstallError = extensionModelOpen.find("#extensionInstallErrorId");
+                var extensionSearch = extensionModelOpen.find("input").filter("#extensionSearchId");
+
+                extensionInstallConfigModal.on('shown.bs.modal', function () {
+                    extensionSearch.focus();
+                });
+                var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
+
+                self.renderExtensions(extensionContainer);
+                // var callbackExtensionFileBrowser = function (updatedExtension, isUpdated) { // TODO remove
+                //     if (isUpdated) {
+                //         app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
+                //         self.renderExtensions();
+                //     }
+                // };
+                var extensionTable;
+                extensionSearch.keyup(function () {
+                    self.searchExtension(extensionTable, extensionSearch.val());
+                });
+                $(this.dialog_containers).append(extensionModelOpen);
+                extensionInstallError.hide();
+                this._extensionListModal = extensionModelOpen;
+            }
         };
     });
\ No newline at end of file
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
index 7d8be458cc0..6f48ea3298f 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
@@ -113,6 +113,7 @@ define(['require', 'jquery', 'constants'],
                 }
             }));
         }
+
         /**
          * provide the update details about the extension
          * @param extension

From 489f4fe2d141ac925e434f90911da1b028c9da77 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Fri, 14 Feb 2020 18:48:35 +0530
Subject: [PATCH 2/8] Add initial implementation for installation or
 uninstallation

---
 .../js/dialog/extension-install-dialog.js     | 12 ++-------
 .../web/editor/commons/js/utils/utils.js      | 25 +++++++++++++++++--
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
index 8a9f57109cf..423de5a17d6 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
@@ -26,11 +26,10 @@ define(['require', 'lodash', 'jquery', 'constants'],
                 extensionTable = $('<table class="table table-hover data-table"' +
                     ' id="extensionTableId"><tbody></tbody></table>');
 
+                // TODO generalize serviceUrl
                 var serviceUrl = window.location.protocol + "//" + window.location.host+ "/siddhi-extensions";
                 var getAllExtensionStatusesUrl = serviceUrl + "/status";
-                console.log("REQUEST", getAllExtensionStatusesUrl)
                 var extensionData = {};
-
                 $.ajax({
                     type: "GET",
                     contentType: "json",
@@ -42,7 +41,6 @@ define(['require', 'lodash', 'jquery', 'constants'],
                     error: function (e) {
                         throw "Unable to read extension statuses";
                     }
-
                 });
 
                 extensionData.forEach(function (extension, key) {
@@ -89,7 +87,7 @@ define(['require', 'lodash', 'jquery', 'constants'],
             this.callbackExtensionFileBrowser = function (updatedExtension, isUpdated) {
                 if (isUpdated) {
                     app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
-                    // self.render(); // TODO not working. look into
+                    self.render(); // TODO not working. look into
                     console.log("INSTALLED:", updatedExtension)
                 }
             },
@@ -247,12 +245,6 @@ define(['require', 'lodash', 'jquery', 'constants'],
                 var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
 
                 self.renderExtensions(extensionContainer);
-                // var callbackExtensionFileBrowser = function (updatedExtension, isUpdated) { // TODO remove
-                //     if (isUpdated) {
-                //         app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
-                //         self.renderExtensions();
-                //     }
-                // };
                 var extensionTable;
                 extensionSearch.keyup(function () {
                     self.searchExtension(extensionTable, extensionSearch.val());
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
index 6f48ea3298f..9dd71348310 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
@@ -160,11 +160,32 @@ define(['require', 'jquery', 'constants'],
 
             self.extensionInstallUninstallAlertModal.find("button").filter("#installUninstallId").click(function () {
                 self.extensionInstallUninstallAlertModal.modal('hide');
+                var action = (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED)
+                    ? Constants.INSTALL : Constants.UNINSTALL;
                 var updateData = {
                     "name": extension.extensionInfo.name,
-                    "action": (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED)
-                        ? Constants.INSTALL : Constants.UNINSTALL
+                    "action": action
                 };
+
+                // TODO generalize serviceUrl
+                var serviceUrl = window.location.protocol + "//" + window.location.host+ "/siddhi-extensions";
+                var installUninstallUrl = serviceUrl + "/" + extension.extensionInfo.name + "/" + action.toLowerCase();
+                var installationData = {};
+                $.ajax({
+                    type: "POST",
+                    contentType: "json",
+                    url: installUninstallUrl,
+                    async: false,
+                    success: function (data) {
+                        installationData = data;
+                        console.log("Successfully " + action.toLowerCase() + "ed.")
+                    },
+                    error: function (e) {
+                        throw "Unable to read extension statuses";
+                    }
+                });
+
+
                 //this updateData goes to back end.
                 console.log(updateData.name + " " + updateData.action);
                 //this updatedExtension data should come from backend.

From 4cd29f2991637491aac7d11f5a5291148bf7b94f Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Tue, 18 Feb 2020 16:42:31 +0530
Subject: [PATCH 3/8] Modify backend to mark jar deletion as successful when no
 jars are found

---
 .../installer/core/execution/DependencyInstallerImpl.java      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
index 2abd03003bf..7f7f7f3309d 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
@@ -244,6 +244,9 @@ unless a jar with a different version (but with the same name) is manually place
             List<Path> versionedJarFiles = ExtensionsInstallerUtils.listMatchingFiles(lookupRegex, directoryPath);
             if (!versionedJarFiles.isEmpty()) {
                 allJarsDeleted = deleteJarFiles(versionedJarFiles);
+            } else {
+                // No matching jar found. Hence no need to delete.
+                allJarsDeleted = true;
             }
         } catch (IOException e) {
             LOGGER.error(String.format("Failed to list matching files for lookup regex: %s.", lookupRegex));

From c3b27b00a439fdd3a9b6e70c619f05e6e6313466 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Wed, 19 Feb 2020 15:01:58 +0530
Subject: [PATCH 4/8] Add auto downloadable dependency information to responses

---
 .../mapping/models/ExtensionConfig.java       |  7 ++
 .../execution/DependencyInstallerImpl.java    |  5 +-
 .../execution/DependencyRetrieverImpl.java    |  2 +-
 .../core/util/ResponseEntityCreator.java      | 71 +++++++++++--------
 4 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/ExtensionConfig.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/ExtensionConfig.java
index 2b338302610..2879a1fb61b 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/ExtensionConfig.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/ExtensionConfig.java
@@ -39,6 +39,13 @@ public List<DependencyConfig> getManuallyInstallableDependencies() {
         return Collections.emptyList();
     }
 
+    public List<DependencyConfig> getAutoDownloadableDependencies() {
+        if (dependencies != null) {
+            return dependencies.stream().filter(DependencyConfig::isAutoDownloadable).collect(Collectors.toList());
+        }
+        return Collections.emptyList();
+    }
+
     public Map<String, String> getExtensionInfo() {
         return extension;
     }
diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
index 7f7f7f3309d..20ceaaeb377 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyInstallerImpl.java
@@ -62,7 +62,6 @@ public DependencyInstallerImpl(Map<String, ExtensionConfig> extensionConfigs) {
     public Map<String, Object> installDependenciesFor(String extensionId) throws ExtensionsInstallerException {
         List<DependencyConfig> completedDependencies = new ArrayList<>();
         List<DependencyConfig> failedDependencies = new ArrayList<>();
-        List<DependencyConfig> manuallyInstallableDependencies = new ArrayList<>();
 
         ExtensionConfig extension = ExtensionsInstallerUtils.findExtension(extensionId, extensionConfigs);
         List<DependencyConfig> dependencies = extension.getDependencies();
@@ -77,14 +76,12 @@ public Map<String, Object> installDependenciesFor(String extensionId) throws Ext
                         LOGGER.error(String.format("Failed to install dependency: %s for extension: %s.",
                             dependency.getRepresentableName(), extensionId), e);
                     }
-                } else {
-                    manuallyInstallableDependencies.add(dependency);
                 }
             }
             ExtensionInstallationStatus status = ExtensionsInstallerUtils.getInstallationStatus(
                 completedDependencies.size(), extension.getDependencies().size());
             return ResponseEntityCreator.createExtensionInstallationResponse(
-                status, completedDependencies, failedDependencies, manuallyInstallableDependencies);
+                extension, status, completedDependencies, failedDependencies);
         }
         throw new ExtensionsInstallerException(String.format(
             "No dependencies were specified in extension: %s", extensionId));
diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyRetrieverImpl.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyRetrieverImpl.java
index 036cd96a5ed..714c6cb9748 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyRetrieverImpl.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/execution/DependencyRetrieverImpl.java
@@ -61,7 +61,7 @@ public Map<String, Object> getExtensionStatusFor(String extensionId) throws Exte
 
     private Map<String, Object> getExtensionStatus(ExtensionConfig extension) throws ExtensionsInstallerException {
         return ResponseEntityCreator.createExtensionStatusResponse(
-            extension, getExtensionInstallationStatus(extension), extension.getManuallyInstallableDependencies());
+            extension, getExtensionInstallationStatus(extension));
     }
 
     private ExtensionInstallationStatus getExtensionInstallationStatus(ExtensionConfig extension)
diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
index 76140846b71..7547b4ead59 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
@@ -39,6 +39,7 @@ public class ResponseEntityCreator {
     private static final String ACTION_COMPLETED_DEPENDENCIES_KEY = "completed";
     private static final String ACTION_FAILED_DEPENDENCIES_KEY = "failed";
     private static final String MANUALLY_INSTALLABLE_DEPENDENCIES_KEY = "manuallyInstall";
+    private static final String AUTO_DOWNLOADABLE_DEPENDENCIES_KEY = "autoDownloadable";
     private static final String EXTENSION_INFO_KEY = "extensionInfo";
     private static final String EXTENSION_STATUS_KEY = "extensionStatus";
     private static final String DEPENDENCY_INFO_KEY = "dependencyInfo";
@@ -53,22 +54,26 @@ private ResponseEntityCreator() {
      * {@link
      * org.wso2.carbon.siddhi.extensions.installer.core.execution.DependencyInstaller#installDependenciesFor(String)}.
      *
-     * @param status                          Status of the installation.
-     * @param installedDependencies           Dependencies that were successfully installed.
-     * @param failedDependencies              Dependencies that were failed to install.
-     * @param manuallyInstallableDependencies Dependencies that should be installed manually.
+     * @param status                Status of the installation.
+     * @param installedDependencies Dependencies that were successfully installed.
+     * @param failedDependencies    Dependencies that were failed to install.
      * @return Information for the response.
      */
     public static Map<String, Object> createExtensionInstallationResponse(
+        ExtensionConfig extension,
         ExtensionInstallationStatus status,
         List<DependencyConfig> installedDependencies,
-        List<DependencyConfig> failedDependencies,
-        List<DependencyConfig> manuallyInstallableDependencies) {
+        List<DependencyConfig> failedDependencies) {
 
         Map<String, Object> details = new HashMap<>();
         details.put(ACTION_TYPE_KEY, "INSTALL");
         details.put(ACTION_STATUS_KEY, status);
-        putDependencyDetails(installedDependencies, failedDependencies, manuallyInstallableDependencies, details);
+        putDependencyDetails(
+            installedDependencies,
+            failedDependencies,
+            extension.getManuallyInstallableDependencies(),
+            extension.getAutoDownloadableDependencies(),
+            details);
         return details;
     }
 
@@ -89,13 +94,39 @@ public static Map<String, Object> createExtensionUnInstallationResponse(
         Map<String, Object> details = new HashMap<>();
         details.put(ACTION_TYPE_KEY, "UNINSTALL");
         details.put(ACTION_STATUS_KEY, status);
-        putDependencyDetails(uninstalledDependencies, failedDependencies, null, details);
+        putDependencyDetails(uninstalledDependencies, failedDependencies, null, null, details);
+        return details;
+    }
+
+    /**
+     * Creates response after retrieving extension statuses, through:
+     * {@link DependencyRetriever#getAllExtensionStatuses()} or
+     * {@link DependencyRetriever#getExtensionStatusFor(String)}.
+     *
+     * @param extension Configuration of the extension.
+     * @param status    Installation status of the extension.
+     * @return Information for the response.
+     */
+    public static Map<String, Object> createExtensionStatusResponse(ExtensionConfig extension,
+                                                                    ExtensionInstallationStatus status) {
+        Map<String, Object> details = new HashMap<>();
+        details.put(EXTENSION_INFO_KEY, extension.getExtensionInfo());
+        details.put(EXTENSION_STATUS_KEY, status);
+        if (status != ExtensionInstallationStatus.INSTALLED) {
+            putDependencyDetails(
+                null,
+                null,
+                extension.getManuallyInstallableDependencies(),
+                extension.getAutoDownloadableDependencies(),
+                details);
+        }
         return details;
     }
 
     private static void putDependencyDetails(List<DependencyConfig> completedDependencies,
                                              List<DependencyConfig> failedDependencies,
                                              List<DependencyConfig> manuallyInstallableDependencies,
+                                             List<DependencyConfig> autoDownloadableDependencies,
                                              Map<String, Object> details) {
         if (completedDependencies != null && !completedDependencies.isEmpty()) {
             details.put(ACTION_COMPLETED_DEPENDENCIES_KEY, completedDependencies);
@@ -106,29 +137,9 @@ private static void putDependencyDetails(List<DependencyConfig> completedDepende
         if (manuallyInstallableDependencies != null && !manuallyInstallableDependencies.isEmpty()) {
             details.put(MANUALLY_INSTALLABLE_DEPENDENCIES_KEY, manuallyInstallableDependencies);
         }
-    }
-
-    /**
-     * Creates response after retrieving extension statuses, through:
-     * {@link DependencyRetriever#getAllExtensionStatuses()} or
-     * {@link DependencyRetriever#getExtensionStatusFor(String)}.
-     *
-     * @param extension                       Configuration of the extension.
-     * @param status                          Installation status of the extension.
-     * @param manuallyInstallableDependencies Dependencies that should be installed manually.
-     * @return Information for the response.
-     */
-    public static Map<String, Object> createExtensionStatusResponse(
-        ExtensionConfig extension,
-        ExtensionInstallationStatus status,
-        List<DependencyConfig> manuallyInstallableDependencies) {
-        Map<String, Object> details = new HashMap<>();
-        details.put(EXTENSION_INFO_KEY, extension.getExtensionInfo());
-        details.put(EXTENSION_STATUS_KEY, status);
-        if (status != ExtensionInstallationStatus.INSTALLED && !manuallyInstallableDependencies.isEmpty()) {
-            details.put(MANUALLY_INSTALLABLE_DEPENDENCIES_KEY, manuallyInstallableDependencies);
+        if (autoDownloadableDependencies != null && !autoDownloadableDependencies.isEmpty()) {
+            details.put(AUTO_DOWNLOADABLE_DEPENDENCIES_KEY, autoDownloadableDependencies);
         }
-        return details;
     }
 
     /**

From 4b62040ed5f229b62619fe22f64bb0860b4af122 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Thu, 20 Feb 2020 15:48:03 +0530
Subject: [PATCH 5/8] Add instructions field to download config

---
 .../findbugs-exclude.xml                                    | 6 ++++++
 .../core/config/mapping/models/DownloadConfig.java          | 1 +
 findbugs-exclude.xml                                        | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/findbugs-exclude.xml b/components/org.wso2.carbon.siddhi.extensions.installer.core/findbugs-exclude.xml
index afbb4ebc72b..554efcf4f4d 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/findbugs-exclude.xml
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/findbugs-exclude.xml
@@ -21,4 +21,10 @@
         <Package name="org.wso2.carbon.siddhi.extensions.installer.core.config.mapping.models"/>
         <Bug pattern="UWF_UNWRITTEN_FIELD"/>
     </Match>
+    <!-- The following field is only written by Gson, and only the containing class is read  -->
+    <Match>
+        <Class name="org.wso2.carbon.siddhi.extensions.installer.core.config.mapping.models.DownloadConfig"/>
+        <Field name="instructions"/>
+        <Bug pattern="UUF_UNUSED_FIELD"/>
+    </Match>
 </FindBugsFilter>
diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/DownloadConfig.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/DownloadConfig.java
index 3d9e2905c97..042feeddefb 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/DownloadConfig.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/config/mapping/models/DownloadConfig.java
@@ -25,6 +25,7 @@ public class DownloadConfig {
 
     private boolean autoDownloadable;
     private String url;
+    private String instructions;
 
     public boolean isAutoDownloadable() {
         return autoDownloadable;
diff --git a/findbugs-exclude.xml b/findbugs-exclude.xml
index 08507b6430b..43e360cfc2e 100644
--- a/findbugs-exclude.xml
+++ b/findbugs-exclude.xml
@@ -39,6 +39,11 @@
         <Package name="org.wso2.carbon.siddhi.extensions.installer.core.config.mapping.models"/>
         <Bug pattern="UWF_UNWRITTEN_FIELD"/>
     </Match>
+    <Match>
+        <Class name="org.wso2.carbon.siddhi.extensions.installer.core.config.mapping.models.DownloadConfig"/>
+        <Field name="instructions"/>
+        <Bug pattern="UUF_UNUSED_FIELD"/>
+    </Match>
     <Match>
         <Class name="org.wso2.carbon.business.rules.templates.editor.core.internal.TemplatesEditorMicroservice"/>
         <Bug pattern="OBL_UNSATISFIED_OBLIGATION"/>

From 9e0da0cfc5555a43eb39d21e02772fb559ba1e9c Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Mon, 24 Feb 2020 00:11:17 +0530
Subject: [PATCH 6/8] Implement back end connections in extensions installer
 front end

---
 .../web/editor/commons/css/styles.css         |   1 +
 .../js/dialog/extension-install-dialog.js     | 670 ++++++++++++------
 .../web/editor/commons/js/utils/utils.js      | 271 +++----
 .../main/resources/web/editor/js/app-main.js  |   3 +
 .../web/editor/js/design-view/constants.js    |   6 +
 .../js/operator-finder/operator-finder.js     | 187 ++++-
 .../src/main/resources/web/index.html         |  22 +-
 7 files changed, 778 insertions(+), 382 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
index 8e51761433c..8dbbb7856b9 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
@@ -1845,6 +1845,7 @@ div.consoleIcon {
 }
 
 .partial-extension-install-btn,
+.extension-un-install-btn,
 .extension-install-btn {
     color: whitesmoke;
 }
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
index 423de5a17d6..4efa6805e53 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
@@ -13,245 +13,479 @@ define(['require', 'lodash', 'jquery', 'constants'],
                 this.dialog_containers = $(_.get(options.config.dialog, 'container'));
                 this.extensionList = app.utils.extensionData;
             },
-            /**
-             * show function for display the ExtensionInstallDialog.
-             */
-            this.show = function () {
-                this._extensionListModal.modal('show');
-            },
+                /**
+                 * Show function to display the ExtensionInstallDialog.
+                 */
+                this.show = function () {
+                    this._extensionListModal.modal('show');
+                },
 
-            this.renderExtensions = function (extensionContainer) {
-                var self = this;
-                extensionContainer.empty();
-                extensionTable = $('<table class="table table-hover data-table"' +
-                    ' id="extensionTableId"><tbody></tbody></table>');
+                /**
+                 * Renders all extensions.
+                 *
+                 * @param extensionContainer    Container in which, extensions are rendered.
+                 */
+                this.renderExtensions = function (extensionContainer) {
+                    var self = this;
+                    extensionContainer.empty();
+                    extensionTable = $('<table class="table table-hover data-table"' + ' id="extensionTableId">' +
+                        '<tbody></tbody></table>');
+                    app.utils.extensionData.forEach(function (extension, key) {
+                        var extensionTableBodyData = self.renderExtension(extension, key, self);
+                        extensionTable.append(extensionTableBodyData);
+                    });
+                    extensionContainer.append(extensionTable);
+                },
 
-                // TODO generalize serviceUrl
-                var serviceUrl = window.location.protocol + "//" + window.location.host+ "/siddhi-extensions";
-                var getAllExtensionStatusesUrl = serviceUrl + "/status";
-                var extensionData = {};
-                $.ajax({
-                    type: "GET",
-                    contentType: "json",
-                    url: getAllExtensionStatusesUrl,
-                    async: false,
-                    success: function (data) {
-                        extensionData = new Map(Object.entries(data));
-                    },
-                    error: function (e) {
-                        throw "Unable to read extension statuses";
+                /**
+                 * Returns whether the given element exists, and is an array, and contains any element.
+                 *
+                 * @param element       Element which is checked whether a non empty array or not.
+                 * @returns {boolean}   Whether the given element is a non empty array.
+                 */
+                this.isNonEmptyArray = function (element) {
+                    if (element) {
+                        return Array.isArray(element) && element.length > 0;
                     }
-                });
-
-                extensionData.forEach(function (extension, key) {
-                    var extensionTableBodyData;
-                    if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
-                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Installed</td><td><button' +
-                            ' class="btn btn-block btn' +
-                            ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
-                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
-                    } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
-                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Partially-Installed' +
-                            '&nbsp; &nbsp;<a data-toggle="modal"' +
-                            ' id="' + key + '"><i class="fw' +
-                            ' fw-info"></i></a></td><td><button' +
-                            ' class="btn btn-block btn' +
-                            ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
-                        self.createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
-                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
+                    return false;
+                },
 
-                    } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
-                        extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed</td><td><button' +
-                            ' class="btn btn-block btn' +
-                            ' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
-                        self.extensionButtonFunctionInsert(extensionTableBodyData,extension,self.callbackExtensionFileBrowser);
+                /**
+                 * Returns an object with texts for the installation status and the action button, on initial load.
+                 *
+                 * @param extensionStatus   Installation status of the extension.
+                 * @param manuallyInstall   Manually installable dependencies of the extension.
+                 * @param autoDownloadable  Auto downloadable dependencies of the extension.
+                 * @returns {{buttonActionText: string, status: string}}
+                 */
+                this.getInitialStatusTexts = function (extensionStatus, manuallyInstall, autoDownloadable) {
+                    var status;
+                    var buttonActionText;
+                    switch (extensionStatus.trim().toUpperCase()) {
+                        case Constants.EXTENSION_INSTALLED:
+                            // All the dependencies are installed.
+                            status = Constants.EXTENSION_INSTALLED_TEXT;
+                            buttonActionText = Constants.UNINSTALL;
+                            break;
+                        case Constants.EXTENSION_NOT_INSTALLED:
+                            // None of the dependencies are installed.
+                            status = Constants.EXTENSION_NOT_INSTALLED_TEXT;
+                            if (this.isNonEmptyArray(autoDownloadable)) {
+                                // Auto downloadable dependencies are available. Allow to try installing them.
+                                buttonActionText = Constants.INSTALL;
+                            } else {
+                                // No auto downloadable dependency is available. Button action not applicable.
+                                buttonActionText = null;
+                            }
+                            break;
+                        case Constants.EXTENSION_PARTIALLY_INSTALLED:
+                            // Only some of the dependencies are installed.
+                            status = Constants.EXTENSION_PARTIALLY_INSTALLED_TEXT;
+                            if (this.isNonEmptyArray(manuallyInstall)) {
+                                // Partial because manually installable dependencies are available.
+                                /*
+                                In this case,
+                                Installation failure in at least one auto downloadable dependency,
+                                will not be available for a retry.
+                                */
+                                buttonActionText = Constants.UNINSTALL;
+                            } else {
+                                // Partial because of previous failures in installing dependencies.
+                                buttonActionText = Constants.INSTALL;
+                            }
+                            break;
+                        default:
+                            status = Constants.EXTENSION_NOT_INSTALLED_TEXT;
+                            buttonActionText = Constants.INSTALL;
                     }
-                    extensionTable.append(extensionTableBodyData);
-                });
-                extensionContainer.append(extensionTable);
-            },
+                    return {status: status, buttonActionText: buttonActionText};
+                },
 
-            /**
-             * insert the onclick function for extension button.
-             * @param extensionTableBodyData
-             * @param extension
-             * @param callbackExtensionFileBrowser
-             * @returns {*}
-             */
-            this.extensionButtonFunctionInsert = function (extensionTableBodyData,extension,callbackExtensionFileBrowser) {
-                return extensionTableBodyData.find("button").click(function () {
-                    app.utils.extensionUpdateThroughFile(extension,callbackExtensionFileBrowser);
-                });
-            },
+                /**
+                 * Returns an object with texts for installed status and the action button,
+                 * after an installation or un-installation.
+                 *
+                 * @param updatedStatus         Updated installation status of an extension.
+                 * @param failedDependencies    Dependencies that were failed to be installed/un-installed.
+                 * @param autoDownloadable      Auto downloadable dependencies of an extension.
+                 * @returns {{buttonActionText: string, status: string}}
+                 */
+                this.getUpdateStatusTexts = function (updatedStatus, failedDependencies, autoDownloadable) {
+                    var status;
+                    switch (updatedStatus.trim().toUpperCase()) {
+                        case (Constants.EXTENSION_INSTALLED):
+                        case (Constants.EXTENSION_NOT_UNINSTALLED):
+                            status = Constants.EXTENSION_INSTALLED_TEXT;
+                            break;
+                        case (Constants.EXTENSION_NOT_INSTALLED):
+                        case (Constants.EXTENSION_UNINSTALLED):
+                            status = Constants.EXTENSION_NOT_INSTALLED_TEXT;
+                            break;
+                        case (Constants.EXTENSION_PARTIALLY_INSTALLED):
+                        case (Constants.EXTENSION_PARTIALLY_UNINSTALLED):
+                            status = Constants.EXTENSION_PARTIALLY_INSTALLED_TEXT;
+                            break;
+                        default:
+                            status = Constants.EXTENSION_NOT_INSTALLED_TEXT;
+                            break;
+                    }
+                    var buttonActionText;
+                    switch (updatedStatus.trim().toUpperCase()) {
+                        case (Constants.EXTENSION_INSTALLED):
+                        case (Constants.EXTENSION_NOT_UNINSTALLED):
+                        case (Constants.EXTENSION_PARTIALLY_UNINSTALLED):
+                            buttonActionText = Constants.UNINSTALL;
+                            break;
+                        case (Constants.EXTENSION_PARTIALLY_INSTALLED):
+                            if (this.isNonEmptyArray(failedDependencies)) {
+                                // Partial due to a failure.
+                                buttonActionText = Constants.INSTALL;
+                            } else {
+                                // Partial because manually installable dependencies are there.
+                                buttonActionText = Constants.UNINSTALL;
+                            }
+                            break;
+                        case (Constants.EXTENSION_NOT_INSTALLED):
+                            if (this.isNonEmptyArray(autoDownloadable)) {
+                                buttonActionText = Constants.INSTALL;
+                            } else {
+                                // Nothing to auto download and install.
+                                buttonActionText = Constants.UNINSTALL;
+                            }
+                            break;
+                        case (Constants.EXTENSION_UNINSTALLED):
+                            buttonActionText = Constants.INSTALL;
+                            break;
+                        default:
+                            buttonActionText = Constants.INSTALL;
+                            break;
+                    }
+                    return {status: status, buttonActionText: buttonActionText};
+                },
 
-            this.callbackExtensionFileBrowser = function (updatedExtension, isUpdated) {
-                if (isUpdated) {
-                    app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
-                    self.render(); // TODO not working. look into
-                    console.log("INSTALLED:", updatedExtension)
-                }
-            },
+                /**
+                 * Organizes elements and renders a single extension's visual representation.
+                 *
+                 * @param extension Extension object.
+                 * @param key       Unique key of the extension.
+                 * @param selfScope Scope of the caller.
+                 */
+                this.renderExtension = function (extension, key, selfScope) {
+                    var status;
+                    var buttonActionText;
+                    var statuses = this.getInitialStatusTexts(
+                        extension.extensionStatus, extension.manuallyInstall, extension.autoDownloadable);
+                    status = statuses.status;
+                    buttonActionText = statuses.buttonActionText;
 
-            /**
-             * create a alert details model box for extension dependency.
-             * @param extension object
-             * @param key map key for object
-             * @param extensionTableBodyData is modal body
-             */
-            this.createAlertModalBoxForNotAndPartialExtension = function (extension, key, extensionTableBodyData) {
-                var partialModel = $(
-                    '<div class="modal fade" id="' + key + '">' +
-                    '<div class="modal-dialog">' +
-                    '<div class="modal-content">' +
-                    '<div class="modal-header">' +
-                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
-                    "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
-                    "</button>" +
-                    '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
-                    + extension.extensionInfo.name +
-                    '</h2>' +
-                    '<hr class="style1">' +
-                    '</div>' +
-                    '<div id="modalBodyId" class="modal-body">' +
-                    '</div>' +
-                    '<div class="modal-footer">' +
-                    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>');
+                    return this.renderExtensionRow(extension, key, status, buttonActionText, selfScope);
+                },
 
-                var modalBody = partialModel.find("div").filter("#modalBodyId");
+                /**
+                 * Renders a single extension's visual representation.
+                 *
+                 * @param extension         Extension object.
+                 * @param key               Unique key of the extension.
+                 * @param status            Installation status of the extension.
+                 * @param buttonActionText  The action text which is shown in the button.
+                 * @param selfScope         Scope of the caller.
+                 * @returns {*}
+                 */
+                this.renderExtensionRow = function (extension, key, status, buttonActionText, selfScope) {
+                    var tr;
+                    if (extension.hasOwnProperty('manuallyInstall')) {
+                        if (buttonActionText) {
+                            tr = $('<tr key="' + key + '">' +
+                                '<td>' + extension.extensionInfo.name + '</td>' +
+                                '<td id="status">' + status + '&nbsp; &nbsp;<a data-toggle="modal"' +
+                                ' id="' + key + '"><i class="fw' +
+                                ' fw-info"></i></a></td>' +
+                                '<td><button' +
+                                ' class="btn btn-block btn' +
+                                ' btn-primary">' + buttonActionText + '</button></td></tr>');
+                            selfScope.createManuallyInstallableExtensionModal(extension, key, tr, selfScope);
+                            selfScope.bindInstallationButtonAction(tr, extension, selfScope.handleInstallationCallback);
+                        } else {
+                            tr = $('<tr key="' + key + '"><td>' + extension.extensionInfo.name +
+                                '[(i)]</td><td id="status">' + status +
+                                '&nbsp; &nbsp;<a data-toggle="modal"' +
+                                ' id="' + key + '"><i class="fw fw-info"></i></a></td><td></td></tr>');
+                            selfScope.createManuallyInstallableExtensionModal(extension, key, tr, selfScope);
+                        }
+                    } else {
+                        if (buttonActionText) {
+                            tr = $('<tr key="' + key + '"><td>' + extension.extensionInfo.name +
+                                '</td><td id="status">' + status + '</td><td><button' +
+                                ' class="btn btn-block btn' +
+                                ' btn-primary">' + buttonActionText + '</button></td></tr>');
+                            selfScope.bindInstallationButtonAction(tr, extension, selfScope.handleInstallationCallback);
+                        } else {
+                            tr = $('<tr key="' + key + '"><td>' + extension.extensionInfo.name +
+                                '</td><td id="status">' + status + '</td><td></td></tr>');
+                        }
+                    }
+                    return tr;
+                },
 
-                if (extension.manuallyInstall) {
-                    extension.manuallyInstall.forEach(function (dependency) {
-                        modalBody.append($('<h3>' + dependency.name + ' </h3>' +
-                            '<h4>Description</h4>' +
-                            '<div id="partialExtenDescription" style = "text-align:justify">'
-                            + dependency.download.info.description +
-                            '</div>' +
-                            '<h4>Install</h4>' +
-                            '<div id="partialExtenInstall" style = "text-align:justify" >'
-                            + dependency.download.info.install +
-                            '</div>'));
+                /**
+                 * Binds the onclick function to the install/un-install button.
+                 *
+                 * @param extensionRow                  Table row which represents an extension.
+                 * @param extension                     Extension object.
+                 * @param handleInstallationCallback    Callback function.
+                 * @returns {*}
+                 */
+                this.bindInstallationButtonAction = function (extensionRow, extension, handleInstallationCallback) {
+                    var self = this;
+                    return extensionRow.find("button").click(function () {
+                        app.utils.installOrUnInstallExtension(
+                            extension,
+                            app,
+                            self.handleInstallationLoading,
+                            handleInstallationCallback,
+                            $(this).parent().parent(),
+                            this.innerText,
+                            self);
                     });
-                }
+                },
 
-                //define the map to store Partially extension modal based on key
-                var partialExtensionDetailModal = new Map();
-                partialExtensionDetailModal.set(key, partialModel);
+                /**
+                 * Renders an extension's visual representation during 'loading' state.
+                 *
+                 * @param extension         Extension object.
+                 * @param key               Unique key of the extension.
+                 * @param actionStatus      The action which is in progress.
+                 * @returns {HTMLElement}
+                 */
+                this.renderExtensionLoadingRow = function (extension, key, actionStatus) {
+                    return $('<tr key="' + key + '"><td>' + extension.extensionInfo.name +
+                        '</td><td id="status">' + actionStatus + '</td>' +
+                        '<td style="text-align:center"><a class="fw-loader5 fw-spin"></a></td></tr>');
+                },
 
-                extensionTableBodyData.find("a").filter("#" + key).click(function () {
-                    self.extensionPartialModelDisplay(partialExtensionDetailModal.get(key));
-                });
-            },
+                /**
+                 * Triggers the 'loading' state of an extension, during an installation or un-installation.
+                 *
+                 * @param extensionRow  Table row, which represents an extension.
+                 * @param extension     Extension object.
+                 * @param actionStatus  The action which is in progress.
+                 * @param selfScope     Scope of the caller.
+                 */
+                this.handleInstallationLoading = function (extensionRow, extension, actionStatus, selfScope) {
+                    var key = extensionRow.get(0).getAttribute('key');
+                    var newRow = selfScope.renderExtensionLoadingRow(extension, key, actionStatus);
+                    extensionRow.html(newRow.children());
+                },
 
-            /**
-             * display the inner modal box for the partially installed extension.
-             * @param extensionPartialModel
-             */
-            this.extensionPartialModelDisplay = function (extensionPartialModel) {
-                self._extensionPartialModel = extensionPartialModel;
-                self._extensionPartialModel.modal('show');
-            },
+                /**
+                 * The callback, which is triggered after installation/un-installation of an extension.
+                 *
+                 * @param extension     Extension object.
+                 * @param updatedStatus Updated installation status of the extension.
+                 * @param extensionRow  Table row, which represents the extension.
+                 * @param response      Received response.
+                 * @param selfScope     Scope of the caller.
+                 */
+                this.handleInstallationCallback = function (extension,
+                                                            updatedStatus,
+                                                            extensionRow,
+                                                            response,
+                                                            selfScope) {
+                    var extensionName = extension.extensionInfo.name;
+                    app.utils.extensionData.get(extensionName).extensionStatus = updatedStatus;
+                    selfScope.updateExtensionStatus(extension, extensionRow, updatedStatus, response);
+                },
 
-            /**
-             * search function for seek the extensions.
-             * @param extensionTable
-             * @param locationSearch
-             */
-            this.searchExtension = function (extensionTable, locationSearch) {
-                var unmatchedCount = 0, filter, table, tr, td, i, txtValue;
-                var noResultsElement = extensionModelOpen.find("div").filter("#noResults");
-                filter = locationSearch.toUpperCase();
-                table = extensionTable[0];
-                tr = table.getElementsByTagName("tr");
-                for (i = 0; i < tr.length; i++) {
-                    td = tr[i].getElementsByTagName("td")[0];
-                    if (td) {
-                        txtValue = td.textContent || td.innerText;
-                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                            tr[i].style.display = "";
-                        } else {
-                            tr[i].style.display = "none";
-                            unmatchedCount += 1;
+                /**
+                 * Updates the extension's status after an installation or un-installation.
+                 *
+                 * @param extension     Extension object.
+                 * @param extensionRow  Table row, which represents the extension.
+                 * @param updatedStatus Updated installation status of the extension.
+                 * @param response      Received response.
+                 */
+                this.updateExtensionStatus = function (extension, extensionRow, updatedStatus, response) {
+                    var key = extensionRow.get(0).getAttribute('key');
+                    var statuses = this.getUpdateStatusTexts(updatedStatus, response.failed, response.autoDownloadable);
+                    var newRow =
+                        this.renderExtensionRow(extension, key, statuses.status, statuses.buttonActionText, this);
+                    extensionRow.html(newRow.children());
+                },
+
+                /**
+                 * Creates model box for an extension that has manually installable dependencies.
+                 *
+                 * @param extension                 Extension object.
+                 * @param key                       Unique key of the extension.
+                 * @param extensionTableBodyData    Table body data for the extension.
+                 * @param renderExtensionsScope     The scope, which contains the method to render extensions.
+                 */
+                this.createManuallyInstallableExtensionModal = function (extension,
+                                                                         key,
+                                                                         extensionTableBodyData,
+                                                                         renderExtensionsScope) {
+                    var partialModel = $(
+                        '<div class="modal fade" id="' + key + '">' +
+                        '<div class="modal-dialog">' +
+                        '<div class="modal-content">' +
+                        '<div class="modal-header">' +
+                        "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                        "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                        "</button>" +
+                        '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
+                        + extension.extensionInfo.name +
+                        '</h2>' +
+                        '<hr class="style1">' +
+                        '</div>' +
+                        '<div id="modalBodyId" class="modal-body">' +
+                        '</div>' +
+                        '<div class="modal-footer">' +
+                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>');
+
+                    var modalBody = partialModel.find("div").filter("#modalBodyId");
+
+                    if (extension.manuallyInstall) {
+                        modalBody.append($('<div style="text-align:justify">The following dependencies should be' +
+                            ' manually installed.</div>'));
+                        extension.manuallyInstall.forEach(function (dependency) {
+                            var instructions = dependency.download.instructions ?
+                                (`<h4>Instructions</h4><div id="partialExtenDescription" style = "text-align:justify">`
+                                    + `${dependency.download.instructions}</div>`) :
+                                ('<div id="partialExtenDescription" style="text-align:justify">' +
+                                    'No instructions found.</div>');
+
+                            var usages = (`<h4>Installation Locations</h4>` +
+                                `<div id="partialExtenDescription" style = "text-align:justify">` +
+                                `<ol>${dependency.usages.map(usage =>
+                                    `<li>${usage.type.toLowerCase()} in ${usage.usedBy.toLowerCase()}</li>`
+                                )}</ol></div>`);
+
+                            modalBody.append($(`<h3>${dependency.name}</h3>` +
+                                `<div style="padding-left:10px">${instructions}<br/>${usages}</div>`));
+                        });
+                    }
+
+                    //define the map to store Partially extension modal based on key
+                    var partialExtensionDetailModal = new Map();
+                    partialExtensionDetailModal.set(key, partialModel);
+
+                    extensionTableBodyData.find("a").filter("#" + key).click(function () {
+                        renderExtensionsScope.displayExtensionManualDownloadInfo(partialExtensionDetailModal.get(key));
+                    });
+                },
+
+                /**
+                 * Displays the inner modal box for a partially installed extension.
+                 *
+                 * @param extensionPartialModal The modal which represents a partially installed extension.
+                 */
+                this.displayExtensionManualDownloadInfo = function (extensionPartialModal) {
+                    self._extensionPartialModel = extensionPartialModal;
+                    self._extensionPartialModel.modal('show');
+                },
+
+                /**
+                 * Searches and filters extensions.
+                 *
+                 * @param extensionTable    Table where extensions are rendered.
+                 * @param keyword           Search keyword.
+                 */
+                this.searchExtension = function (extensionModelOpen, extensionTable, keyword) {
+                    var unmatchedCount = 0, filter, table, tr, td, i, txtValue;
+                    var noResultsElement = extensionModelOpen.find("div").filter("#noResults");
+                    filter = keyword.toUpperCase();
+                    table = extensionTable[0];
+                    tr = table.getElementsByTagName("tr");
+                    for (i = 0; i < tr.length; i++) {
+                        td = tr[i].getElementsByTagName("td")[0];
+                        if (td) {
+                            txtValue = td.textContent || td.innerText;
+                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                                tr[i].style.display = "";
+                            } else {
+                                tr[i].style.display = "none";
+                                unmatchedCount += 1;
+                            }
                         }
                     }
-                }
-                var isMatched = (unmatchedCount === tr.length);
-                noResultsElement.toggle(isMatched);
-            },
+                    var isMatched = (unmatchedCount === tr.length);
+                    noResultsElement.toggle(isMatched);
+                },
 
-            /**
-             * render function for rendering all the contents of ExtensionInstallDialog.
-             */
-            this.render = function () {
-                var self = this;
-                if (!_.isNil(this._extensionListModal)) {
-                    this._extensionListModal.remove();
-                }
+                /**
+                 * Render function for rendering all the contents of ExtensionInstallDialog.
+                 */
+                this.render = function () {
+                    var self = this;
+                    if (!_.isNil(this._extensionListModal)) {
+                        this._extensionListModal.remove();
+                    }
 
-                var extensionModelOpen = $(
-                    "<div class='modal fade' id='extensionInstallConfigModalId' tabindex='-1' role='dialog' " +
-                    "aria-hidden='true'>" + "<div class='modal-dialog file-dialog' role='document'>" +
-                    "<div class='modal-content' id='sampleDialog'>" +
-                    "<div class='modal-header'>" +
-                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
-                    "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
-                    "</button>" +
-                    "<h4 class='modal-title file-dialog-title'>Extension Details</h4>" +
-                    "<hr class='style1'>" +
-                    "</div>" +
-                    "<div class='modal-body'>" +
-                    "<div class='container-fluid'>" +
-                    "<form class='form-horizontal' onsubmit='return false'>" +
-                    "<div class='form-group'>" +
-                    "<label for='locationSearch' class='col-sm-2 file-dialog-label'>Search :</label>" +
-                    "<input type='text' placeholder='enter the extension name'" +
-                    " class='search-file-dialog-form-control'" +
-                    " id='extensionSearchId' autofocus>" +
-                    "</div>" +
-                    "<div class='form-group'>" +
-                    "<div class='file-dialog-form-scrollable-block' style='padding:10px4px; margin-left:35px;'>" +
-                    "<div id='noResults' style='display:none;'>No extension has found</div>" +
-                    "<div id='extensionTableId' class='samples-pane'>" +
-                    "</div>" +
-                    "<div id='file-browser-error' class='alert alert-danger' style='display: none;'>" +
-                    "</div>" +
-                    "</div>" +
-                    "</div>" +
-                    "<div class='form-group'>" +
-                    "<div class='file-dialog-form-btn'>" +
-                    "<button type='button' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
-                    "</div>" +
-                    "</div>" +
-                    "</form>" +
-                    "<div id='extensionInstallErrorId' class='alert alert-danger'>" +
-                    "<strong>Error!</strong>Something went wrong." +
-                    "</div>" +
-                    "</div>" +
-                    "</div>" +
-                    "</div>" +
-                    "</div>" +
-                    "</div>");
+                    var extensionModelOpen = $(
+                        "<div class='modal fade' id='extensionInstallConfigModalId' tabindex='-1' role='dialog' " +
+                        "aria-hidden='true'>" + "<div class='modal-dialog file-dialog' role='document'>" +
+                        "<div class='modal-content' id='sampleDialog'>" +
+                        "<div class='modal-header'>" +
+                        "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                        "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                        "</button>" +
+                        "<h4 class='modal-title file-dialog-title'>Extension Details</h4>" +
+                        "<hr class='style1'>" +
+                        "</div>" +
+                        "<div class='modal-body'>" +
+                        "<div class='container-fluid'>" +
+                        "<form class='form-horizontal' onsubmit='return false'>" +
+                        "<div class='form-group'>" +
+                        "<label for='locationSearch' class='col-sm-2 file-dialog-label'>Search :</label>" +
+                        "<input type='text' placeholder='enter the extension name'" +
+                        " class='search-file-dialog-form-control'" +
+                        " id='extensionSearchId' autofocus>" +
+                        "</div>" +
+                        "<div class='form-group'>" +
+                        "<div class='file-dialog-form-scrollable-block' style='padding:10px4px; margin-left:35px;'>" +
+                        "<div id='noResults' style='display:none;'>No extensions found.</div>" +
+                        "<div id='extensionTableId' class='samples-pane'>" +
+                        "</div>" +
+                        "<div id='file-browser-error' class='alert alert-danger' style='display: none;'>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "<div class='form-group'>" +
+                        "<div class='file-dialog-form-btn'>" +
+                        "<button type='button' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
+                        "</div>" +
+                        "</div>" +
+                        "</form>" +
+                        "<div id='extensionInstallErrorId' class='alert alert-danger'>" +
+                        "<strong>Error!</strong>Something went wrong." +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>");
 
-                var extensionInstallConfigModal = extensionModelOpen.filter("#extensionInstallConfigModalId");
-                var extensionInstallError = extensionModelOpen.find("#extensionInstallErrorId");
-                var extensionSearch = extensionModelOpen.find("input").filter("#extensionSearchId");
+                    var extensionInstallConfigModal = extensionModelOpen.filter("#extensionInstallConfigModalId");
+                    var extensionInstallError = extensionModelOpen.find("#extensionInstallErrorId");
+                    var extensionSearch = extensionModelOpen.find("input").filter("#extensionSearchId");
 
-                extensionInstallConfigModal.on('shown.bs.modal', function () {
-                    extensionSearch.focus();
-                });
-                var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
+                    extensionInstallConfigModal.on('shown.bs.modal', function () {
+                        extensionSearch.focus();
+                    });
+                    var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
 
-                self.renderExtensions(extensionContainer);
-                var extensionTable;
-                extensionSearch.keyup(function () {
-                    self.searchExtension(extensionTable, extensionSearch.val());
-                });
-                $(this.dialog_containers).append(extensionModelOpen);
-                extensionInstallError.hide();
-                this._extensionListModal = extensionModelOpen;
-            }
+                    self.renderExtensions(extensionContainer);
+                    // var extensionTable;
+                    extensionSearch.keyup(function () {
+                        self.searchExtension(extensionModelOpen, extensionTable, extensionSearch.val());
+                    });
+                    $(this.dialog_containers).append(extensionModelOpen);
+                    extensionInstallError.hide();
+                    this._extensionListModal = extensionModelOpen;
+                }
         };
     });
\ No newline at end of file
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
index 9dd71348310..e7e27089102 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
@@ -5,7 +5,6 @@ define(['require', 'jquery', 'constants'],
     function (require, $, Constants) {
         var self = this;
         var Utils = function () {
-            this.extensionData = getExtensionDetails();
         };
 
         var rest_client_constants = {
@@ -17,111 +16,127 @@ define(['require', 'jquery', 'constants'],
             editorUrl: window.location.protocol + "//" + window.location.host + '/editor'
         };
 
-        /**
-         * getting extension data from back end.
-         * @returns {Map|Map}
-         */
-        function getExtensionDetails() {
-            return new Map(Object.entries({
-                "kafka": {
-                    "extensionStatus": "NOT_INSTALLED",
-                    "extensionInfo": {
-                        "name": "kafka",
-                        "version": "5.0.8-SNAPSHOT"
-                    }
-                },
-                "redis": {
-                    "extensionStatus": "NOT_INSTALLED",
-                    "extensionInfo": {
-                        "name": "redis",
-                        "version": "3.1.2-SNAPSHOT"
-                    },
-                    "manuallyInstall": [
-                        {
-                            "name": "redis-clients",
-                            "version": "2.3.0",
-                            "download": {
-                                "info": {
-                                    "description": "redis clients is like a one extension",
-                                    "install": "by using this way we can install redis-clients"
-                                },
-                                "autoDownloadable": false,
-                                "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/redis_2.11-2.1.1.jar"
-                            },
-                            "type": "BUNDLE",
-                            "lookupRegex": "kafka-clients-(.+).jar"
-                        },
-                        {
-                            "name": "redis-server",
-                            "version": "2.3.0",
-                            "download": {
-                                "info": {
-                                    "description": "redis clients is like a one extension",
-                                    "install": "by using this way we can install redis-clients"
-                                },
-                                "autoDownloadable": false,
-                                "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/kafka_2.11-2.1.1.jar"
-                            },
-                            "type": "BUNDLE",
-                            "lookupRegex": "kafka-server-(.+).jar"
-                        }
-                    ]
-                },
-                "grpc": {
-                    "extensionStatus": "NOT_INSTALLED",
-                    "extensionInfo": {
-                        "name": "grpc",
-                        "version": "3.1.2-SNAPSHOT"
-                    },
-                    "manuallyInstall": [
-                        {
-                            "name": "grpc-clients",
-                            "version": "2.3.0",
-                            "download": {
-                                "info": {
-                                    "description": "grpc clients is like a one extension",
-                                    "install": "by using this way we can install grpc-clients"
-                                },
-                                "autoDownloadable": false,
-                                "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
-                            },
-                            "type": "BUNDLE",
-                            "lookupRegex": "grpc-clients-(.+).jar"
-                        },
-                        {
-                            "name": "grpc-server",
-                            "version": "2.3.0",
-                            "download": {
-                                "info": {
-                                    "description": "grpc server is like a one extension",
-                                    "install": "by using this way we can install grpc-server"
-                                },
-                                "autoDownloadable": false,
-                                "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
-                            },
-                            "type": "BUNDLE",
-                            "lookupRegex": "grpc-server-(.+).jar"
-                        }
-                    ]
-                },
-                "nats": {
-                    "extensionStatus": "NOT_INSTALLED",
-                    "extensionInfo": {
-                        "name": "nats",
-                        "version": "3.1.2-SNAPSHOT"
-                    },
-                }
-            }));
-        }
+        // /**
+        //  * getting extension data from back end.
+        //  * @returns {Map|Map}
+        //  */
+        // function getExtensionDetails() { // TODO remove
+        //     return new Map(Object.entries({}));
+        //
+        //
+        //
+        //
+        //     // return new Map(Object.entries({
+        //     //     "kafka": {
+        //     //         "extensionStatus": "NOT_INSTALLED",
+        //     //         "extensionInfo": {
+        //     //             "name": "kafka",
+        //     //             "version": "5.0.8-SNAPSHOT"
+        //     //         }
+        //     //     },
+        //     //     "redis": {
+        //     //         "extensionStatus": "NOT_INSTALLED",
+        //     //         "extensionInfo": {
+        //     //             "name": "redis",
+        //     //             "version": "3.1.2-SNAPSHOT"
+        //     //         },
+        //     //         "manuallyInstall": [
+        //     //             {
+        //     //                 "name": "redis-clients",
+        //     //                 "version": "2.3.0",
+        //     //                 "download": {
+        //     //                     "info": {
+        //     //                         "description": "redis clients is like a one extension",
+        //     //                         "install": "by using this way we can install redis-clients"
+        //     //                     },
+        //     //                     "autoDownloadable": false,
+        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/redis_2.11-2.1.1.jar"
+        //     //                 },
+        //     //                 "type": "BUNDLE",
+        //     //                 "lookupRegex": "kafka-clients-(.+).jar"
+        //     //             },
+        //     //             {
+        //     //                 "name": "redis-server",
+        //     //                 "version": "2.3.0",
+        //     //                 "download": {
+        //     //                     "info": {
+        //     //                         "description": "redis clients is like a one extension",
+        //     //                         "install": "by using this way we can install redis-clients"
+        //     //                     },
+        //     //                     "autoDownloadable": false,
+        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/kafka_2.11-2.1.1.jar"
+        //     //                 },
+        //     //                 "type": "BUNDLE",
+        //     //                 "lookupRegex": "kafka-server-(.+).jar"
+        //     //             }
+        //     //         ]
+        //     //     },
+        //     //     "grpc": {
+        //     //         "extensionStatus": "NOT_INSTALLED",
+        //     //         "extensionInfo": {
+        //     //             "name": "grpc",
+        //     //             "version": "3.1.2-SNAPSHOT"
+        //     //         },
+        //     //         "manuallyInstall": [
+        //     //             {
+        //     //                 "name": "grpc-clients",
+        //     //                 "version": "2.3.0",
+        //     //                 "download": {
+        //     //                     "info": {
+        //     //                         "description": "grpc clients is like a one extension",
+        //     //                         "install": "by using this way we can install grpc-clients"
+        //     //                     },
+        //     //                     "autoDownloadable": false,
+        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
+        //     //                 },
+        //     //                 "type": "BUNDLE",
+        //     //                 "lookupRegex": "grpc-clients-(.+).jar"
+        //     //             },
+        //     //             {
+        //     //                 "name": "grpc-server",
+        //     //                 "version": "2.3.0",
+        //     //                 "download": {
+        //     //                     "info": {
+        //     //                         "description": "grpc server is like a one extension",
+        //     //                         "install": "by using this way we can install grpc-server"
+        //     //                     },
+        //     //                     "autoDownloadable": false,
+        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
+        //     //                 },
+        //     //                 "type": "BUNDLE",
+        //     //                 "lookupRegex": "grpc-server-(.+).jar"
+        //     //             }
+        //     //         ]
+        //     //     },
+        //     //     "nats": {
+        //     //         "extensionStatus": "NOT_INSTALLED",
+        //     //         "extensionInfo": {
+        //     //             "name": "nats",
+        //     //             "version": "3.1.2-SNAPSHOT"
+        //     //         },
+        //     //     }
+        //     // }));
+        // },
+
 
         /**
-         * provide the update details about the extension
-         * @param extension
-         * @param callbackUpdater
-         * @param key
-         * @param callback
+         * Installs or un-installs an extension.
+         *
+         * @param extension             Extension object.
+         * @param app                   Reference of the app.
+         * @param handleLoading         Function which handles the 'loading' state of the installation.
+         * @param handleCallback        Callback function after a successful installation.
+         * @param callerObject          The object which calls this method.
+         * @param requestedActionText   The requested action, i.e: either install or un-install
+         * @param callerScope           Scope of the caller.
          */
-        Utils.prototype.extensionUpdateThroughFile = function (extension,callbackUpdater) {
+        Utils.prototype.installOrUnInstallExtension = function (extension,
+                                                                app,
+                                                                handleLoading,
+                                                                handleCallback,
+                                                                callerObject,
+                                                                requestedActionText,
+                                                                callerScope) {
             self.extensionInstallUninstallAlertModal = $(
                 "<div class='modal fade' id='extensionAlertModal' tabindex='-1' role='dialog'" +
                 " aria-tydden='true'>" +
@@ -139,14 +154,14 @@ define(['require', 'jquery', 'constants'],
                 "<div class='container-fluid'>" +
                 "<form class='form-horizontal' onsubmit='return false'>" +
                 "<div class='form-group'>" +
-                "<label for='configName' class='col-sm-9 file-dialog-label'>" +
-                "Are you sure to " + ((extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) ? 'install' : 'unInstall') + " " + extension.extensionInfo.name + " ?" +
+                "<label for='configName' class='col-sm-9 file-dialog-label'>" + "Are you sure you want to install " +
+                requestedActionText.toLowerCase() + " <b>" + extension.extensionInfo.name + "</b>?" +
                 "</label>" +
                 "</div>" +
                 "<div class='form-group'>" +
                 "<div class='file-dialog-form-btn'>" +
-                "<button id='installUninstallId' type='button' class='btn btn-primary'>" + ((extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) ? 'install' : 'unInstall') +
-                "</button>" +
+                "<button id='installUninstallId' type='button' class='btn btn-primary'>" +
+                requestedActionText + "</button>" +
                 "<div class='divider'/>" +
                 "<button type='cancelButton' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
                 "</div>" +
@@ -160,44 +175,30 @@ define(['require', 'jquery', 'constants'],
 
             self.extensionInstallUninstallAlertModal.find("button").filter("#installUninstallId").click(function () {
                 self.extensionInstallUninstallAlertModal.modal('hide');
-                var action = (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED)
-                    ? Constants.INSTALL : Constants.UNINSTALL;
-                var updateData = {
-                    "name": extension.extensionInfo.name,
-                    "action": action
-                };
+                var action = requestedActionText;
 
-                // TODO generalize serviceUrl
-                var serviceUrl = window.location.protocol + "//" + window.location.host+ "/siddhi-extensions";
+                // Wait until installation completes.
+                if (handleLoading) {
+                    var actionStatus = action + 'ing';
+                    actionStatus = actionStatus.charAt(0).toUpperCase() + actionStatus.substr(1).toLowerCase();
+                    handleLoading(callerObject, extension, actionStatus, callerScope);
+                }
+
+                var serviceUrl = app.config.services.extensionsInstallation.endpoint;
                 var installUninstallUrl = serviceUrl + "/" + extension.extensionInfo.name + "/" + action.toLowerCase();
-                var installationData = {};
                 $.ajax({
                     type: "POST",
                     contentType: "json",
                     url: installUninstallUrl,
-                    async: false,
-                    success: function (data) {
-                        installationData = data;
-                        console.log("Successfully " + action.toLowerCase() + "ed.")
+                    async: true,
+                    success: function (response) {
+                        handleCallback(extension, response.status, callerObject, response, callerScope);
+                        app.utils.extensionStatusListener.reArrangeExtensions(extension, response.status);
                     },
                     error: function (e) {
-                        throw "Unable to read extension statuses";
+                        throw "Unable to read extension statuses"; // TODO show error message
                     }
                 });
-
-
-                //this updateData goes to back end.
-                console.log(updateData.name + " " + updateData.action);
-                //this updatedExtension data should come from backend.
-                var updatedExtension = {
-                    "extensionStatus": "INSTALLED",
-                    "extensionInfo": {
-                        "name": "kafka",
-                        "version": "5.0.8-SNAPSHOT"
-                    }
-                };
-                //call back function changes the front design based on the updated  json data from back end
-                callbackUpdater(updatedExtension, true);
             });
         };
 
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/app-main.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/app-main.js
index 1dcf58b87df..c468b73105c 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/app-main.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/app-main.js
@@ -368,6 +368,9 @@ define(['app/main', 'jquery'],
             },
             deploymentConfigs: {
                 endpoint: window.location.protocol + "//" + window.location.host + '/editor/deploymentConfigs'
+            },
+            extensionsInstallation: {
+                endpoint: window.location.protocol + "//" + window.location.host + '/siddhi-extensions'
             }
         },
         alerts: {
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
index f0ae8448196..5f4a9fff5bd 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
@@ -116,6 +116,12 @@ define(function () {
         EXTENSION_INSTALLED: "INSTALLED",
         EXTENSION_NOT_INSTALLED: "NOT_INSTALLED",
         EXTENSION_PARTIALLY_INSTALLED: "PARTIALLY_INSTALLED",
+        EXTENSION_UNINSTALLED: "UNINSTALLED",
+        EXTENSION_NOT_UNINSTALLED: "NOT_UNINSTALLED",
+        EXTENSION_PARTIALLY_UNINSTALLED: "PARTIALLY_UNINSTALLED",
+        EXTENSION_INSTALLED_TEXT: "Installed",
+        EXTENSION_NOT_INSTALLED_TEXT: "Not-Installed",
+        EXTENSION_PARTIALLY_INSTALLED_TEXT: "Partially-Installed",
         INSTALL: "Install",
         UNINSTALL: "UnInstall"
     };
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
index bd673246105..37cdf2b2ae7 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
@@ -274,9 +274,13 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
                 searchResults: Handlebars.compile($('#operators-search-results-template').html()),
                 moreDetails: Handlebars.compile($('#operator-details-template').html())
             };
+            // Load installation statuses of all the extensions.
+            this.loadExtensionInstallationStatuses();
             this._notInstalledExtensionArray = getNotInstalledExtensionDetails();
             this._installedExtensionArray = getInstalledExtensionDetails();
             this._partiallyInstalledExtensionArray = getPartiallyInstalledExtensionDetails();
+            // Register listener for changes in extension installation statuses.
+            this._application.utils.extensionStatusListener = this;
         };
 
         /**
@@ -308,6 +312,109 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
             }
         };
 
+        /**
+         * Loads extension installation statuses.
+         */
+        OperatorFinder.prototype.loadExtensionInstallationStatuses = function () {
+            var self = this;
+            var serviceUrl = self._application.config.services.extensionsInstallation.endpoint;
+            var getAllExtensionStatusesUrl = serviceUrl + "/status";
+            $.ajax({
+                type: "GET",
+                contentType: "json",
+                url: getAllExtensionStatusesUrl,
+                async: false,
+                success: function (data) {
+                    self._application.utils.extensionData = new Map(Object.entries(data));
+                },
+                error: function (e) {
+                    throw "Unable to read extension statuses";
+                }
+            });
+        };
+
+        /**
+         * Re-arranges extension objects, based on an extension's updated installation status.
+         *
+         * @param extension     Extension object.
+         * @param updatedStatus Updated installation status of the given extension object.
+         */
+        OperatorFinder.prototype.reArrangeExtensions = function (extension, updatedStatus) {
+            this._application.utils.extensionData.set(extension.extensionInfo.name, extension);
+            var currentArray = this.getCurrentArray(extension);
+            var targetArray = this.getExtensionArrayFromInstallationStatus(updatedStatus);
+            self.moveInstallationUpdatedExtension(extension, currentArray, targetArray);
+            extension.extensionStatus = updatedStatus;
+            // Re-render only if the operator-finder is open.
+            if (this._operators) {
+                self.renderSearchResults($('#operator-search-input-field').get(0).value);
+            }
+        };
+
+        /**
+         * Returns the array in which, the given extension exists.
+         *
+         * @param extension Extension object.
+         * @returns {Array} The array in which, the given extension exists.
+         */
+        OperatorFinder.prototype.getCurrentArray = function (extension) {
+            var filteredExtensions;
+            filteredExtensions = _.filter(
+                this._installedExtensionArray,
+                function (ext) {
+                    return ext.extensionInfo.name === extension.extensionInfo.name
+                });
+            if (filteredExtensions.length > 0) {
+                return this._installedExtensionArray;
+            }
+            filteredExtensions = _.filter(
+                this._partiallyInstalledExtensionArray,
+                function (ext) {
+                    return ext.extensionInfo.name === extension.extensionInfo.name
+                });
+            if (filteredExtensions.length > 0) {
+                return this._partiallyInstalledExtensionArray;
+            }
+            return this._notInstalledExtensionArray;
+        };
+
+        /**
+         * Returns the array of an extension, based on the given status.
+         *
+         * @param status    Installation status of an extension.
+         * @returns {Array} The array, which contains extensions that have the given installation status.
+         */
+        OperatorFinder.prototype.getExtensionArrayFromInstallationStatus = function (status) {
+            switch (status) {
+                case Constants.EXTENSION_INSTALLED:
+                case Constants.EXTENSION_NOT_UNINSTALLED:
+                    return this._installedExtensionArray;
+                case Constants.EXTENSION_PARTIALLY_INSTALLED:
+                case Constants.EXTENSION_PARTIALLY_UNINSTALLED:
+                    return this._partiallyInstalledExtensionArray;
+                case Constants.EXTENSION_NOT_INSTALLED:
+                case Constants.EXTENSION_UNINSTALLED:
+                    return this._notInstalledExtensionArray;
+            }
+        };
+
+        /**
+         * Moves the given extension from the given current array to the given target array.
+         *
+         * @param extension     Extension object to be moved.
+         * @param currentArray  Current array of the extension object.
+         * @param targetArray   Destination array for the extension object.
+         */
+        OperatorFinder.prototype.moveInstallationUpdatedExtension = function (extension, currentArray, targetArray) {
+            var index = currentArray.indexOf(extension);
+            if (index > -1) {
+                console.log("Before Lengths", currentArray.length, targetArray.length);
+                currentArray.splice(index, 1);
+                targetArray.push(extension);
+                console.log("After Lengths", currentArray.length, targetArray.length);
+            }
+        };
+
         /**
          * functions to get the not installed extension array details.
          */
@@ -568,6 +675,17 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
             }
         };
 
+        /**
+         * Updates the given button as 'loading', during an extension's installation.
+         *
+         * @param button    Install/Un-install button.
+         */
+        OperatorFinder.prototype.handleExtensionInstallationInProgress = function (button) {
+            button.empty();
+            button.addClass('fw-loader5');
+            button.addClass('fw-spin');
+        };
+
         /**
          * Renders the interface.
          */
@@ -630,24 +748,45 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
                 self.renderSearchResults(query);
             });
 
-            //Event handler for extension installation modal open.
+            // Event handler for extension installation.
             resultContent.on('click', 'a.extension-install-btn', function (e) {
                 var innerSelf = this;
-                    e.preventDefault();
-                var callbackUpdater = function (updatedExtension, isUpdated) {
-                    if (isUpdated) {
-                        self._application.utils.extensionData.set(updatedExtension.extensionInfo.name, updatedExtension);
-                        self.renderSearchResults($(innerSelf).data('extension-name'));
-                    }
+                e.preventDefault();
+                var handleCallback = function (extension, updatedStatus) {
+                    self.reArrangeExtensions(extension, updatedStatus);
                 };
                 var extensionObject = getNotInstalledExtensionObject({name: $(this).data('extension-name')});
-                self._application.utils.extensionUpdateThroughFile(extensionObject, callbackUpdater);
-                }
-            );
+                self._application.utils.installOrUnInstallExtension(
+                    extensionObject,
+                    self._application,
+                    self.handleExtensionInstallationInProgress,
+                    handleCallback,
+                    $(this),
+                    Constants.INSTALL,
+                    innerSelf);
+            });
 
-            //Event handler for partially extension installation modal open.
+            // Event handler for extension un-installation.
+            resultContent.on('click', 'a.extension-un-install-btn', function (e) {
+                var innerSelf = this;
+                e.preventDefault();
+                var handleCallback = function (extension, updatedStatus) {
+                    self.reArrangeExtensions(extension, updatedStatus);
+                };
+                var extensionObject = getInstalledExtensionObject({name: $(this).data('extension-name')});
+                self._application.utils.installOrUnInstallExtension(
+                    extensionObject,
+                    self._application,
+                    self.handleExtensionInstallationInProgress,
+                    handleCallback,
+                    $(this),
+                    Constants.UNINSTALL,
+                    innerSelf);
+            });
+
+            // Event handler for partially installed extension.
             resultContent.on('click', 'a.partial-extension-install-btn', function (e) {
-                    e.preventDefault();
+                e.preventDefault();
                 var extensionName = {name: $(this).data('extension-names')};
                 var extension = getPartiallyInstalledExtensionObject(extensionName);
                 self._partialModel = $(
@@ -675,16 +814,22 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
                 var modalBody = self._partialModel.find("div").filter("#modalBodyId");
 
                 if (extension.manuallyInstall) {
+                    modalBody.append($('<div style="text-align:justify">' +
+                        'The following dependencies should be manually installed.</div>'));
                     extension.manuallyInstall.forEach(function (dependency) {
-                        modalBody.append($('<h3>' + dependency.name + ' </h3>' +
-                            '<h4>Description</h4>' +
-                            '<div id="partialExtenDescription" style = "text-align:justify">'
-                            + dependency.download.info.description +
-                            '</div>' +
-                            '<h4>Install</h4>' +
-                            '<div id="partialExtenInstall" style = "text-align:justify" >'
-                            + dependency.download.info.install +
-                            '</div>'));
+                        var instructions = dependency.download.instructions ?
+                            (`<h4>Instructions</h4><div id="partialExtenDescription" style = "text-align:justify">` +
+                                `${dependency.download.instructions}</div>`) :
+                            ('<div id="partialExtenDescription" style="text-align:justify">' +
+                                'No instructions found.</div>');
+                        var usages = (`<h4>Installation Locations</h4>` +
+                            `<div id="partialExtenDescription" style = "text-align:justify">` +
+                            `<ol>${dependency.usages.map(usage => 
+                                    `<li>${usage.type.toLowerCase()} in ${usage.usedBy.toLowerCase()}</li>`
+                                )}</ol></div>`);
+
+                        modalBody.append($(`<h3>${dependency.name}</h3>` +
+                            `<div style="padding-left:10px">${instructions}<br/>${usages}</div>`));
                     });
                 }
                 self._partialModel.modal('show');
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
index 135b97ee55c..23eccd1dd7d 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
@@ -2365,19 +2365,25 @@ <h4 data-placement="right" data-container="body" title="{{fqn}}">
             &nbsp;&nbsp;
             {{#if install}}
             <span id="InstallBtnId">
-            <span class="extension-not-install"> {{install}}</span>
-                 </span>
+                <span class="extension-not-install"> {{install}}</span>
+                &nbsp;&nbsp;
+                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
+                   title="Click here to Un-install"
+                   class="extension-un-install-btn">
+                    <i class="fw fw-delete"></i>
+                </a>
+            </span>
             {{/if}}
             {{#if notInstall}}
             <span id="notInstallBtnId">
-            <span class="extension-not-install"> {{notInstall}}</span>
-            &nbsp;&nbsp;
-               <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
+                <span class="extension-not-install"> {{notInstall}}</span>
+                &nbsp;&nbsp;
+                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                   title="Click here to Install"
                   class="extension-install-btn">
-                <i class="fw fw-download"></i>
-            </a>
-                 </span>
+                    <i class="fw fw-download"></i>
+                </a>
+            </span>
             {{/if}}
 
             {{#if partialInstall}}

From cd670b46f87e2b9010aab1b113a076ba7e29cf37 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Mon, 24 Feb 2020 14:55:58 +0530
Subject: [PATCH 7/8] Modify extensions installer API to mark installation
 failure as HTTP 500

---
 ...SiddhiExtensionsInstallerMicroservice.java | 32 ++++++++++++++++---
 .../core/util/ResponseEntityCreator.java      |  4 +--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/internal/SiddhiExtensionsInstallerMicroservice.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/internal/SiddhiExtensionsInstallerMicroservice.java
index 0d698bc8e7b..b56a01ca5c9 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/internal/SiddhiExtensionsInstallerMicroservice.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/internal/SiddhiExtensionsInstallerMicroservice.java
@@ -43,6 +43,11 @@
 import javax.ws.rs.core.Response;
 import java.util.Map;
 
+import static org.wso2.carbon.siddhi.extensions.installer.core.models.enums.ExtensionInstallationStatus.NOT_INSTALLED;
+import static org.wso2.carbon.siddhi.extensions.installer.core.models.enums.ExtensionUnInstallationStatus.NOT_UNINSTALLED;
+import static org.wso2.carbon.siddhi.extensions.installer.core.util.ResponseEntityCreator.ACTION_STATUS_KEY;
+import static org.wso2.carbon.siddhi.extensions.installer.core.util.ResponseEntityCreator.ACTION_TYPE_KEY;
+
 /**
  * Exposes Siddhi Extensions Installer as a micro-service.
  */
@@ -122,9 +127,12 @@ public Response getDependencyStatuses(@PathParam("extensionId") String extension
     public Response installDependencies(@PathParam("extensionId") String extensionId) {
         try {
             DependencyInstaller dependencyInstaller = new DependencyInstallerImpl(extensionConfigs);
+            Map<String, Object> responseEntity = dependencyInstaller.installDependenciesFor(extensionId);
+            Response.Status responseStatus = isActionFailure(responseEntity) ? Response.Status.INTERNAL_SERVER_ERROR :
+                Response.Status.OK;
             return Response
-                .status(Response.Status.OK)
-                .entity(dependencyInstaller.installDependenciesFor(extensionId))
+                .status(responseStatus)
+                .entity(responseEntity)
                 .type(MediaType.APPLICATION_JSON)
                 .build();
         } catch (ExtensionsInstallerException e) {
@@ -141,9 +149,12 @@ public Response installDependencies(@PathParam("extensionId") String extensionId
     public Response uninstallDependencies(@PathParam("extensionId") String extensionId) {
         try {
             DependencyInstaller dependencyInstaller = new DependencyInstallerImpl(extensionConfigs);
+            Map<String, Object> responseEntity = dependencyInstaller.unInstallDependenciesFor(extensionId);
+            Response.Status responseStatus = isActionFailure(responseEntity) ? Response.Status.INTERNAL_SERVER_ERROR :
+                Response.Status.OK;
             return Response
-                .status(Response.Status.OK)
-                .entity(dependencyInstaller.unInstallDependenciesFor(extensionId))
+                .status(responseStatus)
+                .entity(responseEntity)
                 .type(MediaType.APPLICATION_JSON)
                 .build();
         } catch (ExtensionsInstallerException e) {
@@ -154,6 +165,19 @@ public Response uninstallDependencies(@PathParam("extensionId") String extension
         }
     }
 
+    /**
+     * Returns whether the given response entity denotes a failure in installation/un-installation.
+     * This information is used to mark such a failure as an internal server error.
+     *
+     * @param responseEntity Response entity produced by the installation/un-installation.
+     * @return Whether the response entity denotes a failure in installation/un-installation.
+     */
+    private boolean isActionFailure(Map<String, Object> responseEntity) {
+        return responseEntity.containsKey(ACTION_TYPE_KEY) && responseEntity.containsKey(ACTION_STATUS_KEY) &&
+            (NOT_INSTALLED == responseEntity.get(ACTION_STATUS_KEY) ||
+                NOT_UNINSTALLED == responseEntity.get(ACTION_STATUS_KEY));
+    }
+
     /**
      * This is the activation method of SiddhiExtensionsInstallerMicroservice.
      * This will be called when its references are satisfied.
diff --git a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
index 7547b4ead59..7ce473446e0 100644
--- a/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
+++ b/components/org.wso2.carbon.siddhi.extensions.installer.core/src/main/java/org/wso2/carbon/siddhi/extensions/installer/core/util/ResponseEntityCreator.java
@@ -34,8 +34,8 @@
  */
 public class ResponseEntityCreator {
 
-    private static final String ACTION_TYPE_KEY = "actionType";
-    private static final String ACTION_STATUS_KEY = "status";
+    public static final String ACTION_TYPE_KEY = "actionType";
+    public static final String ACTION_STATUS_KEY = "status";
     private static final String ACTION_COMPLETED_DEPENDENCIES_KEY = "completed";
     private static final String ACTION_FAILED_DEPENDENCIES_KEY = "failed";
     private static final String MANUALLY_INSTALLABLE_DEPENDENCIES_KEY = "manuallyInstall";

From b288dbb1adb940f898eaaf0517bf3f66bd7e14c0 Mon Sep 17 00:00:00 2001
From: senthuran16 <senthuranrc16@gmail.com>
Date: Mon, 24 Feb 2020 16:43:15 +0530
Subject: [PATCH 8/8] Add alerts and perform code cleanup

---
 .../web/editor/commons/js/utils/utils.js      | 116 ++----------------
 .../js/operator-finder/operator-finder.js     |   8 +-
 .../src/main/resources/web/index.html         |   2 +-
 3 files changed, 14 insertions(+), 112 deletions(-)

diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
index e7e27089102..cac1b3d727a 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
@@ -1,8 +1,8 @@
 /**
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0  http://www.apache.org/licenses/LICENSE-2.0
  */
-define(['require', 'jquery', 'constants'],
-    function (require, $, Constants) {
+define(['require', 'jquery', 'constants', 'alerts'],
+    function (require, $, Constants, alerts) {
         var self = this;
         var Utils = function () {
         };
@@ -16,109 +16,6 @@ define(['require', 'jquery', 'constants'],
             editorUrl: window.location.protocol + "//" + window.location.host + '/editor'
         };
 
-        // /**
-        //  * getting extension data from back end.
-        //  * @returns {Map|Map}
-        //  */
-        // function getExtensionDetails() { // TODO remove
-        //     return new Map(Object.entries({}));
-        //
-        //
-        //
-        //
-        //     // return new Map(Object.entries({
-        //     //     "kafka": {
-        //     //         "extensionStatus": "NOT_INSTALLED",
-        //     //         "extensionInfo": {
-        //     //             "name": "kafka",
-        //     //             "version": "5.0.8-SNAPSHOT"
-        //     //         }
-        //     //     },
-        //     //     "redis": {
-        //     //         "extensionStatus": "NOT_INSTALLED",
-        //     //         "extensionInfo": {
-        //     //             "name": "redis",
-        //     //             "version": "3.1.2-SNAPSHOT"
-        //     //         },
-        //     //         "manuallyInstall": [
-        //     //             {
-        //     //                 "name": "redis-clients",
-        //     //                 "version": "2.3.0",
-        //     //                 "download": {
-        //     //                     "info": {
-        //     //                         "description": "redis clients is like a one extension",
-        //     //                         "install": "by using this way we can install redis-clients"
-        //     //                     },
-        //     //                     "autoDownloadable": false,
-        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/redis_2.11-2.1.1.jar"
-        //     //                 },
-        //     //                 "type": "BUNDLE",
-        //     //                 "lookupRegex": "kafka-clients-(.+).jar"
-        //     //             },
-        //     //             {
-        //     //                 "name": "redis-server",
-        //     //                 "version": "2.3.0",
-        //     //                 "download": {
-        //     //                     "info": {
-        //     //                         "description": "redis clients is like a one extension",
-        //     //                         "install": "by using this way we can install redis-clients"
-        //     //                     },
-        //     //                     "autoDownloadable": false,
-        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/kafka_2.11-2.1.1.jar"
-        //     //                 },
-        //     //                 "type": "BUNDLE",
-        //     //                 "lookupRegex": "kafka-server-(.+).jar"
-        //     //             }
-        //     //         ]
-        //     //     },
-        //     //     "grpc": {
-        //     //         "extensionStatus": "NOT_INSTALLED",
-        //     //         "extensionInfo": {
-        //     //             "name": "grpc",
-        //     //             "version": "3.1.2-SNAPSHOT"
-        //     //         },
-        //     //         "manuallyInstall": [
-        //     //             {
-        //     //                 "name": "grpc-clients",
-        //     //                 "version": "2.3.0",
-        //     //                 "download": {
-        //     //                     "info": {
-        //     //                         "description": "grpc clients is like a one extension",
-        //     //                         "install": "by using this way we can install grpc-clients"
-        //     //                     },
-        //     //                     "autoDownloadable": false,
-        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
-        //     //                 },
-        //     //                 "type": "BUNDLE",
-        //     //                 "lookupRegex": "grpc-clients-(.+).jar"
-        //     //             },
-        //     //             {
-        //     //                 "name": "grpc-server",
-        //     //                 "version": "2.3.0",
-        //     //                 "download": {
-        //     //                     "info": {
-        //     //                         "description": "grpc server is like a one extension",
-        //     //                         "install": "by using this way we can install grpc-server"
-        //     //                     },
-        //     //                     "autoDownloadable": false,
-        //     //                     "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
-        //     //                 },
-        //     //                 "type": "BUNDLE",
-        //     //                 "lookupRegex": "grpc-server-(.+).jar"
-        //     //             }
-        //     //         ]
-        //     //     },
-        //     //     "nats": {
-        //     //         "extensionStatus": "NOT_INSTALLED",
-        //     //         "extensionInfo": {
-        //     //             "name": "nats",
-        //     //             "version": "3.1.2-SNAPSHOT"
-        //     //         },
-        //     //     }
-        //     // }));
-        // },
-
-
         /**
          * Installs or un-installs an extension.
          *
@@ -154,7 +51,7 @@ define(['require', 'jquery', 'constants'],
                 "<div class='container-fluid'>" +
                 "<form class='form-horizontal' onsubmit='return false'>" +
                 "<div class='form-group'>" +
-                "<label for='configName' class='col-sm-9 file-dialog-label'>" + "Are you sure you want to install " +
+                "<label for='configName' class='col-sm-9 file-dialog-label'>" + "Are you sure you want to " +
                 requestedActionText.toLowerCase() + " <b>" + extension.extensionInfo.name + "</b>?" +
                 "</label>" +
                 "</div>" +
@@ -194,9 +91,14 @@ define(['require', 'jquery', 'constants'],
                     success: function (response) {
                         handleCallback(extension, response.status, callerObject, response, callerScope);
                         app.utils.extensionStatusListener.reArrangeExtensions(extension, response.status);
+                        alerts.info(`Extension was successfully ${action.toLowerCase()}ed. ` +
+                            `Please restart the editor.`);
                     },
                     error: function (e) {
-                        throw "Unable to read extension statuses"; // TODO show error message
+                        var message = `Unable to ${action.toLowerCase()} the extension. ` +
+                            `Please check editor console for further information.`;
+                        alerts.error(message);
+                        throw message;
                     }
                 });
             });
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
index 37cdf2b2ae7..c0c28eefc42 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
@@ -1,8 +1,8 @@
 /**
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0  http://www.apache.org/licenses/LICENSE-2.0
  */
-define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils', 'constants', 'app/source-editor/completion-engine'],
-    function ($, _, log, Remarkable, Handlebars, DesignViewUtils, Constants, CompletionEngine) {
+define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils', 'constants', 'app/source-editor/completion-engine', 'alerts'],
+    function ($, _, log, Remarkable, Handlebars, DesignViewUtils, Constants, CompletionEngine, alerts) {
         /**
          * Load operators from the Completion engine.
          *
@@ -328,6 +328,8 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
                     self._application.utils.extensionData = new Map(Object.entries(data));
                 },
                 error: function (e) {
+                    alerts.error("Unable to read extension statuses." +
+                        "Please see the editor console for further information.")
                     throw "Unable to read extension statuses";
                 }
             });
@@ -408,10 +410,8 @@ define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils',
         OperatorFinder.prototype.moveInstallationUpdatedExtension = function (extension, currentArray, targetArray) {
             var index = currentArray.indexOf(extension);
             if (index > -1) {
-                console.log("Before Lengths", currentArray.length, targetArray.length);
                 currentArray.splice(index, 1);
                 targetArray.push(extension);
-                console.log("After Lengths", currentArray.length, targetArray.length);
             }
         };
 
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
index 23eccd1dd7d..e6c2c35f4e5 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
@@ -2370,7 +2370,7 @@ <h4 data-placement="right" data-container="body" title="{{fqn}}">
                 <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                    title="Click here to Un-install"
                    class="extension-un-install-btn">
-                    <i class="fw fw-delete"></i>
+                    <i class="fw fw-cancel"></i>
                 </a>
             </span>
             {{/if}}