-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* save progress * Finish Initial tutorial Added a tutorial when a user access' tombolo and doesn't have applications or clusters set up. Locked all components until these are set up. Guided tour with links to guides Once set up, unlocks rest of application * Initial tour finished Added back cluster tour on the cluster screen to work with new workflows. * Update leftNav reorganize left nav, comment out unused components, and fix highlighting * remove finish buttons * store collapsed in local storage * saving progress * apply fix css * Fix highlighting and redirecting * adjust look and feel to be more modern, add seperate css file * reverse the default state of left nav collapse to "fix" flicker * flicker fix for left nav default collapse state * further visible tweaks * tweak * updates * Update index.js
- Loading branch information
Showing
6 changed files
with
280 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
Tombolo/client-reactjs/src/components/application/home/home.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| width: 100%; | ||
| height: calc(100% + 55px); | ||
| text-align: center; | ||
| font-size: 1.5rem; | ||
| min-height: 1300px; | ||
| } | ||
|
|
||
| .container ul { | ||
| list-style: none; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| .container ul li { | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .header { | ||
| background: rgb(8, 85, 127); | ||
| color: white; | ||
| padding: 6rem; | ||
| width: 100%; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| .top { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| margin-top: -5px; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| .middle { | ||
| width: 95%; | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .middle .ant-card { | ||
| width: 30%; | ||
|
|
||
| font-size: 1.25rem; | ||
| } | ||
|
|
||
| .footer { | ||
| background: rgb(48, 56, 70); | ||
| color: white; | ||
| padding: 2rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .footerRow { | ||
| width: 100%; | ||
| margin-bottom: 2rem; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .footerRow a { | ||
| color: white; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .footerRow p { | ||
| margin: 0 auto; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .sub { | ||
| width: 30%; | ||
| font-size: 1rem; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| .container .ant-card-head { | ||
| background: #002140; | ||
| color: white; | ||
| } | ||
|
|
||
| /* @media breakpoint for tablets */ | ||
| @media (max-width: 1024px) { | ||
| .container { | ||
| height: auto; | ||
| } | ||
|
|
||
| .middle { | ||
| margin-bottom: 3rem; | ||
| flex-direction: column; | ||
| } | ||
| .middle .ant-card { | ||
| width: 100%; | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .footerRow { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .sub { | ||
| width: 100%; | ||
| } | ||
| } |
119 changes: 119 additions & 0 deletions
119
Tombolo/client-reactjs/src/components/application/home/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React from 'react'; | ||
| import { Card } from 'antd'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { useSelector } from 'react-redux'; | ||
| import logo from '../../../images/logo-dark.webp'; | ||
|
|
||
| import './home.css'; | ||
|
|
||
| const Home = () => { | ||
| //Redux | ||
| const { | ||
| applicationReducer: { | ||
| application: { applicationId }, | ||
| }, | ||
| } = useSelector((state) => state); | ||
|
|
||
| return ( | ||
| <section className="container"> | ||
| <div className="top"> | ||
| <div className="header"> | ||
| <h1 style={{ width: '100%', marginTop: '1rem' }}>Welcome to Tombolo!</h1> | ||
| <h2>Transform and Process Data with Ease: Your Low-Code Bridge to HPCC Systems.</h2> | ||
| </div> | ||
|
|
||
| <div className="middle"> | ||
| <Card> | ||
| <h2>Workflows</h2> | ||
| <br /> | ||
| <p>Get started with creating your own workflows and jobs to process data.</p> | ||
| <br /> | ||
| <ul> | ||
| <li> | ||
| <Link to={`/${applicationId}/assets`}>Assets</Link> | ||
| </li> | ||
| <li> | ||
| <Link to={`/${applicationId}/dataflow`}>Dataflows</Link> | ||
| </li> | ||
| <li> | ||
| <Link to={`/${applicationId}/dataflowinstances`}>Job Execution</Link> | ||
| </li> | ||
| </ul> | ||
| </Card> | ||
| <Card> | ||
| <h2>Monitoring</h2> | ||
| <br /> | ||
| <p>Set up monitoring and alerts for when things go awry with your data processing jobs and files.</p> | ||
| <br /> | ||
| <ul> | ||
| <li> | ||
| <Link to={`/${applicationId}/fileMonitoring`}>File Monitoring</Link> | ||
| </li> | ||
| <li> | ||
| <Link to={`/${applicationId}/clustermonitoring`}>Cluster Monitoring</Link> | ||
| </li> | ||
| <li> | ||
| <Link to={`/${applicationId}/jobmonitoring`}>Job Monitoring</Link> | ||
| </li> | ||
|
|
||
| <li> | ||
| <Link to={`/${applicationId}/superfileMonitoring`}>Superfile Monitoring</Link> | ||
| </li> | ||
| </ul> | ||
| </Card> | ||
|
|
||
| <Card> | ||
| <h2>Dashboards</h2> | ||
| <br /> | ||
| <p>Visualize all of the notifications produced by Tombolo, and cluster usage with dashboards.</p> | ||
| <br /> | ||
| <ul> | ||
| <li> | ||
| <Link to={`/${applicationId}/dashboard/clusterUsage`}>Cluster Usage Dashboards</Link> | ||
| </li> | ||
| <li> | ||
| <Link to={`/${applicationId}/dashboard/notifications`}>Notification Dashboards</Link> | ||
| </li> | ||
| </ul> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| <div className="footer"> | ||
| <div className="footerRow"> | ||
| <div className="sub"> | ||
| <h2>Powered by HPCC Systems</h2> | ||
| <p>Tombolo is built on top of HPCC Systems, a powerful open-source platform for big data analysis.</p> | ||
| </div> | ||
| <div className="sub"> | ||
| <h2>Focus on What Matters</h2> | ||
| <p> | ||
| Tombolo lets you focus on your data and your analysis, without worrying about the underlying | ||
| infrastructure. | ||
| </p> | ||
| </div> | ||
| <div className="sub"> | ||
| <h2>Easy to Use</h2> | ||
| <p> | ||
| Tombolo is designed to be easy to use, with a simple UI and great{' '} | ||
| <a href="https://hpcc-systems.github.io/Tombolo/">documentation</a> to allow even non-technical users | ||
| access to big data tools and analysis. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="footerRow"> | ||
| <a style={{ margin: '0 auto' }} href="https://solutionslab.hpccsystems.com/"> | ||
| <img src={logo} alt="HPCC Systems" style={{ width: '10rem', margin: '0 auto' }} /> | ||
| </a> | ||
| </div> | ||
| <div className="footerRow"> | ||
| <p> | ||
| Tombolo is an open source project maintained by{' '} | ||
| <a href="https://solutionslab.hpccsystems.com/">HPCC Systems</a>. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1175,3 +1175,7 @@ div.tooltip { | |
| display: block; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| main > div { | ||
| margin: 0.5rem; | ||
| } | ||