Skip to content
Snippets Groups Projects
AnalysisEditorPage.xhtml 24.4 KiB
Newer Older
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <!-- The following part makes sure that the assigned parameter will be used to load the project. -->
    <f:metadata>
        <f:viewParam id="projectNameParam" name="projectName" value="#{currentAnalysisEditorBean.projectName}"/>
        <f:event type="preRenderView" listener="#{currentAnalysisEditorBean.initialize()}"  />
    </f:metadata>

    <f:loadBundle var="localizedMessages" basename="lang.Common"/>
    <f:loadBundle var="localizedAnalysisEditorPageMessages" basename="lang.AnalysisEditorPage"/>

    <h:head>
        <title>Kieker.WebGUI</title>
        <!-- Load the necessary CSS files. -->
        <link rel="stylesheet" type="text/css" href="../css/FlowEditor.css"  />
        <link rel="stylesheet" type="text/css" href="../css/Common.css" />
        <link rel="stylesheet" type="text/css" href="../css/Icons.css" />
        <link rel="stylesheet" type="text/css" href="../css/AnalysisEditorPage.css" />

        <!-- Load the necessary JS files. -->
        <script language="javascript" type="text/javascript" src="../js/jit.js"></script>
        <script language="javascript" type="text/javascript" src="../js/flowEditor.js"></script>

        <script>            
            nodeClickListener = function(node, info, e) {
                nodeClickCommand([{name : 'ID', value : node.id}]);
            }
            
            nodeRemoveListener = function(node) {
                nodeRemoveCommand([{name : 'ID', value : node.id}]);
            }
            
            edgeCreateListener = function(sourceNode, targetNode, sourcePort, targetPort) {
                edgeCreateCommand([{name : 'sourcePortID', value : sourcePort.id},{name : 'targetPortID', value : targetPort.id}]);
            }
            
            edgeRemoveListener = function(sourceNode, targetNode, sourcePort, targetPort) {
                edgeRemoveCommand([{name : 'sourcePortID', value : sourcePort.id},{name : 'targetPortID', value : targetPort.id}]);
            }
        </script>
    </h:head>

    <h:body>         
        <h:form id="hidden" style="display:none">
            <p:remoteCommand autoRun="true" name="init" action="#{currentAnalysisEditorBean.initializeGraph()}" />
        </h:form>
        <h:form id="hiddenNodeProperties" style="display:none"> 
            <p:remoteCommand name="nodeClickCommand" action="#{currentAnalysisEditorGraphBean.nodeClicked()}" update=":propertiesForm"/>
            <p:remoteCommand name="nodeRemoveCommand" action="#{currentAnalysisEditorGraphBean.nodeRemoved()}" update=":propertiesForm"/>
            <p:remoteCommand name="edgeCreateCommand" action="#{currentAnalysisEditorGraphBean.edgeCreated()}"/>
            <p:remoteCommand name="edgeRemoveCommand" action="#{currentAnalysisEditorGraphBean.edgeRemoved()}"/>
        </h:form>

        <p:layout fullPage="true">

            <p:layoutUnit position="north">
                <h:form id="menuForm">
                    <!-- The following is the toolbar to navigate between the different pages. -->
                    <p:toolbar>
                        <p:toolbarGroup align="left">
                            <h:outputText styleClass="kieker-title" value="Kieker &raquo; #{stringBean.shortenLongName(currentAnalysisEditorBean.projectName, 30)}"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:button styleClass="perspective-button" icon="ui-icon-home" outcome="projectOverview" />
                            <p:button styleClass="perspective-button" icon="ui-icon-analysisEditor" value="#{localizedMessages.analysisEditor}" style="white-space: none" disabled="true"/>
                            <p:button styleClass="perspective-button" icon="ui-icon-analysis" value="#{localizedMessages.analysis}" style="white-space: none" outcome="controller">
                                <f:param name="projectName" value="#{currentAnalysisEditorBean.projectName}" rendered="#{not empty currentAnalysisEditorBean.projectName}"/>
                            <p:button styleClass="perspective-button" icon="ui-icon-cockpitEditor" value="#{localizedMessages.cockpitEditor}" style="white-space: none" outcome="cockpitEditor">
                                <f:param name="projectName" value="#{currentAnalysisEditorBean.projectName}" rendered="#{not empty currentAnalysisEditorBean.projectName}"/>
                            <p:button styleClass="perspective-button" icon="ui-icon-cockpit" value="#{localizedMessages.cockpit}" style="white-space: none" outcome="cockpit">
                                <f:param name="projectName" value="#{currentAnalysisEditorBean.projectName}" rendered="#{not empty currentAnalysisEditorBean.projectName}"/>
                            </p:button>
                        </p:toolbarGroup>
                    </p:toolbar>

                    <!-- The following is the main menu. -->
                    <p:menubar> 
                        <p:submenu  label="#{localizedMessages.file}">
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-save" value="  #{localizedMessages.saveProject}" update=":messages" ajax="true" action="#{currentAnalysisEditorBean.saveProject(false)}" disabled="#{empty currentAnalysisEditorBean.project}"/>
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-saveAs" value="  #{localizedMessages.saveProjectAs}" update=":messages" ajax="true" disabled="#{true or empty currentAnalysisEditorBean.project}"/>
                            <p:separator />
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-reload" value="  #{localizedMessages.reloadProject}" ajax="false" url="analysisEditor?projectName=#{currentAnalysisEditorBean.projectName}" disabled="#{empty currentAnalysisEditorBean.project}" />
                            <p:separator/>
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-manageLibraries" value="  #{localizedAnalysisEditorPageMessages.manageLibraries}" onclick="manageLibrariesDialog.show()" ajax="true" disabled="#{empty currentAnalysisEditorBean.project}"/>
                            <p:separator />
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-settings" value="  #{localizedMessages.settings}" onclick="settingsDlg.show()" ajax="true"/>
                            <p:separator />
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-close" value="  #{localizedMessages.closeProject}" action="ProjectOverviewPage.xhtml?faces-redirect=true" ajax="false"/>
                        </p:submenu>

                        <p:submenu label="Graph">
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-scaleToFitSmall" value="  #{localizedAnalysisEditorPageMessages.analysisEditorScaleToFit}" ajax="true" action="#{currentAnalysisEditorGraphBean.scaleToFit()}" />
                            <p:separator/>
                            <p:menuitem styleClass="element-with-whitespace" icon="#{currentAnalysisEditorGraphBean.gridEnabled ? 'ui-icon-gridEnabledSmall' : 'ui-icon-gridDisabledSmall'}" value="  #{localizedAnalysisEditorPageMessages.grid} #{currentAnalysisEditorGraphBean.gridEnabled ? localizedAnalysisEditorPageMessages.disable : localizedAnalysisEditorPageMessages.enable}" ajax="true" action="#{currentAnalysisEditorGraphBean.switchGrid()}" update=":menuForm"/>
                            <p:menuitem styleClass="element-with-whitespace" icon="#{currentAnalysisEditorGraphBean.snapEnabled ? 'ui-icon-snapEnabledSmall' : 'ui-icon-snapDisabledSmall'}" value="  #{localizedAnalysisEditorPageMessages.snap} #{currentAnalysisEditorGraphBean.snapEnabled ? localizedAnalysisEditorPageMessages.disable: localizedAnalysisEditorPageMessages.enable}" ajax="true" action="#{currentAnalysisEditorGraphBean.switchSnap()}" update=":menuForm"/>
                            <p:separator/>
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-autoLayoutSmall" value="  #{localizedAnalysisEditorPageMessages.autoLayout}" ajax="true" />
                        </p:submenu>

                        <p:submenu label="#{localizedMessages.help}">
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-userGuide" value="  #{localizedMessages.userGuide}" ajax="true" disabled="true"/>
                            <p:separator/>
                            <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-about" value="  #{localizedMessages.about}" onclick="aboutDlg.show()" ajax="true"/>
                        </p:submenu>

                        <p:menuitem styleClass="logOutButton element-with-whitespace" icon="ui-icon-logout" value=" #{userBean.userName}" ajax="true" url="#{request.contextPath}/j_spring_security_logout"/>
                    </p:menubar> 
                    <p:spacer height="5"/>
                    <p:menubar> 
                        <p:menuitem id="btnScaleToFit" styleClass="element-with-whitespace" icon="ui-icon-scaleToFit" ajax="true" action="#{currentAnalysisEditorGraphBean.scaleToFit()}"/>
                        <p:menuitem id="btnGrid" styleClass="element-with-whitespace" icon="#{currentAnalysisEditorGraphBean.gridEnabled ? 'ui-icon-gridEnabled' : 'ui-icon-gridDisabled'}" ajax="true" action="#{currentAnalysisEditorGraphBean.switchGrid()}" update=":menuForm"/>
                        <p:menuitem id="btnSnap" styleClass="element-with-whitespace" icon="#{currentAnalysisEditorGraphBean.snapEnabled ? 'ui-icon-snapEnabled' : 'ui-icon-snapDisabled'}" ajax="true" action="#{currentAnalysisEditorGraphBean.switchSnap()}" update=":menuForm"/>
                        <p:menuitem id="btnAutoLayout" styleClass="element-with-whitespace" icon="ui-icon-autoLayout" ajax="true" />
                    </p:menubar>
                    <p:tooltip for="btnScaleToFit" value="#{localizedAnalysisEditorPageMessages.analysisEditorScaleToFit}"/>
                    <p:tooltip for="btnGrid" value="#{localizedAnalysisEditorPageMessages.grid}"/>
                    <p:tooltip for="btnSnap" value="#{localizedAnalysisEditorPageMessages.snap}"/>
                    <p:tooltip for="btnAutoLayout" value="#{localizedAnalysisEditorPageMessages.autoLayout}"/>
                </h:form>
            </p:layoutUnit>

            <!-- This is the center component showing the graph and everything. -->
            <p:layoutUnit style="font-size: 12px" position="center" id="centerLayout">
                <div id="center-container" style="width: 100%;height: 100%">
                    <div id="infovis"/> 
                </div>
            </p:layoutUnit> 

            <!-- This is the component presenting the available properties. -->
            <p:layoutUnit style="font-size: 12px" position="south" size="150" header="#{localizedMessages.properties}" resizable="true" collapsible="true">
                <h:form id="propertiesForm" >
                    <p:dataTable editable="true" value="#{currentAnalysisEditorBean.advancedPluginProperties}" var="property" rowIndexVar="rowIndex" emptyMessage="#{localizedMessages.noPropertiesAvailable}" rendered="#{not empty currentAnalysisEditorBean.selectedPlugin}">
                        <p:column headerText="#{localizedMessages.property}" style="width:125px">
                            <!-- The first property is always the classname, the second one always the normal name. After that, other properties can follow. -->
                            <h:outputText id="classNameProperty" value="#{localizedAnalysisEditorPageMessages.className}" rendered="#{rowIndex == 0}"/>
                            <h:outputText id="nameProperty" value="#{localizedAnalysisEditorPageMessages.name}" rendered="#{rowIndex == 1}"/>
                            <h:outputText id="normalProperty" value="#{property.name}" rendered="#{rowIndex > 1}"/>
                            <p:tooltip for="classNameProperty" value="#{localizedAnalysisEditorPageMessages.tooltipClassName}" rendered="#{rowIndex == 0}"/>
                            <p:tooltip for="nameProperty" value="#{localizedAnalysisEditorPageMessages.tooltipName}" rendered="#{rowIndex == 1}"/>
                            <p:tooltip for="normalProperty" value="#{currentAnalysisEditorBean.getDescription(currentAnalysisEditorBean.selectedPlugin, property.name)}" rendered="#{rowIndex > 1}"/>
                        </p:column>

                        <!-- The classname is not editable, the name is editable with a specific target, other properies are editable normally. -->
                        <p:column headerText="#{localizedMessages.value}" style="width:125px">
                            <h:outputText id="className" value="#{currentAnalysisEditorBean.selectedPlugin.classname}" rendered="#{rowIndex == 0}"/>
                            <p:inplace id="nameEditor" editor="true" rendered="#{rowIndex == 1}" >  
                                <p:inputText value="#{currentAnalysisEditorBean.selectedPlugin.name}" />
                                <p:ajax event="save" listener="#{currentAnalysisEditorGraphBean.renameNode(currentAnalysisEditorBean.selectedPlugin, currentAnalysisEditorBean.selectedPlugin.name)}" />
                            </p:inplace>  
                            <p:inplace id="normalEditor" editor="true" rendered="#{rowIndex > 1}">  
                                <p:inputText value="#{property.value}" />
                            </p:inplace>  
                            <p:tooltip for="className" value="#{localizedAnalysisEditorPageMessages.tooltipClassName}" rendered="#{rowIndex == 0}"/>
                            <p:tooltip for="nameEditor" value="#{localizedAnalysisEditorPageMessages.tooltipName}" rendered="#{rowIndex == 1}"/>
                            <p:tooltip for="normalEditor" value="#{currentAnalysisEditorBean.getDescription(currentAnalysisEditorBean.selectedPlugin, property.name)}" rendered="#{rowIndex > 1}"/>
                        </p:column>                       
                    </p:dataTable>
                </h:form>
            </p:layoutUnit>

            <!-- The following is the toolpalette, presenting the available plugins etc. -->
            <p:layoutUnit position="east" size="300" header="#{localizedAnalysisEditorPageMessages.availablePlugins}" resizable="true" collapsible="true">
                <h:form id="toolpalette">
                    <p:accordionPanel multiple="true" activeIndex="0,1,2">
                        <p:tab title="#{localizedAnalysisEditorPageMessages.reader}">
                            <ui:repeat value="#{currentAnalysisEditorBean.availableReaders}" var="reader">
                                <p:commandLink id="readerLink" value="#{reader.simpleName}" action="#{currentAnalysisEditorBean.addPlugin(reader)}" update=":messages" /><br/>
                                <p:tooltip for="readerLink">
                                    <b><h:outputText value="#{reader.simpleName} (#{reader.name})"/></b>
                                    <br/>
                                    <h:outputText value="#{currentAnalysisEditorBean.getDescription(reader)}"/>
                                    <br/><br/>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getOutputPorts(reader)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.outputPorts}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getOutputPorts(reader)}" var="port">
                                            #{port.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getRepositoryPorts(reader)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.repositoryPorts}:" /></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getRepositoryPorts(reader)}" var="port">
                                            #{port.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getProperties(reader)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.configuration}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getProperties(reader)}" var="property">
                                            #{property.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getDependencies(reader)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.dependencies}:"/></b>
                                        <br/>
                                        <h:outputText value="#{currentAnalysisEditorBean.getDependencies(reader)}"/>
                                    </ui:fragment>
                                </p:tooltip>
                            </ui:repeat>
                        </p:tab>
                        <p:tab title="#{localizedAnalysisEditorPageMessages.filter}">
                            <ui:repeat value="#{currentAnalysisEditorBean.availableFilters}" var="filter">
                                <p:commandLink id="filterLink" value="#{filter.simpleName}" action="#{currentAnalysisEditorBean.addPlugin(filter)}" update=":messages"/><br/>
                                <p:tooltip for="filterLink">
                                    <b><h:outputText value="#{filter.simpleName} (#{filter.name})"/></b>
                                    <br/>
                                    <h:outputText value="#{currentAnalysisEditorBean.getDescription(filter)}"/>
                                    <br/><br/>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getInputPorts(filter)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.inputPorts}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getInputPorts(filter)}" var="port">
                                            #{port.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getOutputPorts(filter)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.outputPorts}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getOutputPorts(filter)}" var="port">
                                            #{port.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getRepositoryPorts(filter)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.repositoryPorts}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getRepositoryPorts(filter)}" var="port">
                                            #{port.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getProperties(filter)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.configuration}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getProperties(filter)}" var="property">
                                            #{property.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getDependencies(filter)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.dependencies}:"/></b>
                                        <br/>
                                        <h:outputText value="#{currentAnalysisEditorBean.getDependencies(filter)}"/>
                                    </ui:fragment>
                                </p:tooltip>                                
                            </ui:repeat>
                        </p:tab>
                        <p:tab title="#{localizedAnalysisEditorPageMessages.repositories}">
                            <ui:repeat value="#{currentAnalysisEditorBean.availableRepositories}" var="repository">
                                <p:commandLink id="repositoryLink" value="#{repository.simpleName}" action="#{currentAnalysisEditorBean.addRepository(repository)}" update=":messages"/><br/>
                                <p:tooltip for="repositoryLink">
                                    <b><h:outputText value="#{repository.simpleName} (#{repository.name})"/></b>
                                    <br/>
                                    <h:outputText value="#{currentAnalysisEditorBean.getDescription(repository)}"/>
                                    <br/><br/>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getProperties(repository)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.configuration}:"/></b>
                                        <p:dataList value="#{currentAnalysisEditorBean.getProperties(repository)}" var="property">
                                            #{property.name()}
                                        </p:dataList>
                                    </ui:fragment>
                                    <ui:fragment rendered="#{not empty currentAnalysisEditorBean.getDependencies(repository)}">
                                        <b><h:outputText value="#{localizedAnalysisEditorPageMessages.dependencies}:"/></b>
                                        <br/>
                                        <h:outputText value="#{currentAnalysisEditorBean.getDependencies(repository)}"/>
                                    </ui:fragment>
                                </p:tooltip>  
                            </ui:repeat>
                        </p:tab>
                    </p:accordionPanel>
                </h:form>
            </p:layoutUnit>
        </p:layout>

        <p:dialog header="#{localizedMessages.saveProject}" resizable="false" modal="true" widgetVar="forceSaveDlg">
            <h:form>
                <div style="text-align: center">
                    <h:outputText value="#{localizedAnalysisEditorPageMessages.msgProjectModified}" /> 
                </div>
                <hr/>
                <div style="text-align: right">
                    <p:commandButton value="#{localizedMessages.yes}" action="#{currentAnalysisEditorBean.saveProject(true)}" oncomplete="forceSaveDlg.hide()" update=":messages" />
                    <p:spacer width="10px" height="10" />
                    <p:commandButton value="#{localizedMessages.cancel}" onclick="forceSaveDlg.hide()" />
                </div>
            </h:form>
        </p:dialog>

        <p:growl id="messages" life="1500" showDetail="true"  autoUpdate="false" sticky="true"/>  

        <!-- Include the dialog for the configuration. -->
        <ui:include src="../dialogs/SettingsDialog.xhtml"/>

        <!-- Include the about-dialog. -->
        <ui:include src="../dialogs/AboutDialog.xhtml" />

        <!-- Include the dialog the manage the libraries. -->
        <ui:include src="../dialogs/AnalysisEditorPageDialogs.xhtml" />