From 9191de89ead50bcc4a9f658470b53a4baae76f38 Mon Sep 17 00:00:00 2001 From: SinthujanSintha Date: Tue, 28 Jan 2020 15:30:49 +0530 Subject: [PATCH 1/6] Add front end design for extension installation features --- .../web/editor/commons/css/styles.css | 9 + .../js/dialog/extension-install-dialog.js | 207 ++++++++++++++++++ .../web/editor/commons/js/dialog/module.js | 5 +- .../editor/commons/js/menu-bar/file-menu.js | 18 ++ .../web/editor/commons/js/utils/utils.js | 109 ++++++++- .../editor/commons/js/workspace/workspace.js | 11 + .../web/editor/js/design-view/constants.js | 5 +- .../js/operator-finder/operator-finder.js | 112 ++++++++-- .../src/main/resources/web/index.html | 10 + 9 files changed, 462 insertions(+), 24 deletions(-) create mode 100644 components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js 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 ba1c82548d8..219db9aba55 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 @@ -1838,3 +1838,12 @@ div.consoleIcon { .jstree-deletebtn:hover { color: white; } + +.extension-not-install { + color: wheat; + font-weight: bold; +} + +.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 new file mode 100644 index 00000000000..f3e0e30be50 --- /dev/null +++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js @@ -0,0 +1,207 @@ +/** + * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) Apache License, Version 2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + */ +define(['require', 'lodash', 'jquery','constants'], + function (require, _, $,Constants) { + return function (app) { + + /** + * initialize function for ExtensionInstallDialog. + */ + this.initialize = function (options) { + this.dialog_containers = $(_.get(options.config.dialog, 'container')); + this.extensionList = app.utils.getExtensionDetails(); + }, + /** + * 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(); + } + + var extensionModelOpen = $( + ""); + + 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"); + + + //extension array from backend which has details about extensions. + var extensionLists = app.utils.getExtensionDetails(); + var extensionTable = $('
'); + //define the map to store Partially extension modal based on key + var partialExtensionDetailModal = new Map(); + extensionLists.forEach(function (extension) { + var extensionTableBodyData; + if (extension.status.trim().toLowerCase() === Constants.EXTENSION_INSTALLED) { + extensionTableBodyData = $('' + extension.name + 'InstalledUnInstall'); + extensionTableBodyData.find("button").click(function () { + app.utils.extensionUpdate(extension); + }); + } else if (extension.status.trim().toLowerCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) { + var partialExtensionIndex = extensionLists.indexOf(extension); + extensionTableBodyData = $('' + extension.name + 'Partially-Installed' + + '   UnInstall'); + + var partialModel = $( + ''); + + partialExtensionDetailModal.set(partialExtensionIndex, partialModel); + + extensionTableBodyData.find("a").filter("#" + partialExtensionIndex).click(function () { + extensionPartialModelDisplay(partialExtensionDetailModal.get(partialExtensionIndex)); + }); + + extensionTableBodyData.find("button").click(function () { + app.utils.extensionUpdate(extension); + }); + + } else if (extension.status.trim().toLowerCase() === Constants.EXTENSION_NOT_INSTALLED) { + extensionTableBodyData = $('' + extension.name + 'Not-InstalledInstall'); + extensionTableBodyData.find("button").click(function () { + app.utils.extensionUpdate(extension); + }); + } + extensionTable.append(extensionTableBodyData); + }); + + extensionContainer.append(extensionTable); + extensionSearch.keyup(function () { + searchExtension(extensionTable, extensionSearch.val()); + }); + + $(this.dialog_containers).append(extensionModelOpen); + extensionInstallError.hide(); + this._extensionListModal = extensionModelOpen; + + /** + * 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; + } + } + } + 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'); + } + } + }; + }); \ No newline at end of file diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js index 728bc8d4525..f69812cd462 100644 --- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js +++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js @@ -1,11 +1,11 @@ /** * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0 */ -define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog', './close-confirm-dialog', +define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog','./extension-install-dialog', './close-confirm-dialog', './import-file-dialog', './export-file-dialog', './settings-dialog', './close-all-confirm-dialog', './delete-confirm-dialog', './open-sample-file-dialog', './export-dialog', './sample-event-dialog', './query-store-dialog', './deploy-file-dialog', './export-dialog'], - function (SaveToFileDialog, ReplaceConfirmDialog, OpenFileDialog, CloseConfirmDialog, ImportFileDialog, + function (SaveToFileDialog, ReplaceConfirmDialog, OpenFileDialog,ExtensionInstallDialog, CloseConfirmDialog, ImportFileDialog, ExportFileDialog, SettingsDialog, CloseAllConfirmDialog, DeleteConfirmDialog, OpenSampleFileDialog, DockerExportDialog, SampleEventDialog, QueryStoreDialog, DeployFileDialog, ExportDialog) { return { @@ -13,6 +13,7 @@ define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog open_file_dialog: OpenFileDialog, CloseConfirmDialog: CloseConfirmDialog, ReplaceConfirmDialog: ReplaceConfirmDialog, + ExtensionInstallDialog :ExtensionInstallDialog, import_file_dialog: ImportFileDialog, export_file_dialog: ExportFileDialog, settings_dialog: SettingsDialog, diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js index b432f8bcc16..b6374dfeaf4 100644 --- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js +++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js @@ -60,6 +60,24 @@ define([], function () { }, disabled: false }, + { + id: "extensionInstall", + label: "Extension Installation", + command: { + id: "extension-install-dialog", + shortcuts: { + mac: { + key: "command+alt+i", + label: "\u2318\u2325I" + }, + other: { + key: "ctrl+alt+i", + label: "Ctrl+Alt+I" + } + } + }, + disabled: false + }, { id: "save", label: "Save", 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 4141c101ab6..5d122067b1b 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,9 @@ /** * 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'], - function (require, $) { +define(['require', 'jquery','constants'], + function (require, $,Constants) { + var self = this; var Utils = function () { }; @@ -15,6 +16,110 @@ define(['require', 'jquery'], editorUrl: window.location.protocol + "//" + window.location.host + '/editor' }; + /** + * Get the extension details array from back end. + */ + Utils.prototype.getExtensionDetails = function () { + // extension details array need to be retrieve from backend. + return [{name: "ex1", status: "installed"}, + {name: "ex2fgdfgdfg", status: "installed"}, + { + name: "ex7tyjyjyukuu", status: "partially-installed", + info: { + description: "this ex7 extension gives the string conversion features to Siddhi" + + " app", + install: "To install this ex7 extension you have to set all dependency of it." + } + }, + {name: "grpc", status: "not-installed"}, + { + name: "ex4aerertrtrt", status: "partially-installed", + info: { + description: " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + , + install: "To install this ex4 extension you have to set all dependency of it" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + " this ex4 extension gives the string conversion features to Siddhi" + + " app.This ex4 extension gives the string conversion features to Siddhi" + , + } + }, + {name: "kafka", status: "not-installed"}, + { + name: "ex6tyjyjyukuu", status: "partially-installed", + info: { + description: "this ex6 extension gives the string conversion features to Siddhi" + + " app", + install: "To install this ex6 extension you have to set all dependency of it." + } + }, + ]; + }; + + /** + * provide the update details about the extension + * @param extension + */ + Utils.prototype.extensionUpdate = function (extension) { + self.extensionInstallUninstallAlertModal = $( + "