grafana-full-height-panel.js

// entrypoint: /bin/sh -c 'cat /etc/grafana/grafana-full-height-panel.js | tee -a /usr/share/grafana/public/build/app.*.js >/dev/null; exec su -s /bin/sh -c "exec /run.sh" grafana'

(() => {
  let isMouseDown = false;

  document.addEventListener('mousedown', (event) => {
    if (event.which === 1) isMouseDown = true;
  });

  document.addEventListener('mouseup', (event) => {
   if (event.which === 1) isMouseDown = false;
  });

  const resizeElementY = (element, height) => {
    element.dispatchEvent(new MouseEvent('mousedown', {
      clientX: element.getBoundingClientRect().left,
      clientY: element.getBoundingClientRect().top,
      bubbles: true,
      cancelable: true
    }));
  
    element.dispatchEvent(new MouseEvent('mousemove', {
      clientX: element.getBoundingClientRect().left,
      clientY: height,
      bubbles: true,
      cancelable: true
    }));
  
    element.dispatchEvent(new MouseEvent('mouseup', {
      bubbles: true,
      cancelable: true
    }));
  };

  const fullHeightAnnotation = '[full-height]';
  
  const findFullHeightPanels = () => {
    document.querySelectorAll('[data-panelid]').forEach(panel => {
      const title = panel.querySelector('.panel-title>*:first-child');
      if (title && title.textContent.includes(fullHeightAnnotation)) {
        title.textContent = title.textContent.replace(' ' + fullHeightAnnotation, '')
        panel.dataset.fullHeight = '1';
      }
    });
  }
  
  const resizePanels = () => {
    const scrollbar = document.querySelector('.main-view>div>div>div>.scrollbar-view');
    document.querySelectorAll('[data-panelid][data-full-height]').forEach(panel => {
      const handle = panel.querySelector('.react-resizable-handle');
      resizeElementY(
        handle,
        scrollbar.getBoundingClientRect().height - scrollbar.scrollTop + 20
      );
    });
  };

  const scheduleResizePanels = () => {
    setTimeout(() => {
      if (isMouseDown)
        scheduleResizePanels();
      else
        resizePanels();
    }, 1);
  };

  const getPanelState = () => JSON.stringify(
    [location.href].concat(
      Array.from(document.querySelectorAll('[data-panelid][data-full-height]'))
        .map(e => [e.dataset.panelid, e.offsetTop, e.clientHeight])
    )
  );

  let lastPanelState = '';
  const checkState = () => {
    findFullHeightPanels();
    
    const panelState = getPanelState();
    if (lastPanelState !== panelState) {
      lastPanelState = panelState;
      setTimeout(scheduleResizePanels, 100);
    }
  };

  window.addEventListener('resize', scheduleResizePanels);
  setInterval(checkState, 200);
})();