Set Operator Logo for Operator Mode (#503)
This commit is contained in:
@@ -18,9 +18,10 @@ import React, { useEffect, useState } from "react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { connect } from "react-redux";
|
||||
import { AppState } from "./store";
|
||||
import { userLoggedIn } from "./actions";
|
||||
import { consoleOperatorMode, userLoggedIn } from "./actions";
|
||||
import api from "./common/api";
|
||||
import { saveSessionResponse } from "./screens/Console/actions";
|
||||
import { ISessionResponse } from "./screens/Console/types";
|
||||
|
||||
const mapState = (state: AppState) => ({
|
||||
loggedIn: state.system.loggedIn,
|
||||
@@ -28,6 +29,7 @@ const mapState = (state: AppState) => ({
|
||||
|
||||
const connector = connect(mapState, {
|
||||
userLoggedIn,
|
||||
consoleOperatorMode,
|
||||
saveSessionResponse,
|
||||
});
|
||||
|
||||
@@ -35,6 +37,7 @@ interface ProtectedRouteProps {
|
||||
loggedIn: boolean;
|
||||
Component: any;
|
||||
userLoggedIn: typeof userLoggedIn;
|
||||
consoleOperatorMode: typeof consoleOperatorMode;
|
||||
saveSessionResponse: typeof saveSessionResponse;
|
||||
}
|
||||
|
||||
@@ -42,16 +45,22 @@ const ProtectedRoute = ({
|
||||
Component,
|
||||
loggedIn,
|
||||
userLoggedIn,
|
||||
consoleOperatorMode,
|
||||
saveSessionResponse,
|
||||
}: ProtectedRouteProps) => {
|
||||
const [sessionLoading, setSessionLoading] = useState<boolean>(true);
|
||||
useEffect(() => {
|
||||
api
|
||||
.invoke("GET", `/api/v1/session`)
|
||||
.then((res) => {
|
||||
.then((res: ISessionResponse) => {
|
||||
saveSessionResponse(res);
|
||||
userLoggedIn(true);
|
||||
setSessionLoading(false);
|
||||
// check for tenants presence, that indicates we are in operator mode
|
||||
if (res.pages.includes("/tenants")) {
|
||||
consoleOperatorMode(true);
|
||||
document.title = "MinIO Operator";
|
||||
}
|
||||
})
|
||||
.catch(() => setSessionLoading(false));
|
||||
}, [saveSessionResponse]);
|
||||
|
||||
@@ -16,35 +16,43 @@
|
||||
|
||||
import {
|
||||
MENU_OPEN,
|
||||
OPERATOR_MODE,
|
||||
SERVER_IS_LOADING,
|
||||
SERVER_NEEDS_RESTART,
|
||||
USER_LOGGED
|
||||
USER_LOGGED,
|
||||
} from "./types";
|
||||
|
||||
export function userLoggedIn(loggedIn: boolean) {
|
||||
return {
|
||||
type: USER_LOGGED,
|
||||
logged: loggedIn
|
||||
logged: loggedIn,
|
||||
};
|
||||
}
|
||||
|
||||
export function consoleOperatorMode(operatorMode: boolean) {
|
||||
return {
|
||||
type: OPERATOR_MODE,
|
||||
operatorMode: operatorMode,
|
||||
};
|
||||
}
|
||||
|
||||
export function setMenuOpen(open: boolean) {
|
||||
return {
|
||||
type: MENU_OPEN,
|
||||
open: open
|
||||
open: open,
|
||||
};
|
||||
}
|
||||
|
||||
export function serverNeedsRestart(needsRestart: boolean) {
|
||||
return {
|
||||
type: SERVER_NEEDS_RESTART,
|
||||
needsRestart: needsRestart
|
||||
needsRestart: needsRestart,
|
||||
};
|
||||
}
|
||||
|
||||
export function serverIsLoading(isLoading: boolean) {
|
||||
return {
|
||||
type: SERVER_IS_LOADING,
|
||||
isLoading: isLoading
|
||||
isLoading: isLoading,
|
||||
};
|
||||
}
|
||||
|
||||
32
portal-ui/src/icons/minio_operator_logo.svg
Normal file
32
portal-ui/src/icons/minio_operator_logo.svg
Normal file
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 606.58301 134.69085">
|
||||
<defs>
|
||||
<style>.cls-1{fill:#fff;}</style>
|
||||
</defs>
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path class="cls-1"
|
||||
d="M79.69482,95.06292c0,23.0293-16.76318,39.62793-39.84765,39.62793C16.76318,134.69085,0,118.09222,0,95.06292S16.76318,55.435,39.84717,55.435C62.93164,55.435,79.69482,72.03363,79.69482,95.06292Zm-69.582,0c0,18.083,12.80616,30.33887,29.73438,30.33887,16.92871,0,29.73486-12.25586,29.73486-30.33887,0-18.082-12.80615-30.33887-29.73486-30.33887C22.919,64.72405,10.11279,76.98089,10.11279,95.06292Z"/>
|
||||
<path class="cls-1"
|
||||
d="M106.89453,102.75823v30.77832H97.22119V56.58929h29.23975c17.36816,0,27.20654,8.68457,27.20654,23.084,0,14.40039-9.83838,23.085-27.20654,23.085Zm0-37.04492v27.9209h19.34668c11.37695,0,17.36817-4.61719,17.36817-13.96094,0-9.34277-5.99122-13.96-17.36817-13.96Z"/>
|
||||
<path class="cls-1"
|
||||
d="M224.78418,133.53655H170.15186V56.58929h54.08252v9.06934H179.8252V90.226h42.98046V99.35H179.8252V124.4682h44.959Z"/>
|
||||
<path class="cls-1"
|
||||
d="M275.07031,56.58929c17.36768,0,26.93115,7.80469,26.93115,21.82031,0,13.35547-10.38769,21.92969-26.87646,21.92969h-.60449l27.09619,33.19726H289.63525l-26.437-33.19726h-9.01367v33.19726h-9.67334V56.58929Zm-20.88574,9.06934V91.54534H274.8501c11.32226,0,17.09326-4.50683,17.09326-13.13574,0-8.51953-5.93555-12.751-17.09326-12.751Z"/>
|
||||
<path class="cls-1"
|
||||
d="M384.71582,133.53655H374.32764l-8.46387-20.99511H328.54443l-8.40918,20.99511h-10.0581l31.27344-76.94726h12.03662Zm-52.48926-30.17382h29.95459l-14.9497-37.21Z"/>
|
||||
<path class="cls-1" d="M445.11426,65.768H418.897v67.76855h-9.67334V65.768H382.95215V56.58929h62.16211Z"/>
|
||||
<path class="cls-1"
|
||||
d="M531.56641,95.06292c0,23.0293-16.76319,39.62793-39.84766,39.62793-23.084,0-39.84766-16.59863-39.84766-39.62793S468.63477,55.435,491.71875,55.435C514.80322,55.435,531.56641,72.03363,531.56641,95.06292Zm-69.582,0c0,18.083,12.80615,30.33887,29.73437,30.33887,16.92871,0,29.73486-12.25586,29.73486-30.33887,0-18.082-12.80615-30.33887-29.73486-30.33887C474.79053,64.72405,461.98438,76.98089,461.98438,95.06292Z"/>
|
||||
<path class="cls-1"
|
||||
d="M579.65186,56.58929c17.36767,0,26.93115,7.80469,26.93115,21.82031,0,13.35547-10.3877,21.92969-26.87647,21.92969h-.60449l27.09619,33.19726H594.2168l-26.437-33.19726h-9.01368v33.19726h-9.67334V56.58929Zm-20.88575,9.06934V91.54534h20.66553c11.32227,0,17.09326-4.50683,17.09326-13.13574,0-8.51953-5.93554-12.751-17.09326-12.751Z"/>
|
||||
<rect class="cls-1" x="72.29243" y="0.76163" width="11.74959" height="34.41948"/>
|
||||
<path class="cls-1"
|
||||
d="M58.15854,1.08676,34.30819,15.65325a1.05927,1.05927,0,0,1-1.10533,0L9.35161,1.08676A3.27221,3.27221,0,0,0,7.64692.60715H7.61758A3.26962,3.26962,0,0,0,4.34742,3.87731v31.3038H16.08953V20.32662a1.17452,1.17452,0,0,1,1.787-1.002l13.36627,8.177a4.18841,4.18841,0,0,0,4.30393.04042l14.10454-8.27286A1.17448,1.17448,0,0,1,51.42,20.282v14.8991h11.7421V3.87731A3.26963,3.26963,0,0,0,59.892.60715h-.02935A3.2657,3.2657,0,0,0,58.15854,1.08676Z"/>
|
||||
<path class="cls-1"
|
||||
d="M142.74176.75325h-11.916V16.5475a1.17456,1.17456,0,0,1-1.72655,1.03647L98.21811,1.13706A3.26768,3.26768,0,0,0,96.68137.75325h-.02095a3.26963,3.26963,0,0,0-3.27017,3.27016v31.1577h11.82114V19.63953a1.17434,1.17434,0,0,1,1.725-1.03706l31.00382,16.44422a3.26926,3.26926,0,0,0,1.53254.38141h0a3.26962,3.26962,0,0,0,3.27016-3.27016V.75325Z"/>
|
||||
<path class="cls-1" d="M152.27862,35.17273V.75325h5.46375V35.17273Z"/>
|
||||
<path class="cls-1"
|
||||
d="M189.20753,35.926c-14.54464,0-24.86227-6.89989-24.86227-17.96269C164.345,6.96186,174.72487,0,189.20753,0c14.48237,0,24.92454,6.899,24.92454,17.96269S203.93837,35.926,189.20753,35.926Zm0-31.32716c-10.81492,0-19.14406,4.724-19.14406,13.36387,0,8.70217,8.32914,13.363,19.14406,13.363s19.20633-4.6617,19.20633-13.363C208.41386,9.32279,200.02244,4.59882,189.20753,4.59882Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -16,20 +16,22 @@
|
||||
|
||||
import {
|
||||
MENU_OPEN,
|
||||
OPERATOR_MODE,
|
||||
SERVER_IS_LOADING,
|
||||
SERVER_NEEDS_RESTART,
|
||||
SystemActionTypes,
|
||||
SystemState,
|
||||
USER_LOGGED
|
||||
USER_LOGGED,
|
||||
} from "./types";
|
||||
|
||||
const initialState: SystemState = {
|
||||
loggedIn: false,
|
||||
operatorMode: false,
|
||||
session: "",
|
||||
userName: "",
|
||||
sidebarOpen: true,
|
||||
serverNeedsRestart: false,
|
||||
serverIsLoading: false
|
||||
serverIsLoading: false,
|
||||
};
|
||||
|
||||
export function systemReducer(
|
||||
@@ -40,23 +42,28 @@ export function systemReducer(
|
||||
case USER_LOGGED:
|
||||
return {
|
||||
...state,
|
||||
loggedIn: action.logged
|
||||
loggedIn: action.logged,
|
||||
};
|
||||
case OPERATOR_MODE:
|
||||
return {
|
||||
...state,
|
||||
operatorMode: action.operatorMode,
|
||||
};
|
||||
case MENU_OPEN:
|
||||
return {
|
||||
...state,
|
||||
sidebarOpen: action.open
|
||||
sidebarOpen: action.open,
|
||||
};
|
||||
case SERVER_NEEDS_RESTART:
|
||||
return {
|
||||
...state,
|
||||
serverNeedsRestart: action.needsRestart
|
||||
serverNeedsRestart: action.needsRestart,
|
||||
};
|
||||
|
||||
case SERVER_IS_LOADING:
|
||||
return {
|
||||
...state,
|
||||
serverIsLoading: action.isLoading
|
||||
serverIsLoading: action.isLoading,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
|
||||
@@ -105,9 +105,10 @@ const Account = ({ classes }: IServiceAccountsProps) => {
|
||||
newServiceAccount,
|
||||
setNewServiceAccount,
|
||||
] = useState<NewServiceAccount | null>(null);
|
||||
const [changePasswordModalOpen, setChangePasswordModalOpen] = useState<
|
||||
boolean
|
||||
>(false);
|
||||
const [
|
||||
changePasswordModalOpen,
|
||||
setChangePasswordModalOpen,
|
||||
] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecords();
|
||||
|
||||
@@ -217,9 +217,10 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
|
||||
);
|
||||
const [curTab, setCurTab] = useState<number>(0);
|
||||
const [addScreenOpen, setAddScreenOpen] = useState<boolean>(false);
|
||||
const [enableEncryptionScreenOpen, setEnableEncryptionScreenOpen] = useState<
|
||||
boolean
|
||||
>(false);
|
||||
const [
|
||||
enableEncryptionScreenOpen,
|
||||
setEnableEncryptionScreenOpen,
|
||||
] = useState<boolean>(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
|
||||
const [selectedEvent, setSelectedEvent] = useState<BucketEvent | null>(null);
|
||||
const [bucketSize, setBucketSize] = useState<string>("0");
|
||||
|
||||
@@ -27,6 +27,7 @@ import { Divider, withStyles } from "@material-ui/core";
|
||||
import { createStyles, Theme } from "@material-ui/core/styles";
|
||||
import history from "../../../history";
|
||||
import logo from "../../../icons/minio_console_logo.svg";
|
||||
import operator_logo from "../../../icons/minio_operator_logo.svg";
|
||||
import { AppState } from "../../../store";
|
||||
import { userLoggedIn } from "../../../actions";
|
||||
import api from "../../../common/api";
|
||||
@@ -149,6 +150,7 @@ const styles = (theme: Theme) =>
|
||||
|
||||
const mapState = (state: AppState) => ({
|
||||
open: state.system.loggedIn,
|
||||
operatorMode: state.system.operatorMode,
|
||||
});
|
||||
|
||||
const connector = connect(mapState, { userLoggedIn });
|
||||
@@ -165,7 +167,7 @@ const menuStateBuilder = () => {
|
||||
return elements;
|
||||
};
|
||||
|
||||
const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
|
||||
const Menu = ({ userLoggedIn, classes, pages, operatorMode }: IMenuProps) => {
|
||||
const [menuOpen, setMenuOpen] = useState<any>(menuStateBuilder());
|
||||
|
||||
const logout = () => {
|
||||
@@ -337,7 +339,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className={classes.logo}>
|
||||
<img src={logo} alt="logo" />
|
||||
<img src={operatorMode ? operator_logo : logo} alt="logo" />
|
||||
</div>
|
||||
<List className={classes.menuList}>
|
||||
{menuGroups.map((groupMember, index) => {
|
||||
|
||||
@@ -20,4 +20,5 @@ export interface IMenuProps {
|
||||
classes: any;
|
||||
userLoggedIn: typeof userLoggedIn;
|
||||
pages: string[];
|
||||
operatorMode: boolean;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
export interface SystemState {
|
||||
loggedIn: boolean;
|
||||
operatorMode: boolean;
|
||||
sidebarOpen: boolean;
|
||||
session: string;
|
||||
userName: string;
|
||||
@@ -24,6 +25,7 @@ export interface SystemState {
|
||||
}
|
||||
|
||||
export const USER_LOGGED = "USER_LOGGED";
|
||||
export const OPERATOR_MODE = "OPERATOR_MODE";
|
||||
export const MENU_OPEN = "MENU_OPEN";
|
||||
export const SERVER_NEEDS_RESTART = "SERVER_NEEDS_RESTART";
|
||||
export const SERVER_IS_LOADING = "SERVER_IS_LOADING";
|
||||
@@ -33,6 +35,11 @@ interface UserLoggedAction {
|
||||
logged: boolean;
|
||||
}
|
||||
|
||||
interface OperatorModeAction {
|
||||
type: typeof OPERATOR_MODE;
|
||||
operatorMode: boolean;
|
||||
}
|
||||
|
||||
interface SetMenuOpenAction {
|
||||
type: typeof MENU_OPEN;
|
||||
open: boolean;
|
||||
@@ -50,6 +57,7 @@ interface ServerIsLoading {
|
||||
|
||||
export type SystemActionTypes =
|
||||
| UserLoggedAction
|
||||
| OperatorModeAction
|
||||
| SetMenuOpenAction
|
||||
| ServerNeedsRestartAction
|
||||
| ServerIsLoading;
|
||||
|
||||
Reference in New Issue
Block a user