feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Activity…

… tab #171

Signed-off-by: Asaad Balum <[email protected]>

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx

@@ -15,6 +15,7 @@ import {
 import { Workspace } from '~/shared/types';
 import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
 import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions';
+import { WorkspaceDetailsActivity } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActivity';
 
 type WorkspaceDetailsProps = {
   workspace: Workspace;
@@ -58,7 +59,9 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
           </Tab>
           <Tab eventKey={1} title={<TabTitleText>Activity</TabTitleText>} aria-label="Activity">
             <TabContent id="activitySectionBodyPadding">
-              <TabContentBody hasPadding>Activity</TabContentBody>
+              <TabContentBody hasPadding>
+                <WorkspaceDetailsActivity workspace={workspace} />
+              </TabContentBody>
             </TabContent>
           </Tab>
           <Tab eventKey={2} title={<TabTitleText>Logs</TabTitleText>} aria-label="Logs">

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Divider,
+} from '@patternfly/react-core';
+import { Workspace } from '~/shared/types';
+
+type WorkspaceDetailsActivityProps = {
+  workspace: Workspace;
+};
+
+// Helper function to format UNIX timestamps
+const formatTimestamp = (timestamp: number): string => {
+  if (!timestamp || timestamp === 0) {
+    return '-'; // Return a dash if timestamp is not set
+  }
+  const date = new Date(timestamp * 1000); // Convert to milliseconds
+  return date.toLocaleString(); // Format as a readable string
+};
+
+export const WorkspaceDetailsActivity: React.FunctionComponent<WorkspaceDetailsActivityProps> = ({
+  workspace,
+}) => (
+  <DescriptionList isHorizontal>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Last Activity</DescriptionListTerm>
+      <DescriptionListDescription>
+        {formatTimestamp(workspace.status.activity.lastActivity)}
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <Divider />
+    <DescriptionListGroup>
+      <DescriptionListTerm>Last Update</DescriptionListTerm>
+      <DescriptionListDescription>
+        {formatTimestamp(workspace.status.activity.lastUpdate)}
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <Divider />
+    <DescriptionListGroup>
+      <DescriptionListTerm>Pause Time</DescriptionListTerm>
+      <DescriptionListDescription>
+        {formatTimestamp(workspace.status.pauseTime)}
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <Divider />
+    <DescriptionListGroup>
+      <DescriptionListTerm>Pending Restart</DescriptionListTerm>
+      <DescriptionListDescription>
+        {workspace.status.pendingRestart ? 'Yes' : 'No'}
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <Divider />
+  </DescriptionList>
+);