query.editor.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
  2. <div class="gf-form-inline">
  3. <div class="gf-form">
  4. <label class="gf-form-label query-keyword width-7">Scenario</label>
  5. <div class="gf-form-select-wrapper width-15">
  6. <select class="gf-form-input" ng-model="ctrl.target.scenarioId" ng-options="v.id as v.name for v in ctrl.scenarioList" ng-change="ctrl.scenarioChanged()" aria-label="Scenario Select"></select>
  7. </div>
  8. </div>
  9. <div class="gf-form gf-form gf-form--grow" ng-if="ctrl.scenario.stringInput">
  10. <label class="gf-form-label query-keyword">String Input</label>
  11. <input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
  12. </div>
  13. <div class="gf-form">
  14. <label class="gf-form-label query-keyword">Alias</label>
  15. <input type="text" class="gf-form-input max-width-7" placeholder="optional" ng-model="ctrl.target.alias" ng-change="ctrl.refresh()" ng-model-onblur>
  16. </div>
  17. <div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
  18. <label class="gf-form-label query-keyword">
  19. Labels
  20. <info-popover mode="right-normal">
  21. Set labels using a key=value syntax:<br/>
  22. {key="value", key2="value"}<br/>
  23. key="value", key2="value"<br/>
  24. key=value, key2=value<br/>
  25. </info-popover>
  26. </label>
  27. <input type="text" class="gf-form-input gf-form--grow" placeholder='key=value, key2=value2' ng-model="ctrl.target.labels" ng-change="ctrl.refresh()" ng-model-onblur>
  28. </div>
  29. <div ng-if="!ctrl.showLabels" class="gf-form gf-form--grow">
  30. <div class="gf-form-label gf-form-label--grow"></div>
  31. </div>
  32. </div>
  33. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'manual_entry'">
  34. <div class="gf-form gf-form">
  35. <label class="gf-form-label query-keyword width-7">New value</label>
  36. <input type="number" class="gf-form-input width-15" placeholder="value" ng-model="ctrl.newPointValue">
  37. <label class="gf-form-label query-keyword">Time</label>
  38. <input type="string" class="gf-form-input width-12" placeholder="time" ng-model="ctrl.newPointTime" input-datetime>
  39. <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addPoint()">Add</button>
  40. <label class="gf-form-label query-keyword">All values</label>
  41. <gf-form-dropdown css-class="width-12" model="ctrl.selectedPoint" get-options="ctrl.getPoints()" on-change="ctrl.pointSelected($option)">
  42. </gf-form-dropdown>
  43. </div>
  44. <div class="gf-form gf-form" ng-if="ctrl.selectedPoint.value !== null">
  45. <button class="btn btn-danger gf-form-btn" ng-click="ctrl.deletePoint()">Delete</button>
  46. </div>
  47. <div class="gf-form gf-form--grow">
  48. <div class="gf-form-label gf-form-label--grow"></div>
  49. </div>
  50. </div>
  51. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'streaming_client'">
  52. <div class="gf-form gf-form">
  53. <label class="gf-form-label query-keyword width-7">Type</label>
  54. <div class="gf-form-select-wrapper">
  55. <select
  56. ng-model="ctrl.target.stream.type"
  57. class="gf-form-input"
  58. ng-options="type for type in ['signal','logs', 'fetch']"
  59. ng-change="ctrl.streamChanged()" />
  60. </select>
  61. </div>
  62. </div>
  63. <div class="gf-form">
  64. <label class="gf-form-label query-keyword">Speed (ms)</label>
  65. <input type="number"
  66. class="gf-form-input width-5"
  67. placeholder="value"
  68. ng-model="ctrl.target.stream.speed"
  69. min="10"
  70. step="10"
  71. ng-change="ctrl.streamChanged()" />
  72. </div>
  73. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  74. <label class="gf-form-label query-keyword">Spread</label>
  75. <input type="number"
  76. class="gf-form-input width-5"
  77. placeholder="value"
  78. ng-model="ctrl.target.stream.spread"
  79. min="0.5"
  80. step="0.1"
  81. ng-change="ctrl.streamChanged()" />
  82. </div>
  83. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  84. <label class="gf-form-label query-keyword">Noise</label>
  85. <input type="number"
  86. class="gf-form-input width-5"
  87. placeholder="value"
  88. ng-model="ctrl.target.stream.noise"
  89. min="0"
  90. step="0.1"
  91. ng-change="ctrl.streamChanged()" />
  92. </div>
  93. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  94. <label class="gf-form-label query-keyword">Bands</label>
  95. <input type="number"
  96. class="gf-form-input width-5"
  97. placeholder="bands"
  98. ng-model="ctrl.target.stream.bands"
  99. min="0"
  100. step="1"
  101. ng-change="ctrl.streamChanged()" />
  102. </div>
  103. <div class="gf-form gf-form--grow" ng-if="ctrl.target.stream.type === 'fetch'">
  104. <label class="gf-form-label query-keyword">URL</label>
  105. <input type="string"
  106. class="gf-form-input gf-form-label--grow"
  107. placeholder="Fetch URL"
  108. ng-model="ctrl.target.stream.url"
  109. ng-change="ctrl.streamChanged()"
  110. ng-model-onblur />
  111. </div>
  112. <div class="gf-form gf-form--grow" ng-if="ctrl.target.stream.type !== 'fetch'">
  113. <div class="gf-form-label gf-form-label--grow"></div>
  114. </div>
  115. </div>
  116. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'logs'">
  117. <div class="gf-form">
  118. <label class="gf-form-label query-keyword">Lines</label>
  119. <input type="number"
  120. class="gf-form-input width-5"
  121. placeholder="10"
  122. ng-model="ctrl.target.lines"
  123. ng-change="ctrl.refresh()"
  124. ng-model-onblur />
  125. </div>
  126. <div class="gf-form">
  127. <gf-form-switch class="gf-form" label="Level" label-class="query-keyword width-5" checked="ctrl.target.levelColumn" switch-class="max-width-6" on-change="ctrl.refresh()"></gf-form-switch>
  128. </div>
  129. </div>
  130. <!-- Predictable Pulse Scenario Options Form -->
  131. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_pulse'">
  132. <div class="gf-form">
  133. <label class="gf-form-label query-keyword width-7">
  134. Step
  135. <info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
  136. </label>
  137. <input type="number"
  138. class="gf-form-input width-5"
  139. placeholder="60"
  140. ng-model="ctrl.target.pulseWave.timeStep"
  141. ng-change="ctrl.refresh()"
  142. ng-model-onblur />
  143. </div>
  144. <div class="gf-form">
  145. <label class="gf-form-label query-keyword width-7">
  146. On Count
  147. <info-popover mode="right-normal">The number of values within a cycle, at the start of the cycle, that should have the onValue.</info-popover>
  148. </label>
  149. <input type="number"
  150. class="gf-form-input width-3"
  151. placeholder="3"
  152. ng-model="ctrl.target.pulseWave.onCount"
  153. ng-change="ctrl.refresh()"
  154. ng-model-onblur />
  155. </div>
  156. <div class="gf-form">
  157. <label class="gf-form-label query-keyword width-7">
  158. Off Count
  159. <info-popover mode="right-normal">The number of offValues within the cycle.</info-popover>
  160. </label>
  161. <input type="number"
  162. class="gf-form-input width-3"
  163. placeholder="6"
  164. ng-model="ctrl.target.pulseWave.offCount"
  165. ng-change="ctrl.refresh()"
  166. ng-model-onblur />
  167. </div>
  168. <div class="gf-form">
  169. <label class="gf-form-label query-keyword width-7">
  170. On Value
  171. <info-popover mode="right-normal">The value for "on values", may be a int, float, or null.</info-popover>
  172. </label>
  173. <input type="string"
  174. class="gf-form-input width-5"
  175. placeholder="1"
  176. ng-model="ctrl.target.pulseWave.onValue"
  177. ng-change="ctrl.refresh()"
  178. ng-model-onblur />
  179. </div>
  180. <div class="gf-form">
  181. <label class="gf-form-label query-keyword width-7">
  182. Off Value
  183. <info-popover mode="right-normal">The value for "off values", may be a int, float, or null.</info-popover>
  184. </label>
  185. <input type="string"
  186. class="gf-form-input width-5"
  187. placeholder="1"
  188. ng-model="ctrl.target.pulseWave.offValue"
  189. ng-change="ctrl.refresh()"
  190. ng-model-onblur />
  191. </div>
  192. </div>
  193. <!-- Predictable CSV Wave Scenario Options Form -->
  194. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_csv_wave'">
  195. <div class="gf-form">
  196. <label class="gf-form-label query-keyword width-7">
  197. Step
  198. <info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
  199. </label>
  200. <input type="number"
  201. class="gf-form-input width-5"
  202. placeholder="60"
  203. ng-model="ctrl.target.csvWave.timeStep"
  204. ng-change="ctrl.refresh()"
  205. ng-model-onblur />
  206. </div>
  207. <div class="gf-form gf-form--grow">
  208. <label class="gf-form-label query-keyword width-10">
  209. CSV Values
  210. <info-popover mode="right-normal">Comma separated values. Each value may be an int, float, or null and must not be empty. Whitespace and trailing commas are removed.</info-popover>
  211. </label>
  212. <input type="string"
  213. class="gf-form-input gf-form-label--grow"
  214. placeholder="1,2,3,2"
  215. ng-model="ctrl.target.csvWave.valuesCSV"
  216. ng-change="ctrl.refresh()"
  217. ng-model-onblur />
  218. </div>
  219. </div>
  220. </query-editor-row>