Merge remote-tracking branch 'origin/master'

server/src/main/webapp/WEB-INF/jsp/accountinformation.jsp

@@ -42,8 +42,10 @@
     </jsp:include>
     <div id="centerbody">
         <div id="page-content-title" style="display: none;"><pwm:display key="Title_UserInformation" displayIfMissing="true"/></div>
-        <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false">
-            <div data-dojo-type="dijit.layout.ContentPane" id="UserInformation" title="<pwm:display key="Title_UserInformation"/>" class="tabContent">
+        <div class="tab-container" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false">
+            <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+            <label for="tab-1" class="label"><pwm:display key="Title_UserInformation"/></label>
+            <div class="tab-content-pane" id="UserInformation" title="<pwm:display key="Title_UserInformation"/>" class="tabContent">
                 <table class="nomargin">
                     <% for (final DisplayElement displayElement : accountInformationBean.getAccountInfo()) { %>
                     <% request.setAttribute("displayElement", displayElement); %>
@@ -52,7 +54,9 @@
                 </table>
             </div>
             <% if (!JavaHelper.isEmpty(accountInformationBean.getFormData())) { %>
-            <div data-dojo-type="dijit.layout.ContentPane" id="UserData" title="<pwm:display key="<%=Display.Title_UserData.toString()%>"/>" class="tabContent">
+            <input name="tabs" type="radio" id="tab-2" class="input"/>
+            <label for="tab-2" class="label"><%=Display.Title_UserData.toString()%></label>
+            <div class="tab-content-pane" id="UserData" title="<pwm:display key="<%=Display.Title_UserData.toString()%>"/>" class="tabContent">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <% for (final DisplayElement displayElement : accountInformationBean.getFormData()) { %>
@@ -64,7 +68,9 @@
             </div>
             <% } %>
             <% if (!JavaHelper.isEmpty(accountInformationBean.getPasswordRules())) { %>
-            <div data-dojo-type="dijit.layout.ContentPane" id="PasswordPolicy" title="<pwm:display key="Title_PasswordPolicy"/>" class="tabContent">
+            <input name="tabs" type="radio" id="tab-3" class="input"/>
+            <label for="tab-3" class="label"><pwm:display key="Title_PasswordPolicy"/></label>
+            <div class="tab-content-pane" id="PasswordPolicy" title="<pwm:display key="Title_PasswordPolicy"/>" class="tabContent">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <tr>
@@ -84,7 +90,9 @@
             </div>
             <% } %>
             <% if (!JavaHelper.isEmpty(accountInformationBean.getAuditData())) {%>
-            <div data-dojo-type="dijit.layout.ContentPane" id="UserEventHistory" title="<pwm:display key="Title_UserEventHistory"/>" class="tabContent">
+            <input name="tabs" type="radio" id="tab-4" class="input"/>
+            <label for="tab-4" class="label"><pwm:display key="Title_UserEventHistory"/></label>
+            <div class="tab-content-pane" id="UserEventHistory" title="<pwm:display key="Title_UserEventHistory"/>" class="tabContent">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <% for (final AccountInformationBean.ActivityRecord record : accountInformationBean.getAuditData()) { %>
@@ -103,6 +111,7 @@
                 </div>
             </div>
             <% } %>
+            <div class="tab-end"></div>
         </div>
         <div class="buttonbar">
             <form action="<pwm:url url='<%=PwmServletDefinition.PublicCommand.servletUrl()%>' addContext="true"/>" method="post" enctype="application/x-www-form-urlencoded">
@@ -126,6 +135,7 @@
         });
     </script>
 </pwm:script>
+<link rel="stylesheet" type="text/css" href="<pwm:url url='/public/resources/tab-container.css' addContext="true"/>"/>
 <jsp:include page="/WEB-INF/jsp/fragment/footer.jsp"/>
 </body>
 </html>                   

server/src/main/webapp/WEB-INF/jsp/admin-analysis.jsp

@@ -62,172 +62,197 @@
     <div id="centerbody" class="wide">
         <div id="page-content-title"><pwm:display key="Title_DataAnalysis" bundle="Admin"/></div>
         <%@ include file="fragment/admin-nav.jsp" %>
-        <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;"  data-dojo-props="doLayout: false, persist: true" id="analysis-topLevelTab">
-            <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true" title="<pwm:display key="Title_DirectoryReporting" bundle="Admin"/>">
-                <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_ReportEngineStatus" bundle="Admin"/>" class="tabContent">
-                    <table style="width:450px" id="statusTable">
-                        <tr><td><pwm:display key="Display_PleaseWait"/></td></tr>
-                    </table>
-                    <table style="width:450px;">
-                        <tr><td style="text-align: center; cursor: pointer">
-                            <button id="reportStartButton" class="btn">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-play">&nbsp;</span></pwm:if>
-                                <pwm:display key="Button_Report_Start" bundle="Admin"/>
-                            </button>
-                            &nbsp;&nbsp;
-                            <button id="reportStopButton" class="btn">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-stop">&nbsp;</span></pwm:if>
-                                <pwm:display key="Button_Report_Stop" bundle="Admin"/>
-                            </button>
-                            &nbsp;&nbsp;
-                            <button id="reportClearButton" class="btn">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-trash-o">&nbsp;</span></pwm:if>
-                                <pwm:display key="Button_Report_Clear" bundle="Admin"/>
-                            </button>
-                        </td></tr>
-                    </table>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="Summary" class="tabContent">
-                    <div style="max-height: 500px; overflow-y: auto" id="summaryTableWrapper">
-                        <table id="summaryTable">
+        <div class="tab-container" style="width: 100%; height: 100%;"  data-dojo-props="doLayout: false, persist: true" id="analysis-topLevelTab">
+            <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+            <label for="tab-1" class="label"><pwm:display key="Title_DirectoryReporting" bundle="Admin"/></label>
+            <div class="tab-content-pane" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true" title="<pwm:display key="Title_DirectoryReporting" bundle="Admin"/>">
+                <div class="tab-container" style="width: 100%; height: 100%;">
+                    <input name="dr_tabs" type="radio" id="tab-1.1" checked="checked" class="input"/>
+                    <label for="tab-1.1" class="label"><pwm:display key="Title_ReportEngineStatus" bundle="Admin"/></label>
+                    <div class="tab-content-pane" title="<pwm:display key="Title_ReportEngineStatus" bundle="Admin"/>" class="tabContent">
+                        <table style="width:450px" id="statusTable">
                             <tr><td><pwm:display key="Display_PleaseWait"/></td></tr>
                         </table>
+                        <table style="width:450px;">
+                            <tr><td style="text-align: center; cursor: pointer">
+                                <button id="reportStartButton" class="btn">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-play">&nbsp;</span></pwm:if>
+                                    <pwm:display key="Button_Report_Start" bundle="Admin"/>
+                                </button>
+                                &nbsp;&nbsp;
+                                <button id="reportStopButton" class="btn">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-stop">&nbsp;</span></pwm:if>
+                                    <pwm:display key="Button_Report_Stop" bundle="Admin"/>
+                                </button>
+                                &nbsp;&nbsp;
+                                <button id="reportClearButton" class="btn">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-trash-o">&nbsp;</span></pwm:if>
+                                    <pwm:display key="Button_Report_Clear" bundle="Admin"/>
+                                </button>
+                            </td></tr>
+                        </table>
                     </div>
-                    <div class="noticebar">
-                        <pwm:display key="Notice_DynamicRefresh" bundle="Admin"/>
-                    </div>
-                    <div class="noticebar">
-                        <pwm:display key="Notice_ReportSummary" bundle="Admin"/>
-                    </div>
-                    <div style="text-align: center">
-                        <form class="submitToDownloadForm" action="<pwm:current-url/>" method="post">
-                            <button type="submit" class="btn" id="button-downloadUserSummaryCsv">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download">&nbsp;</span></pwm:if>
-                                <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
-                            </button>
-                            <input type="hidden" name="processAction" value="downloadUserSummaryCsv"/>
-                            <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
-                        </form>
-                    </div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_DataViewer" bundle="Admin"/>" class="tabContent">
-                    <div id="grid">
+
+                    <input name="dr_tabs" type="radio" id="tab-1.2" class="input"/>
+                    <label for="tab-1.2" class="label">Summary</label>
+                    <div class="tab-content-pane" title="Summary" class="tabContent">
+                        <div style="max-height: 500px; overflow-y: auto" id="summaryTableWrapper">
+                            <table id="summaryTable">
+                                <tr><td><pwm:display key="Display_PleaseWait"/></td></tr>
+                            </table>
+                        </div>
+                        <div class="noticebar">
+                            <pwm:display key="Notice_DynamicRefresh" bundle="Admin"/>
+                            <pwm:display key="Notice_ReportSummary" bundle="Admin"/>
+                        </div>
+                        <div style="text-align: center">
+                            <form class="submitToDownloadForm" action="<pwm:current-url/>" method="post">
+                                <button type="submit" class="btn" id="button-downloadUserSummaryCsv">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download">&nbsp;</span></pwm:if>
+                                    <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
+                                </button>
+                                <input type="hidden" name="processAction" value="downloadUserSummaryCsv"/>
+                                <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
+                            </form>
+                        </div>
                     </div>
-                    <div style="text-align: center">
-                        <input name="maxResults" id="maxReportDataResults" value="1000" type="number" style="width: 70px"
-                               min="10" max="50000" step="100"/>
-                        Rows
-                        <button class="btn" type="button" id="button-refreshReportDataGrid">
-                            <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-refresh">&nbsp;</span></pwm:if>
-                            <pwm:display key="Button_Refresh" bundle="Admin"/>
-                        </button>
-                        <form class="submitToDownloadForm" id="downloadUserReportCsvForm" action="<pwm:current-url/>" method="post">
-                            <button type="submit" class="btn" id="button-downloadUserReportCsv">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download">&nbsp;</span></pwm:if>
-                                <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
+
+                    <input name="dr_tabs" type="radio" id="tab-1.3" class="input"/>
+                    <label for="tab-1.3" class="label"><pwm:display key="Title_DataViewer" bundle="Admin"/></label>
+                    <div class="tab-content-pane" title="<pwm:display key="Title_DataViewer" bundle="Admin"/>" class="tabContent">
+                        <div id="grid">
+                        </div>
+                        <div style="text-align: center">
+                            <input name="maxResults" id="maxReportDataResults" value="1000" type="number" style="width: 70px"
+                                   min="10" max="50000" step="100"/>
+                            Rows
+                            <button class="btn" type="button" id="button-refreshReportDataGrid">
+                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-refresh">&nbsp;</span></pwm:if>
+                                <pwm:display key="Button_Refresh" bundle="Admin"/>
                             </button>
-                            <pwm:script>
-                                <script type="application/javascript">
-                                    PWM_GLOBAL['startupFunctions'].push(function(){
-                                        PWM_MAIN.showTooltip({
-                                            id: 'button-downloadUserReportCsv',
-                                            text: '<pwm:display key="Tooltip_DownloadReportRecords" bundle="Admin"/>',
-                                            width: 350
-                                        });
+                            <form class="submitToDownloadForm" id="downloadUserReportCsvForm" action="<pwm:current-url/>" method="post">
+                                <button type="submit" class="btn" id="button-downloadUserReportCsv">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download">&nbsp;</span></pwm:if>
+                                    <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
+                                </button>
+                                <pwm:script>
+                                    <script type="application/javascript">
+                                        PWM_GLOBAL['startupFunctions'].push(function(){
+                                            PWM_MAIN.showTooltip({
+                                                id: 'button-downloadUserReportCsv',
+                                                text: '<pwm:display key="Tooltip_DownloadReportRecords" bundle="Admin"/>',
+                                                width: 350
+                                            });
 
-                                        PWM_ADMIN.initDownloadUserReportCsvForm();
-                                    });
-                                </script>
-                            </pwm:script>
-                            <input type="hidden" name="processAction" value="downloadUserReportCsv"/>
-                            <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
-                            <input type="hidden" name="selectedColumns" value="" />
-                        </form>
+                                            PWM_ADMIN.initDownloadUserReportCsvForm();
+                                        });
+                                    </script>
+                                </pwm:script>
+                                <input type="hidden" name="processAction" value="downloadUserReportCsv"/>
+                                <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
+                                <input type="hidden" name="selectedColumns" value="" />
+                            </form>
+                        </div>
+                        <pwm:script>
+                            <script type="application/javascript">
+                                PWM_GLOBAL['startupFunctions'].push(function(){
+                                    PWM_ADMIN.initReportDataGrid();
+                                });
+                            </script>
+                        </pwm:script>
                     </div>
-                    <pwm:script>
-                        <script type="application/javascript">
-                            PWM_GLOBAL['startupFunctions'].push(function(){
-                                PWM_ADMIN.initReportDataGrid();
-                            });
-                        </script>
-                    </pwm:script>
+
+                    <div class="tab-end"></div>
                 </div>
             </div>
-            <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true" title="<pwm:display key="Title_EventStatistics" bundle="Admin"/>">
-                <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_RawStatistics" bundle="Admin"/>" class="tabContent">
-                    <div style="max-height: 500px; overflow-y: auto">
-                        <table>
-                            <tr>
-                                <td colspan="10" style="text-align: center">
-                                    <form action="<pwm:current-url/>" method="GET" enctype="application/x-www-form-urlencoded"
-                                          name="statsUpdateForm" id="statsUpdateForm">
-                                        <select name="statsPeriodSelect"
-                                                style="width: 350px;" data-dojo-props="maxHeight: -1">
-                                            <option value="<%=StatisticsManager.KEY_CUMULATIVE%>" <%= StatisticsManager.KEY_CUMULATIVE.equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
-                                                since installation - <%= JavaHelper.toIsoDate(analysis_pwmRequest.getPwmApplication().getInstallTime()) %>
-                                            </option>
-                                            <option value="<%=StatisticsManager.KEY_CURRENT%>" <%= StatisticsManager.KEY_CURRENT.equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
-                                                since startup - <%= JavaHelper.toIsoDate(analysis_pwmRequest.getPwmApplication().getStartupTime()) %>
-                                            </option>
-                                            <% final Map<StatisticsManager.DailyKey, String> availableKeys = statsManager.getAvailableKeys(locale); %>
-                                            <% for (final Map.Entry<StatisticsManager.DailyKey, String> entry : availableKeys.entrySet()) { %>
-                                            <% final StatisticsManager.DailyKey key = entry.getKey(); %>
-                                            <option value="<%=key%>" <%= key.toString().equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
-                                                <%= entry.getValue() %>
-                                            </option>
-                                            <% } %>
-                                        </select>
-                                        <button class="btn" type="submit">
-                                            <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-refresh">&nbsp;</span></pwm:if>
-                                            <pwm:display key="Button_Refresh" bundle="Admin"/>
-                                        </button>
-                                    </form>
-                                </td>
-                            </tr>
-                            <% for (final Statistic loopStat : Statistic.sortedValues(locale)) { %>
-                            <tr>
-                                <td >
-                                    <span id="Statistic_Key_<%=loopStat.getKey()%>"><%= loopStat.getLabel(locale) %><span/>
-                                </td>
-                                <td>
-                                    <%= stats.getStatistic(loopStat) %><%= loopStat.getType() == Statistic.Type.AVERAGE && loopStat != Statistic.AVG_PASSWORD_STRENGTH ? " ms" : "" %>
-                                </td>
-                            </tr>
-                            <% } %>
-                        </table>
-                    </div>
-                    <div class="noticebar">
-                        <pwm:display key="Notice_EventStatistics" bundle="Admin"/>
-                    </div>
-                    <div style="text-align: center">
-                        <form class="submitToDownloadForm" action="<pwm:current-url/>" method="post" enctype="application/x-www-form-urlencoded">
-                            <button type="submit" class="btn" id="button-downloadStatisticsLogCsv">
-                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download"></span></pwm:if>
-                                <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
-                            </button>
-                            <input type="hidden" name="processAction" value="downloadStatisticsLogCsv"/>
-                            <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
-                        </form>
-                    </div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_StatisticsCharts" bundle="Admin"/>" class="tabContent">
-                    <div style="height:100%; width: 100%">
-                        <div id="statsChartOptionsDiv" style="width:580px; text-align: center; margin:0 auto;">
-                            <label for="statsChartSelect">Statistic</label>
-                            <select name="statsChartSelect" id="statsChartSelect" style="width: 300px;">
+
+            <input name="tabs" type="radio" id="tab-2" class="input"/>
+            <label for="tab-2" class="label"><pwm:display key="Title_EventStatistics" bundle="Admin"/></label>
+            <div class="tab-content-pane" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true" title="<pwm:display key="Title_EventStatistics" bundle="Admin"/>">
+                <div class="tab-container" style="width: 100%; height: 100%;">
+                    <input name="es_tabs" type="radio" id="tab-2.1" checked="checked" class="input"/>
+                    <label for="tab-2.1" class="label"><pwm:display key="Title_RawStatistics" bundle="Admin"/></label>
+                    <div class="tab-content-pane" title="<pwm:display key="Title_RawStatistics" bundle="Admin"/>" class="tabContent">
+                        <div style="max-height: 500px; overflow-y: auto">
+                            <table>
+                                <tr>
+                                    <td colspan="10" style="text-align: center">
+                                        <form action="<pwm:current-url/>" method="GET" enctype="application/x-www-form-urlencoded"
+                                              name="statsUpdateForm" id="statsUpdateForm">
+                                            <select name="statsPeriodSelect"
+                                                    style="width: 350px;" data-dojo-props="maxHeight: -1">
+                                                <option value="<%=StatisticsManager.KEY_CUMULATIVE%>" <%= StatisticsManager.KEY_CUMULATIVE.equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
+                                                    since installation - <%= JavaHelper.toIsoDate(analysis_pwmRequest.getPwmApplication().getInstallTime()) %>
+                                                </option>
+                                                <option value="<%=StatisticsManager.KEY_CURRENT%>" <%= StatisticsManager.KEY_CURRENT.equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
+                                                    since startup - <%= JavaHelper.toIsoDate(analysis_pwmRequest.getPwmApplication().getStartupTime()) %>
+                                                </option>
+                                                <% final Map<StatisticsManager.DailyKey, String> availableKeys = statsManager.getAvailableKeys(locale); %>
+                                                <% for (final Map.Entry<StatisticsManager.DailyKey, String> entry : availableKeys.entrySet()) { %>
+                                                <% final StatisticsManager.DailyKey key = entry.getKey(); %>
+                                                <option value="<%=key%>" <%= key.toString().equals(statsPeriodSelect) ? "selected=\"selected\"" : "" %>>
+                                                    <%= entry.getValue() %>
+                                                </option>
+                                                <% } %>
+                                            </select>
+                                            <button class="btn" type="submit">
+                                                <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-refresh">&nbsp;</span></pwm:if>
+                                                <pwm:display key="Button_Refresh" bundle="Admin"/>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
                                 <% for (final Statistic loopStat : Statistic.sortedValues(locale)) { %>
-                                <option value="<%=loopStat %>"><%=loopStat.getLabel(locale)%></option>
+                                <tr>
+                                    <td >
+                                        <span id="Statistic_Key_<%=loopStat.getKey()%>"><%= loopStat.getLabel(locale) %><span/>
+                                    </td>
+                                    <td>
+                                        <%= stats.getStatistic(loopStat) %><%= loopStat.getType() == Statistic.Type.AVERAGE && loopStat != Statistic.AVG_PASSWORD_STRENGTH ? " ms" : "" %>
+                                    </td>
+                                </tr>
                                 <% } %>
-                            </select>
-                            <label for="statsChartDays" style="padding-left: 10px">Days</label>
-                            <input id="statsChartDays" value="30" type="number" style="width: 60px" min="7" max="120"/>
+                            </table>
+                        </div>
+                        <div class="noticebar">
+                            <pwm:display key="Notice_EventStatistics" bundle="Admin"/>
                         </div>
-                        <div id="statsChart">
+                        <div style="text-align: center">
+                            <form class="submitToDownloadForm" action="<pwm:current-url/>" method="post" enctype="application/x-www-form-urlencoded">
+                                <button type="submit" class="btn" id="button-downloadStatisticsLogCsv">
+                                    <pwm:if test="<%=PwmIfTest.showIcons%>"><span class="btn-icon pwm-icon pwm-icon-download"></span></pwm:if>
+                                    <pwm:display key="Button_DownloadCSV" bundle="Admin"/>
+                                </button>
+                                <input type="hidden" name="processAction" value="downloadStatisticsLogCsv"/>
+                                <input type="hidden" name="pwmFormID" value="<pwm:FormID/>"/>
+                            </form>
                         </div>
                     </div>
 
+                    <input name="es_tabs" type="radio" id="tab-2.2" class="input"/>
+                    <label for="tab-2.2" class="label"><pwm:display key="Title_StatisticsCharts" bundle="Admin"/></label>
+                    <div class="tab-content-pane" title="<pwm:display key="Title_StatisticsCharts" bundle="Admin"/>" class="tabContent">
+                        <div style="height:100%; width: 100%">
+                            <div id="statsChartOptionsDiv" style="width:580px; text-align: center; margin:0 auto;">
+                                <label for="statsChartSelect">Statistic</label>
+                                <select name="statsChartSelect" id="statsChartSelect" style="width: 300px;">
+                                    <% for (final Statistic loopStat : Statistic.sortedValues(locale)) { %>
+                                    <option value="<%=loopStat %>"><%=loopStat.getLabel(locale)%></option>
+                                    <% } %>
+                                </select>
+                                <label for="statsChartDays" style="padding-left: 10px">Days</label>
+                                <input id="statsChartDays" value="30" type="number" style="width: 60px" min="7" max="120"/>
+                            </div>
+                            <div id="statsChart">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tab-end"></div>
                 </div>
             </div>
+
+            <div class="tab-end"></div>
         </div>
     </div>
     <div class="push"></div>
@@ -282,6 +307,7 @@
     </script>
 </pwm:script>
 <% JspUtility.setFlag(pageContext, PwmRequestFlag.HIDE_LOCALE); %>
+<link rel="stylesheet" type="text/css" href="<pwm:url url='/public/resources/tab-container.css' addContext="true"/>"/>
 <%@ include file="/WEB-INF/jsp/fragment/footer.jsp" %>
 </body>
 </html>

server/src/main/webapp/WEB-INF/jsp/admin-dashboard.jsp

@@ -55,8 +55,10 @@
     <div id="centerbody">
         <div id="page-content-title"><pwm:display key="Title_Dashboard" bundle="Admin"/></div>
         <%@ include file="fragment/admin-nav.jsp" %>
-        <div id="DashboardTabContainer" data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true">
-            <div id="StatusTab" data-dojo-type="dijit.layout.ContentPane" title="Status" class="tabContent">
+        <div id="DashboardTabContainer" class="tab-container" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true">
+            <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+            <label for="tab-1" class="label">Status</label>
+            <div id="StatusTab" class="tab-content-pane" title="Status" >
                 <table class="nomargin">
                     <tr>
                         <td class="key">
@@ -107,9 +109,11 @@
                     <% } %>
                     <% } %>
                 </table>
-                <div data-dojo-type="dijit.layout.TabContainer" style="margin-top: 15px; width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true">
-                    <div data-dojo-type="dijit.layout.ContentPane" title="Last Minute" class="tabContent">
-                        <table class="nomargin noborder">
+                <div class="tab-container" style="margin-top: 15px;" data-dojo-props="doLayout: false, persist: true">
+                    <input name="status_tabs" type="radio" id="tab-1.1" checked="checked" class="input"/>
+                    <label for="tab-1.1" class="label">Last Minute</label>
+                    <div class="tab-content-pane" title="Last Minute" class="tabContent">
+                        <table class="nomargin noborder" style="min-height: 164px;">
                             <tr>
                                 <td colspan="10" class="noborder nomargin nopadding">
                                     <div style="max-width: 600px; text-align: center">
@@ -121,8 +125,11 @@
                             </tr>
                         </table>
                     </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" title="Last Hour" class="tabContent">
-                        <table class="nomargin noborder">
+
+                    <input name="status_tabs" type="radio" id="tab-1.2" class="input"/>
+                    <label for="tab-1.2" class="label">Last Hour</label>
+                    <div class="tab-content-pane" title="Last Hour" class="tabContent">
+                        <table class="nomargin noborder" style="min-height: 164px;">
                             <tr>
                                 <td colspan="10" class="noborder nomargin nopadding">
                                     <div style="max-width: 600px; text-align: center">
@@ -134,8 +141,11 @@
                             </tr>
                         </table>
                     </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" title="Last Day" class="tabContent">
-                        <table class="nomargin noborder">
+
+                    <input name="status_tabs" type="radio" id="tab-1.3" class="input"/>
+                    <label for="tab-1.3" class="label">Last Day</label>
+                    <div class="tab-content-pane" title="Last Day" class="tabContent">
+                        <table class="nomargin noborder" style="min-height: 164px;">
                             <tr>
                                 <td colspan="10" class="noborder nomargin nopadding">
                                     <div style="max-width: 600px; text-align: center">
@@ -147,10 +157,14 @@
                             </tr>
                         </table>
                     </div>
+                    <div class="tab-end"></div>
                     <div class="noticebar">Events rates are per minute.  <pwm:display key="Notice_DynamicRefresh" bundle="Admin"/></div>
                 </div>
             </div>
-            <div id="HealthTab" data-dojo-type="dijit.layout.ContentPane" title="Health" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-2" class="input"/>
+            <label for="tab-2" class="label">Health</label>
+            <div id="HealthTab" class="tab-content-pane" title="Health">
                 <div id="healthBody">
                     <div class="WaitDialogBlank"></div>
                 </div>
@@ -160,7 +174,10 @@
                     <a href="<pwm:context/>/public/health.jsp"><pwm:context/>/public/health.jsp</a>
                 </div>
             </div>
-            <div id="AboutTab" data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_About" bundle="Admin"/>" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-3" class="input"/>
+            <label for="tab-3" class="label"><pwm:display key="Title_About" bundle="Admin"/></label>
+            <div id="AboutTab" class="tab-content-pane" title="<pwm:display key="Title_About" bundle="Admin"/>">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <% for (final DisplayElement displayElement : appDashboardData.getAbout()) { %>
@@ -221,7 +238,10 @@
                     </table>
                 </div>
             </div>
-            <div id="ServicesTab" data-dojo-type="dijit.layout.ContentPane" title="Services" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-4" class="input"/>
+            <label for="tab-4" class="label">Services</label>
+            <div id="ServicesTab" class="tab-content-pane" title="Services">
                 <table class="nomargin">
                     <tr>
                         <th style="font-weight:bold;">
@@ -270,7 +290,10 @@
                     <% } %>
                 </table>
             </div>
-            <div id="LocalDBTab" data-dojo-type="dijit.layout.ContentPane" title="LocalDB" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-5" class="input"/>
+            <label for="tab-5" class="label">LocalDB</label>
+            <div id="LocalDBTab" class="tab-content-pane" title="LocalDB">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <% for (final DisplayElement displayElement : appDashboardData.getLocalDbInfo()) { %>
@@ -309,7 +332,10 @@
                 <% } %>
                 </div>
             </div>
-            <div id="JavaTab" data-dojo-type="dijit.layout.ContentPane" title="Java" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-6" class="input"/>
+            <label for="tab-6" class="label">Java</label>
+            <div id="JavaTab" class="tab-content-pane" title="Java">
                 <table class="nomargin">
                     <% for (final DisplayElement displayElement : appDashboardData.getJavaAbout()) { %>
                     <% request.setAttribute("displayElement", displayElement); %>
@@ -361,8 +387,11 @@
                 </div>
                 <% } %>
             </div>
+
             <% if (!JavaHelper.isEmpty(appDashboardData.getNodeData())) { %>
-            <div id="Status" data-dojo-type="dijit.layout.ContentPane" title="Nodes" class="tabContent">
+            <input name="tabs" type="radio" id="tab-7" class="input"/>
+            <label for="tab-7" class="label">Nodes</label>
+            <div id="Status" class="tab-content-pane" title="Nodes">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                         <tr>
@@ -411,6 +440,8 @@
                 </div>
             </div>
             <% } %>
+
+            <div class="tab-end"></div>
         </div>
     </div>
     <div class="push"></div>
@@ -450,6 +481,8 @@
         });
     </script>
 </pwm:script>
+
+<link rel="stylesheet" type="text/css" href="<pwm:url url='/public/resources/tab-container.css' addContext="true"/>"/>
 <%@ include file="/WEB-INF/jsp/fragment/footer.jsp" %>
 <pwm:script-ref url="/public/resources/js/admin.js"/>
 </body>

server/src/main/webapp/WEB-INF/jsp/setupotpsecret.jsp

@@ -55,16 +55,24 @@
         <div id="page-content-title"><pwm:display key="Title_SetupOtpSecret" displayIfMissing="true"/></div>
         <p><pwm:display key="Display_SetupOtpSecret"/></p>
         <%@ include file="fragment/message.jsp" %>
-        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="doLayout: false, persist: true">
-            <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Display_SetupOtp_Android_Title"/>">
+        <div class="tab-container" data-dojo-props="doLayout: false, persist: true">
+            <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+            <label for="tab-1" class="label"><pwm:display key="Display_SetupOtp_Android_Title"/></label>
+            <div class="tab-content-pane" title="<pwm:display key="Display_SetupOtp_Android_Title"/>">
                 <pwm:display key="Display_SetupOtp_Android_Steps"/>
                 <img class="qrcodeimage" src="<%=JspUtility.getAttribute(pageContext,PwmRequestAttribute.SetupOtp_QrCodeValue)%>" alt="QR Code"/>
             </div>
-            <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Display_SetupOtp_iPhone_Title"/>">
+
+            <input name="tabs" type="radio" id="tab-2" class="input"/>
+            <label for="tab-2" class="label"><pwm:display key="Display_SetupOtp_iPhone_Title"/></label>
+            <div class="tab-content-pane" title="<pwm:display key="Display_SetupOtp_iPhone_Title"/>">
                 <pwm:display key="Display_SetupOtp_iPhone_Steps"/>
                 <img class="qrcodeimage" src="<%=JspUtility.getAttribute(pageContext,PwmRequestAttribute.SetupOtp_QrCodeValue)%>" alt="QR Code"/>
             </div>
-            <div data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Display_SetupOtp_Other_Title"/>">
+
+            <input name="tabs" type="radio" id="tab-3" class="input"/>
+            <label for="tab-3" class="label"><pwm:display key="Display_SetupOtp_Other_Title"/></label>
+            <div class="tab-content-pane" title="<pwm:display key="Display_SetupOtp_Other_Title"/>">
                 <pwm:display key="Display_SetupOtp_Other_Steps"/>
                 <img class="qrcodeimage" src="<%=JspUtility.getAttribute(pageContext,PwmRequestAttribute.SetupOtp_QrCodeValue)%>" alt="QR Code"/>
                 <table border="0" style="width: 300px; margin-right: auto; margin-left: auto">
@@ -82,6 +90,7 @@
                     </tr>
                 </table>
             </div>
+            <div class="tab-end"></div>
         </div>
         <div class="buttonbar">
             <form action="<pwm:current-url/>" method="post" name="setupOtpSecret" enctype="application/x-www-form-urlencoded" id="setupOtpSecret" class="pwm-form">
@@ -130,6 +139,7 @@
 </pwm:script>
 <pwm:script-ref url="/public/resources/js/responses.js"/>
 <pwm:script-ref url="/public/resources/js/otpsecret.js"/>
+<link rel="stylesheet" type="text/css" href="<pwm:url url='/public/resources/tab-container.css' addContext="true"/>"/>
 <%@ include file="fragment/footer.jsp" %>
 </body>
 </html>

server/src/main/webapp/public/resources/style.css

@@ -189,6 +189,8 @@ html[dir="rtl"] table td.key {
     font-size: smaller;
     font-style: italic;
     text-align: center;
+    position: absolute;
+    bottom: 0;
 }
 
 .noborder {
@@ -1267,4 +1269,12 @@ html[dir="rtl"] .message.message-error .errorDetail {
 
 #strengthLabel {
     white-space: nowrap;
-}
+}
+
+/*Change these values for the tab highlight color:*/
+.tab-container > .label:hover {
+    color: #2D2D2D;
+    border-top-color: #2D2D2D;
+    border-left-color: #2D2D2D;
+    border-right-color: #2D2D2D;
+}

server/src/main/webapp/public/resources/tab-container.css

@@ -0,0 +1,92 @@
+.tab-container * {
+    box-sizing: border-box;
+}
+
+.tab-container {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.input {
+    position: absolute;
+    opacity: 0;
+}
+
+.tab-container > .label {
+    background: #f6f9f8;
+    border: 1px solid #dae1e1;
+    border-bottom: transparent;
+    border-radius: 4px 4px 0 0;
+    color: #7f7f7f;
+    cursor: pointer;
+    font-size: 15px;
+    height: 31px;
+    margin-left: 5px;
+    padding: 6px 12px;
+    transition: background 0.1s, color 0.1s;
+    width: 100%;
+}
+
+.tab-container > .label:active {
+    /*background: #ccc;*/
+}
+
+.tab-container > .input:focus + .label {
+    z-index: 1;
+}
+
+.tab-container > .input:checked + .label {
+    background: #fff;
+    border: 1px solid #6a6f71;
+    border-bottom-color: transparent;
+    color: #000;
+    position: relative;
+    z-index: 100;
+}
+
+.tab-container > .input:checked + .label::after {
+    content: "";
+    background: #fff;
+    bottom: -3px;
+    height: 3px;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
+@media (min-width: 600px) {
+    .tab-container > .label {
+        width: auto;
+    }
+}
+
+.tab-content-pane {
+    background: #fff;
+    display: none;
+    padding: 20px 30px 30px;
+    width: 100%;
+}
+
+@media (min-width: 600px) {
+    .tab-content-pane {
+        order: 99;
+    }
+}
+
+.input:checked + .label + .tab-content-pane {
+    display: block;
+}
+
+.tab-container > .tab-end {
+    border-bottom: 1px solid #6a6f71;
+    left: 0;
+    width: 100%;
+}
+
+/*This targets only IE*/
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .tab-container > .tab-end {
+        height: 7px;
+    }
+}

server/src/main/webapp/public/resources/themes/autumn/style.css

@@ -173,3 +173,9 @@ table td.key {
     text-align: right;
 }
 
+.tab-container > .label:hover {
+    color: #ffcccc;
+    border-top-color: #ffcccc;
+    border-left-color: #ffcccc;
+    border-right-color: #ffcccc;
+}

server/src/main/webapp/public/resources/themes/blue/style.css

@@ -79,6 +79,9 @@
     white-space: normal;
 }
 
-
-
-
+.tab-container > .label:hover {
+    color: #000088;
+    border-top-color: #000088;
+    border-left-color: #000088;
+    border-right-color: #000088;
+}

server/src/main/webapp/public/resources/themes/matrix/style.css

@@ -198,4 +198,9 @@ input, button {
     text-align: right;
 }
 
-
+.tab-container > .label:hover {
+    color: #00cc00;
+    border-top-color: #00cc00;
+    border-left-color: #00cc00;
+    border-right-color: #00cc00;
+}

server/src/main/webapp/public/resources/themes/red/style.css

@@ -129,3 +129,10 @@ a:hover {
 #header-menu-icon {
   display: inline-block;
 }
+
+.tab-container > .label:hover {
+    color: #ff0000;
+    border-top-color: #ff0000;
+    border-left-color: #ff0000;
+    border-right-color: #ff0000;
+}

server/src/main/webapp/public/resources/themes/tulips/style.css

@@ -183,4 +183,11 @@ table td.key {
     border: 1px solid #E8E1F6;
     box-shadow: 0 0 0 0 white, 0 0 0 0 white, 9px 0 12px -4px #b9526c, -9px 0 12px -4px #b9526c;
     background-color: rgba(255, 255, 255, 1);
-}
+}
+
+.tab-container > .label:hover {
+    color: #ffcccc;
+    border-top-color: #ffcccc;
+    border-left-color: #ffcccc;
+    border-right-color: #ffcccc;
+}