index.erb in pmux-logview-0.3.10

- old
+ new

@@ -7,15 +7,17 @@
         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="js/jquery-ui-1.10.0.js"></script>
         <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
         <script type="text/javascript" src="js/d3.v3.min.js"></script>
         <script type="text/javascript" src="js/jquery.activity-indicator-1.0.0.min.js"></script>
+        <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
         <script type="text/javascript" src="js/tchart.js"></script>
         <script type="text/javascript" src="js/pmux-logview-base.js"></script>
         <script type="text/javascript" src="js/pmux-logview-index.js"></script>
         <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.0.css" />
         <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
+        <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
         <link rel="stylesheet" type="text/css" href="css/tchart.css" />
         <link rel="stylesheet" type="text/css" href="css/pmux-logview.css" />
     </head>
     <body class="body-font background-gradient background-no-repeat">
         <div>
@@ -40,34 +42,66 @@
            </button>
         </div>
         <div class="tabs-container">
             <div id="main-tabs">
                 <ul>
-                    <li><a href="#job-log">job log</a></li>
+                    <li><a href="#job-log-realtime">job log (realtime)</a></li>
+                    <li><a href="#job-log-search">job log (search)</a></li>
                     <li><a href="#dispatcher-log">dispatcher log</a></li>
                     <li><a href="#job-chart">job chart</a></li>
                </ul>
-               <div id="job-log">
-                   <table id="job-log-table" class="border">
+               <div id="job-log-realtime">
+                   <table id="job-log-realtime-table" class="border">
                        <thead>
                             <tr>
                                 <th>id</th>
                                 <th>mapper</th>
                                 <th>start time</th>
                                 <th>end time</th>
                                 <th>elapsed time</th>
                             </tr>
                        </thead>
-                       <tbody id="job-log-table-body">
+                       <tbody id="job-log-realtime-table-body">
                        </tbody>
                    </table>
                    <div>
                        <button id="more-button" type="button" class="button-color button-normalize ui-corner-all">
                            <span class="button-text-center">もっとみる</span>
                        </button>
                    </div>
                </div>
+               <div id="job-log-search">
+                   <div id="date-picker">
+                       <table class="y-space">
+                           <thead>
+                           </thead>
+                           <tbody>
+                               <tr>
+                                   <td class="x-space">end timeの日時で絞り込み</td>
+                                   <td class="x-space">検索開始日:</td>
+                                   <td class="x-space"><input type="text" id="start-date-picker"></input></td>
+                                   <td class="x-space">検索終了日:</td>
+                                   <td class="x-space"><input type="text" id="end-date-picker"></input></td>
+                                   <td class="x-space"><button id="load-button" class="button-color button-normalize ui-corner-all">ロード</button></td>
+                               </tr>
+                           </tbody>
+                       </table>
+                   </div>
+                   <table id="job-log-search-table" class="border">
+                       <thead>
+                            <tr>
+                                <th>id</th>
+                                <th>mapper</th>
+                                <th>start time</th>
+                                <th>end time</th>
+                                <th>elapsed time</th>
+                            </tr>
+                       </thead>
+                       <tbody id="job-log-search-table-body">
+                       </tbody>
+                   </table>
+               </div>
                <div id="dispatcher-log">
                    <table id="dispatcher-log-table" class="border">
                        <thead>
                            <tr>
                                 <th>log message</th>
@@ -76,9 +110,15 @@
                        <tbody id="dispatcher-log-table-body">
                        </tbody>
                    </table>
                </div>
                <div id="job-chart">
+                 <div class="y-space">
+                     <select id="job-log-type">
+                         <option value="realtime" selected>realtime</option>
+                         <option value="search">search</option>
+                     </select>
+                 </div>
                  <div class="job-chart-container background-gradient">
                    <div id="job-chart-tchart">
                    </div>
                  <div>
                </div>