Skip to content

Commit 517105f

Browse files
CarsonCookCarsonCook
authored
fix: Add proper icons to Metrics Service (#1912)
* Add proper ms icon Signed-off-by: Carson Cook <carson.cook@ibm.com> * Add ms favicon Signed-off-by: Carson Cook <carson.cook@ibm.com> * Fix metrics button icon for header Signed-off-by: Carson Cook <carson.cook@ibm.com> * Make icon colour customizable Signed-off-by: Carson Cook <carson.cook@ibm.com> * Fix ui unit tests Signed-off-by: Carson Cook <carson.cook@ibm.com>
1 parent c1acfe6 commit 517105f

File tree

7 files changed

+41
-31
lines changed

7 files changed

+41
-31
lines changed

‎metrics-service-ui/frontend/public/favicon.ico

13.6 KB
Binary file not shown.

‎metrics-service-ui/frontend/public/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@
1111
-->
1212
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
1313
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
1423

1524
<!-- Load base JS and CSS -->
1625
<script type="text/javascript" src="./hystrix-dashboard/monitor/monitor.js"></script>
@@ -32,15 +41,6 @@
3241
<script type="text/javascript" src="./hystrix-dashboard/components/hystrixThreadPool/hystrixThreadPool.js"></script>
3342
<link rel="stylesheet" type="text/css" href="./hystrix-dashboard/components/hystrixThreadPool/hystrixThreadPool.css"/>
3443

35-
<!--
36-
Notice the use of %PUBLIC_URL% in the tags above.
37-
It will be replaced with the URL of the `public` folder during the build.
38-
Only files inside the `public` folder can be referenced from the HTML.
39-
40-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
41-
work correctly both with client-side routing and a non-root public URL.
42-
Learn how to configure a non-root public URL by running `npm run build`.
43-
-->
4444
<title>Metrics Service</title>
4545
</head>
4646
<body>

‎metrics-service-ui/frontend/src/components/Header/Header.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import React from 'react';
1212
import { IconButton, Tooltip, Link } from '@material-ui/core';
1313
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
14-
import { makeStyles, withStyles } from '@material-ui/core/styles';
14+
import { makeStyles, withStyles, useTheme } from '@material-ui/core/styles';
1515

1616
import MetricsIconButton from '../Icons/MetricsIconButton';
1717

@@ -52,6 +52,7 @@ const ServiceNameHeader = withStyles((theme) => ({
5252
}))(Link);
5353

5454
const Header = (props) => {
55+
const theme = useTheme();
5556
const classes = useStyles();
5657

5758
const handleLogout = () => {
@@ -63,7 +64,7 @@ const Header = (props) => {
6364

6465
return (
6566
<div className={classes.metricsHeaderDiv}>
66-
<MetricsIconButton />
67+
<MetricsIconButton color={theme.palette.background.main} />
6768
<ServiceNameHeader id="name" variant="h6" align="left" underline="none" href={dashboard}>
6869
Metrics Service
6970
</ServiceNameHeader>

‎metrics-service-ui/frontend/src/components/Icons/MetricsIconButton.jsx

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,33 @@
1111
import { IconButton } from '@material-ui/core';
1212
import { withStyles } from '@material-ui/core/styles';
1313

14-
import MetricsLogo from '../../assets/images/login_background.jpg';
15-
16-
const CustomIconButton = withStyles(() => ({
14+
const CustomIconButton = withStyles((theme) => ({
1715
root: {
18-
height: 48,
19-
width: 48,
16+
height: theme.icon.size,
17+
width: theme.icon.size,
2018
margin: 10,
2119
marginLeft: 20,
2220
padding: 0,
23-
'&:hover': {
24-
backgroundColor: 'transparent',
25-
},
21+
backgroundColor: 'transparent',
2622
},
2723
}))(IconButton);
2824

29-
const dashboard = '/metrics-service/ui/v1/#/dashboard';
30-
31-
const MetricsIconButton = (props) => (
32-
<CustomIconButton href={dashboard} {...props}>
33-
<img src={MetricsLogo} alt="Metrics Service icon" />
34-
</CustomIconButton>
35-
);
25+
const MetricsIconButton = (props) => {
26+
const dashboard = '/metrics-service/ui/v1/#/dashboard';
27+
return (
28+
<CustomIconButton href={dashboard} {...props}>
29+
<svg fill={props.color} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
30+
<path
31+
d="M12.6667 2H3.33333C2.6 2 2 2.6 2 3.33333V12.6667C2 13.4 2.6 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4 2 12.6667 2ZM12.6667 12.6667H3.33333V3.33333H12.6667V12.6667Z"
32+
fill="current"
33+
/>
34+
<path d="M6 8H4.66667V11.3333H6V8Z" fill="current" />
35+
<path d="M11.3333 4.66667H10V11.3333H11.3333V4.66667Z" fill="current" />
36+
<path d="M8.66667 9.33333H7.33333V11.3333H8.66667V9.33333Z" fill="current" />
37+
<path d="M8.66667 6.66667H7.33333V8H8.66667V6.66667Z" fill="current" />
38+
</svg>
39+
</CustomIconButton>
40+
);
41+
};
3642

3743
export default MetricsIconButton;

‎metrics-service-ui/frontend/src/components/Icons/MetricsIconButton.test.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ describe('>>> MetricsIconButton component tests', () => {
2828
expect(sample.find(styledIconButton).prop('href')).toEqual('/metrics-service/ui/v1/#/dashboard');
2929
});
3030

31-
it('should contain a Metrics Service icon image', () => {
31+
it('should contain a Metrics Service icon svg', () => {
3232
const sample = shallow(<MetricsIconButton />);
33-
expect(sample.find('img')).toExist();
34-
expect(sample.find('img').prop('alt')).toEqual('Metrics Service icon');
33+
expect(sample.find('svg')).toExist();
3534
});
3635
});

‎metrics-service-ui/frontend/src/components/Login/Login.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
import React, { useState } from 'react';
1212
import { Button, TextField, Typography } from '@material-ui/core';
13-
import { withStyles, makeStyles } from '@material-ui/core/styles';
13+
import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';
1414

1515
import './LoginWebflow.css';
1616
import LoginBackground from '../../assets/images/login_background.jpg';
@@ -130,13 +130,14 @@ const Login = (props) => {
130130
? handleError(authentication.error)
131131
: errorText;
132132

133+
const theme = useTheme();
133134
const classes = useStyles();
134135

135136
return (
136137
<div className={classes.root}>
137138
<div className={classes.formContainer}>
138139
<MetricsServiceTitle variant="h5" align="left">
139-
<MetricsIconButton />
140+
<MetricsIconButton color={theme.palette.primary.main} />
140141
Metrics Service
141142
</MetricsServiceTitle>
142143
<form className={classes.form} onSubmit={handleSubmit}>

‎metrics-service-ui/frontend/src/helpers/theme.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ const theme = createMuiTheme({
2727
main: red[500],
2828
},
2929
},
30+
icon: {
31+
size: 48,
32+
},
3033
props: {
3134
MuiTooltip: {
3235
enterDelay: 300,

0 commit comments

Comments
 (0)