Initial ResourcePropertyPanel (#1869)

* ResourcePropertyPanel implemented to display resource properties in a consistent manner. * ResourcePropertyPanel included in WorkspaceItem, WorkspaceServiceItem and UserResourceItem * Property values starting with https:// rendered as links. * updatedWhen formatted using moment.
microsoft · May 19, 2022 · 785cea5 · 785cea5
1 parent e1a302c
commit 785cea5
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 2 deletions.
diff --git a/ui/app/src/components/shared/ResourcePropertyPanel.tsx b/ui/app/src/components/shared/ResourcePropertyPanel.tsx
@@ -0,0 +1,87 @@
+import { DefaultPalette, IStackItemStyles, IStackStyles, Stack } from "@fluentui/react";
+import moment from "moment";
+import React from "react";
+import { Resource } from "../../models/resource";
+
+interface ResourcePropertyPanelProps {
+    resource: Resource
+}
+
+interface ResourcePropertyPanelItemProps {
+    header: String,
+    val: String
+}
+
+const ResourcePropertyPanelItem: React.FunctionComponent<ResourcePropertyPanelItemProps> = (props: ResourcePropertyPanelItemProps) => {
+
+    const stackItemStyles: IStackItemStyles = {
+        root: {
+            padding: 5,
+            width: 150,
+            color: DefaultPalette.neutralSecondary
+        }
+    }
+
+    function renderValue(val: String) {
+        if (val.startsWith('https://')) {
+            return (<a href={val.toString()} target='_blank' rel="noreferrer">{val}</a>)
+        }
+        return val;
+    }
+
+    return(
+        <>
+            <Stack wrap horizontal>
+                <Stack.Item grow styles={stackItemStyles}>
+                    {props.header}
+                </Stack.Item>
+                <Stack.Item grow={3} styles={stackItemStyles}>
+                    : { renderValue(props.val)}
+                </Stack.Item>
+            </Stack>
+        </>
+    );
+}
+
+export const ResourcePropertyPanel: React.FunctionComponent<ResourcePropertyPanelProps> = (props: ResourcePropertyPanelProps) => {
+
+    const stackStyles: IStackStyles = {
+        root: {
+            padding: 0,
+            minWidth: 300
+        }
+    };
+
+    function userFriendlyKey(key: String){
+        let friendlyKey = key.replaceAll('_', ' ');
+        return friendlyKey.charAt(0).toUpperCase() + friendlyKey.slice(1).toLowerCase();
+    }
+
+    return (
+        <>
+            <Stack wrap horizontal>
+                <Stack grow styles={stackStyles}>
+                    <ResourcePropertyPanelItem header={'Resource ID'} val={props.resource.id} />
+                    <ResourcePropertyPanelItem header={'Resource type'} val={props.resource.resourceType} />
+                    <ResourcePropertyPanelItem header={'Resource path'} val={props.resource.resourcePath} />
+                    <ResourcePropertyPanelItem header={'Template name'} val={props.resource.templateName} />
+                    <ResourcePropertyPanelItem header={'Template version'} val={props.resource.templateVersion} />
+                    <ResourcePropertyPanelItem header={'Is active'} val={props.resource.isActive.toString()} />
+                    <ResourcePropertyPanelItem header={'Is enabled'} val={props.resource.isEnabled.toString()} />
+                    <ResourcePropertyPanelItem header={'User'} val={props.resource.user.name} />
+                    <ResourcePropertyPanelItem header={'Last updated'} val={moment.unix(props.resource.updatedWhen).toDate().toDateString()} />
+                </Stack>    
+                <Stack grow styles={stackStyles}>
+                {
+                    Object.keys(props.resource.properties).map((key) => {
+                        let val = (props.resource.properties as any)[key].toString();
+                        return (
+                            <ResourcePropertyPanelItem header={userFriendlyKey(key)} val={val} key={key}/>
+                        )
+                    })
+                }
+                </Stack>
+            </Stack>
+        </>
+    );
+};
diff --git a/ui/app/src/components/workspaces/UserResourceItem.tsx b/ui/app/src/components/workspaces/UserResourceItem.tsx
@@ -5,6 +5,7 @@ import { Workspace } from '../../models/workspace';
 import { useAuthApiCall, HttpMethod } from '../../useAuthApiCall';
 import { UserResource } from '../../models/userResource';
 import { ResourceDebug } from '../shared/ResourceDebug';
+import { ResourcePropertyPanel } from '../shared/ResourcePropertyPanel';
 
 // TODO:
 // - This 'page' might die in place of a card on the Workspace services page - leave it alone for now
@@ -35,7 +36,9 @@ export const UserResourceItem: React.FunctionComponent<UserResourceItemProps> =
   return (
     <>
       <h1>User Resource: {userResource.properties?.display_name}</h1>
-
+      { userResource && userResource.id &&
+        <ResourcePropertyPanel resource={userResource}/>
+      }
       <ResourceDebug resource={userResource} />
     </>
   );

diff --git a/ui/app/src/components/workspaces/WorkspaceItem.tsx b/ui/app/src/components/workspaces/WorkspaceItem.tsx
@@ -4,6 +4,7 @@ import { WorkspaceRoleName } from '../../models/roleNames';
 import { Workspace } from '../../models/workspace';
 import { SecuredByRole } from '../shared/SecuredByRole';
 import { ResourceDebug } from '../shared/ResourceDebug';
+import { ResourcePropertyPanel } from '../shared/ResourcePropertyPanel';
 import { WorkspaceRolesContext } from './WorkspaceRolesContext';
 
 // TODO:
@@ -27,7 +28,8 @@ export const WorkspaceItem: React.FunctionComponent<WorkspaceItemProps> = (props
             'data-title': 'Overview',
           }}
         >
-          <h3>--Workspace details panel here--</h3>
+
+          <ResourcePropertyPanel resource={props.workspace}/>
 
           <h3>Roles:</h3>
           <ul>

diff --git a/ui/app/src/components/workspaces/WorkspaceServiceItem.tsx b/ui/app/src/components/workspaces/WorkspaceServiceItem.tsx
@@ -7,6 +7,7 @@ import { UserResource } from '../../models/userResource';
 import { WorkspaceService } from '../../models/workspaceService';
 import { ResourceDebug } from '../shared/ResourceDebug';
 import { MessageBar, MessageBarType, Spinner, SpinnerSize } from '@fluentui/react';
+import { ResourcePropertyPanel } from '../shared/ResourcePropertyPanel';
 import { Resource } from '../../models/resource';
 import { ResourceCardList } from '../shared/ResourceCardList';
 
@@ -53,6 +54,7 @@ export const WorkspaceServiceItem: React.FunctionComponent<WorkspaceServiceItemP
       return (
         <>
           <h1>{workspaceService.properties?.display_name}</h1>
+          <ResourcePropertyPanel resource={workspaceService}/>
           <h2>User Resources:</h2>
           {
             userResources &&