query.editor.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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 class="gf-form gf-form--grow">
  18. <div class="gf-form-label gf-form-label--grow"></div>
  19. </div>
  20. </div>
  21. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'manual_entry'">
  22. <div class="gf-form gf-form">
  23. <label class="gf-form-label query-keyword width-7">New value</label>
  24. <input type="number" class="gf-form-input width-15" placeholder="value" ng-model="ctrl.newPointValue">
  25. <label class="gf-form-label query-keyword">Time</label>
  26. <input type="string" class="gf-form-input width-12" placeholder="time" ng-model="ctrl.newPointTime" input-datetime>
  27. <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addPoint()">Add</button>
  28. <label class="gf-form-label query-keyword">All values</label>
  29. <gf-form-dropdown css-class="width-12" model="ctrl.selectedPoint" get-options="ctrl.getPoints()" on-change="ctrl.pointSelected($option)">
  30. </gf-form-dropdown>
  31. </div>
  32. <div class="gf-form gf-form" ng-if="ctrl.selectedPoint.value !== null">
  33. <button class="btn btn-danger gf-form-btn" ng-click="ctrl.deletePoint()">Delete</button>
  34. </div>
  35. <div class="gf-form gf-form--grow">
  36. <div class="gf-form-label gf-form-label--grow"></div>
  37. </div>
  38. </div>
  39. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'streaming_client'">
  40. <div class="gf-form gf-form">
  41. <label class="gf-form-label query-keyword width-7">Type</label>
  42. <div class="gf-form-select-wrapper">
  43. <select
  44. ng-model="ctrl.target.stream.type"
  45. class="gf-form-input"
  46. ng-options="type for type in ['signal','logs', 'fetch']"
  47. ng-change="ctrl.streamChanged()" />
  48. </select>
  49. </div>
  50. </div>
  51. <div class="gf-form">
  52. <label class="gf-form-label query-keyword">Speed (ms)</label>
  53. <input type="number"
  54. class="gf-form-input width-5"
  55. placeholder="value"
  56. ng-model="ctrl.target.stream.speed"
  57. min="10"
  58. step="10"
  59. ng-change="ctrl.streamChanged()" />
  60. </div>
  61. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  62. <label class="gf-form-label query-keyword">Spread</label>
  63. <input type="number"
  64. class="gf-form-input width-5"
  65. placeholder="value"
  66. ng-model="ctrl.target.stream.spread"
  67. min="0.5"
  68. step="0.1"
  69. ng-change="ctrl.streamChanged()" />
  70. </div>
  71. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  72. <label class="gf-form-label query-keyword">Noise</label>
  73. <input type="number"
  74. class="gf-form-input width-5"
  75. placeholder="value"
  76. ng-model="ctrl.target.stream.noise"
  77. min="0"
  78. step="0.1"
  79. ng-change="ctrl.streamChanged()" />
  80. </div>
  81. <div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
  82. <label class="gf-form-label query-keyword">Bands</label>
  83. <input type="number"
  84. class="gf-form-input width-5"
  85. placeholder="bands"
  86. ng-model="ctrl.target.stream.bands"
  87. min="0"
  88. step="1"
  89. ng-change="ctrl.streamChanged()" />
  90. </div>
  91. <div class="gf-form gf-form--grow" ng-if="ctrl.target.stream.type === 'fetch'">
  92. <label class="gf-form-label query-keyword">URL</label>
  93. <input type="string"
  94. class="gf-form-input gf-form-label--grow"
  95. placeholder="Fetch URL"
  96. ng-model="ctrl.target.stream.url"
  97. ng-change="ctrl.streamChanged()"
  98. ng-model-onblur />
  99. </div>
  100. <div class="gf-form gf-form--grow" ng-if="ctrl.target.stream.type !== 'fetch'">
  101. <div class="gf-form-label gf-form-label--grow"></div>
  102. </div>
  103. </div>
  104. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'logs'">
  105. <div class="gf-form">
  106. <label class="gf-form-label query-keyword">Lines</label>
  107. <input type="number"
  108. class="gf-form-input width-5"
  109. placeholder="10"
  110. ng-model="ctrl.target.lines"
  111. ng-change="ctrl.refresh()"
  112. ng-model-onblur />
  113. </div>
  114. <div class="gf-form">
  115. <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>
  116. </div>
  117. </div>
  118. <!-- Predictable Pulse Scenario Options Form -->
  119. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_pulse'">
  120. <div class="gf-form">
  121. <label class="gf-form-label query-keyword width-7">
  122. Step
  123. <info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
  124. </label>
  125. <input type="number"
  126. class="gf-form-input width-5"
  127. placeholder="60"
  128. ng-model="ctrl.target.pulseWave.timeStep"
  129. ng-change="ctrl.refresh()"
  130. ng-model-onblur />
  131. </div>
  132. <div class="gf-form">
  133. <label class="gf-form-label query-keyword width-7">
  134. On Count
  135. <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>
  136. </label>
  137. <input type="number"
  138. class="gf-form-input width-3"
  139. placeholder="3"
  140. ng-model="ctrl.target.pulseWave.onCount"
  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. Off Count
  147. <info-popover mode="right-normal">The number of offValues within the cycle.</info-popover>
  148. </label>
  149. <input type="number"
  150. class="gf-form-input width-3"
  151. placeholder="6"
  152. ng-model="ctrl.target.pulseWave.offCount"
  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. On Value
  159. <info-popover mode="right-normal">The value for "on values", may be a int, float, or null.</info-popover>
  160. </label>
  161. <input type="string"
  162. class="gf-form-input width-5"
  163. placeholder="1"
  164. ng-model="ctrl.target.pulseWave.onValue"
  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. Off Value
  171. <info-popover mode="right-normal">The value for "off 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.offValue"
  177. ng-change="ctrl.refresh()"
  178. ng-model-onblur />
  179. </div>
  180. </div>
  181. <!-- Predictable CSV Wave Scenario Options Form -->
  182. <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_csv_wave'">
  183. <div class="gf-form">
  184. <label class="gf-form-label query-keyword width-7">
  185. Step
  186. <info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
  187. </label>
  188. <input type="number"
  189. class="gf-form-input width-5"
  190. placeholder="60"
  191. ng-model="ctrl.target.csvWave.timeStep"
  192. ng-change="ctrl.refresh()"
  193. ng-model-onblur />
  194. </div>
  195. <div class="gf-form gf-form--grow">
  196. <label class="gf-form-label query-keyword width-10">
  197. CSV Values
  198. <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>
  199. </label>
  200. <input type="string"
  201. class="gf-form-input gf-form-label--grow"
  202. placeholder="1,2,3,2"
  203. ng-model="ctrl.target.csvWave.valuesCSV"
  204. ng-change="ctrl.refresh()"
  205. ng-model-onblur />
  206. </div>
  207. </div>
  208. </query-editor-row>