Auto Refresh Dashboard

1// ==UserScript==
2// @name		Auto Refresh Dashboard
3// @description		Automatically refreshes the Coralogix dashboard every 5 seconds
4// @version		1.1.2
5// @match		https://*.impala.app.cx498.coralogix.com/*
6// @icon		https://impala.app.cx498.coralogix.com/favicon.svg
7// ==/UserScript==
8(function() {
9    'use strict';
10
11    console.log('Auto Refresh Dashboard extension started');
12
13    let autoRefreshEnabled = true;
14    let intervalId = null;
15
16    function clickRefreshButton() {
17        // Find the refresh button using its specific data-test attribute
18        const refreshButton = document.querySelector('cx-button[data-test="cd-refresh-dashboard-button"] button');
19        
20        if (refreshButton) {
21            console.log('Clicking refresh button');
22            refreshButton.click();
23        } else {
24            console.log('Refresh button not found, will retry');
25        }
26    }
27
28    function createToggleButton() {
29        // Find the refresh button container
30        const refreshButtonContainer = document.querySelector('sh-refresh-button');
31        
32        if (!refreshButtonContainer) {
33            console.log('Refresh button container not found, will retry');
34            return false;
35        }
36
37        // Check if toggle button already exists
38        if (document.getElementById('auto-refresh-toggle')) {
39            return true;
40        }
41
42        // Create toggle button container
43        const toggleContainer = document.createElement('div');
44        toggleContainer.id = 'auto-refresh-toggle';
45        toggleContainer.style.cssText = 'display: inline-flex; margin-right: 8px;';
46
47        // Create the toggle button
48        const toggleButton = document.createElement('button');
49        toggleButton.style.cssText = `
50            background-color: ${autoRefreshEnabled ? 'rgb(2, 148, 73)' : 'rgba(0, 0, 0, 0)'};
51            color: ${autoRefreshEnabled ? 'white' : 'rgb(2, 148, 73)'};
52            padding: 0px 12px;
53            border: 1px solid ${autoRefreshEnabled ? 'rgb(2, 148, 73)' : 'rgb(236, 236, 238)'};
54            border-radius: 6px;
55            font-size: 12px;
56            font-family: "Nunito Sans";
57            height: 32px;
58            display: flex;
59            align-items: center;
60            gap: 6px;
61            cursor: pointer;
62            transition: all 0.2s ease;
63        `;
64        
65        toggleButton.innerHTML = `
66            <span style="font-size: 14px;">${autoRefreshEnabled ? '⏸' : '▶'}</span>
67            <span>Auto Refresh (5s)</span>
68        `;
69
70        toggleButton.addEventListener('click', () => {
71            autoRefreshEnabled = !autoRefreshEnabled;
72            console.log('Auto refresh toggled:', autoRefreshEnabled ? 'enabled' : 'disabled');
73            
74            // Update button appearance
75            if (autoRefreshEnabled) {
76                toggleButton.style.backgroundColor = 'rgb(2, 148, 73)';
77                toggleButton.style.color = 'white';
78                toggleButton.style.borderColor = 'rgb(2, 148, 73)';
79                toggleButton.querySelector('span:first-child').textContent = '⏸';
80                startAutoRefresh();
81            } else {
82                toggleButton.style.backgroundColor = 'rgba(0, 0, 0, 0)';
83                toggleButton.style.color = 'rgb(2, 148, 73)';
84                toggleButton.style.borderColor = 'rgb(236, 236, 238)';
85                toggleButton.querySelector('span:first-child').textContent = '▶';
86                stopAutoRefresh();
87            }
88        });
89
90        toggleButton.addEventListener('mouseenter', () => {
91            if (!autoRefreshEnabled) {
92                toggleButton.style.backgroundColor = 'rgb(246, 246, 247)';
93            }
94        });
95
96        toggleButton.addEventListener('mouseleave', () => {
97            if (!autoRefreshEnabled) {
98                toggleButton.style.backgroundColor = 'rgba(0, 0, 0, 0)';
99            }
100        });
101
102        toggleContainer.appendChild(toggleButton);
103        
104        // Insert before the refresh button
105        refreshButtonContainer.parentNode.insertBefore(toggleContainer, refreshButtonContainer);
106        
107        console.log('Toggle button created');
108        return true;
109    }
110
111    function startAutoRefresh() {
112        if (intervalId) {
113            clearInterval(intervalId);
114        }
115        
116        // Click immediately
117        clickRefreshButton();
118        
119        // Set up interval to click every 5 seconds
120        intervalId = setInterval(() => {
121            if (autoRefreshEnabled) {
122                clickRefreshButton();
123            }
124        }, 5000);
125        
126        console.log('Auto refresh started');
127    }
128
129    function stopAutoRefresh() {
130        if (intervalId) {
131            clearInterval(intervalId);
132            intervalId = null;
133        }
134        console.log('Auto refresh stopped');
135    }
136
137    function init() {
138        console.log('Initializing auto-refresh with 5 second interval');
139        
140        // Wait for the page to be ready and create toggle button
141        setTimeout(() => {
142            const buttonCreated = createToggleButton();
143            if (buttonCreated && autoRefreshEnabled) {
144                startAutoRefresh();
145            } else if (!buttonCreated) {
146                // Retry if button wasn't created
147                setTimeout(init, 1000);
148            }
149        }, 1000);
150    }
151
152    // Wait for the page to be ready
153    if (document.readyState === 'loading') {
154        document.addEventListener('DOMContentLoaded', init);
155    } else {
156        init();
157    }
158})();