IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-09-05 04:40:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

[Under FF] New DS Picker with advance mode (#66566)

Browse Source 
* Add a wrapper to switch between the previous and new DS picker depending on the feature toggle advancedDataSourcePicker.

* Add a new component to represent the modal DS picker, which we will refer as advanced DS picker
Integrate this into the Edit panel, for now, until we're ready to replace everywhere the grafana-runtime DS picker by the wrapper.

* Replace Drawer component with the dropdown

* Adjust the first version of the styles to fit into this Figma design

* Adjust the design of the FileDropzoneDefaultChildren to match with the new DS modal but everywhere else is used nowadays.

---------

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>
This commit is contained in:
Ivan Ortega Alba
2023-04-19 16:08:09 +03:00
committed by GitHub
co-authored by Oscar Kilhed
parent ee247e33b4
commit c7af53b79f
22 changed files with 762 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/query/components/QueryGroup.tsx
+36 -28
View File
@@ -15,14 +15,14 @@ import {
PanelData,
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
import { getDataSourceSrv } from '@grafana/runtime';
import { Button, CustomScrollbar, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
import config from 'app/core/config';
import { backendSrv } from 'app/core/services/backend_srv';
import { addQuery, queryIsEmpty } from 'app/core/utils/query';
import * as DFImport from 'app/features/dataframe-import';
import { DataSourcePickerWithHistory } from 'app/features/datasource-drawer/DataSourcePickerWithHistory';
import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
import { GrafanaQuery, GrafanaQueryType } from 'app/plugins/datasource/grafana/types';
@@ -214,32 +214,22 @@ export class QueryGroup extends PureComponent<Props, State> {
Data source
</InlineFormLabel>
<div className={styles.dataSourceRowItem}>
{config.featureToggles.advancedDataSourcePicker ? (
<DataSourcePickerWithHistory
onChange={this.onChangeDataSource}
current={options.dataSource}
metrics={true}
mixed={true}
dashboard={true}
variables={true}
enableFileUpload={config.featureToggles.editPanelCSVDragAndDrop}
fileUploadOptions={{
onDrop: this.onFileDrop,
maxSize: DFImport.maxFileSize,
multiple: false,
accept: DFImport.acceptedFiles,
}}
></DataSourcePickerWithHistory>
) : (
<DataSourcePicker
onChange={this.onChangeDataSource}
current={options.dataSource}
metrics={true}
mixed={true}
dashboard={true}
variables={true}
></DataSourcePicker>
)}
<DataSourcePicker
onChange={this.onChangeDataSource}
current={options.dataSource}
metrics={true}
mixed={true}
dashboard={true}
variables={true}
enableFileUpload={config.featureToggles.editPanelCSVDragAndDrop}
fileUploadOptions={{
onDrop: this.onFileDrop,
maxSize: DFImport.maxFileSize,
multiple: false,
accept: DFImport.acceptedFiles,
}}
onClickAddCSV={this.onClickAddCSV}
/>
</div>
{dataSource && (
<>
@@ -315,6 +305,24 @@ export class QueryGroup extends PureComponent<Props, State> {
this.onScrollBottom();
};
onClickAddCSV = async () => {
const ds = getDataSourceSrv().getInstanceSettings('-- Grafana --');
await this.onChangeDataSource(ds!);
this.onQueriesChange([
{
refId: 'A',
datasource: {
type: 'grafana',
uid: 'grafana',
},
queryType: GrafanaQueryType.Snapshot,
snapshot: [],
},
]);
this.props.onRunQueries();
};
onFileDrop = (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => {
DFImport.filesToDataframes(acceptedFiles).subscribe(async (next) => {
const snapshot: DataFrameJSON[] = [];