IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

table-panel: clickable cell link - draft (#8738)

Browse Source 
* table-panel: clickable cell link - draft

* table-panel: clickable cell link - fix link target option

* table-panel: fix undefined columnStyle.link

* table-panel: option to highlight cell with link

* table-panel: render variables for all cells in row

* table-panel: remove cell highlighting

* table-panel: add help for URL field

* linkPopover directive for link info in table panel

* table-panel: add link info popover to cells

* table-panel: use native popover instead directive

* table-panel: link drop refactor, remove unused code

* table-panel: fix unclickable link when drop is opened

* refactoring: minor refactoring to #8738, do not think we need a full blown popover for the links, simple tooltip is enough and more efficient, sadly we do not have a modern tooltip framework, still using old bootstrap 2.3 tooltip

* table-panel: add tests for link rendering
This commit is contained in:
Alexander Zobnin
2017-07-18 21:59:34 +03:00
committed by Torkel Ödegaard
parent 13c966c178
commit 9bbc942534
5 changed files with 150 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/app/plugins/panel/table/renderer.ts
View File

@@ -8,7 +8,7 @@ export class TableRenderer {
formatters: any[];
colorState: any;
constructor(private panel, private table, private isUtc, private sanitize) {
constructor(private panel, private table, private isUtc, private sanitize, private templateSrv) {
this.initColumns();
}
@@ -123,13 +123,25 @@ export class TableRenderer {
};
}
renderRowVariables(rowIndex) {
let scopedVars = {};
let cell_variable;
let row = this.table.rows[rowIndex];
for (let i = 0; i < row.length; i++) {
cell_variable = `__cell_${i}`;
scopedVars[cell_variable] = { value: row[i] };
}
return scopedVars;
}
formatColumnValue(colIndex, value) {
return this.formatters[colIndex] ? this.formatters[colIndex](value) : value;
}
renderCell(columnIndex, value, addWidthHack = false) {
renderCell(columnIndex, rowIndex, value, addWidthHack = false) {
value = this.formatColumnValue(columnIndex, value);
var style = '';
var cellClasses = [];
var cellClass = '';
if (this.colorState.cell) {
style = ' style="background-color:' + this.colorState.cell + ';color: white"';
@@ -156,10 +168,34 @@ export class TableRenderer {
var columnStyle = this.table.columns[columnIndex].style;
if (columnStyle && columnStyle.preserveFormat) {
cellClass = ' class="table-panel-cell-pre" ';
cellClasses.push("table-panel-cell-pre");
}
return '<td' + cellClass + style + '>' + value + widthHack + '</td>';
var columnHtml = value + widthHack;
if (columnStyle && columnStyle.link) {
// Render cell as link
var scopedVars = this.renderRowVariables(rowIndex);
scopedVars['__cell'] = { value: value };
var cellLink = this.templateSrv.replace(columnStyle.linkUrl, scopedVars);
var cellLinkTooltip = this.templateSrv.replace(columnStyle.linkTooltip, scopedVars);
var cellTarget = columnStyle.linkTargetBlank ? '_blank' : '';
cellClasses.push("table-panel-cell-link");
columnHtml = `
<a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right">
${columnHtml}
</a>
`;
}
if (cellClasses.length) {
cellClass = ' class="' + cellClasses.join(' ') + '"';
}
columnHtml = '<td' + cellClass + style + '>' + columnHtml + '</td>';
return columnHtml;
}
render(page) {
@@ -173,7 +209,7 @@ export class TableRenderer {
let cellHtml = '';
let rowStyle = '';
for (var i = 0; i < this.table.columns.length; i++) {
cellHtml += this.renderCell(i, row[i], y === startPos);
cellHtml += this.renderCell(i, y, row[i], y === startPos);
}
if (this.colorState.row) {