Files
grafana/public/app/features/dashboard/components/DashLinks/editor.html
Ivana Huckova 1c58202b26 @grafana/ui: Replace various icons using Icon component (#23442)
* Replace icons in dashboard and settings

* Replace icons in alerting

* Update batch of icons

* Implement icons accross various files

* Style updates

* Search: Fix recent and starred icons

* Update styling and details

* Replace new icon created by unicons

* Fix e2e test, styling

* Minor styling updates

Co-authored-by: Clarity-89 <homes89@ukr.net>
2020-04-12 22:20:02 +02:00

186 lines
5.9 KiB
HTML

<div class="page-action-bar">
<h3 class="dashboard-settings__header">
<a ng-click="ctrl.backToList()">Dashboard Links</a>
<span ng-show="ctrl.mode === 'new'"><icon name="'angle-right'"></icon> New</span>
<span ng-show="ctrl.mode === 'edit'"><icon name="'angle-right'"></icon> Edit</span>
</h3>
<div class="page-action-bar__spacer"></div>
<a
type="button"
class="btn btn-primary"
ng-click="ctrl.setupNew()"
ng-if="ctrl.dashboard.links.length > 0"
ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
>
New
</a>
</div>
<div ng-if="ctrl.mode == 'list'">
<div ng-if="ctrl.dashboard.links.length === 0">
<empty-list-cta
on-click="ctrl.setupNew"
title="ctrl.emptyListCta.title"
buttonIcon="ctrl.emptyListCta.buttonIcon"
buttonTitle="ctrl.emptyListCta.buttonTitle"
infoBox="ctrl.emptyListCta.infoBox"
infoBoxTitle="ctrl.emptyListCta.infoBoxTitle"
/>
</div>
<div ng-if="ctrl.dashboard.links.length > 0">
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Type</th>
<th>Info</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in ctrl.dashboard.links">
<td class="pointer" ng-click="ctrl.editLink(link)">
<icon name="'external-link-alt'"></icon>
{{ link.type }}
</td>
<td>
<div ng-if="link.title">
{{ link.title }}
</div>
<div ng-if="!link.title && link.url">
{{ link.url }}
</div>
<span
ng-if="!link.title && link.tags"
ng-repeat="tag in link.tags"
tag-color-from-name="tag"
class="label label-tag"
style="margin-right: 6px"
>
{{ tag }}
</span>
</td>
<td style="width: 1%">
<icon ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" name="'arrow-up'"></icon>
</td>
<td style="width: 1%">
<icon ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" name="'arrow-down'"></icon>
</td>
<td style="width: 1%">
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
<icon name="'times'" style="margin-bottom: 0;"></icon>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
<div class="gf-form-group">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-8">Type</span>
<div class="gf-form-select-wrapper width-10">
<select
class="gf-form-input"
ng-model="ctrl.link.type"
ng-options="f for f in ['dashboards','link']"
></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.link.type === 'dashboards'">
<span class="gf-form-label width-8">With tags</span>
<bootstrap-tagsinput
ng-model="ctrl.link.tags"
tagclass="label label-tag"
placeholder="add tags"
style="margin-right: .25rem"
></bootstrap-tagsinput>
</div>
<gf-form-switch
ng-show="ctrl.link.type === 'dashboards'"
class="gf-form"
label="As dropdown"
checked="ctrl.link.asDropdown"
switch-class="max-width-4"
label-class="width-8"
></gf-form-switch>
<div class="gf-form" ng-show="ctrl.link.type === 'dashboards' && ctrl.link.asDropdown">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="ctrl.link.title" class="gf-form-input max-width-10" ng-model-onblur />
</div>
<div ng-show="ctrl.link.type === 'link'">
<div class="gf-form">
<li class="gf-form-label width-8">Url</li>
<input type="text" ng-model="ctrl.link.url" class="gf-form-input width-20" ng-model-onblur />
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="ctrl.link.title" class="gf-form-input width-20" ng-model-onblur />
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Tooltip</span>
<input
type="text"
ng-model="ctrl.link.tooltip"
class="gf-form-input width-20"
placeholder="Open dashboard"
ng-model-onblur
/>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Icon</span>
<div class="gf-form-select-wrapper width-20">
<select
class="gf-form-input"
ng-model="ctrl.link.icon"
ng-options="k as k for (k, v) in ctrl.iconMap"
></select>
</div>
</div>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Include</h5>
<div>
<gf-form-switch
class="gf-form"
label="Time range"
checked="ctrl.link.keepTime"
switch-class="max-width-6"
label-class="width-9"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Variable values"
checked="ctrl.link.includeVars"
switch-class="max-width-6"
label-class="width-9"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Open in new tab"
checked="ctrl.link.targetBlank"
switch-class="max-width-6"
label-class="width-9"
></gf-form-switch>
</div>
</div>
</div>
<button class="btn btn-primary" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
Add
</button>
<button class="btn btn-primary" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
Update
</button>
</div>