Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Feb 13, 2020
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9191de8
Add front end design for extension installation features
SinthujanSintha Jan 28, 2020
88cbc98
Add front end design changes based on json changes
SinthujanSintha Jan 28, 2020
a5094e6
Add changes to the front design.
SinthujanSintha Jan 30, 2020
f322433
Add the refactor changes.
SinthujanSintha Jan 31, 2020
62e8280
changes back end data into console log.
SinthujanSintha Jan 31, 2020
ed1165c
Change the render function as class function
SinthujanSintha Jan 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions ...s/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1838,3 +1838,12 @@ div.consoleIcon {
.jstree-deletebtn:hover {
color: white;
}

.extension-not-install {
color: wheat;
font-weight: bold;
}

.extension-install-btn {
color: whitesmoke;
}
207 changes: 207 additions & 0 deletions ...i.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = $(
"<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");


//extension array from backend which has details about extensions.
var extensionLists = app.utils.getExtensionDetails();
var extensionTable = $('<table class="table table-hover data-table"' +
' id="extensionTableId"><tbody></tbody></table>');
//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 = $('<tr><td>' + extension.name + '</td><td>Installed</td><td><button' +
' class="btn btn-block btn' +
' btn-primary">UnInstall</button></td></tr>');
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 = $('<tr><td>' + extension.name + '</td><td>Partially-Installed' +
'&nbsp; &nbsp;<a data-toggle="modal"' +
' id="' + partialExtensionIndex + '"><i class="fw' +
' fw-info"></i></a></td><td><button' +
' class="btn btn-block btn' +
' btn-primary">UnInstall</button></td></tr>');

var partialModel = $(
'<div class="modal fade" id="' + partialExtensionIndex + '">' +
'<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>" +
'<h3 class="modal-title file-dialog-title" id="partialExtenName">'
+ extension.name +
'</h3>' +
'<hr class="style1">' +
'</div>' +
'<div class="modal-body">' +
'<h3>Description</h3>' +
'<div id="partialExtenDescription" style = "text-align:justify">'
+ extension.info.description +
'</div>' +
'<h3>Install</h3>' +
'<div id="partialExtenInstall" style = "text-align:justify" >'
+ extension.info.install +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');

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 = $('<tr><td>' + extension.name + '</td><td>Not-Installed</td><td><button' +
' class="btn btn-block btn' +
' btn-primary">Install</button></td></tr>');
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');
}
}
};
});
5 changes: 3 additions & 2 deletions ....wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
/**
* 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 {
save_to_file_dialog: SaveToFileDialog,
open_file_dialog: OpenFileDialog,
CloseConfirmDialog: CloseConfirmDialog,
ReplaceConfirmDialog: ReplaceConfirmDialog,
ExtensionInstallDialog :ExtensionInstallDialog,
import_file_dialog: ImportFileDialog,
export_file_dialog: ExportFileDialog,
settings_dialog: SettingsDialog,
Expand Down
18 changes: 18 additions & 0 deletions ....carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading