/* * Copyright 2024 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import type { AllPromLabelsValues, ChartModel, DashboardModel, LineInfo, Overlay, RawOrBucket, } from '@backstage-community/plugin-kiali-common/types'; import { Grid } from '@material-ui/core'; import { isArray } from 'lodash'; import { default as React } from 'react'; import { getDataSupplier } from '../../utils/VictoryChartsUtils'; import { BrushHandlers } from './Container'; import { KChart } from './KChart'; export type Props = { colors?: string[]; dashboard: DashboardModel; maximizedChart?: string; expandHandler: (expandedChart?: string) => void; labelValues: AllPromLabelsValues; labelPrettifier?: (key: string, value: string) => string; onClick?: (chart: ChartModel, datum: RawOrBucket) => void; brushHandlers?: BrushHandlers; template?: string; dashboardHeight: number; showSpans: boolean; showTrendlines?: boolean; customMetric?: boolean; overlay?: Overlay; timeWindow?: [Date, Date]; }; type State = { maximizedChart?: string; }; export class Dashboard extends React.Component< Props, State > { constructor(props: Props) { super(props); this.state = { maximizedChart: props.maximizedChart, }; } private onToggleMaximized = (chartKey: string): void => { const maximized = this.state.maximizedChart ? undefined : chartKey; this.setState(prevState => ({ maximizedChart: prevState.maximizedChart ? undefined : chartKey, })); this.props.expandHandler(maximized); }; private getChartHeight = (): number => { if (this.state.maximizedChart) { return this.props.dashboardHeight; } // Dashboards define the rows that are used // Columns are defined using the spans field in the charts definition using a flex strategy // When columns span the grid (12 spans) charts move to the next row // By default metrics use a 2 row layout const rows = this.props.dashboard.rows > 0 ? this.props.dashboard.rows : 2; return this.props.dashboardHeight / rows; }; private renderChart(chart: ChartModel) { let colorScale = this.props.colors || [ '#0066cc', '#8bc1f7', '#3e8635', '#f0ab00', '#c9190b', '#8a8d90', ]; if (!isArray(colorScale)) { colorScale = [colorScale]; } const dataSupplier = getDataSupplier( chart, { values: this.props.labelValues, prettifier: this.props.labelPrettifier, }, colorScale as string[], ); let onClick: ((datum: RawOrBucket) => void) | undefined = undefined; if (this.props.onClick) { onClick = (datum: RawOrBucket) => this.props.onClick!(chart, datum); } return ( this.onToggleMaximized(chart.name)} isMaximized={this.state.maximizedChart !== undefined} overlay={chart.xAxis === 'series' ? undefined : this.props.overlay} onClick={onClick} brushHandlers={this.props.brushHandlers} timeWindow={this.props.timeWindow} /> ); } render() { if (this.state.maximizedChart) { const chart = this.props.dashboard.charts.find( c => c.name === this.state.maximizedChart, ); if (chart) { return this.renderChart(chart); } } return ( {this.props.dashboard.charts.map(c => { return {this.renderChart(c)}; })} ); } }