refactor(home): migrate view to react [EE-1810] (portainer#6314)

* refactor(http): parse axios errors (portainer#6325)

* refactor(home): use endpoint-list as react component [EE-1814] (portainer#6060)

* refactor(home): use endpoint-list as react component

fix(home): add missing features and refactors

- kubebutton
- group name
- poll when endpoint is off
- state management

refactor(endpoints): use stat component

fix(endpoints): add space between items

refactor(endpoints): move stats to components

refactor(endpoints): fetch time

refactor(home): move logic

refactor(home): move fe render logic

refactor(settings): use vanilla js for publicSettings

refactor(kube): remove angular from kube config service

feat(home): add kubeconfig button

feat(home): send analytics when opening kubeconfig modal

fix(home): memoize footer

refactor(home): use react-query for loading

fix(home): show correct control for kubeconfig modal

refactor(home): use debounce

refactor(home): use new components

refactor(home): replace endpoints with environments

refactor(home): move endpoint-list component to home

fix(home): show group name

refactor(home): use switch for environment icon

fix(kubeconfig): fix default case

refactor(axios): use parse axios error

refactor(home): use link components for navigate

fix(home): align azure icon

refactor(home): refactor stats

refactor(home): export envstatusbadge

refactor(home): remove unused bindings

* chore(home): write tests for edge indicator

* chore(home): basic stories for environment item

* style(settings): reformat

* fix(environments): add publicurl

* refactor(home): use table components

* refactor(datatables): merge useSearchBarState

* refactor(home): fetch group in env item

* chore(tests): basic tests

* chore(home): test when no envs

* refactor(tags): use axios for tagService

* refactor(env-groups): use axios for getGroups

* feat(app): ui-state context provider

* refactor(home): create MotdPanel

* refactor(app): create InformationPanel

* feat(endpoints): fetch number of total endpoints

* refactor(app): merge hooks

* refactor(home): migrate view to react [EE-1810]

fixes [EE-1810]

refactor(home): wip use react view

feat(home): show message if no endpoints

refactor(home): show endpoint list

refactor(home): don't use home to manage link

refactor(home): move state

refactor(home): check if edge using util

refactor(home): move inf panels

chore(home): tests

refactor(home): load groups and tags in env-item

refactor(settings): revert publicSettings change

refactor(home): move confirm snapshot method

* fix(home): show tags

* fix(environments): handle missing snapshots

* fix(kube/volumes): fetch pesistent volume claims

* refactor(kube): remove use of endpointProvider

* refactor(endpoints): set current endpoint

* chore(home): add data-cy for tests

* chore(tests): mock axios-progress-bar

* refactor(home): move use env list to env module

* feat(app): sync home view changes with ee

* fix(home): sort page header

* fix(app): fix tests

* chore(github): use yarn cache

* refactor(environments): load list of groups

* chore(babel): remove auto 18n keys extraction

* chore(environments): fix tests

* refactor(k8s/application): use current endpoint

* fix(app/header): add margin to header

* refactor(app): remove unused types

* refactor(app): use rq onError handler

* refactor(home): wrap element with button

Author: chiptus

.github/workflows/lint.yml

@@ -18,17 +18,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
-
-      # ESLint and Prettier must be in `package.json`
-      - name: Install Node.js dependencies
-        run: yarn --frozen-lockfile
+          node-version: '14'
+          cache: 'yarn'
+      - run: yarn --frozen-lockfile
 
       - name: Run linters
         uses: wearerequired/lint-action@v1

.github/workflows/test-client.yaml

@@ -1,11 +1,15 @@
 name: Test Frontend
 on: push
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Install modules
-        run: yarn --frozen-lockfile
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+
       - name: Run tests
         run: yarn test:client

api/http/handler/endpoints/endpoint_list.go

@@ -80,6 +80,7 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 	}
 
 	filteredEndpoints := security.FilterEndpoints(endpoints, endpointGroups, securityContext)
+	totalAvailableEndpoints := len(filteredEndpoints)
 
 	if endpointIDs != nil {
 		filteredEndpoints = filteredEndpointsByIds(filteredEndpoints, endpointIDs)
@@ -127,6 +128,7 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 	}
 
 	w.Header().Set("X-Total-Count", strconv.Itoa(filteredEndpointCount))
+	w.Header().Set("X-Total-Available", strconv.Itoa(totalAvailableEndpoints))
 	return response.JSON(w, paginatedEndpoints)
 }
 

app/__mocks__/axios-progress-bar.ts

@@ -0,0 +1 @@
+export function loadProgressBar() {}

app/app.js

@@ -38,7 +38,7 @@ export function onStartupAngular($rootScope, $state, $interval, LocalStorage, En
 
 function ping(EndpointProvider, SystemService) {
   const endpoint = EndpointProvider.currentEndpoint();
-  if (endpoint !== undefined && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) {
+  if (endpoint && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) {
     SystemService.ping(endpoint.Id);
   }
 }

app/assets/css/app.css

@@ -375,10 +375,6 @@ a[ng-click] {
   background-color: var(--white-color) fff;
 }
 
-.pagination-controls {
-  margin-left: 10px;
-}
-
 .user-box {
   margin-right: 25px;
 }
@@ -832,6 +828,18 @@ json-tree .branch-preview {
   align-items: center;
 }
 
+.space-x-2 > * + * {
+  margin-left: 0.5rem;
+}
+
+.space-x-3 > * + * {
+  margin-left: 0.75rem;
+}
+
+.space-x-4 > * + * {
+  margin-left: 1rem;
+}
+
 .space-y-8 > * + * {
   margin-top: 2rem;
 }

app/assets/css/vendor-override.css

@@ -222,33 +222,6 @@ json-tree .branch-preview {
   background-color: var(--bg-progress-color);
 }
 
-.pagination > .disabled > span,
-.pagination > .disabled > span:hover,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > a,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > a:focus {
-  color: var(--text-pagination-color);
-  background-color: var(--bg-pagination-color);
-  border-color: var(--border-pagination-color);
-}
-
-.pagination > li > a,
-.pagination > li > span {
-  background-color: var(--bg-pagination-span-color);
-  border-color: var(--border-pagination-span-color);
-  color: var(--text-pagination-span-color);
-}
-
-.pagination > li > a:hover,
-.pagination > li > span:hover,
-.pagination > li > a:focus,
-.pagination > li > span:focus {
-  background-color: var(--bg-pagination-hover-color);
-  border-color: var(--border-pagination-hover-color);
-  color: var(--text-pagination-span-hover-color);
-}
-
 .ui-select-bootstrap .ui-select-choices-row > span {
   color: var(--text-ui-select-color);
 }

app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx

@@ -30,8 +30,8 @@ import { ColumnVisibilityMenu } from '@/portainer/components/datatables/componen
 import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import {
-  useSearchBarContext,
   SearchBar,
+  useSearchBarState,
 } from '@/portainer/components/datatables/components/SearchBar';
 import type {
   ContainersTableSettings,
@@ -63,7 +63,7 @@ export function ContainersDatatable({
 }: ContainerTableProps) {
   const { settings, setTableSettings } =
     useTableSettings<ContainersTableSettings>();
-  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState('containers');
 
   const columns = useColumns();
 

app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx

@@ -1,7 +1,6 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
 import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
-import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
 import type { Environment } from '@/portainer/environments/types';
 
 import {
@@ -30,10 +29,8 @@ export function ContainersDatatableContainer({
   return (
     <EnvironmentProvider environment={endpoint}>
       <TableSettingsProvider defaults={defaultSettings} storageKey={tableKey}>
-        <SearchBarProvider storageKey={tableKey}>
-          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-          <ContainersDatatable {...props} />
-        </SearchBarProvider>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <ContainersDatatable {...props} />
       </TableSettingsProvider>
     </EnvironmentProvider>
   );

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -8,6 +8,7 @@ import {
   usePagination,
 } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
+import _ from 'lodash';
 
 import { Environment } from '@/portainer/environments/types';
 import { PaginationControls } from '@/portainer/components/pagination-controls';
@@ -27,7 +28,7 @@ import { ColumnVisibilityMenu } from '@/portainer/components/datatables/componen
 import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import {
-  useSearchBarContext,
+  useSearchBarState,
   SearchBar,
 } from '@/portainer/components/datatables/components/SearchBar';
 import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
@@ -38,34 +39,39 @@ import { EdgeDevicesDatatableSettings } from '@/edge/devices/components/EdgeDevi
 import { EdgeDevicesDatatableActions } from '@/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableActions';
 import { AMTDevicesDatatable } from '@/edge/devices/components/AMTDevicesDatatable/AMTDevicesDatatable';
 import { TextTip } from '@/portainer/components/Tip/TextTip';
+import { EnvironmentGroup } from '@/portainer/environment-groups/types';
 
 import { RowProvider } from './columns/RowContext';
 import { useColumns } from './columns';
 import styles from './EdgeDevicesDatatable.module.css';
 
 export interface EdgeDevicesTableProps {
+  storageKey: string;
   isEnabled: boolean;
   isFdoEnabled: boolean;
   isOpenAmtEnabled: boolean;
   disableTrustOnFirstConnect: boolean;
   mpsServer: string;
   dataset: Environment[];
+  groups: EnvironmentGroup[];
   onRefresh(): Promise<void>;
   setLoadingMessage(message: string): void;
 }
 
 export function EdgeDevicesDatatable({
+  storageKey,
   isFdoEnabled,
   isOpenAmtEnabled,
   disableTrustOnFirstConnect,
   mpsServer,
   dataset,
+  groups,
   onRefresh,
   setLoadingMessage,
 }: EdgeDevicesTableProps) {
   const { settings, setTableSettings } =
     useTableSettings<EdgeDeviceTableSettings>();
-  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
 
   const columns = useColumns();
 
@@ -131,6 +137,8 @@ export function EdgeDevicesDatatable({
       environment.AMTDeviceGUID && environment.AMTDeviceGUID !== ''
   );
 
+  const groupsById = _.groupBy(groups, 'Id');
+
   return (
     <TableContainer>
       <TableTitle icon="fa-plug" label="Edge Devices">
@@ -201,12 +209,13 @@ export function EdgeDevicesDatatable({
           {page.map((row) => {
             prepareRow(row);
             const { key, className, role, style } = row.getRowProps();
-
+            const group = groupsById[row.original.GroupId];
             return (
               <RowProvider
                 key={key}
                 disableTrustOnFirstConnect={disableTrustOnFirstConnect}
                 isOpenAmtEnabled={isOpenAmtEnabled}
+                groupName={group[0]?.Name}
               >
                 <TableRow<Environment>
                   cells={row.cells}

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx

@@ -1,6 +1,5 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
-import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
 
 import {
   EdgeDevicesDatatable,
@@ -18,19 +17,20 @@ export function EdgeDevicesDatatableContainer({
     sortBy: { id: 'state', desc: false },
   };
 
+  const storageKey = 'edgeDevices';
+
   return (
-    <TableSettingsProvider defaults={defaultSettings} storageKey="edgeDevices">
-      <SearchBarProvider storageKey="edgeDevices">
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <EdgeDevicesDatatable {...props} />
-      </SearchBarProvider>
+    <TableSettingsProvider defaults={defaultSettings} storageKey={storageKey}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <EdgeDevicesDatatable {...props} storageKey={storageKey} />
     </TableSettingsProvider>
   );
 }
 
 export const EdgeDevicesDatatableAngular = react2angular(
   EdgeDevicesDatatableContainer,
   [
+    'groups',
     'dataset',
     'onRefresh',
     'setLoadingMessage',

app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx

@@ -3,23 +3,26 @@ import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
 interface RowContextState {
   disableTrustOnFirstConnect: boolean;
   isOpenAmtEnabled: boolean;
+  groupName?: string;
 }
 
 const RowContext = createContext<RowContextState | null>(null);
 
 export interface RowProviderProps {
   disableTrustOnFirstConnect: boolean;
+  groupName?: string;
   isOpenAmtEnabled: boolean;
 }
 
 export function RowProvider({
   disableTrustOnFirstConnect,
+  groupName,
   isOpenAmtEnabled,
   children,
 }: PropsWithChildren<RowProviderProps>) {
   const state = useMemo(
-    () => ({ disableTrustOnFirstConnect, isOpenAmtEnabled }),
-    [disableTrustOnFirstConnect, isOpenAmtEnabled]
+    () => ({ disableTrustOnFirstConnect, groupName, isOpenAmtEnabled }),
+    [disableTrustOnFirstConnect, groupName, isOpenAmtEnabled]
   );
 
   return <RowContext.Provider value={state}>{children}</RowContext.Provider>;

app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx

@@ -3,10 +3,19 @@ import { Column } from 'react-table';
 import { Environment } from '@/portainer/environments/types';
 import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
 
+import { useRowContext } from './RowContext';
+
 export const group: Column<Environment> = {
   Header: 'Group',
-  accessor: (row) => row.GroupName || '-',
+  accessor: (row) => row.GroupId,
+  Cell: GroupCell,
   id: 'groupName',
   Filter: DefaultFilter,
   canHide: true,
 };
+
+function GroupCell() {
+  const { groupName } = useRowContext();
+
+  return groupName;
+}

app/edge/views/edge-devices/edgeDevicesView/edgeDevicesView.html

@@ -28,6 +28,7 @@
   <div class="col-sm-12">
     <edge-devices-datatable
       dataset="($ctrl.edgeDevices)"
+      groups="($ctrl.groups)"
       is-fdo-enabled="($ctrl.isFDOEnabled)"
       is-open-amt-enabled="($ctrl.isOpenAMTEnabled)"
       disable-trust-on-first-connect="($ctrl.disableTrustOnFirstConnect)"

app/edge/views/edge-devices/edgeDevicesView/edgeDevicesViewController.js

@@ -1,4 +1,3 @@
-import EndpointHelper from 'Portainer/helpers/endpointHelper';
 import { getEndpoints } from 'Portainer/environments/environment.service';
 import { EnvironmentType } from 'Portainer/environments/types';
 
@@ -13,7 +12,7 @@ export function EdgeDevicesViewController($q, $async, EndpointService, GroupServ
     return $async(async () => {
       try {
         const [endpointsResponse, groups] = await Promise.all([getEndpoints(0, 100, { types: [EnvironmentType.EdgeAgentOnDocker] }), GroupService.groups()]);
-        EndpointHelper.mapGroupNameToEndpoint(endpointsResponse.value, groups);
+        ctrl.groups = groups;
         ctrl.edgeDevices = endpointsResponse.value;
       } catch (err) {
         Notifications.error('Failure', err, 'Unable to retrieve edge devices');

app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js

@@ -2,6 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
   templateUrl: './resourcePoolsDatatable.html',
   controller: 'KubernetesResourcePoolsDatatableController',
   bindings: {
+    endpoint: '<',
     titleText: '@',
     titleIcon: '@',
     dataset: '<',
@@ -10,6 +11,5 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
     reverseOrder: '<',
     removeAction: '<',
     refreshCallback: '<',
-    endpoint: '<',
   },
 });

app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js

@@ -1,11 +1,10 @@
 export default class HelmAddRepositoryController {
   /* @ngInject */
-  constructor($state, $async, HelmService, Notifications, EndpointProvider) {
+  constructor($state, $async, HelmService, Notifications) {
     this.$state = $state;
     this.$async = $async;
     this.HelmService = HelmService;
     this.Notifications = Notifications;
-    this.EndpointProvider = EndpointProvider;
   }
 
   doesRepoExist() {
@@ -19,7 +18,7 @@ export default class HelmAddRepositoryController {
   async addRepository() {
     this.state.isAddingRepo = true;
     try {
-      await this.HelmService.addHelmRepository(this.EndpointProvider.currentEndpoint().Id, { url: this.state.repository });
+      await this.HelmService.addHelmRepository(this.endpoint.Id, { url: this.state.repository });
       this.Notifications.success('Helm repository added successfully');
       this.$state.reload(this.$state.current);
     } catch (err) {