Microsoft Power Automate: Workaround to show flow names under Monitor > Cloud flow activity

PA.Monitor.CloudFlowActivity.ShowDisplayNames.js

async function addDisplayName() {
	var flowEnvironmentId = getEnvironmentId();
	var flowIdsAndNames = await getFlowDisplayNames(flowEnvironmentId);
	var elements = document.getElementsByClassName("row ng-scope");
	for (var i = 0; i < elements.length; i++) {
		var flowIdRegex = />Flow ID: (.+)</;
		var flowIdMatch = elements[i].innerHTML.match(flowIdRegex);
		if (!flowIdMatch) {
			continue;
		}
		var flowId = flowIdMatch[1];
		var flowIdElement = elements[i].querySelector(".activityfeed-item-description");
		var displayName = getFlowDisplayName(flowId);
		// create a new p node
		let p = document.createElement('p');
		p.className = 'c-paragraph-1 ng-binding';
		p.textContent = displayName;
		// insert a new node before the first list item
		flowIdElement.insertBefore(p, flowIdElement.firstElementChild);
	}
}

function getEnvironmentId() {
	var currentUrl = window.location.href;
	var environmentRegex = /environments\/(.+)\/activities/;
	var environmentMatch = currentUrl.match(environmentRegex);
	if (!environmentMatch) {
		console.log("Could not extract environment name from current URL");
		return;
	}
	return environmentMatch[1];
}

function insertBefore(newNode, existingNode) {
	existingNode.parentNode.insertBefore(newNode, existingNode);
}

function getFlowDisplayNames(flowEnvironmentId) {
	var twoDaysAgo = new Date();
	twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
	twoDaysAgo.setMinutes(30 * Math.round(twoDaysAgo.getMinutes() / 30));
	twoDaysAgo.setSeconds(0);
	twoDaysAgo.setMilliseconds(0);
	var timestamp = twoDaysAgo.toISOString();
	var apiUrl = `https://api.flow.microsoft.com/providers/Microsoft.ProcessSimple/environments/${flowEnvironmentId}/events?api-version=2016-11-01&$aggregate=Fail,Success&$expand=Runs&$filter=Timestamp%20ge%20${timestamp}`;

	var secret = Object.values(localStorage).find(secret => {
		try {
			var secretObj = JSON.parse(secret);
			return secretObj.target.includes("https://service.flow.microsoft.com/")
		} catch (error) {
			return false;
		}
	});
	if (!secret) {
		console.log("No bearer token for Power Automate found in local storage");
		return;
	}
	var secretObj = JSON.parse(secret);
	var bearerToken = secretObj.secret;

	return new Promise((resolve, reject) => {
		var request = new XMLHttpRequest();
		request.open("GET", apiUrl, true);
		request.setRequestHeader("Content-Type", "application/json");
		request.setRequestHeader("Authorization", `Bearer ${bearerToken}`);
		request.onreadystatechange = function() {
			if (this.readyState === 4 && this.status === 200) {
				var flows = JSON.parse(this.responseText).value;
				flowIdsAndNames = {};
				for (var i = 0; i < flows.length; i++) {
					var flowId = flows[i].properties.actorId;
					var displayName = flows[i].properties.object.displayName;
					flowIdsAndNames[flowId] = displayName;
				}
				resolve(flowIdsAndNames);
			} else if (this.readyState === 4) {
				reject(this.responseText);
			}
		};
		request.send();
	});
}

function getFlowDisplayName(flowId) {
	return flowIdsAndNames[flowId];
}

addDisplayName();

Original issue

https://powerusers.microsoft.com/t5/General-Power-Automate/Cloud-flow-activity-view/m-p/1987004

Usage

1. Add a new bookmark to your bookmark bar or just drag the code from 3. to the bookmark bar
2. Set a name e.g. PA: Show flow names
3. Add the following code as URL:
   javascript:var%20id%3D%221c361dae88cdae7e74351cbf6e618f30%22%2Cfile%3D%22PA.Monitor.CloudFlowActivity.ShowDisplayNames.js%22%2Cuser%3D%22fraenkDUS%22%2Cxhr%3Dnew%20XMLHttpRequest%3Bxhr.overrideMimeType(%22application%2Fjson%22)%3Bxhr.open(%22GET%22%2C%22https%3A%2F%2Fgist.githubusercontent.com%2F%22%2Buser%2B%22%2F%22%2Bid%2B%22%2Fraw%2F%22%2Bfile%2B%22%3F%22%2BMath.random())%3Bxhr.onreadystatechange%3Dfunction()%7Bif(4%3D%3D%3Dxhr.readyState)if(200%3D%3D%3Dxhr.status)console.log(%22Successfully%20loaded%20gist%3A%22%2C%7Bid%3Aid%2Cfile%3Afile%2Cuser%3Auser%2Cresponse%3Axhr.responseText%7D)%2C(0%2Ceval)(xhr.responseText)%3Belse%7Bvar%20a%3D%22GitHub%20Gist%20file%20did%20not%20load%20successfully%20and%20instead%20returned%20a%20status%20code%20of%20%22%2Bxhr.status%2B%22.%22%3Bconsole.error(a%2C%7Bid%3Aid%2Cfile%3Afile%2Cuser%3Auser%7D)%3Balert(a)%7D%7D%3Bxhr.send(null)%3Bvoid+0
4. Go to "Monitor" > "Cloud flow activity"
5. Select the preferred activity filter
6. Click the bookmark
7. Names should appear

Browsers (tested)

• Google Chrome
• Microsoft Edge

Known issues

1. Selecting "All Activity" again, removes all the names -> click bookmarklet again
2. Clicking the bookmarklet multiple times will add the names multiple times -> refresh required
3. Gets names for flows which ran within the last 2 days only (hardcoded)
4. After some time, the stored authentication token might have expired -> refresh required