Solo Panel: Configurable timezone (#59153)

* Allow to set timezone in query

* Use optional timestamp

* Update timeZone

public/app/features/dashboard/containers/SoloPanelPage.tsx

@@ -26,7 +26,7 @@ const mapDispatchToProps = {
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
-export type Props = GrafanaRouteComponentProps<DashboardPageRouteParams, { panelId: string }> &
+export type Props = GrafanaRouteComponentProps<DashboardPageRouteParams, { panelId: string; timezone?: string }> &
   ConnectedProps<typeof connector>;
 
 export interface State {
@@ -87,6 +87,7 @@ export class SoloPanelPage extends Component<Props, State> {
         notFound={this.state.notFound}
         panel={this.state.panel}
         panelId={this.getPanelId()}
+        timezone={this.props.queryParams.timezone}
       />
     );
   }
@@ -95,9 +96,10 @@ export class SoloPanelPage extends Component<Props, State> {
 export interface SoloPanelProps extends State {
   dashboard: DashboardModel | null;
   panelId: number;
+  timezone?: string;
 }
 
-export const SoloPanel = ({ dashboard, notFound, panel, panelId }: SoloPanelProps) => {
+export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: SoloPanelProps) => {
   if (notFound) {
     return <div className="alert alert-error">Panel with id {panelId} not found</div>;
   }
@@ -123,6 +125,7 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId }: SoloPanelProp
               isEditing={false}
               isViewing={false}
               lazy={false}
+              timezone={timezone}
             />
           );
         }}

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -20,6 +20,7 @@ export interface OwnProps {
   width: number;
   height: number;
   lazy?: boolean;
+  timezone?: string;
 }
 
 const mapStateToProps = (state: StoreState, props: OwnProps) => {
@@ -70,7 +71,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
   };
 
   renderPanel = (isInView: boolean) => {
-    const { dashboard, panel, isViewing, isEditing, width, height, plugin } = this.props;
+    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone } = this.props;
 
     if (!plugin) {
       return null;
@@ -102,6 +103,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
         width={width}
         height={height}
         onInstanceStateChange={this.onInstanceStateChange}
+        timezone={timezone}
       />
     );
   };

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -61,6 +61,7 @@ export interface Props {
   width: number;
   height: number;
   onInstanceStateChange: (value: any) => void;
+  timezone?: string;
 }
 
 export interface State {
@@ -521,6 +522,8 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     // Yes this is called ever render for a function that is triggered on every mouse move
     this.eventFilter.onlyLocal = dashboard.graphTooltip === 0;
 
+    const timeZone = this.props.timezone || this.props.dashboard.getTimezone();
+
     return (
       <>
         <div className={panelContentClassNames}>
@@ -531,7 +534,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
                 data={data}
                 title={panel.title}
                 timeRange={timeRange}
-                timeZone={this.props.dashboard.getTimezone()}
+                timeZone={timeZone}
                 options={panelOptions}
                 fieldConfig={panel.fieldConfig}
                 transparent={panel.transparent}