refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)

app/portainer/hostmanagement/open-amt/queries.ts

@@ -0,0 +1,18 @@
+import { useMutation } from 'react-query';
+
+import { activateDevice } from './open-amt.service';
+
+export const activateDeviceMutationKey = [
+  'environments',
+  'open-amt',
+  'activate',
+];
+
+export function useActivateDeviceMutation() {
+  return useMutation(activateDevice, {
+    mutationKey: activateDeviceMutationKey,
+    meta: {
+      message: 'Unable to associate with OpenAMT',
+    },
+  });
+}

app/portainer/license-management/types.ts

@@ -40,4 +40,6 @@ export interface LicenseInfo {
   nodes: number;
   type: LicenseType;
   valid: boolean;
+  enforcedAt: number;
+  enforced: boolean;
 }

app/portainer/license-management/use-license.service.ts

@@ -2,8 +2,10 @@ import { useQuery } from 'react-query';
 
 import { error as notifyError } from '@/portainer/services/notifications';
 
+import { getNodesCount } from '../services/api/status.service';
+
 import { getLicenseInfo } from './license.service';
-import { LicenseInfo } from './types';
+import { LicenseInfo, LicenseType } from './types';
 
 export function useLicenseInfo() {
   const { isLoading, data: info } = useQuery<LicenseInfo, Error>(
@@ -18,3 +20,33 @@ export function useLicenseInfo() {
 
   return { isLoading, info };
 }
+
+function useNodesCounts() {
+  const { isLoading, data } = useQuery(
+    ['status', 'nodes'],
+    () => getNodesCount(),
+    {
+      onError(error) {
+        notifyError('Failure', error as Error, 'Failed to get nodes count');
+      },
+    }
+  );
+
+  return { nodesCount: data || 0, isLoading };
+}
+
+export function useIntegratedLicenseInfo() {
+  const { isLoading: isLoadingNodes, nodesCount } = useNodesCounts();
+
+  const { isLoading: isLoadingLicense, info } = useLicenseInfo();
+  if (
+    isLoadingLicense ||
+    isLoadingNodes ||
+    !info ||
+    info.type === LicenseType.Trial
+  ) {
+    return null;
+  }
+
+  return { licenseInfo: info as LicenseInfo, usedNodes: nodesCount };
+}

app/portainer/views/account/account.html

@@ -77,6 +77,11 @@
         </form>
       </rd-widget-body>
     </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
     <access-tokens-datatable
       title-text="Access tokens"
       title-icon="key"
@@ -86,6 +91,11 @@
       remove-action="removeAction"
       ui-can-exit="uiCanExit"
     ></access-tokens-datatable>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
     <theme-settings></theme-settings>
   </div>
 </div>