mirror of
https://github.com/grafana/grafana.git
synced 2025-02-15 10:03:33 -06:00
8143991b94
* Security: Update default content_security_policy_template - Add 'strict-dynamic' back to script-src - Add ws(s)://$ROOT_PATH to connect-src - Change onEvent to on-event in angular templates to fix CSP issues in firefox. - Add blob: to style-src
306 lines
10 KiB
HTML
306 lines
10 KiB
HTML
<div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
|
|
<div class="gf-form-group">
|
|
<h5 class="section-heading">Options</h5>
|
|
<div class="gf-form-inline">
|
|
<div class="gf-form gf-form--grow">
|
|
<label class="gf-form-label width-8">Name pattern</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Name or regex"
|
|
class="gf-form-input max-width-15"
|
|
ng-model="style.pattern"
|
|
bs-tooltip="'Specify regex using /my.*regex/ syntax'"
|
|
bs-typeahead="editor.getColumnNames"
|
|
ng-blur="editor.render()"
|
|
data-min-length="0"
|
|
data-items="100"
|
|
ng-model-onblur
|
|
data-placement="right"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form gf-form--grow" ng-if="style.type !== 'hidden'">
|
|
<label class="gf-form-label width-8">Column Header</label>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input max-width-15"
|
|
ng-model="style.alias"
|
|
ng-change="editor.render()"
|
|
ng-model-onblur
|
|
placeholder="Override header label"
|
|
/>
|
|
</div>
|
|
<gf-form-switch
|
|
class="gf-form"
|
|
label-class="width-8"
|
|
label="Render value as link"
|
|
checked="style.link"
|
|
on-change="editor.render()"
|
|
></gf-form-switch>
|
|
</div>
|
|
|
|
<div class="gf-form-group">
|
|
<h5 class="section-heading">Type</h5>
|
|
|
|
<div class="gf-form gf-form--grow">
|
|
<label class="gf-form-label width-8">Type</label>
|
|
<div class="gf-form-select-wrapper width-16">
|
|
<select
|
|
class="gf-form-input"
|
|
ng-model="style.type"
|
|
ng-options="c.value as c.text for c in editor.columnTypes"
|
|
ng-change="editor.render()"
|
|
></select>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form gf-form--grow" ng-if="style.type === 'date'">
|
|
<label class="gf-form-label width-8">Date Format</label>
|
|
<gf-form-dropdown
|
|
model="style.dateFormat"
|
|
css-class="gf-form-input width-16"
|
|
lookup-text="true"
|
|
get-options="editor.dateFormats"
|
|
on-change="editor.render()"
|
|
allow-custom="true"
|
|
>
|
|
</gf-form-dropdown>
|
|
</div>
|
|
|
|
<div ng-if="style.type === 'string'">
|
|
<gf-form-switch
|
|
class="gf-form"
|
|
label-class="width-8"
|
|
ng-if="style.type === 'string'"
|
|
label="Sanitize HTML"
|
|
checked="style.sanitize"
|
|
on-change="editor.render()"
|
|
></gf-form-switch>
|
|
</div>
|
|
|
|
<div ng-if="style.type !== 'hidden'">
|
|
<div class="gf-form gf-form--grow">
|
|
<label class="gf-form-label width-8">Align</label>
|
|
<gf-form-dropdown
|
|
model="style.align"
|
|
css-class="gf-form-input"
|
|
lookup-text="true"
|
|
get-options="editor.alignTypes"
|
|
allow-custom="false"
|
|
on-change="editor.render()"
|
|
allow-custom="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="style.type === 'string'">
|
|
<gf-form-switch
|
|
class="gf-form"
|
|
label-class="width-10"
|
|
ng-if="style.type === 'string'"
|
|
label="Preserve Formatting"
|
|
checked="style.preserveFormat"
|
|
on-change="editor.render()"
|
|
></gf-form-switch>
|
|
</div>
|
|
|
|
<div ng-if="style.type === 'number'">
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8">Unit</label>
|
|
<unit-picker on-change="editor.setUnitFormat(style)" value="style.unit" width="16"></unit-picker>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8">Decimals</label>
|
|
<input
|
|
type="number"
|
|
class="gf-form-input width-4"
|
|
data-placement="right"
|
|
ng-model="style.decimals"
|
|
ng-change="editor.render()"
|
|
ng-model-onblur
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-group" ng-if="style.type === 'string'">
|
|
<h5 class="section-heading">Value Mappings</h5>
|
|
<div class="editor-row">
|
|
<div class="gf-form-group">
|
|
<div class="gf-form">
|
|
<span class="gf-form-label">
|
|
Type
|
|
</span>
|
|
<div class="gf-form-select-wrapper">
|
|
<select
|
|
class="gf-form-input"
|
|
ng-model="style.mappingType"
|
|
ng-options="c.value as c.text for c in editor.mappingTypes"
|
|
ng-change="editor.render()"
|
|
></select>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form-group" ng-if="style.mappingType==1">
|
|
<div class="gf-form" ng-repeat="map in style.valueMaps">
|
|
<span class="gf-form-label">
|
|
<icon name="'times'" ng-click="editor.removeValueMap(style, $index)"></icon>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input max-width-6"
|
|
ng-model="map.value"
|
|
placeholder="Value"
|
|
ng-blur="editor.render()"
|
|
/>
|
|
<label class="gf-form-label">
|
|
<icon name="'arrow-right'"></icon>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input max-width-8"
|
|
ng-model="map.text"
|
|
placeholder="Text"
|
|
ng-blur="editor.render()"
|
|
/>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label">
|
|
<a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus'"></icon></a>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form-group" ng-if="style.mappingType==2">
|
|
<div class="gf-form" ng-repeat="rangeMap in style.rangeMaps">
|
|
<span class="gf-form-label">
|
|
<icon name="'times'" ng-click="editor.removeRangeMap(style, $index)"></icon>
|
|
</span>
|
|
<span class="gf-form-label">From</span>
|
|
<input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="editor.render()" />
|
|
<span class="gf-form-label">To</span>
|
|
<input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="editor.render()" />
|
|
<span class="gf-form-label">Text</span>
|
|
<input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="editor.render()" />
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label">
|
|
<a class="pointer" ng-click="editor.addRangeMap(style)"><icon name="'plus'"></icon></a>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
|
|
<h5 class="section-heading">Thresholds</h5>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8"
|
|
>Thresholds
|
|
<tip>Comma separated values</tip>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input width-10"
|
|
ng-model="style.thresholds"
|
|
placeholder="50,80"
|
|
ng-blur="editor.render()"
|
|
array-join
|
|
/>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8">Color Mode</label>
|
|
<div class="gf-form-select-wrapper width-10">
|
|
<select
|
|
class="gf-form-input"
|
|
ng-model="style.colorMode"
|
|
ng-options="c.value as c.text for c in editor.colorModes"
|
|
ng-change="editor.render()"
|
|
></select>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-8">Colors</label>
|
|
<span class="gf-form-label">
|
|
<color-picker color="style.colors[0]" on-change="editor.onColorChange(style, 0)"></color-picker>
|
|
</span>
|
|
<span class="gf-form-label">
|
|
<color-picker color="style.colors[1]" on-change="editor.onColorChange(style, 1)"></color-picker>
|
|
</span>
|
|
<span class="gf-form-label">
|
|
<color-picker color="style.colors[2]" on-change="editor.onColorChange(style, 2)"></color-picker>
|
|
</span>
|
|
<div class="gf-form-label">
|
|
<a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section gf-form-group" ng-if="style.link">
|
|
<h5 class="section-heading">Link</h5>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-9">
|
|
Url
|
|
<info-popover mode="right-normal">
|
|
<p>Specify an URL (relative or absolute)</p>
|
|
<span>
|
|
Use special variables to specify cell values:
|
|
<br />
|
|
<em>${__cell}</em> refers to current cell value
|
|
<br />
|
|
<em>${__cell_n}</em> refers to Nth column value in current row. Column indexes are started from 0. For
|
|
instance, <em>${__cell_1}</em> refers to second column's value.
|
|
<br />
|
|
<em>${__cell:raw}</em> disables all encoding. Useful if the value is a complete URL. By default values are
|
|
URI encoded.
|
|
</span>
|
|
</info-popover>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input width-29"
|
|
ng-model="style.linkUrl"
|
|
ng-blur="editor.render()"
|
|
ng-model-onblur
|
|
data-placement="right"
|
|
/>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-9">
|
|
Tooltip
|
|
<info-popover mode="right-normal">
|
|
<p>Specify text for link tooltip.</p>
|
|
<span>
|
|
This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
|
|
</span>
|
|
</info-popover>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="gf-form-input width-29"
|
|
ng-model="style.linkTooltip"
|
|
ng-blur="editor.render()"
|
|
ng-model-onblur
|
|
data-placement="right"
|
|
/>
|
|
</div>
|
|
<gf-form-switch
|
|
class="gf-form"
|
|
label-class="width-9"
|
|
label="Open in new tab"
|
|
checked="style.linkTargetBlank"
|
|
></gf-form-switch>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
<div class="gf-form-group">
|
|
<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
|
|
<icon name="'trash-alt'"></icon> Remove Rule
|
|
</button>
|
|
</div>
|
|
|
|
<hr />
|
|
</div>
|
|
|
|
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
|
|
<icon name="'plus'"></icon> Add column style
|
|
</button>
|