Commit 516a7153 authored by Webb, Jake's avatar Webb, Jake
Browse files

working on the gauges

parent c917856e

src/App.tsx

+7 −1
Original line number Diff line number Diff line
@@ -22,6 +22,8 @@ const initOptions: KeycloakConfig = { 


const kc = new Keycloak(initOptions);



axios.defaults.baseURL = import.meta.env.VITE_API_PATH;



kc.init({

  onLoad: "login-required",

  redirectUri: window.location.toString(),
@@ -33,7 +35,7 @@ kc.init({ 
        axios.defaults.headers.common = {

          Authorization: `Bearer ${kc.token}`,

        };

        axios.defaults.baseURL = import.meta.env.VITE_API_PATH;

        console.log(import.meta.env.VITE_API_PATH);

        axios.defaults.withCredentials = true;

      }

    }
@@ -96,6 +98,10 @@ function App() { 
    }

  }, []);



  if (!authToken || axios.defaults.baseURL?.includes("localhost")) {

    return <h1>Please Authenticate</h1>;

  }



  return (

    <AppContext.Provider

      value={{ AuthToken: authToken, theme: _theme, setTheme: onThemeSwitch }}

src/components/simulations/details/gauges.tsx

+13 −4
Original line number Diff line number Diff line
@@ -89,7 +89,11 @@ export function SimulationGauges({ 
            labels={{

              tickLabels: {

                type: "outer",

                ticks: [{ value: data?.peak_flops ?? 0 }],

                ticks: [

                  {

                    value: 2000,

                  },

                ],

              },

              valueLabel: {

                formatTextValue: (value) => value + " PFlop/s",
@@ -97,7 +101,12 @@ export function SimulationGauges({ 
            }}

            arc={{

              colorArray: ["#5BE12C"],

              subArcs: [{ color: "#5BE12C", limit: 2000 }],

              subArcs: [

                {

                  color: "#5BE12C",

                  limit: 2000,

                },

              ],

            }}

          />

        </GaugeWrapper>
@@ -105,7 +114,7 @@ export function SimulationGauges({ 
          <GraphHeader>Efficency</GraphHeader>

          <Gauge

            minValue={0}

            maxValue={2000}

            maxValue={data?.g_flops_w_peak ?? 2}

            value={statistics?.g_flops_w ?? 0}

            labels={{

              tickLabels: {
@@ -118,7 +127,7 @@ export function SimulationGauges({ 
            }}

            arc={{

              colorArray: ["#5BE12C"],

              subArcs: [{ color: "#5BE12C", limit: 2000 }],

              subArcs: [{ color: "#5BE12C", limit: data?.g_flops_w_peak ?? 2 }],

            }}

          />

        </GaugeWrapper>

src/routes/__root.tsx

+0 −4
Original line number Diff line number Diff line
@@ -2,16 +2,12 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"; 
import { RouterContext } from "../App";

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

import { Nav } from "../components/shared/nav";

import { useQuery } from "@tanstack/react-query";

import { getFrontierSystemInformation } from "../util/queryOptions";



export const Route = createRootRouteWithContext<RouterContext>()({

  component: Root,

});



function Root() {

  useQuery(getFrontierSystemInformation());



  return (

    <div className="flex h-screen">

      <Nav />

src/routes/simulations.$simulationId.summary.tsx

+4 −1
Original line number Diff line number Diff line
@@ -62,7 +62,10 @@ function SimulationSummary() { 
  }



  let currentMetrics: CoolingCDU[] | undefined = undefined;

  if (Object.values(metrics.data).length > 0 && !!metrics.data[0]) {

  if (

    Object.values(metrics.data).length > 0 &&

    !!Object.values(metrics.data)[0]

  ) {

    currentMetrics = metrics.data[currentTimestamp];

    if (!currentMetrics) {

      currentMetrics = Object.values(metrics.data)[0];

src/routes/simulations.index.tsx

+1 −4
Original line number Diff line number Diff line 
import { createFileRoute } from "@tanstack/react-router";

import { useContext, useState } from "react";

import { useState } from "react";

import { SimulationListControls } from "../components/simulations/list/SimulationListControls";

import { SimulationsDataGrid } from "../components/simulations/list/SimulationsDataGrid";

import { columns as SimulationColumns } from "../components/simulations/list/SimulationsGridColumns";
@@ -8,7 +8,6 @@ import axios from "axios"; 
import { Simulation } from "../models/Simulation.model";

import { operatorCombinator, sortCombinator } from "../util/filterCombinator";

import { ListResponse } from "../util/queryOptions";

import { AppContext } from "../App";



export const Route = createFileRoute("/simulations/")({

  component: SimulationList,
@@ -18,7 +17,6 @@ const pageLimit = 18; 


function SimulationList() {

  const [columns, setColumns] = useState(structuredClone(SimulationColumns));

  const { AuthToken } = useContext(AppContext);



  const {

    data,
@@ -51,7 +49,6 @@ function SimulationList() { 
        ? allPages.length

        : undefined,

    refetchOnWindowFocus: false,

    enabled: !!AuthToken,

  });



  const onSort = (