export function StorageEngineMetrics()

in src/components/graphs/MemorySpecs/storageEngineMetrics.tsx [171:265]
75 lines of code
5 McCabe index (conditional complexity)

export function StorageEngineMetrics() {
  const mode = useContext<ModeType>(ModeContext);
  const { toast } = useToast();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [refresh, setRefresh] = useState(false);
  const [data, setData] = useState<StorageMetrics>(null);

  useEffect(() => {
    if (mode === "offline") {
      toast({
        title: "Offline Mode",
        description: "Storage Engine Metrics Cannot be fetched in offline mode",
      });
      return;
    }
    fetchTransactionData();
  }, [refresh]);

  async function fetchTransactionData() {
    try {
      setLoading(true);
      const response = await middlewareApi.post(
        "/statsExporter/getTransactionData"
      );
      setData(response?.data);
      toast({
        title: "Data Updated",
        description: "Storage Engine Metrics Fetched Successfully",
      });
      setLoading(false);
    } catch (error) {
      setLoading(false);
      setError(error);
    }
  }

  return (
    <Card className="flex-1 w-full max-w-8xl mx-auto bg-gradient-to-br from-slate-900 to-slate-950 text-white shadow-xl">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div className="flex items-center gap-2">
          <Database className="w-6 h-6 text-blue-400" />
          <CardTitle className="text-2xl font-bold">
            {" "}
            Storage Engine Metrics
          </CardTitle>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            onClick={() => setRefresh((prev) => !prev)}
          >
            <RefreshCcw />
          </Button>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  className="p-2 bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors duration-200 ease-in-out rounded"
                  //onClick={() => window.open("https://gmail.com", "_blank")}
                >
                  <Info size={18.5} />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p>Click for more information about these metrics</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      </CardHeader>
      {loading ? (
        <Loader className="h-[400px]" />
      ) : (
        <CardContent className="space-y-4">
          <div className="flex flex-row justify-between space-x-2">
            <CacheHitRatio ratio={data?.ext_cache_hit_ratio} />
            <LevelDBSizeCard size={data?.level_db_approx_mem_size} />
            <LevelDbCard
              levelDbSize={data?.level_db_approx_mem_size}
              rssSize={data?.resident_set_size || 0}
              numReads={data?.num_reads}
              numWrites={data?.num_writes}
            />
            <CacheHitGauge />
          </div>
          <div className="flex flex-row justify-between space-x-2">
            {/* <LevelDBStatsTable stats={data?.level_db_stats} /> */}
          </div>
        </CardContent>
      )}
    </Card>
  );
}