Skip to content

Commit 51b75d3

Browse files
Jillian InapurapuJillian Inapurapu
authored andcommitted
Improved HelpMenu type tabs, settings content
1 parent 5d32d8d commit 51b75d3

File tree

4 files changed

+83
-36
lines changed

4 files changed

+83
-36
lines changed

portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Theme, useTheme } from "@mui/material/styles";
66
import createStyles from "@mui/styles/createStyles";
77
import useMediaQuery from "@mui/material/useMediaQuery";
88
import { useLocation } from "react-router-dom";
9-
import { setHelpTabName } from "../../../../systemSlice";
9+
import { setHelpMenuType, setHelpTabName } from "../../../../systemSlice";
1010
import { useAppDispatch } from "../../../../store";
1111

1212
export type TabItemProps = {
@@ -126,7 +126,7 @@ const VerticalTabs = ({
126126
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
127127
setValue(newValue);
128128
dispatch(setHelpTabName(newValue));
129-
console.log("reset helpTabName: ", newValue);
129+
dispatch(setHelpMenuType("0"))
130130
};
131131

132132
return (

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ import { MenuItem, Paper, Tab, Tabs } from "@mui/material";
3030
import HelpItem from "./HelpItem";
3131
import { Box, Button, HelpIcon } from "mds";
3232
import { useSelector } from "react-redux";
33-
import { AppState } from "../../store";
33+
import { AppState, useAppDispatch } from "../../store";
3434
import { TabPanel } from "../shared/tabs";
35+
import { setHelpMenuType } from "../../systemSlice";
3536

3637
const styles = (theme: Theme) =>
3738
createStyles({
@@ -61,9 +62,14 @@ const HelpMenu = ({ classes }: IHelpMenuProps) => {
6162
(state: AppState) => state.system.helpTabName
6263
);
6364

65+
const helpMenuType = useSelector(
66+
(state: AppState) => state.system.helpMenuType
67+
);
68+
6469
const toggleHelpMenu = () => {
6570
setHelpMenuOpen(!helpMenuOpen);
6671
};
72+
const dispatch = useAppDispatch();
6773

6874
function useOutsideAlerter(ref: any) {
6975
useEffect(() => {
@@ -81,6 +87,7 @@ const HelpMenu = ({ classes }: IHelpMenuProps) => {
8187

8288
const wrapperRef = useRef(null);
8389
useOutsideAlerter(wrapperRef);
90+
8491

8592
useEffect(() => {
8693
assignHelpItems(systemHelpName);
@@ -174,9 +181,10 @@ const HelpMenu = ({ classes }: IHelpMenuProps) => {
174181
</Grid>
175182
<Grid item paddingLeft={3}>
176183
<Tabs
177-
value={helpTab}
184+
value={parseInt(helpMenuType)}
178185
onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
179-
setHelpTab(newValue);
186+
console.log("Do the thing! newValue.tostring(): ",newValue.toString(), ' helpmenutype: ', helpMenuType)
187+
dispatch(setHelpMenuType(newValue.toString()));
180188
}}
181189
indicatorColor="primary"
182190
textColor="primary"
@@ -198,19 +206,19 @@ const HelpMenu = ({ classes }: IHelpMenuProps) => {
198206
</Grid>
199207
<Paper>
200208
{helpItems.length !== 0 && (
201-
<TabPanel index={0} value={helpTab}>
209+
<TabPanel index={0} value={parseInt(helpMenuType)}>
202210
{helpContent}
203211
</TabPanel>
204212
)}
205213
{helpItemsVideo.length !== 0 && (
206-
<TabPanel index={1} value={helpTab}>
214+
<TabPanel index={1} value={parseInt(helpMenuType)}>
207215
{helpContentVideo}
208216
</TabPanel>
209217
)}
210218
{helpItemsBlog.length !== 0 && (
211219
<TabPanel
212220
index={helpItemsVideo.length !== 0 ? 2 : 1}
213-
value={helpTab}
221+
value={parseInt(helpMenuType)}
214222
>
215223
{helpContentBlog}
216224
</TabPanel>

portal-ui/src/screens/Console/helpTopics.json

Lines changed: 59 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -97,103 +97,134 @@
9797
},
9898
"settings_detailsregion": {
9999
"docs": [
100-
"settings_detailsregion - EXPAND TO TABS",
101-
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
102-
100+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Creating a New Bucket in a Specific Region](https://min.io/docs/minio/linux/reference/minio-mc/mc-mb.html#create-a-new-bucket-in-a-specific-region)",
101+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
103102
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
104103
],
105104
"video": [],
106-
"blog": []
105+
"blog": [
106+
"https://blog.min.io/content/images/size/w2000/2021/09/denys-nevozhai-7nrsVjvALnA-unsplash.jpg[Multi-site Active-Active Replication](https://blog.min.io/minio-multi-site-active-active-replication/)"
107+
]
107108
},
108109
"settings_detailsconfigurations": {
109110
"docs": [
110-
"settings_detailsconfigurations - EXPAND TO TABS",
111-
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
112-
111+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Creating a New Bucket in a Specific Region](https://min.io/docs/minio/linux/reference/minio-mc/mc-mb.html#create-a-new-bucket-in-a-specific-region)",
112+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
113+
113114
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
114115
],
115116
"video": [],
116117
"blog": []
117118
},
118119
"settings_detailscompression": {
119120
"docs": [
120-
"SETTINGS1 - EXPAND TO TABS",
121121
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
122-
122+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
123+
123124
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
124125
],
125126
"video": [],
126-
"blog": []
127+
"blog": ["https://images.unsplash.com/photo-1522932753915-9ee97e43e3d9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDYxfHxjb21wcmVzc2lvbiUyMGFic3RyYWN0JTIwfGVufDB8fHx8MTY1NzgxNzg4OA&ixlib=rb-1.2.1&q=80&w=2000[Transparent Data Compression on MinIO](https://blog.min.io/transparent-data-compression/)",
128+
"https://blog.min.io/content/images/size/w2000/2019/05/Screenshot-at-May-15-15-27-18.png[Compression Encryption](https://blog.min.io/c-e-compression-encryption/)"]
127129
},
128130
"settings_detailsapi": {
129131
"docs": [
130-
"SETTINGS2 - EXPAND TO TABS",
132+
"https://min.io/resources/img/logo/MINIO_wordmark.png[How is failed replication handled?](https://min.io/docs/minio/kubernetes/upstream/administration/bucket-replication.html#minio-replication-process)",
133+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Replication Workers?](https://min.io/docs/minio/windows/administration/bucket-replication.html#minio-replication-process)",
131134
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
132-
135+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
136+
133137
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
134138
],
135139
"video": [],
136140
"blog": []
137141
},
138142
"settings_detailsheal": {
139143
"docs": [
140-
"SETTINGS3 - EXPAND TO TABS",
144+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Where can I see current Heal status?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#drives)",
145+
"https://min.io/resources/img/logo/MINIO_wordmark.png[How is Erasure Coding used to Protect Data?](https://min.io/docs/minio/macos/operations/install-deploy-manage/deploy-minio-multi-node-multi-drive.html#erasure-coding-parity)",
146+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Recover After Hardware failure](https://min.io/docs/minio/windows/operations/data-recovery.html#minio-restore-hardware-failure)",
147+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Site Failure Recovery](https://min.io/docs/minio/windows/operations/data-recovery/recover-after-site-failure.html#minio-restore-hardware-failure-site)",
148+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Node Failure Recovery](https://min.io/docs/minio/windows/operations/data-recovery/recover-after-node-failure.html#minio-restore-hardware-failure-node)",
149+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What is MinIO Healing?](https://min.io/docs/minio/windows/operations/concepts.html#minio-automatically-heals-corrupt-or-missing-data-on-the-fly)",
150+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Understand MinIO Healing Using mc](https://min.io/docs/minio/linux/reference/minio-mc-admin/mc-admin-heal.html#description)",
151+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What is Bit Rot?](https://min.io/docs/minio/kubernetes/upstream/glossary.html#term-bit-rot)",
141152
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
142-
153+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
154+
143155
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
144156
],
145157
"video": [],
146158
"blog": []
147159
},
148160
"settings_detailsscanner": {
149161
"docs": [
150-
"SETTINGS4 - EXPAND TO TABS",
162+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What is the Scanner?](https://min.io/docs/minio/linux/glossary.html#term-scanner)",
163+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Lifecycle Management Object Scanner](https://min.io/docs/minio/windows/administration/object-management/transition-objects-to-gcs.html#lifecycle-management-object-scanner)",
164+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Object Scanner](https://min.io/docs/minio/windows/administration/object-management/object-lifecycle-management.html#minio-lifecycle-management-scanner)",
151165
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
152-
166+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
167+
153168
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
154169
],
155-
"video": [],
170+
"video": [ "https://i.ytimg.com/vi/5fz3rE3wjGg/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLCq8mxi_s8tron8E3TPgTMfUbiiDw[Lifecycle Management lab](https://www.youtube.com/watch?v=5fz3rE3wjGg) \n Text snippet that will be relevant to the user will \ngo here made to look nice in the helpitem size \non two-three lines",
171+
"https://i.ytimg.com/vi/UuxqnUgowyg/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLA8R19exGswOv_yP8ZmSy1K6zmCbw[Versioning and Lifecycle management](https://www.youtube.com/watch?v=UuxqnUgowyg) \nIn this video, we will focus on versioning \nand lifecycle management. "
172+
],
156173
"blog": []
157174
},
158175
"settings_detailsetcd": {
159176
"docs": [
160-
"SETTINGS5 - EXPAND TO TABS",
161177
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
162-
178+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
179+
163180
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
164181
],
165182
"video": [],
166183
"blog": []
167184
},
168185
"settings_detailslogger_webhook": {
169186
"docs": [
170-
"SETTINGS6 - EXPAND TO TABS",
187+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What is the logger_webhook environment variable?](https://min.io/docs/minio/linux/reference/minio-mc-admin/mc-admin-config.html#minio-server-config-logging-logs)",
188+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Publish Server Logs to HTTP Webhook](https://min.io/docs/minio/linux/operations/monitoring/minio-logging.html#minio-logging-publish-server-logs)",
189+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Monitoring Logs](https://min.io/docs/minio/linux/operations/monitoring.html#logging)",
171190
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
172-
191+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
192+
173193
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
174194
],
175-
"video": [],
195+
"video": [ "https://i.ytimg.com/vi/A3vCDaFWNNs/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDNZIxjC6AhnkRsTCMmoWrJIWmc6A[Monitoring with Prometheus](https://www.youtube.com/watch?v=A3vCDaFWNNs) \n Text snippet that will be relevant to the user will \ngo here made to look nice in the helpitem size \non two-three lines",
196+
"https://i.ytimg.com/vi/Oix9iXndSUY/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBlfESoCxf6YVxS5nO34Me793cFPw[Prometheus Monitoring Lab](https://www.youtube.com/watch?v=Oix9iXndSUY) \n Text snippet that will be relevant to the user will \ngo here made to look nice in the helpitem size \non two-three lines"
197+
],
176198
"blog": []
177199
},
178200
"settings_detailsaudit_webhook": {
179201
"docs": [
180-
"SETTINGS7 - EXPAND TO TABS",
202+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Publish Audit Logs to an HTTP webhook](https://min.io/docs/minio/linux/reference/minio-server/minio-server.html#minio-sever-envvar-logging-audit)",
181203
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
182-
204+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
205+
183206
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
184207
],
185208
"video": [],
186209
"blog": []
187210
},
188211
"settings_detailsaudit_kafka": {
189212
"docs": [
190-
"SETTINGS8 - EXPAND TO TABS",
213+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Kafka Service for Bucket Notifications](https://min.io/docs/minio/linux/reference/minio-server/minio-server.html#minio-server-envvar-bucket-notification-kafka)",
214+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Kafka Service for Bucket Notifications](https://min.io/docs/minio/linux/reference/minio-mc-admin/mc-admin-config.html#minio-server-config-bucket-notification-kafka)",
215+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Publish Events to Kafka](https://min.io/docs/minio/linux/administration/monitoring/publish-events-to-kafka.html)",
191216
"https://min.io/resources/img/logo/MINIO_wordmark.png[Configuration](https://min.io/docs/minio/kubernetes/upstream/operations/troubleshooting/encrypting-files.html) \n Need more help? \nCheck out additional Troubleshooting options",
192-
193-
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
217+
"https://min.io/resources/img/logo/MINIO_wordmark.png[What are Settings and Configurations?](https://min.io/docs/minio/windows/administration/console/managing-deployment.html#minio-console-settings)",
218+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Supported Bucket Notification Targets](https://min.io/docs/minio/linux/administration/monitoring/bucket-notifications.html#supported-notification-targets)",
219+
"https://min.io/resources/img/logo/MINIO_wordmark.png[Bucket Notifications](https://min.io/docs/minio/linux/administration/monitoring.html#bucket-notifications)",
220+
"https://blog.min.io/content/images/size/w1000/2020/12/pay_banner-01-01-01-01-01.png[Troubleshooting](https://min.io/docs/minio/linux/operations/troubleshooting.html) \n Need more help? \nCheck out additional Troubleshooting options"
194221
],
195222
"video": [],
196-
"blog": []
223+
"blog": [
224+
"https://blog.min.io/content/images/size/w2000/2021/09/1_kqpVTzo8b0e2oKdOjWQxZA.png[Publish from Kafka, Persist on MinIO](https://blog.min.io/kafka_and_minio/)",
225+
"https://blog.min.io/content/images/size/w1000/2023/04/Screen-Shot-2023-04-24-at-4.34.43-PM.png[How to Set up Kafka and Strem Data to MinIO \non Kubernetes](https://blog.min.io/tag/apache-kafka/)",
226+
"https://blog.min.io/content/images/size/w2000/2022/08/minioKafka-blogheader.png[Orchestrate Complex Workflows Using Apache Kafka and MinIO](https://blog.min.io/complex-workflows-apache-kafka-minio/)"
227+
]
197228
},
198229
"add-replication-sites": {
199230
"docs": [

0 commit comments

Comments
 (0)