mgmt-results-table--actual.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jBPM Suite</title>

  <link href="css/kie-main.css" rel="stylesheet" media="screen, print">

  <!-- debugging tool -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/srambach/classbxr/5456df40/css/classbxr.css">

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!-- Datatables.net JS -->
  <script src="https//:cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https//:cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>

  <!-- Bootstrap Select -->
  <script src="https//:cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
  <!-- Bootstrap Datepicker -->
  <script src="https//:cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

  <!-- Patternfly JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.1/js/patternfly.min.js"></script>

</head>
<body>

<div class="kie-page">
  <a class="kie-skiplink" href="#kie-main-content">Skip to main content</a>

  <!-- Masthead -->
  <nav class="kie-page__masthead navbar navbar-default navbar-pf " role="navigation">
    <div class="navbar-header ">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">
        <img class="kie-brand-icon" src="images/kie-ide.png" alt="JBoss BPM Suite"/>
      </a>
    </div>

    <div class="collapse navbar-collapse navbar-collapse-1">

      <ul class="nav navbar-nav navbar-iconic">
        <li>
          <a class="nav-item-iconic" href="bpm-home-rh.html" title="Home"><i class="pficon pficon-home"></i></a>
        </li>
      </ul>

      <ul class="nav navbar-nav  kie-yamm">
        <li class="dropdown kie-yamm--fw">
          <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true" tabindex="0">
            Menu
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu kie-yamm__dropdown-menu" aria-labelledby="dropdownMenu2">

            <!-- mega menu sections -->
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Design</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Projects</a></li>
                <li><a href="#">Dashboards</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Configure</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Deployments</a></li>
                <li><a href="#">Execution Servers</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3 ">
              <h3 class="kie-yamm__title">Manage</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Process Definitions</a></li>
                <li><a href="#">Process Instances</a></li>
                <li><a href="#">Jobs</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Track</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Task Lists</a></li>
                <li><a href="#">Task Reports</a></li>
                <li><a href="#">Process Reports</a></li>
                <li><a href="#">Business Dashboards</a></li>
              </ul>
            </li>

          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right navbar-iconic">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle nav-item-iconic" id="dropdownMenu3" data-toggle="dropdown"
             aria-haspopup="true">
            <span title="Applications" class="fa fa-th"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
            <li><a href="">Application 1</a></li>
            <li><a href="">Application 2</a></li>
            <li><a href="">Application 3</a></li>
          </ul>
        </li>
        <li>
          <a class="nav-item-iconic" href="#help" data-toggle="modal" title="Help"><i class="fa fa-question"></i></a>
        </li>
        <li>
          <a class="nav-item-iconic" href="settings.html" title="Settings"><i class="pficon pficon-equalizer"></i></a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true" tabindex="0">
            <span title="Username" class="pficon pficon-user"></span>
            Brian Johnson
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
            <li><a href="#about" data-toggle="modal">About</a></li>
            <li><a href="#">Log Out</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </nav>

  <main role="main" id="kie-main-content" tabindex="-1" class="kie-page__content ">

    <div class="container-fluid ">
      <!-- Breadcrumb row -->
      <div class="row">
        <div class="col-xs-12">
          <ol class="breadcrumb">
            <li>
              <a href="#">Home</a>
            </li>
            <li class="active"><strong>Manage</strong>
            </li>
          </ol>
        </div>
      </div>

      <!-- Page Title Row -->
      <div class="row">
        <div class="col-sm-12 page-header kie-page-header">
          <div class="actions pull-right btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
            <span class="dropdown  dropdown-kebab-pf">
              <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="true">
                <span class="fa fa-ellipsis-v"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownKebab">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </span>

          </div>
          <h1>Manage</h1>
        </div>
      </div>


      <!-- Content -->
      <div class="row kie-row--tabcontent">
        <!-- Content of the left sidebar filter controls -->
        <div class="col-md-5 col-lg-4">
          <div class="container-fluid">
            <div class="row">
              <!-- Tabs for the filter control -->
              <!-- should be implemented with existing slide-in panel control -->
              <div class="col-xs-3" style="padding-left:0; padding-right:0; margin-left: -20px; width: 6em;">
                <nav class="navbar navbar-static nav-stacked" id="kiePreferences">
                  <ul class="nav kie-dock-selector" role="tablist">
                    <li class="kie-dock-selector__tab active" >
                      <a href="#kieFilterDockBasic" data-toggle="tab" >
                        <span class="fa fa-filter"></span>
                      </a>
                    </li>
                    <li class="kie-dock-selector__tab">
                      <a href="#kieFilterDockAdvanced" data-toggle="tab">
                      <span class="fa fa-filter">+</span>
                      </a>
                    </li>
                    <li class="kie-dock-selector__tab">
                      <a href="#kieFilterDockSaved" data-toggle="tab">
                      <span class="fa fa-star-o"></span>
                      </a>
                    </li>
                    <li class="kie-dock-selector__tab">
                      <a href="#kieFilterDockDisplay" data-toggle="tab">
                      <span class="fa fa-list-alt"></span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>

              <!-- Content - filters -->
              <div class="col-xs-9 tab-content kie-tab-content--filters">
                <!-- GENERAL -->
                <div class="tab-pane kie__dock active" id="kieFilterDockBasic">
                  <h3 class="kie-dock__heading">
                    Basic Filters
                  </h3>
                  <hr class="kie-dock__divider"/>
                  <form role="form">

                    <div class="panel-group kie-dock__panel-group">
                      <div class="panel kie-dock__panel">
                        <div class="panel-heading kie-dock__panel-heading">
                          <div class="panel-title kie-dock__heading--section">
                              <a data-toggle="collapse" data-target="#kieFilterDockBasicState"
                               href="#kieFilterDockBasicState">State</a>
                          </div>
                        </div>
                        <div id="kieFilterDockBasicState" class="panel-collapse collapse in">
                          <div class="panel-body kie-dock__panel-body">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Active
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                In progress
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Aborted
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Completed
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Suspended
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Pending
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <hr class="kie-dock__divider">

                    <h5 class="kie-dock__heading--section">Errors</h5>
                    <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          With errors
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          Without errors
                        </label>
                      </div>
                    </div>

                    <hr class="kie-dock__divider"/>

                    <h5 class="kie-dock__heading--section">Refine</h5>
                    <div class="form-group">
                      <select class="selectpicker form-control" id="kieSettingsInputPersistenceMode">
                        <option>Any field</option>
                        <option>Process instance ID</option>
                        <option>Initiator</option>
                        <option>Correlation key</option>
                        <option>Name</option>
                      </select>
                    </div>

                    <div class="form-group">
                      <input type="text" class="form-control" id="kieSettingsInputProjectName"
                             placeholder="Enter value">
                    </div>

                    <button class="btn btn-default disabled">Apply</button><!-- disabled until previous fields are filled in -->

                    <hr  class="kie-dock__divider"/>

                    <div class="form-group">
                      <h5 class="kie-dock__heading--section">Start Date</h5>
                      <div class="kie-dock__datepicker">
                        <!-- This may be the existing datepicker within the application instead of this Bootstrap one -->
                        <input type="text" class="form-control bootstrap-datepicker">
                      </div>
                    </div>
                    <div class="form-group">
                      <h5 class="kie-dock__heading--section">Last Update</h5>
                      <div class="kie-dock__datepicker">
                        <!-- This may be the existing datepicker within the application instead of this Bootstrap one -->
                        <input type="text" class="form-control bootstrap-datepicker">
                      </div>
                    </div>
                    <div class="form-group">
                      <button class="btn btn-default ">Reset Dates</button><!-- disabled until previous fields are filled in -->
                    </div>
                  </form>
                  <br/>

                </div>

                <!-- ADVANCED FILTERS -->
                <div class="tab-pane" id="kieFilterDockAdvanced">
                  <h3 class="kie-dock__heading">
                    Advanced Filter
                  </h3>
                  <hr class="kie-dock__divider"/>
                  <form role="form">
                    <div class="form-group">
                      <label class="kie-dock__heading--section" for="kieSettingsInputPersistenceMode">Filter Type</label>
                      <select class="selectpicker form-control" id="kieSettingsInputPersistenceMode">
                        <option>processInstanceID</option>
                        <option>processID</option>
                        <option>start_date</option>
                        <option>end_date</option>
                        <option>status</option>
                        <option>parentProcessInstanceID</option>
                        <option>outcome</option>
                        <option>duration</option>
                        <option>user_identity</option>
                        <option>processsomething</option>
                        <option>processName</option>
                        <option>correlationKey</option>
                        <option>externalID</option>
                        <option>processInstanceDescription</option>
                        <option>lastModificationDate</option>
                        <option>errorCount</option>
                      </select>
                    </div>

                    <div class="form-group">
                      <label class="kie-dock__heading--section" for="kieSettingsInputPersistenceMode">Expression</label>
                      <select class="selectpicker form-control" id="kieSettingsInputPersistenceMode">
                        <option>Is</option>
                        <option>Is not</option>
                        <option>Greater than</option>
                        <option>Greater than or equal to</option>
                        <option>Between</option>
                        <option>...</option>
                      </select>
                    </div>

                    <!-- TODO: Figure out correct markup and then styles probably have to be fixed -->
                    <div class="form-group">
                      <fieldset aria-label="Select value for expression" >
                        <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"  aria-labelledby="kieSettingsExpressionLabel" checked />
                          <span class="form-group" id="kieSettingsExpressionLabel">
                            <label class="kie-label--embedded" for="kieSettingsInputProjectName">Value</label>&nbsp;
                            <input type="number" class="form-control kie-input--inline" id="kieSettingsInputProjectName" placeholder="Enter value">
                          </span>
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                          "Null"
                        </label>
                      </div>
                      </fieldset>
                    </div>

                    <div class="form-group">
                      <button class="btn btn-primary disabled">Apply</button>&nbsp;
                      <button class="btn btn-default">Cancel</button>
                    </div>

                  </form>
                  <br/>

                </div>

                <!-- SAVED FILTERS -->
                <div class="tab-pane" id="kieFilterDockSaved">
                  <h3 class="kie-dock__heading">
                    Saved Filters
                  </h3>
                  <div>
                    Select a saved filter to clear existing filters and apply saved ones.
                  </div>
                  <br/>
                  <div class="list-pf list-pf-stacked kie-list-pf-light">
                    <div class="list-pf-item kie-dock__list-pf-item">
                      <div class="list-pf-container kie-dock__list-pf-container">
                        <div class="list-pf-content list-pf-content-flex ">
                          <div class="list-pf-left kie-dock__list-pf-left">
                            <span class="fa fa-star list-pf-icon kie-list-pf-icon-md"></span>
                          </div>
                          <div class="list-pf-content-wrapper">
                            <div class="list-pf-main-content kie-dock__list-pf-main-content">
                              <div class="list-pf-title kie-dock__list-pf-title"><a href="">System Default</a></div>
                              <div class="list-pf-description">
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                            </div>
                          </div>
                          <div class="list-pf-actions kie-dock__list-pf-actions">
                            <button class="btn btn-link"><span class="pficon pficon-delete"></span></button>
                          </div>
                        </div>
                      </div>

                    </div>
                    </div>
                    <div class="list-pf-item kie-dock__list-pf-item active">
                      <div class="list-pf-container kie-dock__list-pf-container">
                        <div class="list-pf-content list-pf-content-flex ">
                          <div class="list-pf-left kie-dock__list-pf-left">
                            <span class="pficon pficon-users list-pf-icon kie-list-pf-icon-md"></span>
                          </div>
                          <div class="list-pf-content-wrapper">
                            <div class="list-pf-main-content kie-dock__list-pf-main-content">
                              <div class="list-pf-title kie-dock__list-pf-title"><a href="">Team-generated</a></div>
                              <div class="list-pf-description">
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><a href="#0">more...</a></div>
                              </div>
                            </div>
                          </div>
                          <div class="list-pf-actions kie-dock__list-pf-actions">
                            <button class="btn btn-link"><span class="pficon pficon-delete"></span></button>
                          </div>
                        </div>
                      </div>

                    </div>
                    <div class="list-pf-item kie-dock__list-pf-item">
                      <div class="list-pf-container kie-dock__list-pf-container">
                        <div class="list-pf-content list-pf-content-flex ">
                          <div class="list-pf-left kie-dock__list-pf-left">
                            <span class="pficon pficon-user list-pf-icon kie-list-pf-icon-md"></span>
                          </div>
                          <div class="list-pf-content-wrapper">
                            <div class="list-pf-main-content kie-dock__list-pf-main-content">
                              <div class="list-pf-title kie-dock__list-pf-title"><a href="">Usergenerated01234567890</a></div>
                              <div class="list-pf-description">
                                <div class="kie-dock__KVP"><strong>Key01234567890:</strong> Value012345678901234567890</div>
                                <div class="kie-dock__KVP"><strong>Key with a few separate words to wrap:</strong> Value that contains separate words that will wrap also</div>
                              </div>
                            </div>
                          </div>
                          <div class="list-pf-actions kie-dock__list-pf-actions">
                            <button class="btn btn-link"><span class="pficon pficon-delete"></span></button>
                          </div>
                        </div>
                      </div>

                    </div>
                    <div class="list-pf-item kie-dock__list-pf-item">
                      <div class="list-pf-container kie-dock__list-pf-container">
                        <div class="list-pf-content list-pf-content-flex ">
                          <div class="list-pf-left kie-dock__list-pf-left">
                            <span class="pficon pficon-user list-pf-icon kie-list-pf-icon-md"></span>
                          </div>
                          <div class="list-pf-content-wrapper">
                            <div class="list-pf-main-content kie-dock__list-pf-main-content">
                              <div class="list-pf-title kie-dock__list-pf-title"><a href="">User-generated</a></div>
                              <div class="list-pf-description">
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                                <div class="kie-dock__KVP"><strong>Key:</strong> Value</div>
                              </div>
                            </div>
                          </div>
                          <div class="list-pf-actions kie-dock__list-pf-actions">
                            <button class="btn btn-link"><span class="pficon pficon-delete"></span></button>
                          </div>
                        </div>
                      </div>

                    </div>

                  </div>

                  <br/>

                </div>

                <!-- DISPLAY PREFERENCES -->
                <div class="tab-pane" id="kieFilterDockDisplay">
                  <h3 class="kie-dock__heading">
                    Display Preferences
                  </h3>
                  <hr class="kie-dock__divider"/>
                  <h5 class="kie-dock__heading--section">Customize Columns</h5>
                  <div>Customize the table presentation by selecting which columns to show in the results list.</div>
                  <div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked disabled>
                        Actions
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="">
                        Correlation key
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked>
                        Description
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked>
                        Errors
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="">
                        Initiator
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked>
                        Last update
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked disabled>
                        Process instance ID
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked>
                        Start date
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="" checked>
                        State
                      </label>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="">
                        something
                      </label>
                    </div>
                    <button class="btn btn-default">Reset Columns</button>

                  </div>
                  <hr class="kie-dock__divider"/>

                  <strong>Set Per View Limits</strong>
                  <div>Select the number of results to display, per view.</div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="kieViewLimitRadios" id="kieViewLimitRadios1" value="option1" checked>
                      10 (default)
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="kieViewLimitRadios" id="kieViewLimitRadios2" value="option2">
                      25
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="kieViewLimitRadios" id="kieViewLimitRadios3" value="option3">
                      50
                    </label>
                  </div>
                  <br/>

                </div>


              </div>
            </div>
          </div>
        </div>
        <!-- end left side filter controls -->

        <!-- Data area of page content -->
        <div class="col-md-7 col-lg-8" id="">


<!-- BEGIN PASTED FROM TABLE-VIEW -->
<div>This table pulled from the Process Instance table in the Workbench. It has been restyled with some CSS and some inline styles, where they already existed. The action button was replaced with a kebab menu. Look in the HTML for comments containing "SRAMBACH" to mark changes made.</div>
<div style="border: 2px solid darkred"><!-- this is just to mark where code was pulled in from the workbench -->
  <!-- COPIED FROM THE WORKBENCH GENERATED HTML ---------------------------------------------------------------------------------->

          <div class="GNMQHNUCMB" style="padding-right: 20px; padding-left: 20px;">
            <div class="row">
              <div class="col-md-12"></div>
            </div>

            <!-- THIS IS THE VERY TOP ROW ABOVE THE ACTUAL TABLE WITH THE COLUMNS BUTTON ON THE FAR RIGHT -->
            <table style="width: 100%;" cellspacing="0" cellpadding="0">
              <tbody>
              <tr>
                <td style="vertical-align: top;" width="33%" align="left">
                  <div class="GNMQHNUDMB" style="width: 100%;"></div>
                </td>
                <td style="vertical-align: top;" width="33%" align="left">
                  <div class="GNMQHNUBMB" style="width: 100%;"></div>
                </td>
                <td style="vertical-align: top;" width="33%" align="right">
                  <table cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                      <td style="vertical-align: top;" align="left">
                        <div class="GNMQHNUFMB" style="width: 100%;"></div>
                      </td>
                      <td style="vertical-align: top;" align="left">
                        <button type="button" class="btn btn-default GNMQHNUC5" data-toggle="button"
                                title="Show/hide columns"><i class="fa fa-columns"></i></button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              </tbody>
            </table>
            <!--------- END OF THE ROW WITH THE COLUMNS BUTTON ONLY ------------>

            <div>
              <div style="position: relative; overflow: hidden; height: 386px;"
                   __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true"
                   class="table GNMQHNUH5 GNMQHNUE5">
                <div
                    style="position: absolute; left: 0px; width: 100%; top: 0px; min-width: 20px; min-height: 20px; overflow: hidden;">
                  <div
                      style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                    <div style="height: 127px; width: 1647px;"></div>
                  </div>
                  <div
                      style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                    <div style="width: 200%; height: 200%;"></div>
                  </div>
                  <div>

                    <!-- THIS IS THE HEADER OF THE TABLE -->
                    <!-- SRAMBACH - Added kie-datatable here -->
                    <table style="table-layout: fixed; width: 100%; margin-bottom: 0px;"
                           class="table table-hover kie-datatable GNMQHNUG5 " cellspacing="0">
                      <colgroup>
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                      </colgroup>
                      <thead>
                      <tr __gwt_header_row="0">
                        <th colspan="1" class="gwtb3-d gwtb3-d gwtb3-d" __gwt_column="column-gwt-uid-500" role="button"
                            tabindex="-1" __gwt_header="header-gwt-uid-501">Name
                        </th>
                        <th colspan="1" class="gwtb3-d gwtb3-d" __gwt_column="column-gwt-uid-502" role="button"
                            tabindex="-1" __gwt_header="header-gwt-uid-503">Version
                        </th>
                        <th colspan="1" class="gwtb3-d gwtb3-d" __gwt_column="column-gwt-uid-504" role="button"
                            tabindex="-1" __gwt_header="header-gwt-uid-505">Project
                        </th>

                        <!-- SRAMBACH - ADDED TEXT-ALIGN:RIGHT -->
                        <th colspan="1" class="gwtb3-d gwtb3-d" style="text-align: right;" __gwt_column="column-gwt-uid-506"
                            __gwt_header="header-gwt-uid-507">Actions
                        </th>
                      </tr>
                      </thead>
                    </table>
                    <!-------------- END OF THE HEADER OF THE TABLE --------------->

                  </div>
                </div>
                <div
                    style="position: absolute; left: 0px; width: 100%; bottom: 0px; min-width: 20px; min-height: 20px; overflow: hidden; display: none;">
                  <div
                      style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                    <div style="height: 120px; width: 1647px;"></div>
                  </div>
                  <div
                      style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                    <div style="width: 200%; height: 200%;"></div>
                  </div>
                </div>
                <div style="position: absolute; left: 0px; width: 100%; overflow: hidden; top: 27px; height: 359px;">
                  <div class="GNMQHNUHI" style="position: relative; overflow: hidden; height: 100%;">
                    <div
                        style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"
                        aria-hidden="true">&nbsp;
                    </div>
                    <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                      <div style="position: absolute; overflow: scroll; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                        <div style="position: relative; min-width: 20px; min-height: 20px; display: block;"
                             class="GNMQHNUCB">
                          <div
                              style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                            <div style="height: 156px; width: 1647px;"></div>
                          </div>
                          <div
                              style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll; z-index: -1;">
                            <div style="width: 200%; height: 200%;"></div>
                          </div>

                          <!-- THIS IS THE ACTUAL TABLE WITH THE DATA -->
                          <!-- SRAMBACH - added kie-datatable class -->
                          <table style="table-layout: fixed; width: 100%;"
                                 class="table table-hover kie-datatable table-bordered GNMQHNUF5" cellspacing="0">
                            <colgroup>
                              <col style="width: 25%;">
                              <col style="width: 25%;">
                              <col style="width: 25%;">
                              <col style="width: 25%;">
                            </colgroup>
                            <tbody>
                            <tr __gwt_row="0" __gwt_subrow="0" class="even">
                              <td class="gwtb3-cell gwtb3-d gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-508">Order for IT hardware
                                </div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-509">1.0</div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-510">itorders_1.0.0-SNAPSHOT
                                </div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d gwtb3-d">
                                <!-- SRAMBACH - ADDED TEXT-ALIGN:RIGHT -->
                                <div style="outline-style:none; text-align:right;" __gwt_cell="cell-gwt-uid-511" tabindex="0">

                                  <!-- SRAMBACH - ADDED KEBAB INSTEAD OF BUTTON -->
                                  <span class="dropdown  dropdown-kebab-pf">
    <button class="btn btn-link dropdown-toggle" type="button" id="kieItemDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="kieItemDropdown1">
      <li><a href="#">Signal</a></li>
      <li><a href="#">Abort</a></li>
      <li class="divider"></li>
      <li><a href="#">View jobs</a></li>
      <li><a href="#">View tasks</a></li>
    </ul>
  </span>
                                  <!-- SRAMBACH - END OF ADDED KEBAB INSTEAD OF BUTTON -->

                                </div>
                              </td>
                            </tr>
                            <tr __gwt_row="1" __gwt_subrow="0" class="odd">
                              <td class="gwtb3-cell gwtb3-d gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-508">place-order</div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-509">1.0</div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d">
                                <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-510">itorders_1.0.0-SNAPSHOT
                                </div>
                              </td>
                              <td class="gwtb3-cell gwtb3-d gwtb3-d">
                                <!-- SRAMBACH - ADDED TEXT-ALIGN:RIGHT -->
                                <div style="outline-style:none; text-align: right;" __gwt_cell="cell-gwt-uid-511">


<!-- SRAMBACH - ADDED KEBAB INSTEAD OF BUTTON -->
  <span class="dropdown  dropdown-kebab-pf">
    <button class="btn btn-link dropdown-toggle" type="button" id="kieItemDropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="kieItemDropdown2">
      <li><a href="#">Signal</a></li>
      <li><a href="#">Abort</a></li>
      <li class="divider"></li>
      <li><a href="#">View jobs</a></li>
      <li><a href="#">View tasks</a></li>
    </ul>
  </span>
<!-- SRAMBACH - END OF ADDED KEBAB INSTEAD OF BUTTON -->


                                </div>
                              </td>
                            </tr>
                            </tbody>
                          </table>
                          <!------------------ END OF THE ACTUAL DATA TABLE ----------------->

                        </div>
                      </div>
                    </div>
                    <div
                        style="position: absolute; overflow: hidden; right: 0px; bottom: 0px; display: none; width: 0px; height: 0px;">
                      <div class="GNMQHNUII"
                           style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"></div>
                    </div>
                    <div
                        style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none;">
                      <div class="GNMQHNUPPB GNMQHNUCB"
                           style="height: 0px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                        <div class="GNMQHNUOPB GNMQHNUJI">
                          <div class="GNMQHNUNPB"></div>
                        </div>
                      </div>
                    </div>
                    <div
                        style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none;">
                      <div class="GNMQHNUOI GNMQHNUCB"
                           style="width: 0px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                        <div class="GNMQHNUNI GNMQHNULI">
                          <div></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- THIS IS THE ROW OF CONTROLS AT THE BOTTOM OF THE TABLE -->
            <table class="table" style="width: 100%;" cellspacing="0" cellpadding="0">
              <tbody>
              <tr>
                <td style="vertical-align: middle;" width="50%" align="left"><select class="form-control"
                                                                                     style="width: 100px;">
                  <option value="5">5 Items</option>
                  <option value="10">10 Items</option>
                  <option value="15">15 Items</option>
                  <option value="20">20 Items</option>
                </select></td>
                <td style="vertical-align: top;" width="50%" align="right">
                  <!-- SRAMBACH - Added kie-table--pagination class -->
                  <table class="kie-table--pagination pagination pagination-right pull-right GNMQHNUEMB" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                      <td style="vertical-align: middle;" class="GNMQHNUA5" align="left">
                        <button type="button" class="btn btn-default disabled" disabled=""><i
                            class="fa fa-angle-double-left"></i></button>
                      </td>
                      <td style="vertical-align: middle;" class="GNMQHNUA5" align="left">
                        <button type="button" class="btn btn-default disabled" disabled=""><i
                            class="fa fa-angle-left"></i></button>
                      </td>
                      <!-- SRAMBACH - kie-table__cell--separated could go on the TD or the DIV inside -->
                      <td style="vertical-align: middle;" class="GNMQHNUB5 " align="left">
                        <div class="gwt-HTML kie-table__cell--separated">1-2 of 2</div>
                      </td>
                      <td style="vertical-align: middle;" class="GNMQHNUA5" align="left">
                        <button type="button" class="btn btn-default disabled" disabled=""><i
                            class="fa fa-angle-right"></i></button>
                      </td>
                      <td style="vertical-align: middle;" class="GNMQHNUA5" align="left">
                        <button type="button" class="btn btn-default disabled" disabled="" style=""><i
                            class="fa fa-fast-forward"></i></button>
                      </td>
                      <td style="vertical-align: middle;" class="GNMQHNUA5" align="left">
                        <button type="button" class="btn btn-default disabled" disabled="" style=""><i
                            class="fa fa-angle-double-right"></i></button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              </tbody>
            </table>
            <!------------- END OF THE CONTROLS AT THE BOTTOM OF THE TABLE --------------->

          </div>

  <!-- END OF CODE COPIED FROM THE WORKBENCH GENERATED HTML ---------------------------------------------------------------------------------->
</div>


        </div>
        <!-- end of data area of page content -->
      </div>
    </div>
  </main>


</div><!-- kie-page -->

<!-- Help Modal -->
<div class="modal fade" id="help">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Help</h4>
      </div>
      <div class="modal-body">
        <div><img src="img/help.png" alt="" style="width: 568px;"/></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- end of Help Modal -->

<!-- About Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content about-modal-pf">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
      </div>
      <div class="modal-body">
        <h1 id="aboutModalTitle">
          <img class="kie-brand-icon" src="images/jbpm_logo_noshadow_100px.png" alt="JBoss BPM Suite"/>
        </h1>
        <div class="product-somethings-pf">
          <ul class="list-unstyled" id="aboutModalsomethings">
            <li><strong>something</strong> 0.0</li>
          </ul>
        </div>
        <div class="trademark-pf">
          jBPM is open source software, released under the <br>
          <strong>Apache Software License 2.0</strong>.
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End of About Modal -->

<!-- Preferences modal -->
<div class="modal fade" id="preferences">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Preferences</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">Language</label>
          <select class="form-control">
            <option value="default">English</option>
            <option value="de">German</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="ja">Japanese</option>
            <option value="pt_BR">Portuguese</option>
            <option value="zh_CN">Chinese (Simplified)</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label">View Mode</label>
          <div class="radio">
            <label><input type="radio" name="optradio">Basic</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio">Compact</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio">Advanced</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">Layouts</label>
          <p><a href="#">Reset Perspective Layouts</a></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- end of Preferences modal -->

</body>

<!-- initialize Bootstrap Datepicker-->
<script>
    // Initialize Bootstrap-datepicker
    $('.bootstrap-datepicker').datepicker({
        autoclose: true,
        todayBtn: "linked",
        todayHighlight: true
    });
</script>

</html>