github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/alert.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/siglens.css" /> 28 29 <script src="./js/lib/lodash.min.js"></script> 30 <script src="./js/lib/jquery-3.6.0.min.js"></script> 31 <script src="./js/lib/jquery-ui.min.js"></script> 32 <script src="./js/lib/js.cookie.min.js"></script> 33 <script src="./js/lib/moment.min.js"></script> 34 <script src="./js/lib/date_fns.min.js"></script> 35 <script src="./js/lib/popper.min.js"></script> 36 <script src="./js/lib/bootstrap.bundle.min.js"></script> 37 <script src="./js/lib/ag-grid-community.min.noStyle.js"></script> 38 {{ .RunCheck1 | safeHTML }} 39 </head> 40 41 <body data-theme="light"> 42 <div id="app-container"> 43 44 <div id="app-side-nav"> 45 </div> 46 47 <div id="alerting"> 48 <div class="alerts-nav-tab"> 49 </div> 50 <div class="upper-header"> 51 <p class="caption">Rules that determine whether an alert will fire 52 </p> 53 </div> 54 <!-- create alert form --> 55 <div class="form-container"> 56 <form id="alert-form"> 57 <div class="d-flex btn-container"> 58 <button class="btn" id="cancel-alert-btn" type="button" tabindex="9">Cancel</button> 59 <button class="btn" id="save-alert-btn" type="submit" tabindex="10">Save</button> 60 </div> 61 <div class="add-alert-form"> 62 <div class="subsection-heading"> 63 <div class="circle">1</div> 64 <div>Alert Rule</div> 65 </div> 66 <div class="alert-form-subsection"> 67 <label for="alert-rule-name">Rule name</label> 68 <input type="text" class="form-control" placeholder="Enter rule name" id="alert-rule-name" required tabindex="1"> 69 </div> 70 <div class="subsection-heading"> 71 <div class="circle">2</div> 72 <div>Query</div> 73 </div> 74 <div class="alert-form-subsection"> 75 <div class="query-lang-container"> 76 <div> 77 <button class="btn dropdown-toggle" type="button" id="alert-data-source" 78 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 79 data-bs-toggle="dropdown" title="Select Query Type"> 80 <span>Logs</span> 81 <img class="dropdown-arrow orange" src="assets/arrow-btn.svg"> 82 <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg"> 83 </button> 84 <div class="dropdown-menu box-shadow" id="data-source-options"> 85 <li id="option-1" class="data-source-option active">Logs</li> 86 </div> 87 </div> 88 <div> 89 <button class="btn dropdown-toggle" type="button" id="logs-language-btn" 90 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 91 data-bs-toggle="dropdown" title="Select Query Type" style="display: none;"> 92 <span>Splunk QL</span> 93 <img class="dropdown-arrow orange" src="assets/arrow-btn.svg"> 94 <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg"> 95 </button> 96 <div class="dropdown-menu box-shadow" id="logs-language-options"> 97 <li id="option-1" class="logs-language-option active">Splunk QL</li> 98 </div> 99 </div> 100 <div class="dropdown timepicker"> 101 <button class="btn dropdown-toggle" type="button" id="date-picker-btn" 102 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 103 data-bs-toggle="dropdown" title="Pick the time window"> 104 <span>Time Picker</span> 105 <img class="dropdown-arrow orange" src="assets/arrow-btn.svg"> 106 <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg"> 107 </button> 108 <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" 109 id="daterangepicker "> 110 <p class="dt-header">Search the last</p> 111 <div class="ranges"> 112 <div class="inner-range"> 113 <div id="now-5m" class="range-item ">5 Mins</div> 114 <div id="now-3h" class="range-item">3 Hrs</div> 115 <div id="now-2d" class="range-item">2 Days</div> 116 </div> 117 <div class="inner-range"> 118 <div id="now-15m" class="range-item">15 Mins</div> 119 <div id="now-6h" class="range-item">6 Hrs</div> 120 <div id="now-7d" class="range-item">7 Days</div> 121 </div> 122 <div class="inner-range"> 123 <div id="now-30m" class="range-item">30 Mins</div> 124 <div id="now-12h" class="range-item">12 Hrs</div> 125 <div id="now-30d" class="range-item">30 Days</div> 126 </div> 127 <div class="inner-range"> 128 <div id="now-1h" class="range-item">1 Hr</div> 129 <div id="now-24h" class="range-item">24 Hrs</div> 130 <div id="now-90d" class="range-item">90 Days</div> 131 </div> 132 </div> 133 </div> 134 </div> 135 </div> 136 <div class="query-container position-relative"> 137 <input type="text" class="form-control" placeholder="Enter a query" id="query" required tabindex="2"> 138 139 <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" 140 id="info-icon-spl" style="display: block;" title='city=Boston | stats count 141 city=* | stats avg(latency) 142 '></i> 143 </div> 144 </div> 145 <div class="subsection-heading"> 146 <div class="circle">3</div> 147 <div>Set Condition</div> 148 </div> 149 <div class="alert-form-subsection"> 150 <div class="condition-container"> 151 <div class="dropdown"> 152 <button class="btn dropdown-toggle" type="button" id="alert-condition" 153 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 154 data-bs-toggle="dropdown"> 155 <span>Is above</span> 156 <img class="dropdown-arrow orange" src="assets/arrow-btn.svg"> 157 </button> 158 <div class="dropdown-menu box-shadow alert-condition-options" 159 aria-labelledby="index-btn"> 160 <li id="option-0" class="alert-condition-option active">Is above</li> 161 <li id="option-1" class="alert-condition-option">Is below</li> 162 <li id="option-2" class="alert-condition-option">Equal to</li> 163 <li id="option-3" class="alert-condition-option">Not equal to</li> 164 </div> 165 </div> 166 <div class="condition-value"> 167 <input type="number" name="condition-value" min="0" step="1" id="threshold-value" 168 value="0" class="form-control" tabindex="3"> 169 </div> 170 </div> 171 <div class="evaluation-container position-relative"> 172 <div> 173 <label for="evaluation-interval" id="label-evaluate-every">Evaluate every 174 <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" 175 id="info-evaluate-every" style="display: block;" title='How often the alert will be evaluated to see if it fires'> 176 </i> 177 </label> 178 179 <input type="number" name="evaluate-every" min="0" id="evaluate-every" value="1" tabindex="4" 180 class="form-control" step="any"></input>min 181 <span style="margin-left: 10px;" id="for-span"> 182 for 183 <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" 184 id="info-evaluate-for" style="display: block;" title='Once condition is breached, alert will go into pending state. 185 If it is pending for longer than the "for" value, it will become a firing alert.'> 186 </i> 187 </span> 188 <input type="number" name="evaluate-every" id="evaluate-for" value="1" min="0" tabindex="5" 189 class="form-control"></input>min 190 </div> 191 </div> 192 </div> 193 <div class="subsection-heading"> 194 <div class="circle">4</div> 195 <div>Notification</div> 196 </div> 197 <div class="alert-form-subsection"> 198 <div class="notification-container"> 199 <div> 200 Send to 201 </div> 202 <div class="dropdown"> 203 <button class="btn dropdown-toggle" type="button" id="contact-points-dropdown" 204 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 205 data-bs-toggle="dropdown"> 206 <span>Choose</span> 207 <img class="dropdown-arrow orange" src="assets/arrow-btn.svg"> 208 </button> 209 <div class="dropdown-menu box-shadow contact-points-options" 210 aria-labelledby="index-btn"> 211 <li id="option-0" class="contact-points-option">Add New</li> 212 </div> 213 </div> 214 </div> 215 <div class="message-info" id="message-info"> 216 Message<textarea name="message" id="notification-msg" rows="4" class="message form-control" tabindex="6" 217 required></textarea> 218 </div> 219 </div> 220 <div class="label-subsection"> 221 <label for="custom-label">Custom Label</label> 222 <div class="d-flex align-items-end mb-0"> 223 <div class="label-main-container mb-0"> 224 <div class="label-container d-flex align-items-center"> 225 <input type="text" id="label-key" class="form-control" placeholder="Label name" tabindex="7" 226 value="alerting"><span class="label-equal"> = </span> <input type="text" 227 id="label-value" class="form-control" placeholder="Value" value="true" tabindex="8"> 228 </div> 229 </div> 230 <button class="add-label-container btn" type="button">Add Label</button> 231 </div> 232 </div> 233 </div> 234 </form> 235 </div> 236 <!-- Overlay --> 237 <div class="popupOverlay"> 238 </div> 239 <!-- Add contact point popup --> 240 <div class="popupContent" id="add-new-contact-popup"> 241 <h3 class="header">Create Contact Point</h3> 242 <div class="form-container" id="contact-form-container"> 243 </div> 244 </div> 245 </div> 246 247 <div id="app-footer"> 248 2023 © SigLens 249 </div> 250 251 </div> 252 253 <script src="./js/navbar.js?cb=1_1_10"></script> 254 <script src="./js/common.js?cb=1_1_10"></script> 255 <script src="./js/event-handlers.js?cb=1_1_10"></script> 256 <script src="./js/date-picker.js?cb=1_1_10"></script> 257 <script src="./js/contacts.js?cb=1_1_10"></script> 258 <script src="./js/alert.js?cb=1_1_10"></script> 259 <script src="./component/upper-navbar/upper-navbar.js"></script> 260 261 {{ .RunCheck2 | safeHTML }} 262 {{ .RunCheck3 | safeHTML }} 263 </body> 264 265 </html>