mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14423 from grafana/14378-develop-table-options-ux
Removed side menu for column styles
This commit is contained in:
Torkel Ödegaard
GitHub
commit
1d325cf66f
@ -1,200 +1,190 @@
|
|||||||
<div class="edit-tab-with-sidemenu">
|
<div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
|
||||||
<aside class="edit-sidemenu-aside">
|
<p class="column-styles-heading">{{style.pattern || 'New rule'}}</p>
|
||||||
<ul class="edit-sidemenu">
|
<div class="section gf-form-group">
|
||||||
<li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
|
<h5 class="section-heading">Options</h5>
|
||||||
<a ng-click="editor.activeStyleIndex = $index">{{style.pattern || 'New rule'}}</a>
|
<div class="gf-form-inline">
|
||||||
</li>
|
<div class="gf-form">
|
||||||
<li>
|
<label class="gf-form-label width-13">Apply to columns named</label>
|
||||||
<a class="pointer" ng-click="editor.addColumnStyle()">
|
<input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'"
|
||||||
<i class="fa fa-plus"></i> Add
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
|
|
||||||
|
|
||||||
<div class="section gf-form-group">
|
|
||||||
<h5 class="section-heading">Options</h5>
|
|
||||||
<div class="gf-form-inline">
|
|
||||||
<div class="gf-form">
|
|
||||||
<label class="gf-form-label width-13">Apply to columns named</label>
|
|
||||||
<input type="text" placeholder="Name or regex" class="gf-form-input width-13" 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
|
bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur
|
||||||
data-placement="right">
|
data-placement="right">
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="gf-form" ng-if="style.type !== 'hidden'">
|
|
||||||
<label class="gf-form-label width-13">Column Header</label>
|
|
||||||
<input type="text" class="gf-form-input width-13" 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-13" label="Render value as link" checked="style.link" change="editor.render()"></gf-form-switch>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gf-form" ng-if="style.type !== 'hidden'">
|
||||||
|
<label class="gf-form-label width-13">Column Header</label>
|
||||||
|
<input type="text" class="gf-form-input width-13" 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-13" label="Render value as link" checked="style.link" change="editor.render()"></gf-form-switch>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="section gf-form-group">
|
<div class="section gf-form-group">
|
||||||
<h5 class="section-heading">Type</h5>
|
<h5 class="section-heading">Type</h5>
|
||||||
|
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<label class="gf-form-label width-11">Type</label>
|
<label class="gf-form-label width-11">Type</label>
|
||||||
<div class="gf-form-select-wrapper width-16">
|
<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>
|
<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>
|
||||||
<div class="gf-form" ng-if="style.type === 'date'">
|
</div>
|
||||||
<label class="gf-form-label width-11">Date Format</label>
|
<div class="gf-form" ng-if="style.type === 'date'">
|
||||||
<gf-form-dropdown model="style.dateFormat" css-class="gf-form-input width-16" lookup-text="true"
|
<label class="gf-form-label width-11">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">
|
get-options="editor.dateFormats" on-change="editor.render()" allow-custom="true">
|
||||||
</gf-form-dropdown>
|
</gf-form-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="style.type === 'string'">
|
<div ng-if="style.type === 'string'">
|
||||||
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize"
|
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize"
|
||||||
change="editor.render()"></gf-form-switch>
|
change="editor.render()"></gf-form-switch>
|
||||||
</div>
|
</div>
|
||||||
<div ng-if="style.type === 'string'">
|
<div ng-if="style.type === 'string'">
|
||||||
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat"
|
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat"
|
||||||
change="editor.render()"></gf-form-switch>
|
change="editor.render()"></gf-form-switch>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="style.type === 'number'">
|
<div ng-if="style.type === 'number'">
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<label class="gf-form-label width-11">Unit</label>
|
<label class="gf-form-label width-11">Unit</label>
|
||||||
<div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
|
<div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<label class="gf-form-label width-11">Decimals</label>
|
<label class="gf-form-label width-11">Decimals</label>
|
||||||
<input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
|
<input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
|
||||||
ng-model-onblur>
|
ng-model-onblur>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="section gf-form-group" ng-if="style.type === 'string'">
|
<div class="section gf-form-group" ng-if="style.type === 'string'">
|
||||||
<h5 class="section-heading">Value Mappings</h5>
|
<h5 class="section-heading">Value Mappings</h5>
|
||||||
<div class="editor-row">
|
<div class="editor-row">
|
||||||
<div class="gf-form-group">
|
<div class="gf-form-group">
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<span class="gf-form-label">
|
<span class="gf-form-label">
|
||||||
Type
|
Type
|
||||||
</span>
|
</span>
|
||||||
<div class="gf-form-select-wrapper">
|
<div class="gf-form-select-wrapper">
|
||||||
<select class="gf-form-input" ng-model="style.mappingType"
|
<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>
|
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">
|
|
||||||
<i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
|
|
||||||
</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">
|
|
||||||
<i class="fa fa-arrow-right"></i>
|
|
||||||
</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)"><i class="fa fa-plus"></i></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">
|
|
||||||
<i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
|
|
||||||
</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)"><i class="fa fa-plus"></i></a>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="gf-form-group" ng-if="style.mappingType==1">
|
||||||
</div>
|
<div class="gf-form" ng-repeat="map in style.valueMaps">
|
||||||
|
<span class="gf-form-label">
|
||||||
<div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
|
<i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
|
||||||
<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]" onChange="editor.onColorChange($index, 0)"></color-picker>
|
|
||||||
</span>
|
|
||||||
<span class="gf-form-label">
|
|
||||||
<color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
|
|
||||||
</span>
|
|
||||||
<span class="gf-form-label">
|
|
||||||
<color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 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> syntax. By default values are URI encoded. If the value is a complete URL you can disable all encoding using
|
|
||||||
</span>
|
</span>
|
||||||
</info-popover>
|
<input type="text" class="gf-form-input max-width-6" ng-model="map.value" placeholder="Value" ng-blur="editor.render()">
|
||||||
</label>
|
<label class="gf-form-label">
|
||||||
<input type="text" class="gf-form-input width-29" ng-model="style.linkUrl" ng-blur="editor.render()" ng-model-onblur data-placement="right">
|
<i class="fa fa-arrow-right"></i>
|
||||||
|
</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)"><i class="fa fa-plus"></i></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">
|
||||||
|
<i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
|
||||||
|
</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)"><i class="fa fa-plus"></i></a>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gf-form">
|
</div>
|
||||||
<label class="gf-form-label width-9">
|
</div>
|
||||||
Tooltip
|
|
||||||
<info-popover mode="right-normal">
|
<div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
|
||||||
<p>Specify text for link tooltip.</p>
|
<h5 class="section-heading">Thresholds</h5>
|
||||||
<span>
|
<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]" onChange="editor.onColorChange($index, 0)"></color-picker>
|
||||||
|
</span>
|
||||||
|
<span class="gf-form-label">
|
||||||
|
<color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
|
||||||
|
</span>
|
||||||
|
<span class="gf-form-label">
|
||||||
|
<color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 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> syntax. By default values are URI encoded. If the value is a complete URL you can disable all encoding using
|
||||||
|
</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.
|
This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
|
||||||
</span>
|
</span>
|
||||||
</info-popover></label>
|
</info-popover>
|
||||||
<input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
|
</label>
|
||||||
|
<input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
|
||||||
data-placement="right">
|
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>
|
||||||
|
<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="clearfix"></div>
|
||||||
|
<div class="gf-form-group">
|
||||||
<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
|
<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
|
||||||
<i class="fa fa-trash"></i> Remove Rule
|
<i class="fa fa-trash"></i> Remove Rule
|
||||||
</button>
|
</button>
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gf-form-button-row">
|
||||||
|
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
|
||||||
|
<i class="fa fa-plus"></i> Add column style
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -28,6 +28,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.column-styles-heading {
|
||||||
|
border-bottom: 1px solid $gray-1;
|
||||||
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(sm) {
|
@include media-breakpoint-down(sm) {
|
||||||
.edit-tab-with-sidemenu {
|
.edit-tab-with-sidemenu {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user