The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
grafana/public/app/features/dashboard/components/DashLinks/editor.html

185 lines
5.9 KiB

<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>