github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3      <script async src="https://www.googletagmanager.com/gtag/js?id=G-5SBJC04YFB"></script>
     4      <script>
     5          window.dataLayer = window.dataLayer || [];
     6          function gtag(){dataLayer.push(arguments);}
     7          gtag('js', new Date());
     8      
     9          gtag('config', 'G-5SBJC04YFB');
    10      </script>
    11      
    12  <head>
    13      <meta charset="UTF-8">
    14      <title>SigLens</title>
    15  
    16      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    17      <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    18      <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    19      <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    20      <link rel="manifest" href="assets/site.webmanifest">
    21      <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
    22      <meta name="msapplication-TileColor" content="#da532c">
    23  
    24      <link rel="stylesheet" href="./css/lib/bootstrap.min.css" />
    25      <link rel="stylesheet" href="./css/lib/all.min.css" />
    26      <link rel="stylesheet" href="./css/lib/ag-grid.min.css" />
    27      <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    28      <link rel="stylesheet" href="./css/lib/jquery.tagsinput.min.css" />
    29      <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    30      <link rel="stylesheet" href="./css/siglens.css" />
    31      <link rel="stylesheet" href="./css/query-builder.css" />
    32  
    33      <script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>
    34      <script src="./js/lib/lodash.min.js"></script>
    35      <script src="./js/lib/jquery-3.6.0.min.js"></script>
    36      <script src="./js/lib/jquery-ui.min.js"></script>
    37      <script src="./js/lib/js.cookie.min.js"></script>
    38      <script src="./js/lib/moment.min.js"></script>
    39      <script src="./js/lib/date_fns.min.js"></script>
    40      <script src="./js/lib/popper.min.js"></script>
    41      <script src="./js/lib/bootstrap.bundle.min.js"></script>
    42      <script src="./js/lib/ag-grid-community.min.noStyle.js"></script>
    43  
    44      {{ .RunCheck1 | safeHTML }}
    45  </head>
    46  
    47  <body data-theme="light">
    48      <div class="pop-layer" id="pop-layer">
    49      </div>
    50      <div id="app-container">
    51  
    52          <div id="app-side-nav">
    53          </div>
    54  
    55          <div id="dashboard" class="dashboard-box">
    56              <div id = "custom-code-tab" class="custom-code-tab">
    57                  <ul class="tab-list">
    58                      <li class="tab-li tab-li-query" id = "tab-title1"><a href="#tabs-1" class="custom-query-builder">Query Builder</a></li>
    59                      <li class="tab-li tab-li-code" id = "tab-title2"><a href="#tabs-2"  class="custom-query-builder">Free Text</a></li>
    60                  </ul>
    61                  <div id = "tabs-1">
    62                      <div class="query-box">
    63                          <div class="position-relative"> <!-- Position relative -->
    64                              <input class="form-control query-text" id="query-input" type="text" disabled="disabled">
    65                              <button id="clear-query-btn" class="clear-query-btn">x</button> <!-- Added clear button -->
    66                          </div>
    67                          <button class="search-img" id="query-builder-btn"></button>
    68                      </div>
    69                      <div class="filter-info">
    70                          <div id="filter-container">
    71                              <div class="filter-con">
    72                                  <div class="filter-box" id="filter-box-1">
    73                                      <span class = "aggregations" id="search-filter-text">Search Filter</span>
    74                                      <ul id="tags" class="tags-list"></ul>
    75                                      <button id="add-con" class="add-con btn">+</button>
    76                                  </div>
    77                                  <div class="add-filter" id="add-filter">
    78                                      <input id="column-first" class="column-first" type="hidden" onkeyup="checkContent(this)"/>
    79                                      <input id="symbol" class="symbol" type="hidden" onkeyup="checkContent(this)"/>
    80                                      <input id="value-first" class="value-first" type="hidden" onkeyup="checkContent(this)"/>
    81                                      <button id="completed" class="completed btn"></button>
    82                                      <button id="cancel-enter" class="cancel-enter btn">x</button>
    83                                  </div>
    84                              </div>
    85                          </div>
    86                          <div class="display-rule">
    87                              <div class="filter-con second-enter">
    88                                  <div class="filter-box" id="filter-box-2">
    89                                      <span class = "aggregations" id="aggregate-attribute-text">Aggregate Attribute</span>
    90                                      <ul id="tags-second" class="tags-list"></ul>
    91                                      <button id="add-con-second" class="add-con btn">+</button>
    92                                  </div>
    93                                  <div class="add-filter add-filters" id="add-filter-second">
    94                                      <input id="column-second" class="column-first" type="hidden" onkeyup="checkSecondContent(this)"/>
    95                                      <input id="value-second" class="value-first" type="hidden" onkeyup="checkSecondContent(this)"/>
    96                                      <button id="completed-second" class="completed btn" ></button>
    97                                      <button id="cancel-enter-second" class="cancel-enter btn">x</button>
    98                                  </div>
    99                              </div>
   100                              <div class="filter-con third-enter">
   101                                  <div class="filter-box third-box"  id="filter-box-3">
   102                                      <span class = "aggregations" id="aggregations">Search Criteria</span>
   103                                      <ul id="tags-third" class="tags-list"></ul>
   104                                      <button id="add-con-third" class="add-con btn">+</button>
   105                                  </div>
   106                                  <div class="add-filter add-third" id="add-filter-third">
   107                                      <input id="column-third" class="column-third" type="hidden" />
   108                                      <button id="cancel-enter-third" class="cancel-enter btn">x</button>
   109                                  </div>
   110                              </div>
   111                          </div>
   112                      </div>
   113                  </div>
   114                  <div id = "tabs-2">
   115                      <div class="filter-container">
   116                          <div class="position-relative search-bar-container">
   117                              <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-sql" style="display: none;"
   118                                  title=' SELECT MAX(latency), COUNT(city) FROM `*` GROUP BY country, gender LIMIT 10
   119                                                                      SELECT * FROM `ind-0`
   120                                                                      SELECT * FROM `ind-0` ORDER BY latency ASC
   121                                                                      SELECT first_name AS firstnames, country AS origincountry FROM `ind-0`
   122                                                                      SELECT MAX(latency), COUNT(city) FROM `*` WHERE gender = male GROUP BY country LIMIT 10
   123                                                                      SELECT * FROM `*` WHERE app_name = Wheataccount AND gender = male LIMIT 10'>
   124                          
   125                              </i>
   126                              <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-logQL" style="display: none;"
   127                                  title=' {app="mysql",name="mysql-backup"}
   128                                                                      {job="mysql"} |= "error"
   129                                                                      {name="cassandra"} |~ error=\w+
   130                                                                      {job="mysql"} |= "error" != "timeout"
   131                                                                      {job="mysql"} |= "error" | json | line_format "&lbrace;{.err}&rbrace;"
   132                                                                      '>
   133                              </i>
   134                              <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-spl" style="display: block;"
   135                                  title=' app_version!=2.14.2 AND weekday=T*day
   136                                                                      city=Boston | stats count, avg(latency) BY weekday, http_method
   137                                                                      city=Boston | stats avg(latency) AS Avg BY weekday | eval Millis=Avg / 1000, Millis=Millis . " ms"
   138                                                                      city=Boston | ```This is a comment``` fields http*
   139                                                                      http_method=POST | regex city="^[a-zA-Z]+\s[a-zA-Z]+$" | fields city
   140                                                                      city=Boston | stats count AS Count BY weekday | where Count / 2 > 6 OR weekday = "Saturday"
   141                                                                      '>
   142                              </i>
   143                              <input class="form-control" id="filter-input"
   144                                  placeholder="Enter your SPL query here, or click the 'i' icon for examples" type="text">
   145                              <span class="clear-icon" id="clearInput" title="Clear"></span>
   146                          </div>
   147                          <div class="text-end">
   148                              <button class="btn run-filter-btn" id="run-filter-btn" title="Run your search"></button>
   149                          </div>
   150                      </div>
   151                  </div>
   152              </div>
   153              <div class="dropdown-box">
   154                  <div class="dropdown">
   155                      <button class="btn dropdown-toggle" type="button" id="query-language-btn" data-toggle="dropdown"
   156                          aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" title="Select Query Type">
   157                          <span>Splunk QL</span>
   158                          <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
   159                          <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
   160                      </button>
   161                      <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="query-language-options">
   162                          <li id="option-1" class="query-language-option">SQL</li>
   163                          <li id="option-2" class="query-language-option">Log QL</li>
   164                          <li id="option-3" class="query-language-option active">Splunk QL</li>
   165                      </div>
   166                  </div>
   167                  <div class="dropdown">
   168                      <button class="btn dropdown-toggle" type="button" id="index-btn" data-toggle="dropdown" aria-haspopup="true"
   169                          aria-expanded="false" data-bs-toggle="dropdown" title="Index Name to search on">
   170                          <span>Index</span>
   171                          <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
   172                          <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
   173                      </button>
   174                      <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="available-indexes">
   175                          <div id="index-listing"></div>
   176                      </div>
   177                  </div>
   178                  <div class="dropdown">
   179                      <button class="btn dropdown-toggle" type="button" id="date-picker-btn" data-toggle="dropdown" aria-haspopup="true"
   180                          aria-expanded="false" data-bs-toggle="dropdown" title="Pick the time window">
   181                          <span>Time Picker</span>
   182                          <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
   183                          <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
   184                      </button>
   185                      <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" id="daterangepicker ">
   186                          <p class="dt-header">Search the last</p>
   187                          <div class="ranges">
   188                              <div class="inner-range">
   189                                  <div id="now-5m" class="range-item ">5 Mins</div>
   190                                  <div id="now-3h" class="range-item">3 Hrs</div>
   191                                  <div id="now-2d" class="range-item">2 Days</div>
   192                              </div>
   193                              <div class="inner-range">
   194                                  <div id="now-15m" class="range-item">15 Mins</div>
   195                                  <div id="now-6h" class="range-item">6 Hrs</div>
   196                                  <div id="now-7d" class="range-item">7 Days</div>
   197                              </div>
   198                              <div class="inner-range">
   199                                  <div id="now-30m" class="range-item">30 Mins</div>
   200                                  <div id="now-12h" class="range-item">12 Hrs</div>
   201                                  <div id="now-30d" class="range-item">30 Days</div>
   202                              </div>
   203                              <div class="inner-range">
   204                                  <div id="now-1h" class="range-item">1 Hr</div>
   205                                  <div id="now-24h" class="range-item">24 Hrs</div>
   206                                  <div id="now-90d" class="range-item">90 Days</div>
   207                              </div>
   208                              <hr>
   209                              </hr>
   210                              <div class="dt-header">Custom Search <span id="reset-timepicker" type="reset">Reset</span>
   211                              </div>
   212                              <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
   213                                  <input type="date" id="date-start" />
   214                                  <input type="time" id="time-start" value="00:00" />
   215                              </div>
   216                              <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
   217                                  <input type="date" id="date-end">
   218                                  <input type="time" id="time-end" value="00:00">
   219                              </div>
   220                              <div class="drp-buttons">
   221                                  <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn" type="button">Apply</button>
   222                              </div>
   223                          </div>
   224                      </div>
   225                  </div>
   226              </div>
   227              <div id="progress-div"></div>
   228  
   229              
   230              <div id="custom-chart-tab" class="custom-code-tab custom-chart-tab">
   231                  <ul class="tab-chart-list">
   232                      <li class="tab-li" id="tab-table-title"><a href="#showTable" class="custom-query-builder">Table</a>
   233                      </li>
   234                      <li class="tab-li" id="tab-chart-title"><a href="#tabs-chart" class="custom-query-builder">Visualization</a>
   235                      </li>
   236                  </ul>
   237                  <div id="logs-view-controls">
   238                      <div id="save-query-div" class="save-query-div">
   239                          <button class="btn saveq-btn below-btn-img" id="saveq-btn" title="Save Query"></button>
   240                          <button class="btn add-logs-to-db-btn below-btn-img" id="add-logs-to-db-btn" class="mx-3" title="Add panel to dashboard"></button>
   241                          <button class="btn mx-2 alert-from-logs-btn below-btn-img" id="alert-from-logs-btn" title="Create Alert"></button>
   242                          <div class="dropdown download-btn">
   243                              <button class="btn dropdown-toggle download-all-logs-btn below-btn-img" type="button" data-toggle="dropdown"
   244                                  aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" title="Download Logs">
   245                              </button>
   246                              <div class="dropdown-menu box-shadow download-options" aria-labelledby="index-btn" id="save-query-options">
   247                                  <li id="csv-block" class="query-language-option">Download as CSV</li>
   248                                  <li id="json-block" class="query-language-option">Download as JSON</li>
   249                              </div>
   250                          </div>
   251                          <button class="btn show-record-intro-btn below-btn-img" id="show-record-intro-btn"  title="Query Response Information"></button>
   252                      </div>
   253                      <div id="views-container">
   254                          <div class="btn-group" role="group" id="log-view">
   255                              <button class="btn log-opt-single-btn" id="log-opt-single-btn">
   256                                  <span class="single-line-icon" title="Single Line Display View"></span>
   257                              </button>
   258                              <button class="btn log-opt-multi-btn" id="log-opt-multi-btn">
   259                                  <span class="multi-line-icon" title="Wrap Line Display View"></span>
   260                              </button>
   261                              <button class="btn log-opt-table-btn" id="log-opt-table-btn">
   262                                  <span class="table-view-icon" title="Table Display View"></span>
   263                              </button>
   264                          </div>
   265                          <div class="dropdown">
   266                              <button class="btn dropdown-toggle avail-fields-btn" title="Select field names to display" type="button"
   267                                  id="avail-fields-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
   268                                  data-bs-toggle="dropdown">
   269                                  <i class="fa-solid fa-list-check" title="Select field names to display"></i>&nbsp;
   270                                  Available Fields
   271                                  <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
   272                                  <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
   273                              </button>
   274                              <div class="dropdown-menu box-shadow" aria-labelledby="avail-fields-btn" id="available-fields">
   275                  
   276                                  <div class="select-unselect-header" id="select-unselect-header">
   277                                      Select/Unselect All
   278                                      <img class="select-unselect-checkbox" src="assets/available-field-checkbox.svg">
   279                                  </div>
   280                                  <div class="fields"></div>
   281                              </div>
   282                          </div>
   283                      </div>
   284                  </div>
   285                  <div id="tabs-chart" class="tab-content-size">
   286                      <div id="columnChart" class="column-chart"></div>
   287                      <div id="hideGraph" class="hide-graph">
   288                          <div class="hide-graph-text">This query does not contain visualization data</div>
   289                      </div>
   290                  </div>
   291                  <div id="showTable" class="show-table">
   292                      <div id="logs-result-container" class="tab-content-size">
   293                          <div id="LogResultsGrid" class="LogResultsGrid ag-theme-mycustomtheme"></div>
   294                      </div>
   295                      <div id="agg-result-container" class="tab-content-size">
   296                          <div id="measureAggGrid" class="measureAggGrid ag-theme-mycustomtheme"></div>
   297                      </div>
   298                  </div>
   299              </div>
   300              <div id="empty-response"></div>
   301              
   302             
   303  
   304              <div id="corner-popup">
   305                  <div class="corner-container">
   306                      <div class="corner-text" id="corner-text"></div>
   307                  </div>
   308                  <button class="btn corner-btn-close" id="close-btn">OK</button>
   309              </div>
   310  
   311          </div>
   312  
   313          <div id="save-queries" title="Save Query">
   314              <p class="validateTips"></p>
   315              <form>
   316                  <fieldset>
   317                      <input type="text" name="qname" id="qname" placeholder="Name"
   318                          class="text ui-widget-content ui-corner-all">
   319                      <input type="text" name="description" id="description" placeholder="Description (Optional)"
   320                          class="text ui-widget-content ui-corner-all">
   321                      <!-- Allow form submission with keyboard without duplicating the dialog button -->
   322                      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
   323                  </fieldset>
   324              </form>
   325          </div>
   326          <div class="show-record-popup" id="show-record-popup" title="record">
   327              <form>
   328                  <fieldset>
   329                      <div id="hits-summary" class="hits-summary"></div>
   330                  </fieldset>
   331              </form>
   332          </div>
   333          <div id="download-info" title="Download" class="save-query">
   334              <p class="validateTips" id="validateTips"></p>
   335              <form>
   336                  <fieldset>
   337                      <input type="text" name="qnameDL" id="qnameDL" placeholder="Name"
   338                          class="text ui-widget-content ui-corner-all">
   339                      <!-- Allow form submission with keyboard without duplicating the dialog button -->
   340                      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
   341                  </fieldset>
   342              </form>
   343          </div>
   344          <div class="pop-download" id="pop-box">
   345              <div class="pop-text">Downloading Logs</div>
   346              <button class="btn cancel-loading" id="cancel-loading">Cancel</button>
   347          </div>
   348          <div id="progressbar" class="progress-download"></div>
   349          <!-- Dashboard Popup-->
   350          <div class="popupOverlay"></div>
   351          <div class="popupContent" id="create-db-popup">
   352              <h3 class="header mb-2">Add panel to dashboard</h3>
   353              <p>Choose where to add the panel</p>
   354              <div class="section-buttons mt-2">
   355                  <div class="section-button active new-dashboard-btn" style="width: 155px;"><a>New Dashboard</a></div>
   356                  <div class="section-button existing-dashboard-btn" style="width: 185px;"><a>Existing Dashboard</a></div>
   357              </div>
   358              <div class="new-dashboard">
   359                  <div>
   360                      <input type="text" placeholder="Name" class="input mt-3" id="db-name">
   361                      <p class="error-tip">Dashboard name is required!</p>
   362                      <input type="text" placeholder="Description (Optional)" class="input mt-3" id="db-description">
   363                  </div>
   364              </div>
   365              <div class="existing-dashboard">
   366                  <p for="" class="mt-3 mb-3"><small>Select in which dashboard the panel will be created.</small></p>
   367                  <div class="dropdown">
   368                      <button class="btn dropdown-toggle" type="button" id="selected-dashboard" data-toggle="dropdown"
   369                          aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" title="Choose Dashboard">
   370                          <span>Choose Dashboard</span>
   371                          <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
   372                          <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
   373                      </button>
   374                      <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="dashboard-options">
   375                      </div>
   376                  </div>
   377              </div>
   378              <div class="d-flex align-items-center justify-content-center mt-4">
   379                  <button type="button" id="cancel-dbbtn" class="my-0 btn">Cancel</button>
   380                  <button type="button" id="create-db" class="btn create-db">Create Dashboard</button>
   381                  <button type="button" id="create-panel" class="btn create-db">Create Panel</button>
   382              </div>
   383          </div>
   384  
   385          <div id="app-footer">
   386              2023 &copy; SigLens
   387          </div>
   388  
   389      </div>
   390  
   391      <script src="./js/navbar.js?cb=1_1_10"></script>
   392      <script src="./js/common.js?cb=1_1_10"></script>
   393      <script src="./js/event-handlers.js?cb=1_1_10"></script>
   394      <script src="./js/available-fields.js?cb=1_1_10"></script>
   395      <script src="./js/log-results-grid.js?cb=1_1_10"></script>
   396      <script src="./js/ag-grid-seg-stats.js?cb=1_1_10"></script>
   397      <script src="./js/date-picker.js?cb=1_1_10"></script>
   398      <script src="./js/search.js?cb=1_1_10"></script>
   399      <script src="./js/saved-query.js?cb=1_1_10"></script>
   400      <script src="./js/download-logs.js?cb=1_1_10"></script>
   401      <script src="./js/index.js?cb=1_1_10"></script>
   402      <script src="./js/log-search.js?cb=1_1_10"></script>
   403      <script src="./js/dashboard-from-logs.js?cb=1_1_10"></script>
   404      <script src="./js/query-builder.js"></script>
   405      <script src="./js/lib/echarts.min.js"></script>
   406  
   407      {{ .RunCheck2 | safeHTML }}
   408      {{ .RunCheck3 | safeHTML }}
   409  
   410  </body>
   411  
   412  </html>