phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

Merge pull request #3081 from BerriAI/litellm_ui_fixes_2

Browse source 
build(ui): view_key_table.tsx
This commit is contained in:
Krish Dholakia 2024-04-16 17:19:41 -07:00 • committed by GitHub
commit 1cdf733341
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

8
litellm/proxy/proxy_server.py
View file

@ -2765,10 +2765,12 @@ async def generate_key_helper_fn(
"model_max_budget": model_max_budget_json, "model_max_budget": model_max_budget_json,
"budget_id": budget_id, "budget_id": budget_id,
} }
if ( if (
general_settings.get("allow_user_auth", False) == True litellm.get_secret("DISABLE_KEY_NAME", False) == True
or _has_user_setup_sso() == True ): # allow user to disable storing abbreviated key name (shown in UI, to help figure out which key spent how much)
): pass
else:
key_data["key_name"] = f"sk-...{token[-4:]}" key_data["key_name"] = f"sk-...{token[-4:]}"
saved_token = copy.deepcopy(key_data) saved_token = copy.deepcopy(key_data)
if isinstance(saved_token["aliases"], str): if isinstance(saved_token["aliases"], str):

35
ui/litellm-dashboard/src/components/view_key_table.tsx
View file

@ -94,6 +94,9 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const [editModalVisible, setEditModalVisible] = useState(false); const [editModalVisible, setEditModalVisible] = useState(false);
const [selectedToken, setSelectedToken] = useState<ItemData | null>(null); const [selectedToken, setSelectedToken] = useState<ItemData | null>(null);
const [userModels, setUserModels] = useState([]); const [userModels, setUserModels] = useState([]);
const initialKnownTeamIDs: Set<string> = new Set();
const [knownTeamIDs, setKnownTeamIDs] = useState(initialKnownTeamIDs);
useEffect(() => { useEffect(() => {
const fetchUserModels = async () => { const fetchUserModels = async () => {
@ -118,6 +121,16 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
fetchUserModels(); fetchUserModels();
}, [accessToken, userID, userRole]); }, [accessToken, userID, userRole]);
useEffect(() => {
if (teams) {
const teamIDSet: Set<string> = new Set();
teams.forEach((team: any, index: number) => {
const team_obj: string = team.team_id
teamIDSet.add(team_obj);
});
setKnownTeamIDs(teamIDSet)
}
}, [teams])
const EditKeyModal: React.FC<EditKeyModalProps> = ({ visible, onCancel, token, onSubmit }) => { const EditKeyModal: React.FC<EditKeyModalProps> = ({ visible, onCancel, token, onSubmit }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [keyTeam, setKeyTeam] = useState(selectedTeam); const [keyTeam, setKeyTeam] = useState(selectedTeam);
@ -277,12 +290,12 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
setEditModalVisible(true); setEditModalVisible(true);
}; };
const handleEditCancel = () => { const handleEditCancel = () => {
setEditModalVisible(false); setEditModalVisible(false);
setSelectedToken(null); setSelectedToken(null);
}; };
const handleEditSubmit = async (formValues: Record<string, any>) => { const handleEditSubmit = async (formValues: Record<string, any>) => {
/** /**
* Call API to update team with teamId and values * Call API to update team with teamId and values
* *
@ -311,7 +324,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
setEditModalVisible(false); setEditModalVisible(false);
setSelectedToken(null); setSelectedToken(null);
}; };
@ -419,12 +432,8 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
<TableHeaderCell>Secret Key</TableHeaderCell> <TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell> <TableHeaderCell>Spend (USD)</TableHeaderCell>
<TableHeaderCell>Budget (USD)</TableHeaderCell> <TableHeaderCell>Budget (USD)</TableHeaderCell>
{/* <TableHeaderCell>Spend Report</TableHeaderCell> */}
{/* <TableHeaderCell>Team</TableHeaderCell> */}
{/* <TableHeaderCell>Metadata</TableHeaderCell> */}
<TableHeaderCell>Models</TableHeaderCell> <TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>TPM / RPM Limits</TableHeaderCell> <TableHeaderCell>TPM / RPM Limits</TableHeaderCell>
{/* <TableHeaderCell>Expires</TableHeaderCell> */}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -435,9 +444,17 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
return null; return null;
} }
if (selectedTeam) { if (selectedTeam) {
if (item.team_id != selectedTeam.team_id) { /**
* if selected team id is null -> show the keys with no team id or team id's that don't exist in db
*/
console.log(`item team id: ${item.team_id}, knownTeamIDs.has(item.team_id): ${knownTeamIDs.has(item.team_id)}, selectedTeam id: ${selectedTeam.team_id}`)
if (selectedTeam.team_id == null && item.team_id !== null && !knownTeamIDs.has(item.team_id)) {
// do nothing -> returns a row with this key
}
else if (item.team_id != selectedTeam.team_id) {
return null; return null;
} }
console.log(`item team id: ${item.team_id}, is returned`)
} }
return ( return (
<TableRow key={item.token}> <TableRow key={item.token}>