|
|
@ -1,4 +1,4 @@ |
|
|
|
import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus } from '../types'; |
|
|
|
import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus, Dashboard } from '../types'; |
|
|
|
|
|
|
|
|
|
|
|
import { convertTimestampToDate, convertTimeZoneTypeToName, getDashboardUid } from '../../../utils'; |
|
|
|
import { convertTimestampToDate, convertTimeZoneTypeToName, getDashboardUid } from '../../../utils'; |
|
|
|
import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons'; |
|
|
|
import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons'; |
|
|
@ -45,7 +45,7 @@ interface Props extends PanelProps<PanelOptions> {} |
|
|
|
|
|
|
|
|
|
|
|
export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
// TODO: Dashboard type
|
|
|
|
// TODO: Dashboard type
|
|
|
|
const [dashboard, setDashboard] = useState<any | null>(null); |
|
|
|
const [dashboard, setDashboard] = useState<Dashboard | null>(null); |
|
|
|
const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null); |
|
|
|
const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null); |
|
|
|
|
|
|
|
|
|
|
|
const [tasks, setTasks] = useState<ExportTask[] | null>(null); |
|
|
|
const [tasks, setTasks] = useState<ExportTask[] | null>(null); |
|
|
@ -93,10 +93,28 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (tasks === null) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const dataFrame = getDataFrameForTaskTable(tasks); |
|
|
|
|
|
|
|
setTasksDataFrame(dataFrame); |
|
|
|
|
|
|
|
}, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (queries === null) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
setQueriesDataFrame(getDataFrameForQueriesTable(queries)); |
|
|
|
|
|
|
|
}, [queries]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function updateQueries(dashboard: Dashboard | null, datasources: DataSourceSettings[] | null): Promise<void> { |
|
|
|
if (!dashboard || !datasources) { |
|
|
|
if (!dashboard || !datasources) { |
|
|
|
|
|
|
|
console.warn(`Can't update queries if there is no dashboard or datasources`); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
dashboard.panels.forEach((panel: PanelModel) => { |
|
|
|
dashboard.panels?.forEach((panel: PanelModel) => { |
|
|
|
const queries: DashboardQuery[] = []; |
|
|
|
const queries: DashboardQuery[] = []; |
|
|
|
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
@ -118,24 +136,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
|
|
|
|
|
|
|
|
setQueries(queries); |
|
|
|
setQueries(queries); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, [dashboard, datasources]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (tasks === null) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const dataFrame = getDataFrameForTaskTable(tasks); |
|
|
|
|
|
|
|
setTasksDataFrame(dataFrame); |
|
|
|
|
|
|
|
}, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (queries === null) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
setQueriesDataFrame(getDataFrameForQueriesTable(queries)); |
|
|
|
|
|
|
|
}, [queries]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function fetchTasks(): void { |
|
|
|
function fetchTasks(): void { |
|
|
|
getTasks() |
|
|
|
getTasks() |
|
|
@ -212,7 +213,8 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
setQueries(queries.map((query: DashboardQuery) => ({ ...query, selected: false }))); |
|
|
|
setQueries(queries.map((query: DashboardQuery) => ({ ...query, selected: false }))); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function openDatasourceModal(): void { |
|
|
|
function openDatasourceModal(dashboard: Dashboard | null, datasources: DataSourceSettings[] | null): void { |
|
|
|
|
|
|
|
updateQueries(dashboard, datasources); |
|
|
|
setTimeRange(timeRange); |
|
|
|
setTimeRange(timeRange); |
|
|
|
setModalVisibility(true); |
|
|
|
setModalVisibility(true); |
|
|
|
} |
|
|
|
} |
|
|
@ -439,7 +441,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) { |
|
|
|
aria-label="Rich history button" |
|
|
|
aria-label="Rich history button" |
|
|
|
icon="plus" |
|
|
|
icon="plus" |
|
|
|
style={{ marginTop: '8px' }} |
|
|
|
style={{ marginTop: '8px' }} |
|
|
|
onClick={openDatasourceModal} |
|
|
|
onClick={() => openDatasourceModal(dashboard, datasources)} |
|
|
|
> |
|
|
|
> |
|
|
|
Add Task |
|
|
|
Add Task |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|