mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
dashlist: change scrollbar to new perfect scroll directive
This commit is contained in:
Daniel Lee
parent
84c46f0cd3
commit
9ba9043d64
@ -1,150 +1,147 @@
|
||||
<div class="scroll-canvas">
|
||||
<div gemini-scrollbar>
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container" style="height: 95%">
|
||||
<div class="page-header">
|
||||
<h1>Dashboards</h1>
|
||||
<div class="scroll-canvas" grafana-scrollbar>
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container" style="height: 95%">
|
||||
<div class="page-header">
|
||||
<h1>Dashboards</h1>
|
||||
|
||||
<a class="btn btn-success" href="/dashboard/new">
|
||||
<i class="fa fa-plus"></i>
|
||||
Create Dashboard
|
||||
</a>
|
||||
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
|
||||
<i class="fa fa-plus"></i>
|
||||
Create Folder
|
||||
</a>
|
||||
</div>
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form width-15">
|
||||
<span style="position: relative;">
|
||||
<input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true"
|
||||
ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getDashboards()" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form" ng-if="ctrl.query.tag.length">
|
||||
Filters:
|
||||
<span ng-repeat="tagName in ctrl.query.tag">
|
||||
<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
|
||||
<i class="fa fa-remove"></i>
|
||||
{{tagName}}
|
||||
</a>
|
||||
<a class="btn btn-success" href="/dashboard/new">
|
||||
<i class="fa fa-plus"></i>
|
||||
Create Dashboard
|
||||
</a>
|
||||
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
|
||||
<i class="fa fa-plus"></i>
|
||||
Create Folder
|
||||
</a>
|
||||
</div>
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form width-15">
|
||||
<span style="position: relative;">
|
||||
<input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true"
|
||||
ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getDashboards()" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-button-row">
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-secondary"
|
||||
ng-disabled="!ctrl.canMove"
|
||||
ng-click="ctrl.moveTo()"
|
||||
bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'" data-placement="bottom">
|
||||
<i class="fa fa-exchange"></i> Move to...
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-inverse"
|
||||
ng-click="ctrl.delete()"
|
||||
ng-disabled="!ctrl.canDelete">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
<div class="gf-form" ng-if="ctrl.query.tag.length">
|
||||
Filters:
|
||||
<span ng-repeat="tagName in ctrl.query.tag">
|
||||
<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
|
||||
<i class="fa fa-remove"></i>
|
||||
{{tagName}}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-button-row">
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-secondary"
|
||||
ng-disabled="!ctrl.canMove"
|
||||
ng-click="ctrl.moveTo()"
|
||||
bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'" data-placement="bottom">
|
||||
<i class="fa fa-exchange"></i> Move to...
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-inverse"
|
||||
ng-click="ctrl.delete()"
|
||||
ng-disabled="!ctrl.canDelete">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 75%">
|
||||
<div style="display: flex; justify-content: flex-end">
|
||||
<select
|
||||
style="width: 150px;"
|
||||
class="gf-form-input"
|
||||
ng-model="ctrl.selectedStarredFilter"
|
||||
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
|
||||
ng-change="ctrl.onStarredFilterChange()"
|
||||
/>
|
||||
<select
|
||||
style="width: 150px;"
|
||||
class="gf-form-input"
|
||||
ng-model="ctrl.selectedTagFilter"
|
||||
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
|
||||
ng-change="ctrl.onTagFilterChange()"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-results-container" ng-show="ctrl.sections.length > 0" grafana-scrollbar>
|
||||
<div ng-repeat="section in ctrl.sections" class="search-section">
|
||||
|
||||
<div class="search-section__header__with-checkbox" ng-hide="section.hideHeader">
|
||||
<gf-form-switch
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="section.checked">
|
||||
</gf-form-switch>
|
||||
<a class="search-section__header pointer" ng-click="ctrl.toggleFolder(section)" ng-hide="section.hideHeader">
|
||||
<i class="search-section__header__icon" ng-class="section.icon"></i>
|
||||
<span class="search-section__header__text">{{::section.title}}</span>
|
||||
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
|
||||
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div ng-if="section.expanded">
|
||||
<div ng-repeat="item in section.items" class="search-item__with-checkbox" ng-class="{'selected': item.selected}">
|
||||
<gf-form-switch
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="item.checked" />
|
||||
<a ng-href="{{::item.url}}" class="search-item">
|
||||
<span class="search-item__icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
<span class="search-item__body">
|
||||
<div class="search-item__body-title">{{::item.title}}</div>
|
||||
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
|
||||
<i class="fa fa-folder-o"></i>
|
||||
{{::item.folderTitle}}
|
||||
</div>
|
||||
</span>
|
||||
<span class="search-item__tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
</span>
|
||||
<span class="search-item__actions">
|
||||
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div bindonce class="search-section" ng-repeat="dashboard in ctrl.dashboards">
|
||||
<gf-form-switch
|
||||
switch-class="gf-form-switch--table-cell"
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="dashboard.checked">
|
||||
</gf-form-switch>
|
||||
<a class="search-item pointer "
|
||||
bo-href-i="{{dashboard.url}}">
|
||||
<span class="search-item__icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
<span class="search-result-tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" bindonce ng-repeat="tag in dashboard.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
<i class="fa" bo-class="{'fa-star': dashboard.isStarred, 'fa-star-o': !dashboard.isStarred}"></i>
|
||||
</span>
|
||||
<span class="search-result-link">
|
||||
<i class="fa search-result-icon"></i>
|
||||
<span bo-text="dashboard.title" />
|
||||
</span>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 80%">
|
||||
<div style="width: 40%; display: flex; float: right;">
|
||||
<select
|
||||
class="gf-form-input"
|
||||
ng-model="ctrl.selectedStarredFilter"
|
||||
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
|
||||
ng-change="ctrl.onStarredFilterChange()"
|
||||
/>
|
||||
<select
|
||||
class="gf-form-input"
|
||||
ng-model="ctrl.selectedTagFilter"
|
||||
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
|
||||
ng-change="ctrl.onTagFilterChange()"
|
||||
/>
|
||||
</div>
|
||||
<div gemini-scrollbar>
|
||||
<div class="search-results-container" ng-show="ctrl.sections.length > 0">
|
||||
<div ng-repeat="section in ctrl.sections" class="search-section">
|
||||
|
||||
<div class="search-section__header__with-checkbox" ng-hide="section.hideHeader">
|
||||
<gf-form-switch
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="section.checked">
|
||||
</gf-form-switch>
|
||||
<a class="search-section__header pointer" ng-click="ctrl.toggleFolder(section)" ng-hide="section.hideHeader">
|
||||
<i class="search-section__header__icon" ng-class="section.icon"></i>
|
||||
<span class="search-section__header__text">{{::section.title}}</span>
|
||||
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
|
||||
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div ng-if="section.expanded">
|
||||
<div ng-repeat="item in section.items" class="search-item__with-checkbox" ng-class="{'selected': item.selected}">
|
||||
<gf-form-switch
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="item.checked" />
|
||||
<a ng-href="{{::item.url}}" class="search-item">
|
||||
<span class="search-item__icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
<span class="search-item__body">
|
||||
<div class="search-item__body-title">{{::item.title}}</div>
|
||||
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
|
||||
<i class="fa fa-folder-o"></i>
|
||||
{{::item.folderTitle}}
|
||||
</div>
|
||||
</span>
|
||||
<span class="search-item__tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
</span>
|
||||
<span class="search-item__actions">
|
||||
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div bindonce class="search-section" ng-repeat="dashboard in ctrl.dashboards">
|
||||
<gf-form-switch
|
||||
switch-class="gf-form-switch--table-cell"
|
||||
on-change="ctrl.selectionChanged()"
|
||||
checked="dashboard.checked">
|
||||
</gf-form-switch>
|
||||
<a class="search-item pointer "
|
||||
bo-href-i="{{dashboard.url}}">
|
||||
<span class="search-item__icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
<span class="search-result-tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" bindonce ng-repeat="tag in dashboard.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
<i class="fa" bo-class="{'fa-star': dashboard.isStarred, 'fa-star-o': !dashboard.isStarred}"></i>
|
||||
</span>
|
||||
<span class="search-result-link">
|
||||
<i class="fa search-result-icon"></i>
|
||||
<span bo-text="dashboard.title" />
|
||||
</span>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<em class="muted" ng-hide="ctrl.sections.length > 0">
|
||||
No Dashboards or Folders found.
|
||||
</em>
|
||||
</div>
|
||||
|
||||
<em class="muted" ng-hide="ctrl.sections.length > 0">
|
||||
No Dashboards or Folders found.
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user