github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[stringify/url] added some formatting examples

Browse source
This commit is contained in:
Spencer Alger 2015-05-06 15:49:42 -07:00
parent b3f6baf3dc
commit c8fa9b3ba2
2 changed files with 85 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/kibana/components/stringify/editors/url.html
View file

@ -19,7 +19,7 @@
</h4>
<p>
If a field only contains part of a url then a "Url Template" can be used to format the value as a complete url. The format is a string which uses double curly brace notation <code ng-bind="'\{\{ \}\}'"></code> to inject values. The following values can be accessed:
If a field only contains part of a url then a "Url Template" can be used to format the value as a complete url. The format is a string which uses double curly brace notation <code>{&shy;{ }&shy;}</code> to inject values. The following values can be accessed:
</p>
<ul>
@ -30,6 +30,34 @@
<strong>rawValue</strong> &mdash; The unescaped value
</li>
</ul>
<table class="table table-striped table-bordered">
<caption>Examples</caption>
<thead>
<tr>
<th>Value</th>
<th>Template</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>1234</td>
<td>http://company.net/profiles?user_id={&shy;{value}&shy;}</td>
<td>http://company.net/profiles?user_id=1234</td>
</tr>
<tr>
<td>users/admin</td>
<td>http://company.net/groups?id={&shy;{value}&shy;}</td>
<td>http://company.net/groups?id=users%2Fadmin</td>
</tr>
<tr>
<td>/images/favicon.ico</td>
<td>http://www.site.com{&shy;{rawValue}&shy;}</td>
<td>http://www.site.com/images/favicon.ico</td>
</tr>
</tbody>
</table>
</div>
<input ng-model="editor.formatParams.urlTemplate" class="form-control">
@ -47,7 +75,7 @@
</h4>
<p>
If the url in this field is large, it might be useful to provide an alternate template for the text version of the url. This will be displayed instead of the url, but will still link to the url. The format is a string which uses double curly brace notation <code ng-bind="'\{\{ \}\}'"></code> to inject values. The following values can be accessed:
If the url in this field is large, it might be useful to provide an alternate template for the text version of the url. This will be displayed instead of the url, but will still link to the url. The format is a string which uses double curly brace notation <code>{&shy;{ }&shy;}</code> to inject values. The following values can be accessed:
</p>
<ul>
@ -58,6 +86,39 @@
<strong>url</strong> &mdash; The formatted url
</li>
</ul>
<table class="table table-striped table-bordered">
<caption>Examples</caption>
<thead>
<tr>
<th>Value</th>
<th>Url/Label Template</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1234</td>
<td>http://company.net/profiles?user_id={&shy;{value}&shy;}</td>
<td rowspan="2">
<a href="http://company.net/profiles?user_id=1234">User #1234</a>
</td>
</tr>
<tr>
<td>User #{&shy;{value}&shy;}</td>
</tr>
<tr>
<td rowspan="2">/assets/main.css</td>
<td>http://site.com{&shy;{rawValue}&shy;}</td>
<td rowspan="2">
<a href="http://site.com/assets/main.css">View Asset</a>
</td>
</tr>
<tr>
<td>View Asset</td>
</tr>
</tbody>
</table>
</div>
<input ng-model="editor.formatParams.labelTemplate" class="form-control">

22
src/kibana/styles/_hintbox.less
View file

@ -1,6 +1,7 @@
@hintbox-background-color: @gray-lighter;
@hintbox-spacing-vertical: 10px;
@hintbox-spacing-horizontal: 12px;
@hintbox-table-border-color: #BFC9CA;
.hintbox {
padding: @hintbox-spacing-vertical @hintbox-spacing-horizontal;
@ -38,4 +39,25 @@
> * + * {
margin-top: @hintbox-spacing-vertical;
}
// https://github.com/twbs/bootstrap/blob/2aa102bfd40859d15790febed1939e0111a6fb1a/less/tables.less#L88-L106
.table-bordered {
border: 1px solid @hintbox-table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @hintbox-table-border-color;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
}