Examples with FlexTable com.google.gwt.user.client.ui.FlexTable used on opensource projects

Example 1 with FlexTable

use of com.google.gwt.user.client.ui.FlexTable in project goldenorb by jzachr.

the class OrbTrackerStatus method onModuleLoad.

@Override
public void onModuleLoad() {
    RootPanel rootPanel = RootPanel.get();
    mainPanel = new VerticalPanel();
    rootPanel.add(mainPanel);
    Image image = new Image("images/logo-full.jpg");
    mainPanel.add(image);
    // Label titleLabel = new Label("GoldenOrb");
    // mainPanel.add(titleLabel);
    lastUpdatedLabel = new Label("Last Updated : ");
    mainPanel.add(lastUpdatedLabel);
    Label lblOrbtrackermembers = new Label("OrbTrackerMembers");
    mainPanel.add(lblOrbtrackermembers);
    orbTrackerFlexTable = new FlexTable();
    mainPanel.add(orbTrackerFlexTable);
    orbTrackerFlexTable.setSize("761px", "116px");
    orbTrackerFlexTable.setText(0, 0, "Node Name");
    orbTrackerFlexTable.setText(0, 1, "Partition Capacity");
    orbTrackerFlexTable.setText(0, 2, "Available Partitions");
    orbTrackerFlexTable.setText(0, 3, "Reserved Partitions");
    orbTrackerFlexTable.setText(0, 4, "In Use Partitions");
    orbTrackerFlexTable.setText(0, 5, "Host Name");
    orbTrackerFlexTable.setText(0, 6, "Leader");
    orbTrackerFlexTable.setText(0, 7, "Port");
    jobsGroupedPanel = new HorizontalPanel();
    mainPanel.add(jobsGroupedPanel);
    jobsGroupedPanel.setSize("258px", "100px");
    jobsInProgressPanel = new FlexTable();
    jobsInProgressPanel.setText(0, 0, "Jobs In Progress");
    jobsGroupedPanel.add(jobsInProgressPanel);
    jobsInQueuePanel = new FlexTable();
    jobsInQueuePanel.setText(0, 0, "Jobs In Queue");
    jobsGroupedPanel.add(jobsInQueuePanel);
    jobsInProgressPanel.setTitle("Jobs In Progress");
    jobsInQueuePanel.setTitle("Jobs in Queue");
    errorLabelOTM = new Label("");
    mainPanel.add(errorLabelOTM);
    errorLabelJIP = new Label("");
    mainPanel.add(errorLabelJIP);
    errorLabelJQ = new Label("");
    mainPanel.add(errorLabelJQ);
    Timer refreshTimer = new Timer() {

        public void run() {
            refreshWatchDataList();
            refreshJobsInProgress();
            refreshJobsInQueue();
        }
    };
    refreshTimer.scheduleRepeating(REFRESH_INTERVAL);
}

Example 2 with FlexTable

use of com.google.gwt.user.client.ui.FlexTable in project rstudio by rstudio.

the class ShinyGadgetDialog method addCaptionWithCloseButton.

private void addCaptionWithCloseButton(String caption) {
    final Image closeIcon = new Image(new ImageResource2x(ThemeResources.INSTANCE.closeDialog2x()));
    Style closeIconStyle = closeIcon.getElement().getStyle();
    closeIconStyle.setCursor(Style.Cursor.POINTER);
    closeIconStyle.setMarginTop(2, Unit.PX);
    FlexTable captionLayoutTable = new FlexTable();
    captionLayoutTable.setWidth("100%");
    captionLayoutTable.setText(0, 0, caption);
    captionLayoutTable.setWidget(0, 1, closeIcon);
    captionLayoutTable.getCellFormatter().setHorizontalAlignment(0, 1, HasHorizontalAlignment.HorizontalAlignmentConstant.endOf(Direction.LTR));
    HTML captionWidget = (HTML) getCaption();
    captionWidget.getElement().appendChild(captionLayoutTable.getElement());
    captionWidget.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            EventTarget target = event.getNativeEvent().getEventTarget();
            Element targetElement = (Element) target.cast();
            if (targetElement == closeIcon.getElement()) {
                closeIcon.fireEvent(event);
            }
        }
    });
    closeIcon.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            performClose();
        }
    });
}

Example 3 with FlexTable

use of com.google.gwt.user.client.ui.FlexTable in project perun by CESNET.

the class GetAllRichSubGroups method getTable.

/**
	 * Returns the table with subgroups.
	 * @return
	 */
public CellTable<RichGroup> getTable() {
    // retrieve data
    retrieveData();
    // Table data provider.
    dataProvider = new ListDataProvider<RichGroup>(list);
    // Cell table
    table = new PerunTable<RichGroup>(list);
    table.setHyperlinksAllowed(false);
    // Connect the table to the data provider.
    dataProvider.addDataDisplay(table);
    // Sorting
    ListHandler<RichGroup> columnSortHandler = new ListHandler<RichGroup>(dataProvider.getList());
    table.addColumnSortHandler(columnSortHandler);
    // table selection
    table.setSelectionModel(selectionModel, DefaultSelectionEventManager.<RichGroup>createCheckboxManager());
    // set empty content & loader
    table.setEmptyTableWidget(loaderImage);
    loaderImage.setEmptyResultMessage("Group has no sub-groups.");
    // checkbox column column
    table.addCheckBoxColumn();
    table.addIdColumn("Group ID", tableFieldUpdater);
    // Add a synchronization clicable icon column.
    Column<RichGroup, RichGroup> syncColumn = new Column<RichGroup, RichGroup>(new CustomClickableInfoCellWithImageResource("click")) {

        @Override
        public RichGroup getValue(RichGroup object) {
            return object;
        }

        @Override
        public String getCellStyleNames(Cell.Context context, RichGroup object) {
            if (tableFieldUpdater != null) {
                return super.getCellStyleNames(context, object) + " pointer image-hover";
            } else {
                return super.getCellStyleNames(context, object);
            }
        }
    };
    syncColumn.setFieldUpdater(new FieldUpdater<RichGroup, RichGroup>() {

        @Override
        public void update(int index, final RichGroup object, RichGroup value) {
            GetEntityById get = new GetEntityById(PerunEntity.RICH_GROUP, object.getId(), new JsonCallbackEvents() {

                @Override
                public void onFinished(JavaScriptObject jso) {
                    final RichGroup object = jso.cast();
                    String name, syncEnabled, syncInterval, syncTimestamp, syncSuccessTimestamp, syncState, authGroup;
                    name = object.getName();
                    if (object.isSyncEnabled()) {
                        syncEnabled = "enabled";
                    } else {
                        syncEnabled = "disabled";
                    }
                    if (object.getSynchronizationInterval() == null) {
                        syncInterval = "N/A";
                    } else {
                        if (JsonUtils.checkParseInt(object.getSynchronizationInterval())) {
                            int time = Integer.parseInt(object.getSynchronizationInterval()) * 5 / 60;
                            if (time == 0) {
                                time = Integer.parseInt(object.getSynchronizationInterval()) * 5;
                                syncInterval = time + " minute(s)";
                            } else {
                                syncInterval = time + " hour(s)";
                            }
                        } else {
                            syncInterval = object.getSynchronizationInterval();
                        }
                    }
                    if (object.getLastSynchronizationState() == null) {
                        if (object.getLastSuccessSynchronizationTimestamp() != null) {
                            syncState = "OK";
                        } else {
                            syncState = "Not synced yet";
                        }
                    } else {
                        if (session.isPerunAdmin()) {
                            syncState = object.getLastSynchronizationState();
                        } else {
                            syncState = "Internal Error";
                        }
                    }
                    if (object.getLastSynchronizationTimestamp() == null) {
                        syncTimestamp = "N/A";
                    } else {
                        syncTimestamp = object.getLastSynchronizationTimestamp().split("\\.")[0];
                    }
                    if (object.getLastSuccessSynchronizationTimestamp() == null) {
                        syncSuccessTimestamp = "N/A";
                    } else {
                        syncSuccessTimestamp = object.getLastSuccessSynchronizationTimestamp().split("\\.")[0];
                    }
                    if (object.getAuthoritativeGroup() != null && object.getAuthoritativeGroup().equals("1")) {
                        authGroup = "Yes";
                    } else {
                        authGroup = "No";
                    }
                    String html = "Group name: <b>" + name + "</b><br>";
                    html += "Synchronization: <b>" + syncEnabled + "</b><br>";
                    if (object.isSyncEnabled()) {
                        html += "Last sync. state: <b>" + syncState + "</b><br>";
                        html += "Last sync. timestamp: <b>" + syncTimestamp + "</b><br>";
                        html += "Last successful sync. timestamp: <b>" + syncSuccessTimestamp + "</b><br>";
                        html += "Sync. Interval: <b>" + syncInterval + "</b><br>";
                        html += "Authoritative group: <b>" + authGroup + "</b><br>";
                    }
                    FlexTable layout = new FlexTable();
                    layout.setWidget(0, 0, new HTML("<p>" + new Image(LargeIcons.INSTANCE.informationIcon())));
                    layout.setHTML(0, 1, "<p style=\"line-height: 1.2;\">" + html);
                    layout.getFlexCellFormatter().setAlignment(0, 0, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP);
                    layout.getFlexCellFormatter().setAlignment(0, 1, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP);
                    layout.getFlexCellFormatter().setStyleName(0, 0, "alert-box-image");
                    final CustomButton okButton = new CustomButton("Force synchronization", SmallIcons.INSTANCE.arrowRefreshIcon());
                    okButton.addClickHandler(new ClickHandler() {

                        @Override
                        public void onClick(ClickEvent event) {
                            ForceGroupSynchronization call = new ForceGroupSynchronization(JsonCallbackEvents.disableButtonEvents(okButton));
                            call.synchronizeGroup(object.getId());
                        }
                    });
                    if (!session.isVoAdmin(object.getVoId()) && !session.isGroupAdmin(object.getId()))
                        okButton.setEnabled(false);
                    okButton.setVisible(object.isSyncEnabled());
                    final Confirm c = new Confirm("Group synchronization info", layout, okButton, null, true);
                    c.setHideOnButtonClick(false);
                    c.setCancelIcon(SmallIcons.INSTANCE.acceptIcon());
                    c.setCancelButtonText("OK");
                    c.setCancelClickHandler(new ClickHandler() {

                        @Override
                        public void onClick(ClickEvent event) {
                            c.hide();
                        }
                    });
                    c.show();
                }
            });
            get.retrieveData();
        }

        ;
    });
    syncColumn.setSortable(true);
    columnSortHandler.setComparator(syncColumn, new Comparator<RichGroup>() {

        @Override
        public int compare(RichGroup o1, RichGroup o2) {
            if (o1 != null && o2 != null) {
                int o1val = 0;
                int o2val = 0;
                if (o1.isSyncEnabled())
                    o1val = 5;
                if (o2.isSyncEnabled())
                    o2val = 5;
                if (o1.getAuthoritativeGroup() != null && o1.getAuthoritativeGroup().equalsIgnoreCase("1"))
                    o1val = o1val + 3;
                if (o2.getAuthoritativeGroup() != null && o2.getAuthoritativeGroup().equalsIgnoreCase("1"))
                    o2val = o2val + 3;
                return o1val - o2val;
            }
            return 0;
        }
    });
    table.addColumn(syncColumn, "Sync");
    table.setColumnWidth(syncColumn, "70px");
    table.addNameColumn(tableFieldUpdater);
    table.addDescriptionColumn(tableFieldUpdater);
    return table;
}

Example 4 with FlexTable

use of com.google.gwt.user.client.ui.FlexTable in project perun by CESNET.

the class HandleApplication method approveApplication.

/**
	 * Approve application
	 *
	 * @param app
	 */
public void approveApplication(final Application app) {
    this.appId = app.getId();
    // test arguments
    if (!this.testApplication()) {
        return;
    }
    // new events
    final JsonCallbackEvents newEvents = new JsonCallbackEvents() {

        @Override
        public void onError(PerunError error) {
            session.getUiElements().setLogErrorText("Approving application failed.");
            events.onError(error);
        }

        @Override
        public void onFinished(JavaScriptObject jso) {
            session.getUiElements().setLogSuccessText("Application approved.");
            events.onFinished(jso);
        }

        @Override
        public void onLoadingStart() {
            events.onLoadingStart();
        }
    };
    final JSONObject appIdObj = new JSONObject();
    appIdObj.put("appId", new JSONNumber(appId));
    final JSONObject idObj = new JSONObject();
    idObj.put("id", new JSONNumber(appId));
    // check if can be approved
    JsonPostClient jspc = new JsonPostClient(new JsonCallbackEvents() {

        @Override
        public void onError(final PerunError error) {
            session.getUiElements().setLogErrorText("Checking approval failed.");
            events.onError(error);
            if (error == null) {
                PerunError e = (PerunError) JsonUtils.parseJson("{\"errorId\":\"0\",\"name\":\"Cross-site request\",\"type\":\"" + WidgetTranslation.INSTANCE.jsonClientAlertBoxErrorCrossSiteType() + "\",\"message\":\"" + WidgetTranslation.INSTANCE.jsonClientAlertBoxErrorCrossSiteText() + "\"}").cast();
                JsonErrorHandler.alertBox(e);
            } else if (!error.getName().equals("CantBeApprovedException")) {
                JsonErrorHandler.alertBox(error);
            } else {
                FlexTable layout = new FlexTable();
                layout.setWidget(0, 0, new HTML("<p>" + new Image(LargeIcons.INSTANCE.errorIcon())));
                if ("NOT_ACADEMIC".equals(error.getReason())) {
                    layout.setHTML(0, 1, "<p>User is not active academia member and application shouldn't be approved.<p><b>LoA:</b> " + app.getExtSourceLoa() + "</br><b>IdP category:</b> " + (!(error.getCategory().equals("")) ? error.getCategory() : "N/A") + "</br><b>Affiliation:</b> " + (!(error.getAffiliation().equals("")) ? error.getAffiliation().replace(";", ", ") : "N/A") + ((error.isSoft()) ? "<p>You can try to override above restriction by clicking 'Approve anyway' button." : ""));
                } else {
                    layout.setHTML(0, 1, "<p>" + error.getErrorInfo() + ((error.isSoft()) ? "<p>You can try to override above restriction by clicking 'Approve anyway' button." : ""));
                }
                layout.getFlexCellFormatter().setAlignment(0, 0, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP);
                layout.getFlexCellFormatter().setAlignment(0, 1, HasHorizontalAlignment.ALIGN_LEFT, HasVerticalAlignment.ALIGN_TOP);
                layout.getFlexCellFormatter().setStyleName(0, 0, "alert-box-image");
                if (error.isSoft()) {
                    Confirm c = new Confirm("Application shouldn't be approved", layout, new ClickHandler() {

                        @Override
                        public void onClick(ClickEvent clickEvent) {
                            // ok approve sending data
                            JsonPostClient jspc = new JsonPostClient(newEvents);
                            jspc.sendData(JSON_URL_APPROVE, prepareJSONObject());
                        }
                    }, new ClickHandler() {

                        @Override
                        public void onClick(ClickEvent clickEvent) {
                            events.onFinished(null);
                        }
                    }, true);
                    c.setOkButtonText("Approve anyway");
                    c.setNonScrollable(true);
                    c.show();
                } else {
                    Confirm c = new Confirm("Application can't be approved", layout, true);
                    c.setNonScrollable(true);
                    c.show();
                }
            }
        }

        @Override
        public void onFinished(JavaScriptObject jso) {
            if (app.getUser() != null) {
                // ok approve sending data
                JsonPostClient jspc2 = new JsonPostClient(newEvents);
                jspc2.sendData(JSON_URL_APPROVE, prepareJSONObject());
            } else {
                JsonPostClient checkJspc = new JsonPostClient(new JsonCallbackEvents() {

                    @Override
                    public void onError(PerunError error) {
                        session.getUiElements().setLogErrorText("Approving application failed.");
                        events.onError(error);
                    }

                    @Override
                    public void onFinished(JavaScriptObject jso) {
                        ArrayList<Identity> users = JsonUtils.jsoAsList(jso);
                        if (users != null && !users.isEmpty()) {
                            FlexTable ft = new FlexTable();
                            ft.setWidth("600px");
                            ft.setHTML(0, 0, "<p><strong>Following similar user(s) were found in system:");
                            ft.getFlexCellFormatter().setColSpan(0, 0, 3);
                            ft.setHTML(1, 0, "<strong>" + ApplicationMessages.INSTANCE.name() + "</strong>");
                            ft.setHTML(1, 1, "<strong>" + ApplicationMessages.INSTANCE.email() + "</strong>");
                            ft.setHTML(1, 2, "<strong>" + ApplicationMessages.INSTANCE.organization() + "</strong>");
                            int i = 2;
                            for (Identity user : users) {
                                ft.setHTML(i, 0, user.getName());
                                if (user.getEmail() != null && !user.getEmail().isEmpty()) {
                                    ft.setHTML(i, 1, user.getEmail());
                                } else {
                                    ft.setHTML(i, 1, "N/A");
                                }
                                if (user.getOrganization() != null && !user.getOrganization().isEmpty()) {
                                    ft.setHTML(i, 2, user.getOrganization());
                                } else {
                                    ft.setHTML(i, 2, "N/A");
                                }
                                i++;
                            }
                            String type = "";
                            if (app.getExtSourceType().equals("cz.metacentrum.perun.core.impl.ExtSourceX509")) {
                                type = "cert";
                            } else if (app.getExtSourceType().equals("cz.metacentrum.perun.core.impl.ExtSourceIdp")) {
                                type = "fed";
                            }
                            ft.setHTML(i, 0, "<p>Please contact new applicant with question, if he/she isn't already member of any other VO." + "<ul><li>If YES, ask him/her to join identities at <a href=\"" + Utils.getIdentityConsolidatorLink(type, false) + "\" target=\"_blank\">identity consolidator</a> before approving this application." + "</li><li>If NO, you can approve this application anyway. " + "</li><li>If UNSURE, contact <a href=\"mailto:" + Utils.perunReportEmailAddress() + "\">support</a> to help you.</li></ul>");
                            ft.getFlexCellFormatter().setColSpan(i, 0, 3);
                            i++;
                            ft.setHTML(i, 0, "<strong>Do you wish to approve this application anyway ?</strong>");
                            ft.getFlexCellFormatter().setColSpan(i, 0, 3);
                            Confirm c = new Confirm("Similar users found!", ft, new ClickHandler() {

                                @Override
                                public void onClick(ClickEvent clickEvent) {
                                    // ok approve sending data
                                    JsonPostClient jspc = new JsonPostClient(newEvents);
                                    jspc.sendData(JSON_URL_APPROVE, prepareJSONObject());
                                }
                            }, new ClickHandler() {

                                @Override
                                public void onClick(ClickEvent clickEvent) {
                                    events.onFinished(null);
                                }
                            }, true);
                            c.setOkButtonText("Approve");
                            c.setNonScrollable(true);
                            c.show();
                        } else {
                            // ok approve sending data
                            JsonPostClient jspc = new JsonPostClient(newEvents);
                            jspc.sendData(JSON_URL_APPROVE, prepareJSONObject());
                        }
                    }

                    @Override
                    public void onLoadingStart() {
                        events.onLoadingStart();
                    }
                });
                checkJspc.sendData("registrarManager/checkForSimilarUsers", appIdObj);
            }
        }

        @Override
        public void onLoadingStart() {
            events.onLoadingStart();
        }
    });
    // we have own error handling
    jspc.setHidden(true);
    jspc.sendData(JSON_URL_CHECK, idObj);
}

Example 5 with FlexTable

use of com.google.gwt.user.client.ui.FlexTable in project opentsdb by OpenTSDB.

the class QueryUi method onModuleLoad.

/**
   * This is the entry point method.
   */
public void onModuleLoad() {
    asyncGetJson(AGGREGATORS_URL, new GotJsonCallback() {

        public void got(final JSONValue json) {
            // Do we need more manual type checking?  Not sure what will happen
            // in the browser if something other than an array is returned.
            final JSONArray aggs = json.isArray();
            for (int i = 0; i < aggs.size(); i++) {
                aggregators.add(aggs.get(i).isString().stringValue());
            }
            ((MetricForm) metrics.getWidget(0)).setAggregators(aggregators);
            refreshFromQueryString();
            refreshGraph();
        }
    });
    // All UI elements need to regenerate the graph when changed.
    {
        final ValueChangeHandler<Date> vch = new ValueChangeHandler<Date>() {

            public void onValueChange(final ValueChangeEvent<Date> event) {
                refreshGraph();
            }
        };
        TextBox tb = start_datebox.getTextBox();
        tb.addBlurHandler(refreshgraph);
        tb.addKeyPressHandler(refreshgraph);
        start_datebox.addValueChangeHandler(vch);
        tb = end_datebox.getTextBox();
        tb.addBlurHandler(refreshgraph);
        tb.addKeyPressHandler(refreshgraph);
        end_datebox.addValueChangeHandler(vch);
    }
    autoreoload_interval.addBlurHandler(refreshgraph);
    autoreoload_interval.addKeyPressHandler(refreshgraph);
    yrange.addBlurHandler(refreshgraph);
    yrange.addKeyPressHandler(refreshgraph);
    y2range.addBlurHandler(refreshgraph);
    y2range.addKeyPressHandler(refreshgraph);
    ylog.addClickHandler(new AdjustYRangeCheckOnClick(ylog, yrange));
    y2log.addClickHandler(new AdjustYRangeCheckOnClick(y2log, y2range));
    ylog.addClickHandler(refreshgraph);
    y2log.addClickHandler(refreshgraph);
    ylabel.addBlurHandler(refreshgraph);
    ylabel.addKeyPressHandler(refreshgraph);
    y2label.addBlurHandler(refreshgraph);
    y2label.addKeyPressHandler(refreshgraph);
    yformat.addBlurHandler(refreshgraph);
    yformat.addKeyPressHandler(refreshgraph);
    y2format.addBlurHandler(refreshgraph);
    y2format.addKeyPressHandler(refreshgraph);
    wxh.addBlurHandler(refreshgraph);
    wxh.addKeyPressHandler(refreshgraph);
    global_annotations.addBlurHandler(refreshgraph);
    global_annotations.addKeyPressHandler(refreshgraph);
    horizontalkey.addClickHandler(refreshgraph);
    keybox.addClickHandler(refreshgraph);
    nokey.addClickHandler(refreshgraph);
    smooth.addClickHandler(refreshgraph);
    styles.addChangeHandler(refreshgraph);
    yrange.setValidationRegexp(// Nothing or
    "^(" + // "[start
    "|\\[([-+.0-9eE]+|\\*)?" + //   :end]"
    ":([-+.0-9eE]+|\\*)?\\])$");
    yrange.setVisibleLength(5);
    // MAX=2^26=20 chars: "[-$MAX:$MAX]"
    yrange.setMaxLength(44);
    yrange.setText("[0:]");
    y2range.setValidationRegexp(// Nothing or
    "^(" + // "[start
    "|\\[([-+.0-9eE]+|\\*)?" + //   :end]"
    ":([-+.0-9eE]+|\\*)?\\])$");
    y2range.setVisibleLength(5);
    // MAX=2^26=20 chars: "[-$MAX:$MAX]"
    y2range.setMaxLength(44);
    y2range.setText("[0:]");
    y2range.setEnabled(false);
    y2log.setEnabled(false);
    ylabel.setVisibleLength(10);
    // Arbitrary limit.
    ylabel.setMaxLength(50);
    y2label.setVisibleLength(10);
    // Arbitrary limit.
    y2label.setMaxLength(50);
    y2label.setEnabled(false);
    // Nothing or at least one %?
    yformat.setValidationRegexp("^(|.*%..*)$");
    yformat.setVisibleLength(10);
    // Arbitrary limit.
    yformat.setMaxLength(16);
    // Nothing or at least one %?
    y2format.setValidationRegexp("^(|.*%..*)$");
    y2format.setVisibleLength(10);
    // Arbitrary limit.
    y2format.setMaxLength(16);
    y2format.setEnabled(false);
    // 100x100
    wxh.setValidationRegexp("^[1-9][0-9]{2,}x[1-9][0-9]{2,}$");
    wxh.setVisibleLength(9);
    // 99999x99999
    wxh.setMaxLength(11);
    wxh.setText((Window.getClientWidth() - 20) + "x" + (Window.getClientHeight() * 4 / 5));
    final FlexTable table = new FlexTable();
    table.setText(0, 0, "From");
    {
        final HorizontalPanel hbox = new HorizontalPanel();
        hbox.add(new InlineLabel("To"));
        final Anchor now = new Anchor("(now)");
        now.addClickHandler(new ClickHandler() {

            public void onClick(final ClickEvent event) {
                end_datebox.setValue(new Date());
                refreshGraph();
            }
        });
        hbox.add(now);
        hbox.add(autoreload);
        hbox.setWidth("100%");
        table.setWidget(0, 1, hbox);
    }
    autoreload.addValueChangeHandler(new ValueChangeHandler<Boolean>() {

        @Override
        public void onValueChange(final ValueChangeEvent<Boolean> event) {
            if (autoreload.getValue()) {
                final HorizontalPanel hbox = new HorizontalPanel();
                hbox.setWidth("100%");
                hbox.add(new InlineLabel("Every:"));
                hbox.add(autoreoload_interval);
                hbox.add(new InlineLabel("seconds"));
                table.setWidget(1, 1, hbox);
                if (autoreoload_interval.getValue().isEmpty()) {
                    autoreoload_interval.setValue("15");
                }
                autoreoload_interval.setFocus(true);
                // Force refreshGraph.
                lastgraphuri = "";
                // Trigger the 1st auto-reload
                refreshGraph();
            } else {
                table.setWidget(1, 1, end_datebox);
            }
        }
    });
    // >=5s
    autoreoload_interval.setValidationRegexp("^([5-9]|[1-9][0-9]+)$");
    autoreoload_interval.setMaxLength(4);
    autoreoload_interval.setVisibleLength(8);
    table.setWidget(1, 0, start_datebox);
    table.setWidget(1, 1, end_datebox);
    {
        final HorizontalPanel hbox = new HorizontalPanel();
        hbox.add(new InlineLabel("WxH:"));
        hbox.add(wxh);
        table.setWidget(0, 3, hbox);
    }
    {
        final HorizontalPanel hbox = new HorizontalPanel();
        hbox.add(global_annotations);
        table.setWidget(0, 4, hbox);
    }
    {
        addMetricForm("metric 1", 0);
        metrics.selectTab(0);
        metrics.add(new InlineLabel("Loading..."), "+");
        metrics.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {

            public void onBeforeSelection(final BeforeSelectionEvent<Integer> event) {
                final int item = event.getItem();
                final int nitems = metrics.getWidgetCount();
                if (item == nitems - 1) {
                    // Last item: the "+" was clicked.
                    event.cancel();
                    final MetricForm metric = addMetricForm("metric " + nitems, item);
                    metrics.selectTab(item);
                    metric.setFocus(true);
                }
            }
        });
        table.setWidget(2, 0, metrics);
    }
    table.getFlexCellFormatter().setColSpan(2, 0, 2);
    table.getFlexCellFormatter().setRowSpan(1, 3, 2);
    final DecoratedTabPanel optpanel = new DecoratedTabPanel();
    optpanel.add(makeAxesPanel(), "Axes");
    optpanel.add(makeKeyPanel(), "Key");
    optpanel.add(makeStylePanel(), "Style");
    optpanel.selectTab(0);
    table.setWidget(1, 3, optpanel);
    table.getFlexCellFormatter().setColSpan(1, 3, 2);
    final DecoratorPanel decorator = new DecoratorPanel();
    decorator.setWidget(table);
    final VerticalPanel graphpanel = new VerticalPanel();
    graphpanel.add(decorator);
    {
        final VerticalPanel graphvbox = new VerticalPanel();
        graphvbox.add(graphstatus);
        graph.setVisible(false);
        // Put the graph image element and the zoombox elements inside the absolute panel
        graphbox.add(graph, 0, 0);
        zoom_box.setVisible(false);
        graphbox.add(zoom_box, 0, 0);
        graph.addMouseOverHandler(new MouseOverHandler() {

            public void onMouseOver(final MouseOverEvent event) {
                final Style style = graphbox.getElement().getStyle();
                style.setCursor(Cursor.CROSSHAIR);
            }
        });
        graph.addMouseOutHandler(new MouseOutHandler() {

            public void onMouseOut(final MouseOutEvent event) {
                final Style style = graphbox.getElement().getStyle();
                style.setCursor(Cursor.AUTO);
            }
        });
        graphvbox.add(graphbox);
        graph.addErrorHandler(new ErrorHandler() {

            public void onError(final ErrorEvent event) {
                graphstatus.setText("Oops, failed to load the graph.");
            }
        });
        graph.addLoadHandler(new LoadHandler() {

            public void onLoad(final LoadEvent event) {
                graphbox.setWidth(graph.getWidth() + "px");
                graphbox.setHeight(graph.getHeight() + "px");
            }
        });
        graphpanel.add(graphvbox);
    }
    final DecoratedTabPanel mainpanel = new DecoratedTabPanel();
    mainpanel.setWidth("100%");
    mainpanel.add(graphpanel, "Graph");
    mainpanel.add(stats_table, "Stats");
    mainpanel.add(logs, "Logs");
    mainpanel.add(build_data, "Version");
    mainpanel.selectTab(0);
    mainpanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {

        public void onBeforeSelection(final BeforeSelectionEvent<Integer> event) {
            clearError();
            final int item = event.getItem();
            switch(item) {
                case 1:
                    refreshStats();
                    return;
                case 2:
                    refreshLogs();
                    return;
                case 3:
                    refreshVersion();
                    return;
            }
        }
    });
    final VerticalPanel root = new VerticalPanel();
    root.setWidth("100%");
    root.add(current_error);
    current_error.setVisible(false);
    current_error.addStyleName("dateBoxFormatError");
    root.add(mainpanel);
    RootPanel.get("queryuimain").add(root);
    // Must be done at the end, once all the widgets are attached.
    ensureSameWidgetSize(optpanel);
    History.addHistoryListener(this);
}