Compare commits

...
30 changed files with 40728 additions and 0 deletions
+23
View File
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+6
View File
@@ -0,0 +1,6 @@
trailingComma: "es5"
tabWidth: 2
semi: true
singleQuote: true
jsxSingleQuote: false
parser: typescript
+46
View File
@@ -0,0 +1,46 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
+40056
View File
File diff suppressed because it is too large Load Diff
+51
View File
@@ -0,0 +1,51 @@
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.36",
"@types/react": "^17.0.34",
"@types/react-bootstrap": "^0.32.28",
"@types/react-dom": "^17.0.11",
"bootstrap": "^5.1.3",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.4.4",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@axe-core/react": "^4.3.1",
"prettier": "^2.4.1"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 342 B

+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Validation of best practices in your Kubernetes clusters"
/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Fairwinds Polaris</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
+3
View File
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
+18
View File
@@ -0,0 +1,18 @@
@import "~bootstrap/scss/bootstrap.scss";
.App {
width: 100%;
height: 100%;
display: flex;
.app-content {
padding: 1rem;
width: 100%;
height: 100%;
}
#mainContainer {
width: 100%;
height: 100%;
}
}
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
+43
View File
@@ -0,0 +1,43 @@
import React, { useState, useEffect } from 'react';
import LeftNavBar from './components/Navigation/LeftBar/LeftNavBar';
import TopNavBar from './components/Navigation/TopBar/TopNavBar';
import './App.scss';
import data from './data.json';
function App() {
const [pageDisplay, setPageDisplay] = useState<string>('dashboard');
const [namespaces, setNamespaces] = useState<string[]>([]);
const [selectedNamespace, setSelectedNamespace] = useState<string>('');
useEffect(() => {
const allNamespaces: Set<string> = new Set();
data.Results.forEach((result) => {
allNamespaces.add(result.Namespace);
});
setNamespaces(Array.from(allNamespaces));
setSelectedNamespace('');
}, []);
return (
<div className="App">
<LeftNavBar />
<div id="mainContainer">
<TopNavBar
pageDisplay={pageDisplay}
setPageDisplay={setPageDisplay}
namespaces={namespaces}
setSelected={setSelectedNamespace}
/>
<main className="app-content">
{pageDisplay === 'dashboard' && <h1>Polaris Dashboard</h1>}
{pageDisplay === 'namespaces' && (
<h1>{selectedNamespace} Namespace</h1>
)}
</main>
</div>
</div>
);
}
export default App;
+5
View File
@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.83333 4C4.61232 4 4.40036 4.08231 4.24408 4.22882C4.0878 4.37534 4 4.57405 4 4.78125C4 4.98845 4.0878 5.18716 4.24408 5.33368C4.40036 5.48019 4.61232 5.5625 4.83333 5.5625H14.8333C15.0543 5.5625 15.2663 5.48019 15.4226 5.33368C15.5789 5.18716 15.6667 4.98845 15.6667 4.78125C15.6667 4.57405 15.5789 4.37534 15.4226 4.22882C15.2663 4.08231 15.0543 4 14.8333 4H4.83333ZM4 7.90625C4 7.69905 4.0878 7.50034 4.24408 7.35382C4.40036 7.20731 4.61232 7.125 4.83333 7.125H14.8333C15.0543 7.125 15.2663 7.20731 15.4226 7.35382C15.5789 7.50034 15.6667 7.69905 15.6667 7.90625C15.6667 8.11345 15.5789 8.31216 15.4226 8.45868C15.2663 8.60519 15.0543 8.6875 14.8333 8.6875H4.83333C4.61232 8.6875 4.40036 8.60519 4.24408 8.45868C4.0878 8.31216 4 8.11345 4 7.90625ZM4.83333 10.25C4.61232 10.25 4.40036 10.3323 4.24408 10.4788C4.0878 10.6253 4 10.824 4 11.0312C4 11.2385 4.0878 11.4372 4.24408 11.5837C4.40036 11.7302 4.61232 11.8125 4.83333 11.8125H14.8333C15.0543 11.8125 15.2663 11.7302 15.4226 11.5837C15.5789 11.4372 15.6667 11.2385 15.6667 11.0312C15.6667 10.824 15.5789 10.6253 15.4226 10.4788C15.2663 10.3323 15.0543 10.25 14.8333 10.25H4.83333ZM4.83333 13.375C4.61232 13.375 4.40036 13.4573 4.24408 13.6038C4.0878 13.7503 4 13.949 4 14.1562C4 14.3635 4.0878 14.5622 4.24408 14.7087C4.40036 14.8552 4.61232 14.9375 4.83333 14.9375H9.83333C10.0543 14.9375 10.2663 14.8552 10.4226 14.7087C10.5789 14.5622 10.6667 14.3635 10.6667 14.1562C10.6667 13.949 10.5789 13.7503 10.4226 13.6038C10.2663 13.4573 10.0543 13.375 9.83333 13.375H4.83333Z" fill="white"/>
<path d="M0 2.5C0 1.83696 0.351189 1.20107 0.976311 0.732233C1.60143 0.263392 2.44928 0 3.33333 0L16.6667 0C17.5507 0 18.3986 0.263392 19.0237 0.732233C19.6488 1.20107 20 1.83696 20 2.5V17.5C20 18.163 19.6488 18.7989 19.0237 19.2678C18.3986 19.7366 17.5507 20 16.6667 20H3.33333C2.44928 20 1.60143 19.7366 0.976311 19.2678C0.351189 18.7989 0 18.163 0 17.5V2.5ZM16.6667 1.25H3.33333C2.89131 1.25 2.46738 1.3817 2.15482 1.61612C1.84226 1.85054 1.66667 2.16848 1.66667 2.5V17.5C1.66667 17.8315 1.84226 18.1495 2.15482 18.3839C2.46738 18.6183 2.89131 18.75 3.33333 18.75H16.6667C17.1087 18.75 17.5326 18.6183 17.8452 18.3839C18.1577 18.1495 18.3333 17.8315 18.3333 17.5V2.5C18.3333 2.16848 18.1577 1.85054 17.8452 1.61612C17.5326 1.3817 17.1087 1.25 16.6667 1.25Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="25" height="19" viewBox="0 0 25 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 3.125C25 2.2962 24.6708 1.50134 24.0847 0.915291C23.4987 0.32924 22.7038 0 21.875 0H3.125C2.2962 0 1.50134 0.32924 0.915293 0.915291C0.329241 1.50134 0 2.2962 0 3.125V15.625C0 16.4538 0.329241 17.2487 0.915293 17.8347C1.50134 18.4208 2.2962 18.75 3.125 18.75H21.875C22.7038 18.75 23.4987 18.4208 24.0847 17.8347C24.6708 17.2487 25 16.4538 25 15.625V3.125ZM21.875 1.5625C22.2894 1.5625 22.6868 1.72712 22.9799 2.02015C23.2729 2.31317 23.4375 2.7106 23.4375 3.125V3.46406L12.5 10.0266L1.5625 3.46406V3.125C1.5625 2.7106 1.72712 2.31317 2.02015 2.02015C2.31317 1.72712 2.7106 1.5625 3.125 1.5625H21.875ZM1.5625 5.28594L8.99688 9.74687L1.5625 14.2406V5.2875V5.28594ZM1.61563 16.0328L10.5141 10.6562L12.5 11.8484L14.4875 10.6562L23.3844 16.0312C23.295 16.3632 23.0987 16.6563 22.8258 16.8654C22.5529 17.0744 22.2187 17.1876 21.875 17.1875H3.125C2.78147 17.1877 2.44744 17.0747 2.17459 16.866C1.90174 16.6573 1.70529 16.3644 1.61563 16.0328ZM23.4375 14.2406L16.0031 9.74687L23.4375 5.28594V14.2391V14.2406Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 0C5.59375 0 0 5.50583 0 12.3035C0 17.7478 3.57812 22.3463 8.54688 23.9765C9.17188 24.0842 9.40625 23.715 9.40625 23.3921C9.40625 23.0999 9.39062 22.131 9.39062 21.1005C6.25 21.6696 5.4375 20.347 5.1875 19.6549C5.04688 19.3012 4.4375 18.2092 3.90625 17.917C3.46875 17.6863 2.84375 17.1173 3.89062 17.1019C4.875 17.0865 5.57812 17.9939 5.8125 18.363C6.9375 20.2239 8.73438 19.701 9.45312 19.3781C9.5625 18.5783 9.89062 18.04 10.25 17.7325C7.46875 17.4249 4.5625 16.3637 4.5625 11.6576C4.5625 10.3196 5.04688 9.21227 5.84375 8.35102C5.71875 8.04343 5.28125 6.78232 5.96875 5.09058C5.96875 5.09058 7.01562 4.76762 9.40625 6.3517C10.4062 6.07487 11.4688 5.93645 12.5313 5.93645C13.5938 5.93645 14.6563 6.07487 15.6563 6.3517C18.0469 4.75224 19.0938 5.09058 19.0938 5.09058C19.7812 6.78232 19.3438 8.04343 19.2188 8.35102C20.0156 9.21227 20.5 10.3042 20.5 11.6576C20.5 16.3791 17.5781 17.4249 14.7969 17.7325C15.25 18.1169 15.6406 18.8552 15.6406 20.0086C15.6406 21.6542 15.625 22.9768 15.625 23.3921C15.625 23.715 15.8594 24.0995 16.4844 23.9765C18.966 23.1521 21.1224 21.5824 22.65 19.4884C24.1777 17.3944 24.9996 14.8815 25 12.3035C25 5.50583 19.4062 0 12.5 0Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,3 @@
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.755859 1.59702L7.77688 7.00555L0.755859 12.4141V1.59702ZM0.353294 12.7242C0.353419 12.7241 0.353541 12.724 0.353666 12.7239L0.353294 12.7242ZM8.03353 7.20326L8.03397 7.2036L8.18654 7.00555L8.03397 7.2036C8.03382 7.20349 8.03367 7.20337 8.03353 7.20326Z" stroke="white" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 403 B

+3
View File
@@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.66849 0L7.39526 2.46812C6.35771 2.81801 5.41199 3.37161 4.60838 4.08015L2.33151 3.07832L0 7.12204L1.99452 8.58833C1.89056 9.10843 1.83971 9.64966 1.83971 10.2004C1.83971 10.751 1.89059 11.2923 1.99452 11.8124L0 13.2787L2.33151 17.3224L4.60838 16.3206C5.41199 17.0291 6.35771 17.5827 7.39526 17.9326L7.66849 20.4007H12.3315L12.6047 17.9326C13.6423 17.5827 14.588 17.0291 15.3916 16.3206L17.6685 17.3224L20 13.2787L18.0055 11.8124C18.1094 11.2923 18.1603 10.751 18.1603 10.2004C18.1603 9.64966 18.1094 9.10843 18.0055 8.58833L20 7.12204L17.6685 3.07832L15.3916 4.08015C14.588 3.37161 13.6423 2.81801 12.6047 2.46812L12.3315 0H7.66849ZM10 5.2459C12.7363 5.2459 14.9545 7.46404 14.9545 10.2004C14.9545 12.9366 12.7363 15.1548 10 15.1548C7.26374 15.1548 5.04554 12.9366 5.04554 10.2004C5.04554 7.46404 7.26374 5.2459 10 5.2459Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 954 B

+3
View File
@@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25313 15.7969C5.25313 17.2437 4.07188 18.4234 2.62656 18.4234C1.18125 18.4234 0 17.2437 0 15.7984C0 14.3531 1.18125 13.1719 2.625 13.1719H5.25313V15.7969ZM6.575 15.7969C6.575 14.3531 7.75625 13.1719 9.20156 13.1719C10.6469 13.1719 11.8281 14.3531 11.8281 15.7969V22.375C11.8281 23.8188 10.6469 25 9.20312 25C8.50702 24.9988 7.83974 24.7219 7.34723 24.23C6.85472 23.7381 6.57706 23.0711 6.575 22.375V15.7969ZM9.20312 5.25313C7.75625 5.25313 6.575 4.07188 6.575 2.62656C6.575 1.18125 7.75625 0 9.20312 0C10.65 0 11.8281 1.18125 11.8281 2.625V5.25313H9.20312ZM9.20312 6.575C10.6469 6.575 11.8281 7.75625 11.8281 9.20156C11.8281 10.6469 10.6469 11.8281 9.20312 11.8281H2.625C1.18281 11.8281 0 10.6469 0 9.20312C0 7.75625 1.18125 6.575 2.625 6.575H9.20312ZM19.7484 9.20312C19.7484 7.75625 20.9281 6.575 22.3734 6.575C23.8188 6.575 25 7.75625 25 9.20156C25 10.6469 23.8188 11.8281 22.375 11.8281H19.7484V9.20312ZM18.4234 9.20312C18.4234 10.6469 17.2437 11.8281 15.7984 11.8281C15.1026 11.8265 14.4357 11.5494 13.9436 11.0576C13.4514 10.5657 13.1739 9.89895 13.1719 9.20312V2.625C13.1719 1.18281 14.3531 0 15.7969 0C17.2437 0 18.4234 1.18125 18.4234 2.625V9.20312ZM15.7969 19.7469C17.2437 19.7469 18.425 20.9281 18.425 22.3734C18.425 23.8188 17.2437 25 15.7969 25C14.35 25 13.1703 23.8188 13.1703 22.375V19.7469H15.7953H15.7969ZM15.7969 18.4234C14.3531 18.4234 13.1719 17.2437 13.1719 15.7984C13.1719 14.3531 14.3531 13.1719 15.7969 13.1719H22.375C23.8188 13.1719 25 14.3531 25 15.7969C25 17.2437 23.8188 18.4234 22.375 18.4234H15.7969Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.85313 21C17.2875 21 22.4484 12.9187 22.4484 5.9228C22.4484 5.69666 22.4484 5.46729 22.4391 5.24115C23.4438 4.4892 24.311 3.55825 25 2.49191C24.0614 2.91972 23.0668 3.20168 22.0484 3.32863C23.1211 2.66578 23.9246 1.62283 24.3094 0.393637C23.3015 1.01088 22.1985 1.44418 21.0484 1.67457C20.2753 0.823345 19.2522 0.259434 18.1376 0.0701857C17.0231 -0.119063 15.8793 0.0769118 14.8833 0.627754C13.8874 1.1786 13.095 2.05356 12.6288 3.11713C12.1626 4.18069 12.0487 5.37349 12.3047 6.51077C10.2652 6.40505 8.27003 5.85733 6.4485 4.90314C4.62698 3.94894 3.01982 2.60957 1.73125 0.971914C1.07709 2.13991 0.877459 3.5215 1.17288 4.83614C1.46831 6.15077 2.23665 7.29989 3.32187 8.05015C2.50866 8.02159 1.71331 7.79584 1 7.39111V7.4638C1.0014 8.68736 1.41142 9.87289 2.16074 10.82C2.91006 11.7671 3.95273 12.4177 5.1125 12.6618C4.67229 12.7872 4.21755 12.8497 3.76094 12.8476C3.43904 12.8486 3.11778 12.8178 2.80156 12.7555C3.12935 13.8088 3.76761 14.7297 4.62695 15.3892C5.48628 16.0488 6.52365 16.4139 7.59375 16.4336C5.77587 17.9096 3.53031 18.7102 1.21875 18.7063C0.811439 18.7081 0.404411 18.6838 0 18.6336C2.34612 20.1799 5.07078 21.0009 7.85313 21Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,63 @@
.left-nav-bar {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #23103a;
color: white;
height: 100vh;
padding: 1rem;
width: 250px;
min-width: 250px;
.top-div {
img {
width: 220px;
}
}
.bottom-div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
.links-title {
color: #eceeef;
font-size: 1rem;
font-weight: 300;
margin-bottom: 0;
}
.nav-link-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
text-decoration: none;
.link-name {
font-size: 1.2rem;
font-weight: 300;
margin-bottom: 0;
}
.docs {
color: white;
}
}
.external-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.feedback {
text-decoration: none;
color: white;
font-size: 1rem;
font-weight: 300;
}
}
}
@@ -0,0 +1,79 @@
import React from 'react';
// import Settings from '../../assets/icons/settings.svg';
import Docs from '../../../assets/icons/docs.svg';
import RightArrow from '../../../assets/icons/rightArrow.svg';
import Github from '../../../assets/icons/github.svg';
import Twitter from '../../../assets/icons/twitter.svg';
import Slack from '../../../assets/icons/slack.svg';
import Email from '../../../assets/icons/email.svg';
import PolarisLogo from '../../../assets/images/polaris-logo.png';
import './LeftNavBar.scss';
const LeftNavBar = (): JSX.Element => {
return (
<section className="left-nav-bar">
<div className="top-div">
<img src={PolarisLogo} alt="Polaris icon" />
</div>
<div className="bottom-div">
<h2 className="links-title">Application</h2>
{/* TODO: no settings in Polaris? */}
{/* <div className="nav-link-section">
<img src={Settings} alt='gear icon' />
<h3 className="link-name">Settings</h3>
</div> */}
<a
className="nav-link-section"
href="https://polaris.docs.fairwinds.com/"
target="_blank"
rel="noreferrer"
>
<img src={Docs} alt="doc icon" />
<h3 className="link-name docs">Docs</h3>
<img src={RightArrow} alt="arrow pointing right" />
</a>
<div className="external-links">
<a
href="https://github.com/FairwindsOps/polaris"
target="_blank"
rel="noreferrer"
>
<img src={Github} alt="github logo" />
</a>
<a
href="https://twitter.com/fairwindsops"
target="_blank"
rel="noreferrer"
>
<img src={Twitter} alt="twitter logo" />
</a>
<a
href="https://join.slack.com/t/fairwindscommunity/shared_invite/zt-e3c6vj4l-3lIH6dvKqzWII5fSSFDi1g"
target="_blank"
rel="noreferrer"
>
<img src={Slack} alt="slack logo" />
</a>
<a
href="https://www.fairwinds.com/fairwinds-newsletter"
target="_blank"
rel="noreferrer"
>
<img src={Email} alt="envelope for newsletter" />
</a>
</div>
<a
href="https://github.com/fairwindsops/polaris/issues"
target="_blank"
rel="noreferrer"
className="feedback"
>
Feedback
</a>
</div>
</section>
);
};
export default LeftNavBar;
@@ -0,0 +1,40 @@
.top-nav-bar {
z-index: 3;
background-color: white;
height: 3rem;
position: sticky;
top: 0;
padding-bottom: 0 !important;
.top-nav {
padding: 0 24px;
height: inherit;
align-content: end;
width: 100%;
.nav-item > .dropdown-menu {
max-height: 15rem;
overflow: auto;
}
.nav-item > .nav-link {
color: #495057;
&:hover,
&:focus {
border-color: transparent;
}
&.active {
border-color: #fff #fff;
margin-bottom: -2px;
border-bottom: 2px solid #445688;
color: #445688;
padding-bottom: 14px;
}
}
#nav-dropdown {
padding-left: 0;
}
}
}
@@ -0,0 +1,72 @@
import React, { SyntheticEvent, useState } from 'react';
import { Nav, Navbar, NavDropdown } from 'react-bootstrap';
import './TopNavBar.scss';
type NavProps = {
pageDisplay: string;
setPageDisplay: React.Dispatch<React.SetStateAction<string>>;
namespaces: string[];
setSelected: React.Dispatch<React.SetStateAction<string>>;
};
const TopNavBar = ({
pageDisplay,
setPageDisplay,
namespaces,
setSelected,
}: NavProps): JSX.Element => {
const [selectedNamespace, setSelectedNamespace] =
useState<string>('All Namespaces');
const handleNamespaceSelection = (
namespace: SyntheticEvent<HTMLDivElement, Event>
): void => {
if (namespace.toString() === 'All Namespaces') {
setSelectedNamespace('All Namespace');
} else if (namespace) {
setSelectedNamespace(namespace.toString());
}
setPageDisplay('namespaces');
setSelected(namespace.toString());
};
const NavItems = (): JSX.Element => (
<>
{namespaces.map((item) => {
return (
<NavDropdown.Item key={item} eventKey={item}>
{item}
</NavDropdown.Item>
);
})}
</>
);
return (
<header>
<Navbar className="top-nav-bar" expand={true}>
<Nav variant="tabs" className="top-nav">
<NavDropdown
title={selectedNamespace}
id="nav-dropdown"
active={pageDisplay === 'namespaces'}
onSelect={handleNamespaceSelection}
>
<NavDropdown.Item
key={'all-namespaces'}
eventKey={'all-namespaces'}
>
All Namespaces
</NavDropdown.Item>
<NavItems />
</NavDropdown>
<Nav.Item onClick={() => setPageDisplay('dashboard')}>
<Nav.Link active={pageDisplay === 'dashboard'}>Dashboard</Nav.Link>
</Nav.Item>
</Nav>
</Navbar>
</header>
);
};
export default TopNavBar;
File diff suppressed because one or more lines are too long
+13
View File
@@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+22
View File
@@ -0,0 +1,22 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
if (process.env.NODE_ENV !== 'production') {
const axe = require('@axe-core/react');
axe(React, ReactDOM, 1000);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
+1
View File
@@ -0,0 +1 @@
/// <reference types="react-scripts" />
+15
View File
@@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
+5
View File
@@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
+26
View File
@@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}