Set Operator Logo for Operator Mode (#503)

This commit is contained in:
Daniel Valdivia
2020-12-10 21:49:20 -08:00
committed by GitHub
parent e0f3e4513d
commit b495148a69
9 changed files with 90 additions and 21 deletions

View File

@@ -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]);

View File

@@ -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,
};
}

View 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

View File

@@ -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;

View File

@@ -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();

View File

@@ -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");

View File

@@ -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) => {

View File

@@ -20,4 +20,5 @@ export interface IMenuProps {
classes: any;
userLoggedIn: typeof userLoggedIn;
pages: string[];
operatorMode: boolean;
}

View File

@@ -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;