diff --git a/README.md b/README.md index 98a1c88..3fc8699 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,9 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and 2. Build plugin in development mode and run in watch mode ```bash + # Spins up a Grafana instance first that we can run our plugin on + npm run server + npm run dev ``` diff --git a/docker-compose.yaml b/docker-compose.yaml index 7cd33ec..88e4742 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -8,7 +8,7 @@ services: context: ./.config args: grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise} - grafana_version: ${GRAFANA_VERSION:-10.0.3} + grafana_version: ${GRAFANA_VERSION:-10.3.1} ports: - 3000:3000/tcp volumes: diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx index 00f14a4..c5ad912 100644 --- a/src/components/QueryEditor.tsx +++ b/src/components/QueryEditor.tsx @@ -1,27 +1,51 @@ -import defaults from 'lodash/defaults'; +import React, { ChangeEvent, useState } from 'react'; +import { Button, Field, InlineField, Input, Select } from '@grafana/ui'; +import { QueryEditorProps, SelectableValue } from '@grafana/data'; +import { NullifySastSummaryDataSource } from '../datasource'; +import { NullifyDataSourceOptions, NullifySastSummaryQueryOptions } from '../types'; -import React, { ChangeEvent, PureComponent } from 'react'; -import { HorizontalGroup } from '@grafana/ui'; -import { QueryEditorProps } from '@grafana/data'; -import { NullifySastDataSource } from '../datasource'; -import { defaultQuery, NullifyDataSourceOptions, MyQuery } from '../types'; +type Props = QueryEditorProps; -type Props = QueryEditorProps; - -export class QueryEditor extends PureComponent { - onQueryTextChange = (event: ChangeEvent) => { - const { onChange, query } = this.props; - onChange({ ...query, queryText: event.target.value }); +export function QueryEditor({ query, onChange, onRunQuery }: Props) { + const onRepoIdChange = (event: ChangeEvent) => { + onChange({ ...query, githubRepositoryId: event.target.value }); + }; + const onSeverityChange = (new_severity: string) => { + onChange({ ...query, severity: new_severity }); + onRunQuery(); }; - render() { - const query = defaults(this.props.query, defaultQuery); - const { queryText } = query; + const severity_options: Array> = [ + { value: '', label: 'ALL' }, + { value: 'LOW', label: 'LOW' }, + { value: 'MEDIUM', label: 'MEDIUM' }, + { value: 'HIGH', label: 'HIGH' }, + { value: 'CRITICAL', label: 'CRITICAL' }, + ]; - return ( - - Queries are not currently supported. - - ); - } + return ( +
+ + + + +