Fix clickable model ID in health check table - Add setSelectedModelId prop to make blue model ID buttons clickable - Fix checkbox selection logic to use model names consistently - Add stopPropagation to prevent unwanted sort triggers on checkbox clicks - Now clicking Model ID opens model details, and select all works properly (#11898)

Author: colesmcintosh

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -1279,6 +1279,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                 modelData={modelData}
                 all_models_on_proxy={all_models_on_proxy}
                 getDisplayModelName={getDisplayModelName}
+                setSelectedModelId={setSelectedModelId}
               />
             </TabPanel>
             <TabPanel>

ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx

@@ -24,13 +24,15 @@ interface HealthCheckComponentProps {
   modelData: any;
   all_models_on_proxy: string[];
   getDisplayModelName: (model: any) => string;
+  setSelectedModelId?: (modelId: string) => void;
 }
 
 const HealthCheckComponent: React.FC<HealthCheckComponentProps> = ({
   accessToken,
   modelData,
   all_models_on_proxy,
   getDisplayModelName,
+  setSelectedModelId,
 }) => {
   const [modelHealthStatuses, setModelHealthStatuses] = useState<{[key: string]: HealthStatus}>({});
   const [selectedModelsForHealth, setSelectedModelsForHealth] = useState<string[]>([]);
@@ -515,6 +517,7 @@ const HealthCheckComponent: React.FC<HealthCheckComponentProps> = ({
             getStatusBadge,
             getDisplayModelName,
             showErrorModal,
+            setSelectedModelId,
           )}
           data={modelData.data.map((model: any) => {
             const modelName = model.model_name;

ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx

@@ -38,6 +38,7 @@ export const healthCheckColumns = (
   getStatusBadge: (status: string) => JSX.Element,
   getDisplayModelName: (model: any) => string,
   showErrorModal?: (modelName: string, cleanedError: string, fullError: string) => void,
+  setSelectedModelId?: (modelId: string) => void,
 ): ColumnDef<HealthCheckData>[] => [
   {
     header: () => (
@@ -46,6 +47,7 @@ export const healthCheckColumns = (
           checked={allModelsSelected}
           indeterminate={selectedModelsForHealth.length > 0 && !allModelsSelected}
           onChange={(e) => handleSelectAll(e.target.checked)}
+          onClick={(e) => e.stopPropagation()}
         />
         <span>Model ID</span>
       </div>
@@ -63,10 +65,12 @@ export const healthCheckColumns = (
           <Checkbox
             checked={isSelected}
             onChange={(e) => handleModelSelection(modelName, e.target.checked)}
+            onClick={(e) => e.stopPropagation()}
           />
           <Tooltip title={model.model_info.id}>
             <div 
               className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left w-full truncate whitespace-nowrap cursor-pointer max-w-[15ch]"
+              onClick={() => setSelectedModelId && setSelectedModelId(model.model_info.id)}
             >
               {model.model_info.id}
             </div>