I created a solution to address the user permission problem and will share some of the important parts.
The approach involves checking if a user is part of an admin group returning a boolean. This is a simple way of differentiating between 2 types of users.
Created an appFunction that fetches user groups with the getUserGroupsV2 function. This function checks if a user belongs to an admin group.
export const getUserGroupsV2 = async (accountUuid: string, userEmail: string, bearerToken: string) => {
const url = `https://api.dynatrace.com/iam/v1/accounts/${accountUuid}/users/${userEmail}`;
try {
const response = await fetch(`${url}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${bearerToken}`
}
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response:', errorText);
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Error fetching groups:', error);
throw error;
}
};
Make an oauth request to get the bearer token:
export const getOAuth2Token = async (client_id: string, client_secret: string, scope: string, resource: string) => {
const url = 'https://sso.dynatrace.com/sso/oauth2/token';
const params = new URLSearchParams({
grant_type: 'client_credentials',
scope: scope,
client_id: client_id,
client_secret: client_secret,
resource: resource,
});
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: params.toString()
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response:', errorText);
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching OAuth2 token:', error);
throw error;
}
};
With a couple of helper functions:
const belongsToGroup = (user: User, groupName: string) => {
if (user && user.groups && Array.isArray(user.groups)) {
return user.groups.some(group => group.groupName.toLocaleLowerCase() === groupName.toLocaleLowerCase());
}
return false;
}
export const isSecurityAdmin = (user: User) => {
return belongsToGroup(user, 'Security Admin');
}
You can store the oauth credentials in a .env for development purposes however I would recommend adding additional features to fetch and update the settings using the client-app-settings from the sdk.
// example
import { appSettingsObjectsClient, EffectiveAppSettingsValuesList, AppSettingsObjectResponse } from '@dynatrace-sdk/client-app-settings';
export const fetchConfig = async (schemaId: string): Promise<any[] | null> => {
try {
const response: EffectiveAppSettingsValuesList = await appSettingsObjectsClient.getEffectiveAppSettingsValues({
schemaIds: schemaId,
});
if (response.items.length === 0) {
console.warn(`No configuration found for ${schemaId}.`);
return null;
}
console.log(`fetchConfig for schemaId: ${schemaId}`, response.items);
return response.items;
} catch (error) {
console.error(`Error fetching configuration for schemaId: ${schemaId}`, error);
return null;
}
};
export const updateAppSettings = async (
objectId: string,
value: { [key: string]: any },
optimisticLockingVersion: string
): Promise<boolean> => {
let result = false;
console.log('updateAppSettings', objectId, value);
try {
const putResponse: any = await appSettingsObjectsClient.putAppSettingsObjectByObjectId({
objectId: objectId,
optimisticLockingVersion: optimisticLockingVersion,
body: {
value: value
}
});
if (putResponse) {
console.log('Configuration updated:', putResponse);
result = true;
} else {
console.warn('No response received from PUT request.');
}
} catch (putError) {
console.error('Error during PUT:', putError);
}
return result;
};
The front-end parts:
// .... snippet
import React, { useEffect, useState } from 'react';
import { getCurrentUserDetails } from "@dynatrace-sdk/app-environment";
import { useAppFunction } from '@dynatrace-sdk/react-hooks';
// .... snippet
const [loading, setLoading] = useState(true);
const [userEmail, setUserEmail] = useState<string | null>(null);
const { setPermissions } = useAppState(); // custom hook to store state
// .... snippet
// implement your own appFunction to fetch permissions that uses the getUserGroupsV2 function.
const fetchPermissions = useAppFunction({
name: "backend",
data: { query: "fetch-permissions", blob: userEmail },
}, { autoFetch: false, autoFetchOnUpdate: true });
// .... snippet
useEffect(() => {
const fetchUserData = async () => {
try {
const userDetails = await getCurrentUserDetails();
console.log('User details:', userDetails);
if (userDetails.email) {
setUserEmail(userDetails.email);
fetchPermissions.refetch();
}
} catch (error) {
console.error('Failed to fetch data', error);
} finally {
setLoading(false);
}
}
fetchUserData();
}, []);
useEffect(() => {
if (fetchPermissions.data) {
const { permissions } = fetchPermissions.data as PermissionsResponse;
setPermissions(permissions);
}
}, [fetchPermissions]);
Based on the permissions you can toggle menu items:
{permissions?.admin && (
<AppHeader.ActionItemGroup>
<AppHeader.ActionButton
prefixIcon={<SettingIcon />}
showLabel={true}
onClick={() => navigate('/settings')}
aria-label="App Settings"
>
Settings
</AppHeader.ActionButton>
</AppHeader.ActionItemGroup>
)}
