Merge pull request #22 from premAI-io/feat/service-details

service detail changes

src/modules/service-detail/components/ServiceDetail.tsx

@@ -10,16 +10,24 @@ import ServiceLoading from "./ServiceLoading";
 import { Service } from "modules/service/types";
 import { getServiceStatus } from "shared/helpers/utils";
 import ServiceActions from "modules/service/components/ServiceActions";
+import { useQueryClient } from "@tanstack/react-query";
+import { SERVICES_KEY } from "shared/hooks/useServices";
+import { useCallback } from "react";
 
 const ServiceDetail = () => {
+ const queryClient = useQueryClient();
  const { serviceId } = useParams();
  const { data: response, isLoading, refetch } = useService(serviceId!);
  const service = response?.data || ({} as Service);
 
- if (isLoading) return <ServiceLoading />;
+ const refetchServices = useCallback(() => {
+ refetch();
+ queryClient.refetchQueries([SERVICES_KEY]);
+ }, [refetch]);
 
  const status = getServiceStatus(service);
 
+ if (isLoading) return <ServiceLoading />;
  return (
  <AppContainer>
  <div className="flex flex-wrap items-start mb-[62px] mt-5">
@@ -32,7 +40,7 @@ const ServiceDetail = () => {
  <ServiceActions
  serviceId={serviceId!}
  status={status}
- refetch={refetch}
+ refetch={refetchServices}
  >
  {status === "running" && (
  <button className="bg-brightgray rounded-3xl px-6 py-[10px] text-sm">
@@ -44,7 +52,7 @@ const ServiceDetail = () => {
  <div className="service-detail">
  <ServiceDocumentation description={service.documentation} />
  <div className="w-full">
- <ServiceResourceBars />
+ <ServiceResourceBars serviceId={service.id} />
  <ServiceGeneralInfo service={service} />
  <ServiceDescription description={service.description} />
  </div>

src/modules/service-detail/components/ServiceGeneralInfo.tsx

@@ -22,10 +22,6 @@ const ServiceGeneralInfo = ({ service }: ServiceGeneralInfoProps) => {
  <span className="opacity-70">Weights Size</span>
  <span>{service.modelInfo.weightsSize || '-'}</span>
  </div>
- <div className="right-general-card">
- <span className="opacity-70">Devices</span>
- <span>{(service.modelInfo.devices || []).join(", ") || "-"}</span>
- </div>
  <div className="right-general-card">
  <span className="opacity-70">Inference Time</span>
  <span>{service.modelInfo.inferenceTime || "-"}</span>

src/modules/service-detail/components/ServiceResourceBars.tsx

@@ -1,21 +1,38 @@
-const ServiceResourceBars = () => {
+import useServiceStats from "shared/hooks/useServiceStats";
+import { ServiceResourceBarsProps } from "../types";
+
+const ServiceResourceBars = ({ serviceId }: ServiceResourceBarsProps) => {
+ const { data: response } = useServiceStats(serviceId);
+
+ const memory = response?.data?.memory_percentage || 0;
+ const memoryPercent = memory * 100;
+
+ const cpu = response?.data?.cpu_percentage || 0;
+ const cpuPercentage = cpu * 100;
+
  return (
  <ul className="grid xl:grid-cols-3 items-end gap-4 right-top-card card !ml-0 p-5">
  <li>
  <p>Used Memory/Memory Limit</p>
  <div className="flex gap-[6px] items-center">
- <p className="!mb-0">30%</p>
+ <p className="!mb-0">{memoryPercent}%</p>
  <div className="progress">
- <div className="progress-container" style={{ width: "30%" }}></div>
+ <div
+ className="progress-container"
+ style={{ width: `${memoryPercent}%` }}
+ ></div>
  </div>
  </div>
  </li>
  <li>
  <p>Used CPU</p>
  <div className="flex gap-[6px] items-center">
- <p className="!mb-0">30%</p>
+ <p className="!mb-0">{cpuPercentage}%</p>
  <div className="progress">
- <div className="progress-container" style={{ width: "30%" }}></div>
+ <div
+ className="progress-container"
+ style={{ width: `${cpuPercentage}%` }}
+ ></div>
  </div>
  </div>
  </li>

src/modules/service-detail/types.ts

@@ -17,4 +17,8 @@ export type ServiceDescriptionProps = {
 
 export type ServiceGeneralInfoProps = {
  service: Service
+}
+
+export type ServiceResourceBarsProps = {
+ serviceId: string;
 }

src/modules/service/api/getServiceStats.ts

@@ -0,0 +1,8 @@
+import { AxiosResponse } from "axios";
+import api from "shared/api/v1";
+import { ServiceStats } from "../types";
+
+const getServiceStats = async (id: string): Promise<AxiosResponse<ServiceStats>> =>
+ api.get(`api/v1/stats/${id}`);
+
+export default getServiceStats;

src/modules/service/api/getSystemStats.ts

@@ -0,0 +1,8 @@
+import { AxiosResponse } from "axios";
+import api from "shared/api/v1";
+import { Stats } from "../types";
+
+const getSystemStats = async (): Promise<AxiosResponse<Stats>> =>
+ api.get("api/v1/stats-all/");
+
+export default getSystemStats;

src/modules/service/components/ServiceActions.tsx

@@ -24,10 +24,11 @@ const ServiceActions = ({
  <NotDownloadedServiceState serviceId={serviceId} refetch={refetch} />
  )}
 
- {(status === "available_memory_less_than_container" ||
- status === "system_memory_less_than_container") && (
- <WarningServiceState />
- )}
+ {[
+ "not_supported",
+ "service_greater_than_free_memory",
+ "service_greater_than_limit_memory",
+ ].includes(status) && <WarningServiceState status={status} />}
  </div>
  );
 };

src/modules/service/components/ServiceCard.tsx

@@ -4,6 +4,7 @@ import { SERVICES_KEY } from "shared/hooks/useServices";
 import { useCallback } from "react";
 import { ServiceCardProps } from "../types";
 import ServiceActions from "./ServiceActions";
+import { SERVICE_KEY } from "shared/hooks/useService";
 
 const ServiceCard = ({
  title,
@@ -16,6 +17,7 @@ const ServiceCard = ({
 
  const refetch = useCallback(() => {
  queryClient.refetchQueries([SERVICES_KEY]);
+ queryClient.invalidateQueries([SERVICE_KEY, serviceId]);
  }, []);
 
  return (

src/modules/service/components/WarningServiceState.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useState } from "react";
 import WarningIcon from "shared/components/WarningIcon";
 import WarningModal from "./WarningModal";
+import { ServiceStatus, WarningServiceStateProps } from "../types";
+import WarningShapeIcon from "shared/components/WarningShapeIcon";
 
-const WarningServiceState = () => {
+const WarningServiceState = ({ status }: WarningServiceStateProps) => {
  const [isOpen, setIsOpen] = useState(false);
 
  const closeWarningModal = useCallback(
@@ -13,6 +15,31 @@ const WarningServiceState = () => {
  []
  );
 
+ const getServiceWarningDescription = (status: ServiceStatus) => {
+ switch (status) {
+ case "not_supported":
+ return "This service is not supported on your device";
+ case "service_greater_than_free_memory":
+ return "You don't have enough memory to run this service, stop another service in order to run it";
+ case "service_greater_than_limit_memory":
+ return "In order to run this service, you need at least 100gb of RAM Memory";
+ default:
+ return "";
+ }
+ };
+
+ const getServiceWarningIcon = (status: ServiceStatus) => {
+ switch (status) {
+ case "service_greater_than_free_memory":
+ return <WarningShapeIcon />;
+ case "not_supported":
+ case "service_greater_than_limit_memory":
+ return <WarningIcon />;
+ default:
+ return <WarningIcon />;
+ }
+ };
+
  return (
  <>
  <button
@@ -25,10 +52,10 @@ const WarningServiceState = () => {
  </button>
  {isOpen && (
  <WarningModal
- description="You don't have enough memory to run this service, stop another
- service in order to run it"
+ description={getServiceWarningDescription(status)}
  onCancel={closeWarningModal}
  onOk={closeWarningModal}
+ icon={getServiceWarningIcon(status)}
  />
  )}
  </>

src/modules/service/types.ts

@@ -16,7 +16,6 @@ export type DropdownProps = {
 };
 
 export type ModelInfo = {
- devices: string[];
  inferenceTime: string;
  maxLength: number;
  memoryRequirements: string;
@@ -37,6 +36,7 @@ export type Service = {
  modelInfo: ModelInfo;
  name: string;
  running: boolean;
+ supported: boolean;
 };
 
 export type SearchFilterProps = {
@@ -71,10 +71,11 @@ export type ServiceStateProps = {
 export type ServiceStatus =
  | "running"
  | "stopped"
+ | "not_supported"
  | "not_downloaded"
- | "downloading"
- | "available_memory_less_than_container"
- | "system_memory_less_than_container";
+ | "service_greater_than_free_memory"
+ | "service_greater_than_limit_memory";
+
 
 export type ServiceCardProps = {
  title: string;
@@ -89,3 +90,15 @@ export type ServiceActionsProps = PropsWithChildren<{
  serviceId: string;
  refetch: () => void;
 }>;
+
+export type WarningServiceStateProps = {
+ status: ServiceStatus;
+};
+
+export type ServiceStats = {
+ id: string;
+ cpu_percentage: number;
+ memory_usage: number;
+ memory_limit: number;
+ memory_percentage: number;
+};

src/shared/helpers/utils.ts

@@ -26,7 +26,7 @@ export const isDesktopEnv = () => {
 
 export const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 
-export const serviceSearchStyle =  {
+export const serviceSearchStyle = {
  control: (base: CSSObjectWithLabel, state: ControlProps<Option>) => ({
  ...base,
  backgroundColor: "rgba(77, 77, 79, 0.22)",
@@ -88,13 +88,14 @@ export const serviceSearchStyle = {
  }),
 };
 
-
 export const getServiceStatus = (service: Service): ServiceStatus => {
- if (!service.downloaded) {
+ if (!service.supported) {
+ return "not_supported";
+ } else if (!service.downloaded) {
  return "not_downloaded";
  } else if (service.running) {
  return "running";
  }
  // other status will go here
  return "stopped";
-};
+};

src/shared/hooks/useService.ts

@@ -1,8 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import getService from "modules/service-detail/api/getService";
 
+export const SERVICE_KEY = "getService";
+
 const useService = (id: string) => {
- return useQuery(["getService", id], () => getService(id), { staleTime: 0 });
+ return useQuery([SERVICE_KEY, id], () => getService(id));
 };
 
 export default useService;

src/shared/hooks/useServiceStats.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import getServiceStats from "modules/service/api/getServiceStats";
+
+const useServiceStats = (serviceId: string) => {
+ return useQuery(
+ ["getServiceStats", serviceId],
+ () => getServiceStats(serviceId),
+ { staleTime: 0 }
+ );
+};
+
+export default useServiceStats;

src/shared/hooks/useSystemStats.ts

@@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
+import getSystemStats from "modules/service/api/getSystemStats";
+
+const useSystemStats = () => {
+ return useQuery(["getSystemStats"], getSystemStats);
+};
+
+export default useSystemStats;