add users list to vm details page

frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx

@@ -17,6 +17,7 @@ import { getLoadedData, getResource } from '../../utils';
 import { VirtualMachineInstanceModel, VirtualMachineModel } from '../../models';
 import { getServicesForVmi } from '../../selectors/service';
 import { VMResourceSummary, VMDetailsList, VMSchedulingList } from './vm-resource';
+import { VMUsersList } from './vm-users';
 import { VMTabProps } from './types';
 import { getVMStatus } from '../../statuses/vm/vm-status';
 import { VMStatusBundle } from '../../statuses/vm/types';
@@ -115,6 +116,10 @@ export const VMDetails: React.FC<VMDetailsProps> = (props) => {
         <SectionHeading text="Services" />
         <ServicesList {...restProps} data={vmServicesData} label="Services" />
       </div>
+      <div className="co-m-pane__body">
+        <SectionHeading text="Logged in users" />
+        <VMUsersList {...restProps} vmi={vmi} vmStatusBundle={vmStatusBundle} />
+      </div>
     </StatusBox>
   );
 };

frontend/packages/kubevirt-plugin/src/components/vms/vm-users.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import { Text, TextVariants } from '@patternfly/react-core';
+import { fromNow } from '@console/internal/components/utils/datetime';
+import { getName, getNamespace } from '@console/shared/src/selectors/common';
+import { Table, TableRow, TableData } from '@console/internal/components/factory';
+import {
+  withDashboardResources,
+  DashboardItemProps,
+} from '@console/internal/components/dashboard/with-dashboard-resources';
+import { VMIKind } from '../../types';
+
+import './vm-resource.scss';
+import { VMStatusBundle } from '../../statuses/vm/types';
+import { VMStatus } from '../../constants/vm/vm-status';
+import { Timestamp } from '@console/internal/components/utils';
+
+const tableColumnClasses = [
+  classNames('col-lg-3', 'col-md-3', 'col-sm-4', 'col-xs-6'),
+  classNames('col-lg-3', 'col-md-3', 'col-sm-4', 'hidden-xs'),
+  classNames('col-lg-3', 'col-md-3', 'hidden-sm', 'hidden-xs'),
+  classNames('col-lg-3', 'col-md-3', 'col-sm-4', 'col-xs-6'),
+];
+
+const UsersTableHeader = () => {
+  return [
+    {
+      title: 'User Name',
+      props: { className: tableColumnClasses[0] },
+    },
+    {
+      title: 'Domain',
+      props: { className: tableColumnClasses[1] },
+    },
+    {
+      title: 'Log in time',
+      props: { className: tableColumnClasses[2] },
+    },
+    {
+      title: 'Elapsed logged in time',
+      props: { className: tableColumnClasses[4] },
+    },
+  ];
+};
+UsersTableHeader.displayName = 'UsersTableHeader';
+
+const UsersTableRow = ({ obj, index, key, style }) => {
+  return (
+    <TableRow id={obj?.metadata.uid} index={index} trKey={key} style={style}>
+      <TableData className={tableColumnClasses[0]}>{obj?.metadata?.name}</TableData>
+      <TableData className={classNames(tableColumnClasses[1], 'co-break-word')}>
+        {obj?.metadata?.domain}
+      </TableData>
+      <TableData className={tableColumnClasses[2]}>
+        <Timestamp timestamp={new Date(obj?.metadata?.loginTime).toUTCString()} />
+      </TableData>
+      <TableData className={tableColumnClasses[3]}>{fromNow(obj?.metadata?.loginTime)}</TableData>
+    </TableRow>
+  );
+};
+
+export const VMUsersList = withDashboardResources<VMUsersListProps & DashboardItemProps>(
+  ({ watchURL, stopWatchURL, urlResults, vmi, vmStatusBundle }) => {
+    if (vmStatusBundle.status !== VMStatus.RUNNING) {
+      return <Text component={TextVariants.p}>Virtual Machine is not running.</Text>;
+    }
+
+    const name = getName(vmi);
+    const namespace = getNamespace(vmi);
+    const url = `apis/subresources.kubevirt.io/v1alpha3/namespaces/${namespace}/virtualmachineinstances/${name}/guestosinfo`;
+
+    const usersResult = urlResults.getIn([url, 'data']);
+    const usersResultError = urlResults.getIn([url, 'loadError']);
+
+    const data =
+      usersResult &&
+      usersResult?.userList &&
+      usersResult?.userList.map((u) => ({
+        metadata: {
+          name: u?.userName,
+          domain: u?.domain,
+          loginTime: u?.loginTime * 1000,
+        },
+      }));
+
+    React.useEffect(() => {
+      watchURL(url);
+      return () => {
+        stopWatchURL(url);
+      };
+    }, [watchURL, stopWatchURL, url]);
+
+    return (
+      <Table
+        aria-label="Users"
+        Header={UsersTableHeader}
+        Row={UsersTableRow}
+        data={data}
+        loadError={usersResultError}
+        loaded={!!usersResult && !usersResultError}
+        virtualize
+      />
+    );
+  },
+);
+
+type VMUsersListProps = {
+  vmi?: VMIKind;
+  vmStatusBundle?: VMStatusBundle;
+};