fix(Nodes,Storage): reorder controls - prevent moving on count change (#1562)

Author: artemmufazalov

src/containers/Nodes/Nodes.tsx

@@ -113,19 +113,19 @@ export const Nodes = ({path, database, additionalNodesProps = {}}: NodesProps) =
                 />
                 <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
-                <EntitiesCount
-                    total={totalNodes}
-                    current={nodes.length}
-                    label={'Nodes'}
-                    loading={isLoading}
-                />
                 <TableColumnSetup
                     popupWidth={200}
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
                     sortable={false}
                 />
+                <EntitiesCount
+                    total={totalNodes}
+                    current={nodes.length}
+                    label={'Nodes'}
+                    loading={isLoading}
+                />
             </React.Fragment>
         );
     };

src/containers/Nodes/PaginatedNodes.tsx

@@ -96,19 +96,19 @@ export const PaginatedNodes = ({path, database, parentRef, additionalNodesProps}
                 />
                 <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
-                <EntitiesCount
-                    total={totalEntities}
-                    current={foundEntities}
-                    label={'Nodes'}
-                    loading={!inited}
-                />
                 <TableColumnSetup
                     popupWidth={200}
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
                     sortable={false}
                 />
+                <EntitiesCount
+                    total={totalEntities}
+                    current={foundEntities}
+                    label={'Nodes'}
+                    loading={!inited}
+                />
             </React.Fragment>
         );
     };

src/containers/Storage/StorageControls/StorageControls.tsx

@@ -69,12 +69,6 @@ export function StorageGroupsControls({
                     onChange={handleVisibleEntitiesChange}
                 />
             )}
-            <EntitiesCount
-                label={i18n('groups')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
             <TableColumnSetup
                 popupWidth={200}
                 items={columnsToSelect}
@@ -97,6 +91,12 @@ export function StorageGroupsControls({
                     />
                 </React.Fragment>
             ) : null}
+            <EntitiesCount
+                label={i18n('groups')}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
         </React.Fragment>
     );
 }
@@ -149,12 +149,6 @@ export function StorageNodesControls({
             {withGroupBySelect ? null : (
                 <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
             )}
-            <EntitiesCount
-                label={i18n('nodes')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
             <TableColumnSetup
                 popupWidth={200}
                 items={columnsToSelect}
@@ -177,6 +171,12 @@ export function StorageNodesControls({
                     />
                 </React.Fragment>
             ) : null}
+            <EntitiesCount
+                label={i18n('nodes')}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
         </React.Fragment>
     );
 }