Merge pull request #160 from wakatime/sebas-implement-send-heartbeat
chore: implements send Heartbeat functionality
This commit is contained in:
Juan Sebastian velez Posada
@@ -37,6 +37,7 @@ module.exports = {
|
||||
},
|
||||
plugins: ['react', '@typescript-eslint', 'typescript-sort-keys', 'sort-keys-fix'],
|
||||
rules: {
|
||||
'no-await-in-loop': 'off',
|
||||
'prettier/prettier': 'error',
|
||||
'sort-keys-fix/sort-keys-fix': 'error',
|
||||
'testing-library/no-debug': 'off',
|
||||
|
||||
@@ -6,18 +6,27 @@ browser.alarms.onAlarm.addListener(async (alarm) => {
|
||||
// |alarm| can be undefined because onAlarm also gets called from
|
||||
// window.setTimeout on old chrome versions.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (alarm?.name == 'heartbeatAlarm') {
|
||||
console.log('recording a heartbeat - alarm triggered');
|
||||
|
||||
await WakaTimeCore.recordHeartbeat();
|
||||
if (alarm && alarm.name == 'heartbeatAlarm') {
|
||||
// Checks if the user is online and if there are cached heartbeats requests,
|
||||
// if so then procedd to send these payload to wakatime api
|
||||
if (navigator.onLine) {
|
||||
const { cachedHeartbeats } = await browser.storage.sync.get({
|
||||
cachedHeartbeats: [],
|
||||
});
|
||||
await browser.storage.sync.set({ cachedHeartbeats: [] });
|
||||
await WakaTimeCore.sendCachedHeartbeatsRequest(cachedHeartbeats as Record<string, unknown>[]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Create a new alarm for sending cached heartbeats.
|
||||
browser.alarms.create('heartbeatAlarm', { periodInMinutes: 2 });
|
||||
|
||||
/**
|
||||
* Whenever a active tab is changed it records a heartbeat with that tab url.
|
||||
*/
|
||||
browser.tabs.onActivated.addListener(async () => {
|
||||
console.log('recording a heartbeat - active tab changed');
|
||||
console.log('recording a heartbeat - active tab changed ');
|
||||
await WakaTimeCore.recordHeartbeat();
|
||||
});
|
||||
|
||||
@@ -28,8 +37,6 @@ browser.windows.onFocusChanged.addListener(async (windowId) => {
|
||||
if (windowId != browser.windows.WINDOW_ID_NONE) {
|
||||
console.log('recording a heartbeat - active window changed');
|
||||
await WakaTimeCore.recordHeartbeat();
|
||||
} else {
|
||||
console.log('lost focus');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
122
src/components/NavBar.test.tsx
Normal file
122
src/components/NavBar.test.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React from 'react';
|
||||
import { renderWithProviders } from '../utils/test-utils';
|
||||
import NavBar from './NavBar';
|
||||
|
||||
jest.mock('webextension-polyfill', () => {
|
||||
return {
|
||||
runtime: {
|
||||
getManifest: () => {
|
||||
return { version: 'test-version' };
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('NavBar', () => {
|
||||
it('should render properly', () => {
|
||||
const { container } = renderWithProviders(<NavBar />);
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
<div>
|
||||
<nav
|
||||
class="navbar navbar-default"
|
||||
role="navigation"
|
||||
>
|
||||
<div
|
||||
class="container-fluid"
|
||||
>
|
||||
<div
|
||||
class="navbar-header"
|
||||
>
|
||||
<button
|
||||
class="navbar-toggle collapsed"
|
||||
data-target="#bs-example-navbar-collapse-1"
|
||||
data-toggle="collapse"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
Toggle navigation
|
||||
</span>
|
||||
<i
|
||||
class="fa fa-fw fa-cogs"
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
class="navbar-brand"
|
||||
href="https://wakatime.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
WakaTime
|
||||
<img
|
||||
src="graphics/wakatime-logo-48.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="collapse navbar-collapse"
|
||||
id="bs-example-navbar-collapse-1"
|
||||
>
|
||||
<div />
|
||||
<ul
|
||||
class="nav navbar-nav"
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
<li
|
||||
class="dropdown"
|
||||
>
|
||||
<a
|
||||
aria-expanded="false"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-info"
|
||||
/>
|
||||
About
|
||||
<span
|
||||
class="caret"
|
||||
/>
|
||||
</a>
|
||||
<ul
|
||||
class="dropdown-menu"
|
||||
role="menu"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-bug"
|
||||
/>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-github"
|
||||
/>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
});
|
||||
@@ -1,9 +1,13 @@
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import moment from 'moment';
|
||||
import { Tabs } from 'webextension-polyfill';
|
||||
import browser, { Tabs } from 'webextension-polyfill';
|
||||
import { AxiosUserResponse, User } from '../types/user';
|
||||
import config from '../config/config';
|
||||
import { SummariesPayload, GrandTotal } from '../types/summaries';
|
||||
import changeExtensionState from '../utils/changeExtensionState';
|
||||
import contains from '../utils/contains';
|
||||
import { SendHeartbeat } from '../types/heartbeats';
|
||||
import getDomainFromUrl from '../utils/getDomainFromUrl';
|
||||
|
||||
class WakaTimeCore {
|
||||
tabsWithDevtoolsOpen: Tabs.Tab[];
|
||||
@@ -30,6 +34,11 @@ class WakaTimeCore {
|
||||
return summariesAxiosPayload.data.data[0].grand_total;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the user is logged in.
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
async checkAuth(api_key = ''): Promise<User> {
|
||||
const userPayload: AxiosResponse<AxiosUserResponse> = await axios.get(
|
||||
config.currentUserApiUrl,
|
||||
@@ -38,13 +47,258 @@ class WakaTimeCore {
|
||||
return userPayload.data.data;
|
||||
}
|
||||
|
||||
async getApiKey(): Promise<string> {
|
||||
const storage = await browser.storage.sync.get({
|
||||
apiKey: config.apiKey,
|
||||
});
|
||||
const apiKey = storage.apiKey as string;
|
||||
return apiKey;
|
||||
}
|
||||
|
||||
/**
|
||||
* Depending on various factors detects the current active tab URL or domain,
|
||||
* and sends it to WakaTime for logging.
|
||||
*/
|
||||
async recordHeartbeat(): Promise<void> {
|
||||
const apiKey = await this.getApiKey();
|
||||
if (!apiKey) {
|
||||
return changeExtensionState('notLogging');
|
||||
}
|
||||
const items = await browser.storage.sync.get({
|
||||
blacklist: '',
|
||||
loggingEnabled: config.loggingEnabled,
|
||||
loggingStyle: config.loggingStyle,
|
||||
whitelist: '',
|
||||
});
|
||||
if (items.loggingEnabled === true) {
|
||||
await changeExtensionState('allGood');
|
||||
|
||||
const newState = await browser.idle.queryState(config.detectionIntervalInSeconds);
|
||||
|
||||
if (newState === 'active') {
|
||||
// Get current tab URL.
|
||||
const tabs = await browser.tabs.query({ active: true, currentWindow: true });
|
||||
if (tabs.length == 0) return;
|
||||
|
||||
const currentActiveTab = tabs[0];
|
||||
|
||||
if (items.loggingStyle == 'blacklist') {
|
||||
if (!contains(currentActiveTab.url as string, items.blacklist as string)) {
|
||||
await this.sendHeartbeat(
|
||||
{
|
||||
project: null,
|
||||
url: currentActiveTab.url as string,
|
||||
},
|
||||
apiKey,
|
||||
);
|
||||
} else {
|
||||
await changeExtensionState('blacklisted');
|
||||
console.log(`${currentActiveTab.url} is on a blacklist.`);
|
||||
}
|
||||
}
|
||||
|
||||
if (items.loggingStyle == 'whitelist') {
|
||||
const heartbeat = this.getHeartbeat(
|
||||
currentActiveTab.url as string,
|
||||
items.whitelist as string,
|
||||
);
|
||||
if (heartbeat.url) {
|
||||
await this.sendHeartbeat(heartbeat, apiKey);
|
||||
} else {
|
||||
await changeExtensionState('whitelisted');
|
||||
console.log(`${currentActiveTab.url} is not on a whitelist.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await changeExtensionState('notLogging');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an array from list using \n as delimiter
|
||||
* and checks if any element in list is contained in the url.
|
||||
* Also checks if element is assigned to a project using @@ as delimiter
|
||||
*
|
||||
* @param url
|
||||
* @param list
|
||||
* @returns {object}
|
||||
*/
|
||||
getHeartbeat(url: string, list: string) {
|
||||
const projectIndicatorCharacters = '@@';
|
||||
|
||||
const lines = list.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
// strip (http:// or https://) and trailing (`/` or `@@`)
|
||||
const cleanLine = lines[i]
|
||||
.trim()
|
||||
.replace(/(\/|@@)$/, '')
|
||||
.replace(/^(?:https?:\/\/)?/i, '');
|
||||
if (cleanLine === '') continue;
|
||||
|
||||
const projectIndicatorIndex = cleanLine.lastIndexOf(projectIndicatorCharacters);
|
||||
const projectIndicatorExists = projectIndicatorIndex > -1;
|
||||
let projectName = null;
|
||||
let urlFromLine = cleanLine;
|
||||
if (projectIndicatorExists) {
|
||||
const start = projectIndicatorIndex + projectIndicatorCharacters.length;
|
||||
projectName = cleanLine.substring(start);
|
||||
urlFromLine = cleanLine
|
||||
.replace(cleanLine.substring(projectIndicatorIndex), '')
|
||||
.replace(/\/$/, '');
|
||||
}
|
||||
const schemaHttpExists = url.match(/^http:\/\//i);
|
||||
const schemaHttpsExists = url.match(/^https:\/\//i);
|
||||
let schema = '';
|
||||
if (schemaHttpExists) {
|
||||
schema = 'http://';
|
||||
}
|
||||
if (schemaHttpsExists) {
|
||||
schema = 'https://';
|
||||
}
|
||||
const cleanUrl = url
|
||||
.trim()
|
||||
.replace(/(\/|@@)$/, '')
|
||||
.replace(/^(?:https?:\/\/)?/i, '');
|
||||
const startsWithUrl = cleanUrl.toLowerCase().includes(urlFromLine.toLowerCase());
|
||||
if (startsWithUrl) {
|
||||
return {
|
||||
project: projectName,
|
||||
url: schema + urlFromLine,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
project: null,
|
||||
url: null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Given the heartbeat and logging type it creates a payload and
|
||||
* sends an ajax post request to the API.
|
||||
*
|
||||
* @param heartbeat
|
||||
* @param debug
|
||||
*/
|
||||
async sendHeartbeat(heartbeat: SendHeartbeat, apiKey: string): Promise<void> {
|
||||
let payload;
|
||||
|
||||
const loggingType = await this.getLoggingType();
|
||||
// Get only the domain from the entity.
|
||||
// And send that in heartbeat
|
||||
if (loggingType == 'domain') {
|
||||
heartbeat.url = getDomainFromUrl(heartbeat.url);
|
||||
payload = this.preparePayload(heartbeat, 'domain');
|
||||
await this.sendPostRequestToApi(payload, apiKey);
|
||||
}
|
||||
// Send entity in heartbeat
|
||||
else if (loggingType == 'url') {
|
||||
payload = this.preparePayload(heartbeat, 'url');
|
||||
await this.sendPostRequestToApi(payload, apiKey);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a promise with logging type variable.
|
||||
*
|
||||
* @returns {*}
|
||||
* @private
|
||||
*/
|
||||
async getLoggingType(): Promise<string> {
|
||||
const items = await browser.storage.sync.get({
|
||||
loggingType: config.loggingType,
|
||||
});
|
||||
|
||||
return items.loggingType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates payload for the heartbeat and returns it as JSON.
|
||||
*
|
||||
* @param heartbeat
|
||||
* @param type
|
||||
* @param debug
|
||||
* @returns {*}
|
||||
* @private
|
||||
*/
|
||||
preparePayload(heartbeat: SendHeartbeat, type: string): Record<string, unknown> {
|
||||
let browserName = 'chrome';
|
||||
let userAgent;
|
||||
if (navigator.userAgent.includes('Firefox')) {
|
||||
browserName = 'firefox';
|
||||
userAgent = navigator.userAgent.match(/Firefox\/\S+/g)![0];
|
||||
} else {
|
||||
userAgent = navigator.userAgent.match(/Chrome\/\S+/g)![0];
|
||||
}
|
||||
const payload: Record<string, unknown> = {
|
||||
entity: heartbeat.url,
|
||||
time: moment().format('X'),
|
||||
type: type,
|
||||
user_agent: `${userAgent} ${browserName}-wakatime/${config.version}`,
|
||||
};
|
||||
|
||||
if (heartbeat.project) {
|
||||
payload.project = heartbeat.project;
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends AJAX request with payload to the heartbeat API as JSON.
|
||||
*
|
||||
* @param payload
|
||||
* @param method
|
||||
* @returns {*}
|
||||
*/
|
||||
async sendPostRequestToApi(payload: Record<string, unknown>, apiKey = '') {
|
||||
try {
|
||||
const response = await fetch(`${config.heartbeatApiUrl}?api_key=${apiKey}`, {
|
||||
body: JSON.stringify(payload),
|
||||
method: 'POST',
|
||||
});
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (err: unknown) {
|
||||
// Stores the payload of the request to be send later
|
||||
const { cachedHeartbeats } = await browser.storage.sync.get({
|
||||
cachedHeartbeats: [],
|
||||
});
|
||||
cachedHeartbeats.push(payload);
|
||||
await browser.storage.sync.set({ cachedHeartbeats });
|
||||
await changeExtensionState('notSignedIn');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends cached heartbeats request to wakatime api
|
||||
* @param requests
|
||||
*/
|
||||
async sendCachedHeartbeatsRequest(requests: Record<string, unknown>[]): Promise<void> {
|
||||
const apiKey = await this.getApiKey();
|
||||
if (!apiKey) {
|
||||
return changeExtensionState('notLogging');
|
||||
}
|
||||
const chunkSize = 50; // Create batches of max 50 request
|
||||
for (let i = 0; i < requests.length; i += chunkSize) {
|
||||
const chunk = requests.slice(i, i + chunkSize);
|
||||
const requestsPromises: Promise<Response>[] = [];
|
||||
chunk.forEach((request) =>
|
||||
requestsPromises.push(
|
||||
fetch(`${config.heartbeatApiUrl}?api_key=${apiKey}`, {
|
||||
body: JSON.stringify(request),
|
||||
method: 'POST',
|
||||
}),
|
||||
),
|
||||
);
|
||||
try {
|
||||
await Promise.all(requestsPromises);
|
||||
} catch (error: unknown) {
|
||||
console.log('Error sending heartbeats');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,5 +39,5 @@
|
||||
"storage",
|
||||
"idle"
|
||||
],
|
||||
"version": "2.0.1"
|
||||
"version": "3.0.0"
|
||||
}
|
||||
|
||||
@@ -26,3 +26,8 @@ export interface Datum {
|
||||
user_agent_id: string;
|
||||
user_id: string;
|
||||
}
|
||||
|
||||
export interface SendHeartbeat {
|
||||
project: string | null;
|
||||
url: string;
|
||||
}
|
||||
|
||||
@@ -7,22 +7,23 @@ type ColorIconTypes = 'gray' | 'red' | 'white' | '';
|
||||
* It changes the extension icon color.
|
||||
*/
|
||||
export default async function changeExtensionIcon(color?: ColorIconTypes): Promise<void> {
|
||||
let path;
|
||||
if (color) {
|
||||
const path = `./graphics/wakatime-logo-38-${color}.png`;
|
||||
|
||||
await browser.browserAction.setIcon({
|
||||
path: path,
|
||||
});
|
||||
path = `./graphics/wakatime-logo-38-${color}.png`;
|
||||
} else {
|
||||
const { theme } = await browser.storage.sync.get({
|
||||
theme: config.theme,
|
||||
});
|
||||
const path =
|
||||
path =
|
||||
theme === config.theme
|
||||
? './graphics/wakatime-logo-38.png'
|
||||
: './graphics/wakatime-logo-38-white.png';
|
||||
await browser.browserAction.setIcon({
|
||||
path: path,
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (browser.browserAction) {
|
||||
await browser.browserAction.setIcon({ path: path }); // Support for FF with manifest V2
|
||||
} else {
|
||||
await browser.action.setIcon({ path: path }); // Support for Chrome with manifest V3
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,5 +12,10 @@ export default async function changeExtensionTooltip(text: string): Promise<void
|
||||
text = `${config.name} - ${text}`;
|
||||
}
|
||||
|
||||
await browser.browserAction.setTitle({ title: text });
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (browser.browserAction) {
|
||||
await browser.browserAction.setTitle({ title: text }); // Support for FF with manifest V2
|
||||
} else {
|
||||
await browser.action.setTitle({ title: text }); // Support for Chrome with manifest V3
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Returns boolean if needle is found in haystack or not.
|
||||
*/
|
||||
export default function in_array<T>(needle: T, haystack: T[]): boolean {
|
||||
export default function inArray<T>(needle: T, haystack: T[]): boolean {
|
||||
for (let i = 0; i < haystack.length; i++) {
|
||||
if (needle == haystack[i]) {
|
||||
return true;
|
||||
|
||||
Reference in New Issue
Block a user