From 8c7c680804aa9205395fc4fe1a6c80af1f46248f Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Tue, 18 Jun 2024 03:47:36 +0000
Subject: [PATCH] status

---
 src/components/hub-about-modal.tsx |  2 +-
 src/components/ui-version.tsx      |  2 +-
 src/containers/pulp-status.tsx     | 47 ++++++++++++++++++++++++++----
 src/menu.tsx                       |  1 -
 src/utilities/get-human-size.ts    |  7 +++--
 5 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/hub-about-modal.tsx b/src/components/hub-about-modal.tsx
index 70809ff..7ad2ad1 100644
--- a/src/components/hub-about-modal.tsx
+++ b/src/components/hub-about-modal.tsx
@@ -144,7 +144,7 @@ export const HubAboutModal = ({ isOpen, onClose, user, userName }: IProps) => {
           <Label>{t`UI Version`}</Label>
           <Value>
             <ExternalLink
-              href={`https://github.com/ansible/ansible-hub-ui/commit/${ui_sha}`}
+              href={`https://github.com/himdel/pulp-ui/commit/${ui_sha}`}
             >
               {ui_sha}
             </ExternalLink>
diff --git a/src/components/ui-version.tsx b/src/components/ui-version.tsx
index 4a31a1b..db6c1fe 100644
--- a/src/components/ui-version.tsx
+++ b/src/components/ui-version.tsx
@@ -11,6 +11,6 @@ const HTMLComment = ({ text, ...props }: IProps) => (
 export const UIVersion = () => (
   <HTMLComment
     className='hub-ui-version'
-    text={`ansible-hub-ui ${UI_COMMIT_HASH}`}
+    text={`pulp-ui ${UI_COMMIT_HASH}`}
   />
 );
diff --git a/src/containers/pulp-status.tsx b/src/containers/pulp-status.tsx
index 58db35b..d261eba 100644
--- a/src/containers/pulp-status.tsx
+++ b/src/containers/pulp-status.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Card, CardBody, CardTitle } from '@patternfly/react-core';
+import { Card, CardBody, CardTitle, Progress } from '@patternfly/react-core';
 import React, { Component } from 'react';
 import { PulpStatusAPI } from 'src/api';
 import {
@@ -10,10 +10,16 @@ import {
   Main,
   closeAlert,
 } from 'src/components';
-import { type RouteProps, jsxErrorMessage, withRouter } from 'src/utilities';
+import {
+  type RouteProps,
+  getHumanSize,
+  jsxErrorMessage,
+  withRouter,
+} from 'src/utilities';
 
 interface IState {
   alerts: AlertType[];
+  status?;
 }
 
 class PulpStatus extends Component<RouteProps, IState> {
@@ -22,6 +28,7 @@ class PulpStatus extends Component<RouteProps, IState> {
 
     this.state = {
       alerts: [],
+      status: null,
     };
   }
 
@@ -30,7 +37,12 @@ class PulpStatus extends Component<RouteProps, IState> {
   }
 
   render() {
-    const { alerts } = this.state;
+    const { alerts, status } = this.state;
+
+    const value = status
+      ? (100 / status.storage.total) * status.storage.used
+      : 0;
+    const free = status ? getHumanSize(status.storage.free) : 0;
 
     return (
       <>
@@ -51,7 +63,31 @@ class PulpStatus extends Component<RouteProps, IState> {
                 <h2>{t`TODO`}</h2>
               </CardTitle>
               <CardBody>
-                <LoadingSpinner />
+                {!status ? (
+                  <LoadingSpinner />
+                ) : (
+                  <>
+                    <Progress
+                      value={value}
+                      title={t`Storage`}
+                      variant={
+                        value > 88
+                          ? 'danger'
+                          : value > 66
+                            ? 'warning'
+                            : value > 33
+                              ? null
+                              : 'success'
+                      }
+                    />
+                    <br />
+                    {t`Free`} {free}
+                    <br />
+                    TODO versions, workers.. .. and enable/disable menu based on
+                    .versions
+                    <pre>{JSON.stringify(status, null, 2)}</pre>
+                  </>
+                )}
               </CardBody>
             </section>
           </Card>
@@ -63,8 +99,7 @@ class PulpStatus extends Component<RouteProps, IState> {
   private query() {
     PulpStatusAPI.get()
       .then(({ data }) => {
-        // TODO
-        console.log(data);
+        this.setState({ status: data });
       })
       .catch((e) => {
         const { status, statusText } = e.response;
diff --git a/src/menu.tsx b/src/menu.tsx
index 10ee152..7b229d6 100644
--- a/src/menu.tsx
+++ b/src/menu.tsx
@@ -36,7 +36,6 @@ function standaloneMenu() {
   return [
     menuItem(t`Status`, {
       url: formatPath(Paths.status),
-      condition: isLoggedIn,
     }),
     menuItem(t`Search`, {
       url: formatPath(Paths.search),
diff --git a/src/utilities/get-human-size.ts b/src/utilities/get-human-size.ts
index 5607760..d1c4e89 100644
--- a/src/utilities/get-human-size.ts
+++ b/src/utilities/get-human-size.ts
@@ -6,8 +6,9 @@ export function getHumanSize(x) {
   let l = 0,
     n = parseInt(x, 10) || 0;
 
-  while (n >= 1024 && ++l) {
-    n = n / 1024;
+  while (n >= 1024) {
+    l++;
+    n /= 1024;
   }
 
   if (l === 0) {
@@ -17,5 +18,5 @@ export function getHumanSize(x) {
     });
   }
 
-  return n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l];
+  return n.toFixed(n < 10 ? 1 : 0) + ' ' + units[l];
 }