Bug 2013990

Description of problem:
When the user opens the Observe > Dashboard in admin or developer perspective and switches the perspective in another tab, the observe dashboard crashs on reload.

Version-Release number of selected component (if applicable):
4.9

How reproducible:
Always

Steps to Reproduce:
1. Navigate to the Observe dashboard view
2. Select a dashboard
3. Open the console in another browser tab (right click in navigation > open in new tab)
4. Change the perspective in this new tab 
5. Switch back to the browser tab with the observe dashboard view and reload the browser tab

Actual results:
Content area crashs and shows "Oh no! Something went wrong."

StackTrace:
  TypeError: Cannot read properties of undefined (reading 'value')
  in VariableDropdown (public/components/monitoring/dashboards/index.tsx:176)

Quick code analyse shows that the variable to get the query is not defined here:

  const VariableDropdown: React.FC<VariableDropdownProps> = ({ id, name }) => {
    const [activePerspective] = useActivePerspective();
    const timespan = useSelector(({ UI }: RootState) =>
      UI.getIn(['monitoringDashboards', activePerspective, 'timespan']),
    );
    const variables = useSelector(({ UI }: RootState) =>
      UI.getIn(['monitoringDashboards', activePerspective, 'variables']),
    );
    const variable = variables.toJS()[name];
    const query = evaluateTemplate(variable.query, variables, timespan);

The reason is that that the redux state ... => 'monitoringDashboards' => 'activePerspective => 'variables' is not initialized correctly.


Expected results:
No crash

Additional info: