Improved FS Mode in console: (#889)

- Replaced legend for create bucket

- Hidden Heal in FS mode

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx

@@ -291,10 +291,8 @@ const AddBucket = ({
               {!distributedSetup && (
                 <Fragment>
                   <small className={classes.error}>
-                    Some of these features are disabled as server is running in
-                    FS mode. <br />
-                    If you require any of this, please start server in
-                    distributed mode.
+                    Some these features are disabled as server is running in
+                    non-erasure coded mode.
                   </small>
                   <br />
                   <br />

portal-ui/src/screens/Console/Heal/Heal.tsx

@@ -14,8 +14,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { HorizontalBar } from "react-chartjs-2";
 import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { HorizontalBar } from "react-chartjs-2";
 import { Button, Grid, TextField, InputBase } from "@material-ui/core";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
@@ -33,6 +34,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import PageHeader from "../Common/PageHeader/PageHeader";
+import { AppState } from "../../../store";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -74,6 +76,7 @@ const styles = (theme: Theme) =>
 
 interface IHeal {
   classes: any;
+  distributedSetup: boolean;
 }
 
 const SelectStyled = withStyles((theme: Theme) =>
@@ -98,7 +101,7 @@ const SelectStyled = withStyles((theme: Theme) =>
   })
 )(InputBase);
 
-const Heal = ({ classes }: IHeal) => {
+const Heal = ({ classes, distributedSetup }: IHeal) => {
   const [start, setStart] = useState(false);
   const [bucketName, setBucketName] = useState("");
   const [bucketList, setBucketList] = useState<Bucket[]>([]);
@@ -227,6 +230,10 @@ const Heal = ({ classes }: IHeal) => {
     label: bucketName.name,
     value: bucketName.name,
   }));
+  if (!distributedSetup) {
+    return null;
+  }
+
   return (
     <React.Fragment>
       <PageHeader label="Heal" />
@@ -355,4 +362,10 @@ const Heal = ({ classes }: IHeal) => {
   );
 };
 
-export default withStyles(styles)(Heal);
+const mapState = (state: AppState) => ({
+  distributedSetup: state.system.distributedSetup,
+});
+
+const connector = connect(mapState, null);
+
+export default connector(withStyles(styles)(Heal));

portal-ui/src/screens/Console/Menu/Menu.tsx

@@ -149,13 +149,6 @@ const styles = (theme: Theme) =>
     },
   });
 
-const mapState = (state: AppState) => ({
-  open: state.system.loggedIn,
-  operatorMode: state.system.operatorMode,
-});
-
-const connector = connect(mapState, { userLoggedIn });
-
 // Menu State builder for groups
 const menuStateBuilder = () => {
   let elements: any = [];
@@ -168,7 +161,13 @@ const menuStateBuilder = () => {
   return elements;
 };
 
-const Menu = ({ userLoggedIn, classes, pages, operatorMode }: IMenuProps) => {
+const Menu = ({
+  userLoggedIn,
+  classes,
+  pages,
+  operatorMode,
+  distributedSetup,
+}: IMenuProps) => {
   const [menuOpen, setMenuOpen] = useState<any>(menuStateBuilder());
 
   const logout = () => {
@@ -278,6 +277,7 @@ const Menu = ({ userLoggedIn, classes, pages, operatorMode }: IMenuProps) => {
       to: "/heal",
       name: "Heal",
       icon: <HealIcon />,
+      fsHidden: distributedSetup,
     },
     {
       group: "Tools",
@@ -386,8 +386,7 @@ const Menu = ({ userLoggedIn, classes, pages, operatorMode }: IMenuProps) => {
   }
 
   const allowedItems = menuItems.filter(
-    (item: any) =>
-      allowedPages[item.to] || item.forceDisplay || item.type !== "item"
+    (item: any) => (allowedPages[item.to] || item.forceDisplay || item.type !== "item") && item.fsHidden !== false  
   );
 
   const setMenuCollapse = (menuClicked: string) => {
@@ -501,4 +500,12 @@ const Menu = ({ userLoggedIn, classes, pages, operatorMode }: IMenuProps) => {
   );
 };
 
+const mapState = (state: AppState) => ({
+  open: state.system.loggedIn,
+  operatorMode: state.system.operatorMode,
+  distributedSetup: state.system.distributedSetup,
+});
+
+const connector = connect(mapState, { userLoggedIn });
+
 export default connector(withStyles(styles)(Menu));

portal-ui/src/screens/Console/Menu/types.ts

@@ -21,6 +21,7 @@ export interface IMenuProps {
   userLoggedIn: typeof userLoggedIn;
   pages: string[];
   operatorMode: boolean;
+  distributedSetup: boolean;
 }
 
 export interface IMenuItem {
@@ -33,4 +34,5 @@ export interface IMenuItem {
   onClick?: any;
   forceDisplay?: boolean;
   extraMargin?: boolean;
+  fsHidden?: boolean;
 }