This is an automated email from the ASF dual-hosted git repository.
kishoreg pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 31fdc5d UI Enhancement: Pinot UI expandable leftmost column(Page
Links) (#5723)
31fdc5d is described below
commit 31fdc5d2baeec53edc8b42e5fccdab458c68ab4a
Author: Sanket Shah <shahsan...@users.noreply.github.com>
AuthorDate: Wed Jul 22 12:04:22 2020 +0530
UI Enhancement: Pinot UI expandable leftmost column(Page Links) (#5723)
---
.../src/main/resources/app/components/Header.tsx | 14 ++-
.../src/main/resources/app/components/Layout.tsx | 24 ++++-
.../src/main/resources/app/components/Logo.tsx | 37 --------
.../src/main/resources/app/components/SideBar.tsx | 101 ++++++++++++++++-----
.../resources/app/components/SvgIcons/Logo.tsx | 60 ++++++++++++
.../app/components/SvgIcons/QueryConsoleIcon.tsx | 48 ++++++++++
.../app/components/SvgIcons/SwaggerIcon.tsx | 40 ++++++++
7 files changed, 257 insertions(+), 67 deletions(-)
diff --git a/pinot-controller/src/main/resources/app/components/Header.tsx
b/pinot-controller/src/main/resources/app/components/Header.tsx
index 1dcf7db..08817b0 100644
--- a/pinot-controller/src/main/resources/app/components/Header.tsx
+++ b/pinot-controller/src/main/resources/app/components/Header.tsx
@@ -20,20 +20,26 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { AppBar, Box } from '@material-ui/core';
-import Logo from './Logo';
+import MenuIcon from '@material-ui/icons/Menu';
+import Logo from './SvgIcons/Logo';
import BreadcrumbsComponent from './Breadcrumbs';
type Props = {
highlightSidebarLink: (id: number) => void;
+ showHideSideBarHandler: () => void;
+ openSidebar: boolean;
};
-const Header = ({ highlightSidebarLink, ...props }: Props) => (
+const Header = ({ highlightSidebarLink, showHideSideBarHandler, openSidebar,
...props }: Props) => (
<AppBar position="static">
<Box display="flex">
- <Box textAlign="center" marginY="12.5px" width={250} borderRight="1px
solid rgba(255,255,255,0.5)">
- <Link to="/"><Logo onClick={(event) => highlightSidebarLink(1)}
/></Link>
+ <Box textAlign="center" marginY="12.5px" width={openSidebar ? 250 : 90}
borderRight="1px solid rgba(255,255,255,0.5)">
+ <Link to="/"><Logo onClick={() => highlightSidebarLink(1)}
fulllogo={openSidebar.toString()} /></Link>
</Box>
<Box display="flex" alignItems="center">
+ <Box marginY="auto" padding="0.25rem 0 0.25rem 1.5rem" display="flex">
+ <MenuIcon onClick={() => showHideSideBarHandler()} />
+ </Box>
<BreadcrumbsComponent {...props}/>
</Box>
</Box>
diff --git a/pinot-controller/src/main/resources/app/components/Layout.tsx
b/pinot-controller/src/main/resources/app/components/Layout.tsx
index 373fc15..b958bdc 100644
--- a/pinot-controller/src/main/resources/app/components/Layout.tsx
+++ b/pinot-controller/src/main/resources/app/components/Layout.tsx
@@ -21,11 +21,13 @@ import * as React from 'react';
import { Grid } from '@material-ui/core';
import Sidebar from './SideBar';
import Header from './Header';
+import QueryConsoleIcon from './SvgIcons/QueryConsoleIcon';
+import SwaggerIcon from './SvgIcons/SwaggerIcon';
const navigationItems = [
// { id: 1, name: 'Cluster Manager', link: '/' },
- { id: 1, name: 'Query Console', link: '/', },
- { id: 2, name: 'Swagger REST API', link: 'help', target: '_blank' },
+ { id: 1, name: 'Query Console', link: '/', icon: <QueryConsoleIcon/> },
+ { id: 2, name: 'Swagger REST API', link: 'help', target: '_blank', icon:
<SwaggerIcon/> }
];
const Layout = (props) => {
@@ -33,19 +35,33 @@ const Layout = (props) => {
const routeObj = navigationItems.find((obj)=>{ return obj.link === hash;});
const [selectedId, setSelectedId] = React.useState(routeObj?.id || 1);
+ const sidebarOpenState = !(localStorage.getItem('pinot_ui:sidebarState') ===
'false');
+ const [openSidebar, setOpenSidebar] = React.useState(sidebarOpenState);
const highlightSidebarLink = (id: number) => {
setSelectedId(id);
};
+
+ const showHideSideBarHandler = () => {
+ const newSidebarState = !openSidebar;
+ localStorage.setItem('pinot_ui:sidebarState', newSidebarState.toString());
+ setOpenSidebar(newSidebarState);
+ };
+
return (
<Grid container direction="column">
- <Header highlightSidebarLink={highlightSidebarLink} {...props}/>
+ <Header
+ highlightSidebarLink={highlightSidebarLink}
+ showHideSideBarHandler={showHideSideBarHandler}
+ openSidebar={openSidebar}
+ {...props}
+ />
<Grid item xs={12}>
<Grid container>
<Grid item>
<Sidebar
list={navigationItems}
- showMemu={false}
+ showMenu={openSidebar}
selectedId={selectedId}
highlightSidebarLink={highlightSidebarLink}
/>
diff --git a/pinot-controller/src/main/resources/app/components/Logo.tsx
b/pinot-controller/src/main/resources/app/components/Logo.tsx
deleted file mode 100644
index 63be44f..0000000
--- a/pinot-controller/src/main/resources/app/components/Logo.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import * as React from 'react';
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-
-export default (props: SvgIconProps) => (
- <SvgIcon style={{ width: 105, height: 40 }} width="105" height="40"
viewBox="0 0 105 40" fill="none" {...props}>
- <path d="M12.4159 0.305775C12.049 0.672747 12.0245 1.08865 12.367
1.51678C12.8685 2.1651 13.7003 1.79813 13.7003 0.94186C13.7003 0.0855913
12.9786 -0.269149 12.4159 0.305775Z" fill="white" />
- <path d="M6.18959 2.51987C5.71252 2.99693 5.84708 3.8165 6.44647
4.04892C7.16818 4.31803 7.8165 3.15595 7.26604 2.55656C7.00916 2.27522 6.44647
2.25075 6.18959 2.51987Z" fill="white" />
- <path d="M12.3792 3.62078C12.1101 3.80426 12.1101 3.82873 12.1101
7.37613C12.1101 11.3394 12.0856 11.4985 11.3762 11.4985C10.7034 11.4985 10.6422
11.3027 10.6422 9.22322C10.6422 7.35167 10.6422 7.3272 10.3242 7.02139C10.0917
6.77674 9.94496 6.72781 9.68808 6.78897C9.03976 6.94799 9.05199 6.85014 9.05199
10.948V14.7645L9.73701 14.4098C10.3119 14.1284 10.5933 14.0673 11.3272
14.0673C13.052 14.0673 14.3364 15.0826 14.7523 16.7829C14.9358 17.5046 14.9358
17.6391 14.7523 18.3486C14.422 19 [...]
- <path d="M9.25998 3.7676C8.97864 4.07341 8.99087 4.80736 9.27222
5.052C9.50463 5.27219 9.99393 5.32112 10.2263 5.1621C10.471 5.00308 10.6667
4.50155 10.5933 4.2202C10.4343 3.57188 9.66365 3.315 9.25998 3.7676Z"
fill="white" />
- <path d="M10.3976 15.9266C9.72481 16.3914 9.48016 16.8196 9.48016
17.5535C9.48016 18.5933 10.1652 19.3272 11.2172 19.4128C12.3303 19.4985 13.211
18.6544 13.211 17.4924C13.211 16.0734 11.5352 15.156 10.3976 15.9266Z"
fill="white" />
- <path d="M50.1228 7.47518C49.301 7.90702 48.8902 8.57711 48.8141
9.54503C48.7532 10.5129 49.1032 11.1681 49.9858 11.7489C50.7162 12.2403 52.0097
12.2254 52.7554 11.734C54.201 10.781 54.1706 8.63668 52.7097 7.57942C52.1162
7.14758 50.838 7.08802 50.1228 7.47518Z" fill="white" />
- <path d="M98.2563
13.5352V16.5505H97.5073H96.7584V18.3597V20.1689H97.5073H98.2563L98.2862
26.6066L98.3312 33.0594L100.248 33.1046L102.151
33.1498V26.6518V20.1689H103.124H104.098V18.3597V16.5505H103.124H102.151V13.5352V10.5199H100.203H98.2563V13.5352Z"
fill="white" />
- <path d="M64.596 16.4721C63.8441 16.7413 62.8465 17.3097 62.3248
17.7734L61.9718
18.0726V17.3845V16.6815H59.9767H57.9817V24.9082V33.1349H59.9614H61.9411L62.0025
27.8548C62.0792 21.9615 62.1559 21.453 63.1228 20.5107C63.7366 19.9123 64.8723
19.5982 65.9926 19.7179C67.4659 19.8974 68.1411 20.6004 68.4174 22.3056C68.5094
22.7992 68.5708 25.4317 68.5708 28.169V33.1498L70.5352 33.105L72.4842
33.0601L72.5302 27.8249C72.5609 24.624 72.4995 22.0962 72.4075 21.3184C72.1005
18.9999 71.1184 17. [...]
- <path d="M82.8772 16.4602C81.3955 16.8233 80.1103 17.5799 78.9007
18.8055C77.0863 20.6364 76.3303 22.4219 76.3303 24.9488C76.3303 30.169 80.5185
34.088 85.7046 33.74C87.2317 33.6341 88.3506 33.3314 89.4846 32.7111C91.3746
31.6519 92.8261 29.9723 93.5367 28.0053C93.8845 27.052 93.945 26.6889 93.945
25.0244C93.945 23.4357 93.8845 22.9666 93.5972 22.1192C92.6447 19.3805 90.2708
17.2016 87.4434 16.4753C86.3699 16.203 83.981 16.203 82.8772 16.4602ZM86.5839
19.9168C87.6189 20.2242 88.5321 [...]
- <path d="M49.4189 24.8855V33.1498L51.4062 33.1048L53.378 33.0598L53.4246
24.8405L53.4556 16.6361H51.4373H49.4189V24.8855Z" fill="white" />
- <path d="M34.932 16.9102C34.0837 17.0461 32.7508 17.5293 32.251
17.8766C31.7966 18.1938 31.7057 18.1636 31.7057
17.6501V17.1971H29.7366H27.7676L27.7676
28.5985V40H29.7366H31.7057V36.4663V32.9175L32.5842 33.3705C33.8111 33.9897
35.038 34.2615 36.6284 34.2615C39.2639 34.2615 41.3087 33.4461 43.0506
31.6943C44.7925 29.9577 45.5044 28.1908 45.5044 25.5481C45.5195 22.9356 44.7925
21.1536 42.99 19.3566C40.8695 17.2424 38.0673 16.3816 34.932 16.9102ZM38.1743
20.4091C40.297 20.9406 41.6067 2 [...]
- </SvgIcon>
-);
diff --git a/pinot-controller/src/main/resources/app/components/SideBar.tsx
b/pinot-controller/src/main/resources/app/components/SideBar.tsx
index 8fce4ed..c1692e6 100644
--- a/pinot-controller/src/main/resources/app/components/SideBar.tsx
+++ b/pinot-controller/src/main/resources/app/components/SideBar.tsx
@@ -18,7 +18,7 @@
*/
import * as React from 'react';
-
+import clsx from 'clsx';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
@@ -27,8 +27,6 @@ import CssBaseline from '@material-ui/core/CssBaseline';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import { NavLink } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
const drawerWidth = 250;
@@ -46,69 +44,128 @@ const useStyles = makeStyles((theme: Theme) =>
flexShrink: 0,
backgroundColor: '#333333',
},
+ drawerOpen: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ drawerClose: {
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: '90px',
+ },
drawerPaper: {
position: 'unset',
- width: drawerWidth,
backgroundColor: '#F5F7F9',
+ overflowY: 'visible'
},
drawerContainer: {
- overflow: 'auto',
- paddingTop: '20px'
+ padding: '20px 15px'
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
itemContainer: {
+ width: 'auto',
+ display: 'block',
color: '#3B454E',
- borderRadius: '4px'
+ borderRadius: '4px',
+ '&:hover': {
+ backgroundColor: '#ecedef'
+ }
},
selectedItem: {
background: '#D8E1E8!important'
},
link: {
- textDecoration: 'none'
- }
+ textDecoration: 'none',
+ '&:hover .menu-item': {
+ display: 'inline-block'
+ }
+ },
+ sidebarLabel: {
+ marginLeft: '10px'
+ },
+ sidebarLabelClose: {
+ display: 'none',
+ marginLeft: '10px',
+ top: 0,
+ position: 'absolute',
+ whiteSpace: 'nowrap',
+ backgroundColor: 'inherit',
+ padding: '8px 8px 8px 0',
+ borderRadius: '0 4px 4px 0',
+ zIndex: 9
+ },
+ popover: {
+ pointerEvents: 'none',
+ },
+ paper: {
+ padding: theme.spacing(1),
+ },
}),
);
type Props = {
- showMemu: boolean;
- list: Array<{id:number, name: string, link: string, target?: string}>;
+ showMenu: boolean;
+ list: Array<{id:number, name: string, link: string, target?: string, icon:
any}>;
selectedId: number;
highlightSidebarLink: (id: number) => void;
};
-const Sidebar = ({ showMemu, list, selectedId, highlightSidebarLink }: Props)
=> {
+const Sidebar = ({ showMenu, list, selectedId, highlightSidebarLink }: Props)
=> {
const classes = useStyles();
return (
<>
<CssBaseline />
<Drawer
- open={showMemu}
- className={classes.drawer}
- variant="permanent"
+ className={clsx(classes.drawer, {
+ [classes.drawerOpen]: showMenu,
+ [classes.drawerClose]: !showMenu,
+ })}
classes={{
- paper: classes.drawerPaper,
+ paper: clsx(classes.drawerPaper, {
+ [classes.drawerOpen]: showMenu,
+ [classes.drawerClose]: !showMenu,
+ }),
}}
+ transitionDuration={1000}
+ variant="permanent"
>
<div className={classes.drawerContainer}>
<List disablePadding>
- {list.map(({ id, name, link, target }) => (
- <Box width="210px" marginX="auto" marginBottom="5px" key={name}>
+ {list.map(({ id, name, link, target, icon }) => (
+ <Box marginX="auto" marginBottom="5px" key={name}>
{link !== 'help' ?
<NavLink to={link} className={classes.link} target={target}>
<ListItem color="white" button
className={`${classes.itemContainer} ${selectedId === id ? classes.selectedItem
: ''}`} selected={selectedId === id} onClick={(event) =>
highlightSidebarLink(id)}>
- <Typography variant="subtitle2">{name}
 </Typography>
+ {icon}
+ <Typography
+ className={clsx('menu-item',{
+ [classes.sidebarLabel]: showMenu,
+ [classes.sidebarLabelClose]: !showMenu,
+ })}
+ component="span"
+ >{name}  </Typography>
</ListItem>
</NavLink>
:
<a href={`${window.location.origin}/${link}`}
className={classes.link} target={target}>
<ListItem color="white" button
className={`${classes.itemContainer}`}>
- <Typography variant="subtitle2">{name}  
- <FontAwesomeIcon icon={faExternalLinkAlt} />
- </Typography>
+ {icon}
+ <Typography
+ className={clsx('menu-item',{
+ [classes.sidebarLabel]: showMenu,
+ [classes.sidebarLabelClose]: !showMenu,
+ })}
+ component="span"
+ >{name}  </Typography>
</ListItem>
</a>}
</Box>
diff --git
a/pinot-controller/src/main/resources/app/components/SvgIcons/Logo.tsx
b/pinot-controller/src/main/resources/app/components/SvgIcons/Logo.tsx
new file mode 100644
index 0000000..9ebc38d
--- /dev/null
+++ b/pinot-controller/src/main/resources/app/components/SvgIcons/Logo.tsx
@@ -0,0 +1,60 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export default (props: any) => {
+ if(props.fulllogo === 'true'){
+ return (
+ <SvgIcon style={{ width: 105, height: 40 }} width="105" height="40"
viewBox="0 0 105 40" {...props}>
+ <path d="M12.4159 0.305775C12.049 0.672747 12.0245 1.08865 12.367
1.51678C12.8685 2.1651 13.7003 1.79813 13.7003 0.94186C13.7003 0.0855913
12.9786 -0.269149 12.4159 0.305775Z" fill="white" />
+ <path d="M6.18959 2.51987C5.71252 2.99693 5.84708 3.8165 6.44647
4.04892C7.16818 4.31803 7.8165 3.15595 7.26604 2.55656C7.00916 2.27522 6.44647
2.25075 6.18959 2.51987Z" fill="white" />
+ <path d="M12.3792 3.62078C12.1101 3.80426 12.1101 3.82873 12.1101
7.37613C12.1101 11.3394 12.0856 11.4985 11.3762 11.4985C10.7034 11.4985 10.6422
11.3027 10.6422 9.22322C10.6422 7.35167 10.6422 7.3272 10.3242 7.02139C10.0917
6.77674 9.94496 6.72781 9.68808 6.78897C9.03976 6.94799 9.05199 6.85014 9.05199
10.948V14.7645L9.73701 14.4098C10.3119 14.1284 10.5933 14.0673 11.3272
14.0673C13.052 14.0673 14.3364 15.0826 14.7523 16.7829C14.9358 17.5046 14.9358
17.6391 14.7523 18.3486C14.42 [...]
+ <path d="M9.25998 3.7676C8.97864 4.07341 8.99087 4.80736 9.27222
5.052C9.50463 5.27219 9.99393 5.32112 10.2263 5.1621C10.471 5.00308 10.6667
4.50155 10.5933 4.2202C10.4343 3.57188 9.66365 3.315 9.25998 3.7676Z"
fill="white" />
+ <path d="M10.3976 15.9266C9.72481 16.3914 9.48016 16.8196 9.48016
17.5535C9.48016 18.5933 10.1652 19.3272 11.2172 19.4128C12.3303 19.4985 13.211
18.6544 13.211 17.4924C13.211 16.0734 11.5352 15.156 10.3976 15.9266Z"
fill="white" />
+ <path d="M50.1228 7.47518C49.301 7.90702 48.8902 8.57711 48.8141
9.54503C48.7532 10.5129 49.1032 11.1681 49.9858 11.7489C50.7162 12.2403 52.0097
12.2254 52.7554 11.734C54.201 10.781 54.1706 8.63668 52.7097 7.57942C52.1162
7.14758 50.838 7.08802 50.1228 7.47518Z" fill="white" />
+ <path d="M98.2563
13.5352V16.5505H97.5073H96.7584V18.3597V20.1689H97.5073H98.2563L98.2862
26.6066L98.3312 33.0594L100.248 33.1046L102.151
33.1498V26.6518V20.1689H103.124H104.098V18.3597V16.5505H103.124H102.151V13.5352V10.5199H100.203H98.2563V13.5352Z"
fill="white" />
+ <path d="M64.596 16.4721C63.8441 16.7413 62.8465 17.3097 62.3248
17.7734L61.9718
18.0726V17.3845V16.6815H59.9767H57.9817V24.9082V33.1349H59.9614H61.9411L62.0025
27.8548C62.0792 21.9615 62.1559 21.453 63.1228 20.5107C63.7366 19.9123 64.8723
19.5982 65.9926 19.7179C67.4659 19.8974 68.1411 20.6004 68.4174 22.3056C68.5094
22.7992 68.5708 25.4317 68.5708 28.169V33.1498L70.5352 33.105L72.4842
33.0601L72.5302 27.8249C72.5609 24.624 72.4995 22.0962 72.4075 21.3184C72.1005
18.9999 71.1184 [...]
+ <path d="M82.8772 16.4602C81.3955 16.8233 80.1103 17.5799 78.9007
18.8055C77.0863 20.6364 76.3303 22.4219 76.3303 24.9488C76.3303 30.169 80.5185
34.088 85.7046 33.74C87.2317 33.6341 88.3506 33.3314 89.4846 32.7111C91.3746
31.6519 92.8261 29.9723 93.5367 28.0053C93.8845 27.052 93.945 26.6889 93.945
25.0244C93.945 23.4357 93.8845 22.9666 93.5972 22.1192C92.6447 19.3805 90.2708
17.2016 87.4434 16.4753C86.3699 16.203 83.981 16.203 82.8772 16.4602ZM86.5839
19.9168C87.6189 20.2242 88.5 [...]
+ <path d="M49.4189 24.8855V33.1498L51.4062 33.1048L53.378
33.0598L53.4246 24.8405L53.4556 16.6361H51.4373H49.4189V24.8855Z" fill="white"
/>
+ <path d="M34.932 16.9102C34.0837 17.0461 32.7508 17.5293 32.251
17.8766C31.7966 18.1938 31.7057 18.1636 31.7057
17.6501V17.1971H29.7366H27.7676L27.7676
28.5985V40H29.7366H31.7057V36.4663V32.9175L32.5842 33.3705C33.8111 33.9897
35.038 34.2615 36.6284 34.2615C39.2639 34.2615 41.3087 33.4461 43.0506
31.6943C44.7925 29.9577 45.5044 28.1908 45.5044 25.5481C45.5195 22.9356 44.7925
21.1536 42.99 19.3566C40.8695 17.2424 38.0673 16.3816 34.932 16.9102ZM38.1743
20.4091C40.297 20.9406 41.60 [...]
+ </SvgIcon>
+ )
+ } else {
+ return (
+ <SvgIcon style={{ width: 40, height: 40, fill: "#ffffff" }} viewBox="0 0
166.2 326.7" {...props}>
+ <path id="Path"
d="M100.8,2.3c-3,3-3.2,6.4-0.4,9.9c4.1,5.3,10.9,2.3,10.9-4.7S105.4-2.4,100.8,2.3z"/>
+ <path
d="M49.9,20.4C46,24.3,47.1,31,52,32.9c5.9,2.2,11.2-7.3,6.7-12.2C56.6,18.4,52,18.2,49.9,20.4z"/>
+ <path
d="M100.5,29.4c-2.2,1.5-2.2,1.7-2.2,30.7c0,32.4-0.2,33.7-6,33.7c-5.5,0-6-1.6-6-18.6c0-15.3,0-15.5-2.6-18
+
c-1.9-2-3.1-2.4-5.2-1.9c-5.3,1.3-5.2,0.5-5.2,34v31.2l5.6-2.9c4.7-2.3,7-2.8,13-2.8c14.1,0,24.6,8.3,28,22.2c1.5,5.9,1.5,7,0,12.8
+
c-2.7,10.4-10.3,18.5-20,21.1c-6.4,1.7-15.6,0.7-21.5-2.3l-5.1-2.7v14.5c0,14.1-0.1,14.6-2.5,16.9c-1.3,1.4-3.1,2.5-4,2.5
+
s-2.7-1.1-4-2.5l-2.5-2.4V121V47.1L57.8,46c-2.7-1.2-5-0.8-7.7,1.6c-1.4,1.1-1.8,3.1-1.8,7.9v6.3H36.8H25.2L23.4,66
+
c-1.8,4.4-17.3,59.3-21.3,75.3c-1.7,7.1-2.1,11.9-2.1,23c0,16.3,1.9,25,8.2,38c9,18.7,21.7,30.8,44.7,42.3
+
c12.5,6.3,15.3,8.6,18.8,15.7c3.7,7.6,5.3,15.8,6.7,34.8c1,13.3,0.9,16.1-0.2,17.1c-0.8,0.7-10.4,4.1-21.4,7.5
+
c-11,3.5-20.2,6.5-20.4,6.7c-0.2,0.2,20.9,0.4,47,0.3c28,0,46.4-0.4,44.9-0.9c-1.4-0.5-11.2-3.7-21.9-7L87,312.6l0.6-14.2
+
c0.7-16.6,1.9-24.8,4.9-33.4c3.4-9.7,7-13.1,21.4-20.4c27-13.6,42.4-29.8,49.4-52.3c3.2-10,3.8-28.4,1.5-43
+
c-3.2-20.7-20.9-83.9-24.2-86.2c-1.1-0.9-6-1.3-15.5-1.3h-13.8v-15c0-13.7-0.2-15.2-2-17C106.9,27.4,103.6,27.2,100.5,29.4z"/>
+ <path
d="M75,30.6c-2.3,2.5-2.2,8.5,0.1,10.5c1.9,1.8,5.9,2.2,7.8,0.9c2-1.3,3.6-5.4,3-7.7C84.6,29,78.3,26.9,75,30.6z"/>
+ <path
d="M84.3,130c-5.5,3.8-7.5,7.3-7.5,13.3c0,8.5,5.6,14.5,14.2,15.2c9.1,0.7,16.3-6.2,16.3-15.7C107.3,131.2,93.6,123.7,84.3,130
+ z"/>
+ </SvgIcon>
+ )
+ }
+};
diff --git
a/pinot-controller/src/main/resources/app/components/SvgIcons/QueryConsoleIcon.tsx
b/pinot-controller/src/main/resources/app/components/SvgIcons/QueryConsoleIcon.tsx
new file mode 100644
index 0000000..81d41be
--- /dev/null
+++
b/pinot-controller/src/main/resources/app/components/SvgIcons/QueryConsoleIcon.tsx
@@ -0,0 +1,48 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export default (props: SvgIconProps) => (
+ <SvgIcon style={{ width: 24, height: 24, verticalAlign: 'middle' }}
viewBox="0 0 499.9 499.9" fill="none" {...props}>
+ <g>
+ <g>
+ <path
d="M499.9,189.9c0-24.7-4.7-48.8-13.9-71.5c-9.5-23.6-23.6-44.7-41.7-62.8c-18.1-18.1-39.2-32.1-62.8-41.7
+
C358.8,4.7,334.7,0,310,0s-48.8,4.7-71.5,13.9c-23.6,9.5-44.7,23.6-62.8,41.7c-15.5,15.5-28.1,33.3-37.4,53
+
c-9,19-14.7,39.3-17,60.3c-4.6,42.1,5,84.9,27,120.7l2.1,3.4l-2.8,2.8L0,443.4l56.6,56.6l147.6-147.6l2.8-2.8l3.4,2.1
+
c29.9,18.4,64.4,28.2,99.7,28.2c24.7,0,48.8-4.7,71.6-13.9c23.6-9.5,44.7-23.6,62.8-41.6c18.1-18.1,32.1-39.2,41.7-62.8
+ C495.3,238.7,499.9,214.6,499.9,189.9z
M186.7,341.5L60.1,468.1l-3.5,3.5l-3.5-3.5l-21.2-21.2l-3.5-3.5l3.5-3.5l126.6-126.6
+
l3.8-3.8l3.5,4.1c3.2,3.7,6.5,7.3,9.9,10.7c3.4,3.4,7,6.8,10.7,9.9l4.1,3.5L186.7,341.5z
M430.2,310.1
+
c-16.2,16.2-35.1,28.7-56.2,37.3c-20.4,8.2-41.9,12.4-64,12.4s-43.6-4.2-64-12.4c-21.1-8.5-40-21.1-56.2-37.3
+
s-28.7-35.1-37.3-56.2c-8.2-20.4-12.4-41.9-12.4-64c0-22.1,4.2-43.6,12.4-64c8.5-21.1,21.1-40,37.3-56.2
+
C206,53.5,224.9,41,246.1,32.4C266.4,24.2,288,20,310,20c0,0,0,0,0,0c22.1,0,43.6,4.2,64,12.4c21.1,8.5,40,21.1,56.2,37.3
+ C496.5,136,496.5,243.8,430.2,310.1z"/>
+ </g>
+ <path d="M206.1,233.9h30v30h-30V233.9z"/>
+ <path d="M266,233.9h30v30h-30V233.9z"/>
+ <path d="M326,233.9h30v30h-30V233.9z"/>
+ <path d="M386,233.9h30v30h-30V233.9z"/>
+ <path d="M206.1,113.9h30v90h-30V113.9z"/>
+ <path d="M266,113.9h30v90h-30V113.9z"/>
+ <path d="M326,113.9h30v90h-30V113.9z"/>
+ <path d="M386,113.9h30v90h-30V113.9z"/>
+ </g>
+ </SvgIcon>
+);
diff --git
a/pinot-controller/src/main/resources/app/components/SvgIcons/SwaggerIcon.tsx
b/pinot-controller/src/main/resources/app/components/SvgIcons/SwaggerIcon.tsx
new file mode 100644
index 0000000..6b10d92
--- /dev/null
+++
b/pinot-controller/src/main/resources/app/components/SvgIcons/SwaggerIcon.tsx
@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export default (props: SvgIconProps) => (
+ <SvgIcon style={{ width: 24, height: 24, verticalAlign: 'middle' }}
viewBox="0 0 100 100" fill="none" {...props}>
+ <path
d="M50,4.8C75,4.8,95.3,25,95.3,50C95.3,75,75,95.3,50,95.3C25,95.3,4.8,75,4.8,50C4.8,25,25,4.8,50,4.8
M50,0
+ C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"/>
+ <path
d="M31.5,33.9c-0.2,1.7,0.1,3.5-0.1,5.2c-0.1,1.7-0.3,3.4-0.7,5.2c-0.5,2.4-2,4.3-4.1,5.8c4.1,2.7,4.5,6.8,4.8,10.9
+
c0.1,2.3,0.1,4.5,0.3,6.8c0.2,1.7,0.8,2.2,2.6,2.2c0.7,0,1.5,0,2.3,0v5.3c-5.3,0.9-9.7-0.6-10.7-5.1c-0.3-1.6-0.6-3.3-0.7-5
+
c-0.1-1.8,0.1-3.6-0.1-5.4c-0.4-4.9-1-6.6-5.7-6.8V47c0.3-0.1,0.7-0.1,1-0.2c2.6-0.1,3.7-0.9,4.2-3.5c0.3-1.4,0.4-2.9,0.5-4.3
+
c0.2-2.8,0.1-5.6,0.6-8.4c0.7-4,3.1-5.9,7.2-6.1c1.2-0.1,2.3,0,3.7,0V30c-0.6,0-1,0.1-1.5,0.1C31.9,29.9,31.8,31.1,31.5,33.9z
+
M37.9,46.5L37.9,46.5c-2-0.1-3.7,1.4-3.8,3.3c-0.1,1.9,1.4,3.6,3.3,3.7h0.2c1.9,0.1,3.5-1.3,3.7-3.3v-0.2
+ C41.4,48.1,39.9,46.6,37.9,46.5z
M50,46.5c-1.9-0.1-3.4,1.4-3.5,3.3c0,0.1,0,0.2,0,0.3c0,2.1,1.4,3.4,3.6,3.4
+ c2.1,0,3.4-1.4,3.4-3.6C53.5,47.9,52.1,46.5,50,46.5z
M62.3,46.5c-2,0-3.6,1.5-3.7,3.5c0,2,1.6,3.5,3.5,3.5h0
+ c1.8,0.3,3.6-1.4,3.7-3.5C66,48.2,64.3,46.5,62.3,46.5z
M79.3,46.8c-2.2-0.1-3.3-0.8-3.9-3c-0.3-1.3-0.6-2.8-0.6-4.1
+
c-0.2-2.6-0.1-5.2-0.3-7.8c-0.4-6.1-4.8-8.3-11.3-7.2v5.3c1,0,1.8,0,2.6,0c1.4,0,2.4,0.5,2.5,2.1c0.1,1.4,0.1,2.8,0.3,4.2
+
c0.3,2.8,0.4,5.6,0.9,8.4c0.4,2.3,2,4,3.9,5.3c-3.4,2.3-4.4,5.6-4.6,9.2c-0.1,2.5-0.2,5.1-0.3,7.6c-0.1,2.3-0.9,3.1-3.3,3.1
+
c-0.7,0-1.3,0.1-2,0.1v5.4c1.4,0,2.6,0.1,3.9,0c3.9-0.2,6.2-2.1,7-5.9c0.3-2.1,0.5-4.2,0.6-6.3c0.1-1.9,0.1-3.9,0.3-5.8
+
c0.3-3,1.7-4.2,4.6-4.4c0.3,0,0.6-0.1,0.8-0.2v-6.1C80,46.9,79.6,46.8,79.3,46.8z"/>
+ </SvgIcon>
+);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
