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

React Migration: Migrates FolderPicker from angular to react (#21088)

Browse Source 
* Angular/React: Migrates FolderPicker from angular to react

* move to core

* snap

* minor changes

* more removes

* Managing creating new and saving in movetofolderctrl

* Do not use new forms.field, fix select menu

* FolderPicker responsible to creating new folder

* create new as prop

* snap

* remove unnecessary things

* remove console log

* snap

* fix null checks

* add search debouncing

* set folder to state, null check

* typing folder

* adding case for loadOptions

* snap

Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>
This commit is contained in:
kay delaney
2020-02-13 10:13:03 +00:00
committed by GitHub
parent ff6a082e23
commit 0d5c1e1bc7
23 changed files with 484 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
View File

@@ -244,11 +244,11 @@ export class SettingsCtrl {
);
}
onFolderChange(folder: { id: number; title: string }) {
onFolderChange = (folder: { id: number; title: string }) => {
this.dashboard.meta.folderId = folder.id;
this.dashboard.meta.folderTitle = folder.title;
this.hasUnsavedFolderChange = true;
}
};
getFolder() {
return {

165
public/app/features/dashboard/components/DashboardSettings/template.html
View File

@@ -1,108 +1,103 @@
<aside class="dashboard-settings__aside">
<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections" aria-label={{ctrl.selectors.sectionItems(section.title)}}>
<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}"
ng-repeat="section in ctrl.sections" aria-label={{ctrl.selectors.sectionItems}}>
<i class="{{::section.icon}}"></i>
{{::section.title}}
</a>
{{::section.title}}
</a>
<div class="dashboard-settings__aside-actions">
<button
class="btn btn-primary"
ng-click="ctrl.saveDashboard()"
ng-show="ctrl.canSave"
aria-label={{ctrl.selectors.saveDashBoard}}
>
Save
</button>
<button
class="btn btn-inverse"
ng-click="ctrl.openSaveAsModal()"
ng-show="ctrl.canSaveAs"
aria-label={{ctrl.selectors.saveAsDashBoard}}
>
Save As...
</button>
</div>
<div class="dashboard-settings__aside-actions">
<button class="btn btn-primary" ng-click="ctrl.saveDashboard()" ng-show="ctrl.canSave"
aria-label={{ctrl.selectors.saveDashBoard}}>
Save
</button>
<button class="btn btn-inverse" ng-click="ctrl.openSaveAsModal()" ng-show="ctrl.canSaveAs"
aria-label={{ctrl.selectors.saveAsDashBoard}}>
Save As...
</button>
</div>
</aside>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'">
<h3 class="dashboard-settings__header">
General
</h3>
<h3 class="dashboard-settings__header">
General
</h3>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-7">Name</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Description</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">
Tags
<info-popover mode="right-normal">Press enter to add a tag</info-popover>
</label>
<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</div>
<folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
initial-folder-id="ctrl.dashboard.meta.folderId"
on-change="ctrl.onFolderChange($folder)"
enable-create-new="true"
is-valid-selection="true"
label-class="width-7"
dashboard-id="ctrl.dashboard.id">
</folder-picker>
<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-7">
</gf-form-switch>
</div>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-7">Name</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Description</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">
Tags
<info-popover mode="right-normal">Press enter to add a tag</info-popover>
</label>
<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</div>
<folder-picker initial-title="ctrl.dashboard.meta.folderTitle" initial-folder-id="ctrl.dashboard.meta.folderId"
on-change="ctrl.onFolderChange" enable-create-new="true" is-valid-selection="true" label-class="width-7"
dashboard-id="ctrl.dashboard.id">
</folder-picker>
<gf-form-switch class="gf-form" label="Editable"
tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable"
label-class="width-7">
</gf-form-switch>
</div>
<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
<h5 class="section-heading">Panel Options</h5>
<div class="gf-form">
<label class="gf-form-label width-11">
Graph Tooltip
<info-popover mode="right-normal">
Cycle between options using Shortcut: CTRL+O or CMD+O
</info-popover>
</label>
<div class="gf-form-select-wrapper">
<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-danger" ng-click="ctrl.deleteDashboard()" ng-show="ctrl.canDelete" aria-label="Dashboard settings page delete dashboard button">
Delete Dashboard
</button>
<h5 class="section-heading">Panel Options</h5>
<div class="gf-form">
<label class="gf-form-label width-11">
Graph Tooltip
<info-popover mode="right-normal">
Cycle between options using Shortcut: CTRL+O or CMD+O
</info-popover>
</label>
<div class="gf-form-select-wrapper">
<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input'
ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-danger" ng-click="ctrl.deleteDashboard()" ng-show="ctrl.canDelete"
aria-label="Dashboard settings page delete dashboard button">
Delete Dashboard
</button>
</div>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'"
ng-include="'public/app/features/annotations/partials/editor.html'">
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'" ng-include="'public/app/features/templating/partials/editor.html'">
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'"
ng-include="'public/app/features/templating/partials/editor.html'">
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
<dash-links-editor dashboard="ctrl.dashboard"></dash-links-editor>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'">
<dash-links-editor dashboard="ctrl.dashboard"></dash-links-editor>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'versions'" >
<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'versions'">
<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'dashboard_json'" >
<h3 class="dashboard-settings__header">JSON Model</h3>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'dashboard_json'">
<h3 class="dashboard-settings__header">JSON Model</h3>
<div class="dashboard-settings__subheader">
The JSON Model below is data structure that defines the dashboard. Including settings, panel settings & layout,
queries etc.
</div>
<div class="gf-form">
<code-editor content="ctrl.json" data-mode="json" data-max-lines=30 ></code-editor>
</div>
<div class="gf-form">
<code-editor content="ctrl.json" data-mode="json" data-max-lines=30></code-editor>
</div>
<div class="gf-form-button-row">
<button class="btn btn-primary" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
@@ -111,12 +106,9 @@
</div>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
<dashboard-permissions ng-if="ctrl.dashboard && !ctrl.hasUnsavedFolderChange"
dashboardId="ctrl.dashboard.id"
backendSrv="ctrl.backendSrv"
folder="ctrl.getFolder()"
/>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'">
<dashboard-permissions ng-if="ctrl.dashboard && !ctrl.hasUnsavedFolderChange" dashboardId="ctrl.dashboard.id"
backendSrv="ctrl.backendSrv" folder="ctrl.getFolder()" />
<div ng-if="ctrl.hasUnsavedFolderChange">
<h5>You have changed folder, please save to view permissions.</h5>
</div>
@@ -137,4 +129,3 @@
Make Editable
</button>
</div>

1
public/app/features/dashboard/components/FolderPicker/index.ts
View File

@@ -1 +0,0 @@
export { FolderPickerCtrl } from './FolderPickerCtrl';

38
public/app/features/dashboard/components/FolderPicker/template.html
View File

@@ -1,38 +0,0 @@
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label {{ctrl.labelClass}}">Folder</label>
<div class="dropdown" ng-hide="ctrl.createNewFolder">
<gf-form-dropdown model="ctrl.folder"
get-options="ctrl.getOptions($query)"
on-change="ctrl.onFolderChange($option)">
</gf-form-dropdown>
</div>
<input type="text"
class="gf-form-input max-width-10"
ng-if="ctrl.createNewFolder"
give-focus="ctrl.createNewFolder"
ng-model="ctrl.newFolderName"
ng-model-options="{ debounce: 400 }"
ng-change="ctrl.newFolderNameChanged()" />
</div>
<div class="gf-form" ng-if="ctrl.createNewFolder">
<button class="btn btn-inverse"
ng-click="ctrl.createFolder($event)"
ng-disabled="!ctrl.newFolderNameTouched || ctrl.hasValidationError">
Create
</button>
</div>
<div class="gf-form" ng-if="ctrl.createNewFolder">
<button class="btn btn-inverse" ng-click="ctrl.cancelCreateFolder($event)">
Cancel
</button>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.newFolderNameTouched && ctrl.hasValidationError">
<div class="gf-form gf-form--grow">
<label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i>
{{ctrl.validationError}}
</label>
</div>
</div>

18
public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts
View File

@@ -22,9 +22,9 @@ const template = `
<input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" required aria-label="Save dashboard title field">
</div>
<folder-picker initial-folder-id="ctrl.folderId"
on-change="ctrl.onFolderChange($folder)"
enter-folder-creation="ctrl.onEnterFolderCreation()"
exit-folder-creation="ctrl.onExitFolderCreation()"
on-change="ctrl.onFolderChange"
enter-folder-creation="ctrl.onEnterFolderCreation"
exit-folder-creation="ctrl.onExitFolderCreation"
enable-create-new="true"
label-class="width-8"
dashboard-id="ctrl.clone.id">
@@ -97,17 +97,17 @@ export class SaveDashboardAsModalCtrl {
}
}
onFolderChange(folder: { id: any }) {
onFolderChange = (folder: { id: any }) => {
this.folderId = folder.id;
}
};
onEnterFolderCreation() {
onEnterFolderCreation = () => {
this.isValidFolderSelection = false;
}
};
onExitFolderCreation() {
onExitFolderCreation = () => {
this.isValidFolderSelection = true;
}
};
}
export function saveDashboardAsDirective() {