52 | this.handleCredentialUpdate(
53 | platform,
54 | nodeIp,
55 | username,
56 | password,
57 | apiToken,
58 | polarisDomain
59 | )
60 | }
61 | />
62 | );
63 | } else {
64 | return (
65 |
36 |
37 |
38 |
40 |
45 |
57 |
58 |
59 | );
60 | };
61 |
62 | export default CdmApiTokenToggle;
63 |
--------------------------------------------------------------------------------
/src/components/defaultSettings/DefaultPlatformSelection.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import FormControl from "@material-ui/core/FormControl";
4 | import { makeStyles } from "@material-ui/core/styles";
5 | import List from "@material-ui/core/List";
6 | import ListItem from "@material-ui/core/ListItem";
7 | import ListItemIcon from "@material-ui/core/ListItemIcon";
8 | import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
9 | import ListItemText from "@material-ui/core/ListItemText";
10 | import Select from "@material-ui/core/Select";
11 | import MenuItem from "@material-ui/core/MenuItem";
12 |
13 | import DesktopMacIcon from "@material-ui/icons/DesktopMac";
14 |
15 | // Used to format the Select dropdown
16 | const useStyles = makeStyles(() => ({
17 | formControl: {
18 | minWidth: 100,
19 | marginRight: 20,
20 | },
21 | }));
22 |
23 | const storage = window.localStorage;
24 |
25 | const DefaultPlatform = ({ handleDefaultPlatform }) => {
26 | const classes = useStyles();
27 | const [platform, setPlatform] = React.useState(
28 | storage.getItem("platform") === null ? "none" : storage.getItem("platform")
29 | );
30 |
31 | const handleChange = (event) => {
32 | setPlatform(event.target.value);
33 | handleDefaultPlatform(event.target.value);
34 | };
35 |
36 | return (
37 |
38 |
39 |
40 |
42 |
47 |
48 |
54 | None
55 | CDM
56 | Polaris
57 |
58 |
59 |
60 |
61 |
62 | );
63 | };
64 |
65 | export default DefaultPlatform;
66 |
--------------------------------------------------------------------------------
/src/components/defaultSettings/PolarisDevelopmentModeToggle.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import List from "@material-ui/core/List";
4 | import ListItem from "@material-ui/core/ListItem";
5 | import ListItemIcon from "@material-ui/core/ListItemIcon";
6 | import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
7 | import ListItemText from "@material-ui/core/ListItemText";
8 | import CodeIcon from "@material-ui/icons/Code";
9 |
10 | import Switch from "@material-ui/core/Switch";
11 | import FormControlLabel from "@material-ui/core/FormControlLabel";
12 |
13 | const storage = window.localStorage;
14 |
15 | const convertStringToBoolean = (string) => {
16 | let bool;
17 | string === "false" ? (bool = false) : (bool = true);
18 | return bool;
19 | };
20 |
21 | const PolarisDevelopmentModeToggle = ({ handlePolarisDevModeState }) => {
22 | const [state, setState] = React.useState(
23 | storage.getItem("polarisDevMode") === null
24 | ? false
25 | : convertStringToBoolean(storage.getItem("polarisDevMode"))
26 | );
27 |
28 | const handleChange = (event) => {
29 | setState(event.target.checked);
30 |
31 | handlePolarisDevModeState(event.target.checked);
32 | };
33 |
34 | return (
35 |
36 |
37 |
38 |
40 |
45 |
56 |
57 |
58 | );
59 | };
60 |
61 | export default PolarisDevelopmentModeToggle;
62 |
--------------------------------------------------------------------------------
/src/components/defaultSettings/SettingsDialog.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withStyles } from "@material-ui/core/styles";
3 |
4 | import IconButton from "@material-ui/core/IconButton";
5 | import CloseIcon from "@material-ui/icons/Close";
6 | import SettingsIcon from "@material-ui/icons/Settings";
7 |
8 | import Typography from "@material-ui/core/Typography";
9 |
10 | import Button from "@material-ui/core/Button";
11 |
12 | import Dialog from "@material-ui/core/Dialog";
13 | import MuiDialogTitle from "@material-ui/core/DialogTitle";
14 | import MuiDialogContent from "@material-ui/core/DialogContent";
15 | import MuiDialogActions from "@material-ui/core/DialogActions";
16 |
17 | import CdmApiTokenToggle from "./CdmApiTokenToggle";
18 | import PolarisDevelopmentModeToggle from "./PolarisDevelopmentModeToggle";
19 | import DefaultPlatformSelection from "./DefaultPlatformSelection";
20 |
21 | import { createMuiTheme } from "@material-ui/core/styles";
22 | import { ThemeProvider } from "@material-ui/styles";
23 |
24 | const theme = createMuiTheme({
25 | palette: {
26 | primary: {
27 | main: "#0086C0",
28 | },
29 | },
30 | });
31 |
32 | const styles = (theme) => ({
33 | root: {
34 | margin: 0,
35 | padding: theme.spacing(2),
36 | },
37 | closeButton: {
38 | position: "absolute",
39 | right: theme.spacing(1),
40 | top: theme.spacing(1),
41 | color: theme.palette.grey[500],
42 | },
43 | colorstrip: {
44 | "border-top": "solid 6px #0086C0",
45 | },
46 | });
47 |
48 | const DialogTitle = withStyles(styles)((props) => {
49 | const { children, classes, onClose, ...other } = props;
50 | return (
51 |
56 | {children}
57 | {onClose ? (
58 |
63 |
65 | ) : null}
66 |
67 | );
68 | });
69 |
70 | const DialogContent = withStyles((theme) => ({
71 | root: {
72 | padding: theme.spacing(2),
73 | },
74 | }))(MuiDialogContent);
75 |
76 | const DialogActions = withStyles((theme) => ({
77 | root: {
78 | margin: 0,
79 | padding: theme.spacing(1),
80 | },
81 | }))(MuiDialogActions);
82 |
83 | const storage = window.localStorage;
84 |
85 | export default function SettingsDialog(props) {
86 | const [settingsOpen, setSettingsOpen] = React.useState(false);
87 | const [cdmApiToken, setCdmApiTokenState] = React.useState(false);
88 | const [polarisDevMode, setPolarisDevModeState] = React.useState(false);
89 | const [defaultPlatform, setDefaultPlatform] = React.useState("none");
90 |
91 | const handleSettingsOpen = () => {
92 | setSettingsOpen(true);
93 | };
94 |
95 | const handleSettingsClose = () => {
96 | setSettingsOpen(false);
97 | };
98 |
99 | const handleSaveSettings = (event) => {
100 | event.preventDefault();
101 |
102 | storage.setItem("platform", defaultPlatform);
103 | storage.setItem("cdmApiToken", cdmApiToken);
104 | storage.setItem("polarisDevMode", polarisDevMode);
105 |
106 | props.handleDefaultUpdate(defaultPlatform, cdmApiToken, polarisDevMode);
107 | setSettingsOpen(false);
108 | };
109 |
110 | const settingsIcon = () => {
111 | return (
112 |
113 |
114 |
116 |
117 | );
118 | };
119 |
120 | // TODO: Combine the toggle handles into a single function
121 | const handleCdmApiTokenState = (state) => {
122 | setCdmApiTokenState(state);
123 | };
124 |
125 | const handlePolarisDevModeState = (state) => {
126 | setPolarisDevModeState(state);
127 | };
128 |
129 | const handleDefaultPlatform = (platform) => {
130 | setDefaultPlatform(platform);
131 | };
132 |
133 | const settingsDialog = () => {
134 | return (
135 |
136 | {settingsIcon()}
137 | handleSettingsClose(event)}
139 | aria-labelledby="customized-dialog-title"
140 | open={settingsOpen}
141 | fullWidth={true}
142 | maxWidth="md"
143 | >
144 | handleSettingsClose(event)}
147 | >
148 | Default Playground Settings
149 |
150 |
151 |
174 |
175 |
176 | );
177 | };
178 |
179 | return settingsDialog();
180 | }
181 |
--------------------------------------------------------------------------------
/src/components/graphiql/GraphiQl.css:
--------------------------------------------------------------------------------
1 | .graphiql-container .type-name {
2 | font-weight: 350;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/graphiql/GraphiQl.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import GraphiQL from "graphiql";
3 | import "graphiql/graphiql.css";
4 | // Import custom changes to the GraphiQl CSS that improves the visability
5 | // of the Types
6 | import "./GraphiQl.css";
7 | import { graphQLFetcher } from "../../utils/api";
8 | import rubrikLogo from "../../images/rubrikLogo.svg";
9 |
10 | class GraphiQl extends Component {
11 | render() {
12 | return (
13 |
15 | graphQLFetcher(
16 | graphQLParams,
17 | this.props.platform,
18 | this.props.nodeIp,
19 | this.props.username,
20 | this.props.password,
21 | this.props.apiToken,
22 | this.props.polarisDomain
23 | )
24 | }
25 | >
26 |
27 |
29 |
30 | );
31 | }
32 | }
33 |
34 | export default GraphiQl;
35 |
--------------------------------------------------------------------------------
/src/components/landingPage/LandingPage.css:
--------------------------------------------------------------------------------
1 | .landing-page {
2 | display: flex;
3 | }
4 | .welcome-message {
5 | display: flex;
6 | flex-direction: column;
7 | background-image: url("../../images/pattern.png"),
8 | radial-gradient(
9 | circle at center center,
10 | rgb(0, 88, 140) 5%,
11 | rgb(22, 41, 43) 80%
12 | );
13 | flex-grow: 1;
14 | justify-content: space-between;
15 |
16 | align-items: center;
17 | height: 100vh;
18 | }
19 |
20 | .center-white-text {
21 | color: rgb(255, 255, 255);
22 | text-align: center;
23 | font-size: 1.86rem;
24 | }
25 |
26 | .larger-font-size {
27 | font-size: 2.086rem;
28 | }
29 |
30 | .bold-text {
31 | font-weight: 600;
32 | }
33 |
34 | .bottom-white-small-text {
35 | color: rgb(255, 255, 255);
36 | font-size: 1.143rem;
37 | margin-bottom: 2.286rem;
38 | }
39 |
40 | .thin-text {
41 | font-weight: 200;
42 | }
43 |
44 | .login {
45 | -webkit-box-flex: 0;
46 | flex-grow: 0;
47 | flex-basis: 38.857rem;
48 | align-items: center;
49 | }
50 |
51 | .login-text {
52 | font-weight: 100;
53 | color: rgb(22, 41, 43);
54 | font-size: 1.986rem;
55 | margin-bottom: 1.023rem;
56 | }
57 |
58 | .error-text {
59 | font-weight: 400;
60 | color: rgb(22, 41, 43);
61 | font-size: 1.286rem;
62 | margin-bottom: 1.023rem;
63 | text-align: center;
64 | }
65 |
66 | .flex-container {
67 | height: 85%;
68 | display: -webkit-box;
69 | display: -moz-box;
70 | display: -ms-flexbox;
71 | display: -webkit-flex;
72 | display: flex;
73 | align-items: center;
74 | justify-content: center;
75 | }
76 | .flex-row {
77 | width: 85%;
78 | }
79 |
80 | .display-flex-justify {
81 | display: flex !important;
82 | justify-content: center !important;
83 | }
84 |
85 | .primary-button {
86 | border-radius: 0.286rem;
87 | line-height: 0.23;
88 | color: #fff;
89 | background-color: rgb(0, 134, 192);
90 | border-color: rgb(0, 134, 192);
91 |
92 | box-shadow: none;
93 | display: inline-block;
94 | width: 100%;
95 | margin-top: 20px;
96 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
97 | 0 1px 5px 0 rgba(0, 0, 0, 0.12);
98 | }
99 |
100 | .primary-button:hover {
101 | background-color: #18b8e9;
102 | border-color: #18b8e9;
103 | }
104 |
105 | .btn-row {
106 | display: flex;
107 | }
108 |
109 | .btn-column {
110 | flex: 33.33%;
111 | padding: 5px;
112 | }
113 |
114 | h3 {
115 | font-weight: 200;
116 | font-size: 1.0775rem;
117 | font-family: "Open Sans", sans-serif;
118 | text-transform: uppercase;
119 | }
120 |
121 | .hide {
122 | display: none;
123 | }
124 |
125 | a:link {
126 | color: black;
127 | font-weight: 100;
128 | color: rgb(22, 41, 43);
129 | font-size: 0.986rem;
130 | margin-top: 1.023rem;
131 | text-decoration: none;
132 | }
133 |
134 | .bottom-right {
135 | position: fixed;
136 | bottom: 0;
137 | right: 0;
138 | margin-bottom: 1.023rem;
139 | margin-right: 1.023rem;
140 | }
141 |
142 | .top-right {
143 | position: fixed;
144 | top: 0;
145 | right: 0;
146 | margin-bottom: 1.023rem;
147 | margin-right: 1.023rem;
148 | }
149 |
--------------------------------------------------------------------------------
/src/components/landingPage/LandingPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | import SettingsDialog from "../defaultSettings/SettingsDialog";
4 |
5 | // App Component related imports
6 | import "./LandingPage.css";
7 | import rubrikLogo from "../../images/rubrikLogo.svg";
8 | import LoginForm from "../loginForm/LoginForm";
9 | import { validateCredentials, userFiendlyErrorMessage } from "../../utils/api";
10 |
11 | // Material-UI related imports
12 | import CodeIcon from "@material-ui/icons/Code";
13 | import PersonIcon from "@material-ui/icons/Person";
14 | import IconButton from "@material-ui/core/IconButton";
15 |
16 | import Tooltip from "@material-ui/core/Tooltip";
17 | import Typography from "@material-ui/core/Typography";
18 |
19 | import { withStyles } from "@material-ui/core/styles";
20 |
21 | const selectYourPlatformFormHeader = "Select your Platform";
22 | const loginButtonText = "Login";
23 | const connectingToPlatformButtonText = "Attempting to Connect";
24 | const polarisUserDomain = ".my.rubrik.com";
25 | const polarisDevDomain = ".dev.my.rubrik-lab.com";
26 |
27 | const storage = window.localStorage;
28 |
29 | const convertStringToBoolean = (string) => {
30 | let bool;
31 | string === "false" ? (bool = false) : (bool = true);
32 | return bool;
33 | };
34 |
35 | class LandingPage extends Component {
36 | constructor(props) {
37 | super(props);
38 |
39 | this.state = {
40 | formHeader: selectYourPlatformFormHeader,
41 | platform:
42 | storage.getItem("platform") === "none"
43 | ? null
44 | : storage.getItem("platform"),
45 | loginButtonText: loginButtonText,
46 | loginErrorMessage: null,
47 | apiToken: null,
48 | ip: null,
49 | username: null,
50 | password: null,
51 | cdmApiToken: null,
52 | polarisDomain: polarisUserDomain,
53 | usingCdmApiToken:
54 | storage.getItem("cdmApiToken") === null
55 | ? false
56 | : convertStringToBoolean(storage.getItem("cdmApiToken")),
57 |
58 | settingsOpen: true,
59 | };
60 |
61 | this.createLoginForm = this.createLoginForm.bind(this);
62 | this.handleSwitchToLogin = this.handleSwitchToLogin.bind(this);
63 | this.handleSelectYourPlatform = this.handleSelectYourPlatform.bind(this);
64 | this.onFormChange = this.onFormChange.bind(this);
65 | this.handleLoginButton = this.handleLoginButton.bind(this);
66 | this.createLoginHeader = this.createLoginHeader.bind(this);
67 | this.createDevModeIcon = this.createDevModeIcon.bind(this);
68 | this.handleModeButton = this.handleModeButton.bind(this);
69 | this.handleDefaultUpdate = this.handleDefaultUpdate.bind(this);
70 | }
71 |
72 | componentDidMount() {
73 | // storage.clear();
74 |
75 | if (storage.getItem("platform") !== null) {
76 | this.setState({
77 | formHeader: loginButtonText,
78 | });
79 | }
80 |
81 | if (storage.getItem("polarisDevMode") === "true") {
82 | this.setState({
83 | polarisDomain: polarisDevDomain,
84 | });
85 | }
86 | }
87 |
88 | handleSwitchToLogin(event) {
89 | event.preventDefault();
90 |
91 | this.setState({
92 | platform: event.target.textContent.toLowerCase(),
93 | formHeader: loginButtonText,
94 | });
95 | }
96 |
97 | async handleLoginButton(event) {
98 | event.preventDefault();
99 | this.setState({
100 | loginButtonText: connectingToPlatformButtonText,
101 | loginErrorMessage: null,
102 | });
103 |
104 | try {
105 | let apiToken = await validateCredentials(
106 | this.state.platform,
107 | this.state.ip,
108 | this.state.username,
109 | this.state.password,
110 | this.state.cdmApiToken,
111 | this.state.usingCdmApiToken,
112 | this.state.polarisDomain
113 | );
114 |
115 | this.setState({
116 | apiToken: this.state.cdmApiToken ? this.state.cdmApiToken : apiToken,
117 | loginButtonText: "Login",
118 | });
119 |
120 | // If using API Token Authentication for CDM connectivity, reset the username
121 | // and password to null in case they were also filled out in the login form
122 | if (this.state.usingCdmApiToken) {
123 | this.setState({
124 | username: null,
125 | password: null,
126 | });
127 | }
128 |
129 | this.props.credentialUpdate(
130 | this.state.platform,
131 | this.state.ip,
132 | this.state.username,
133 | this.state.password,
134 | this.state.apiToken,
135 | this.state.polarisDomain
136 | );
137 | } catch (error) {
138 | this.setState({
139 | loginErrorMessage: userFiendlyErrorMessage(
140 | error,
141 | this.state.usingCdmApiToken
142 | ),
143 | loginButtonText: loginButtonText,
144 | });
145 | }
146 | }
147 |
148 | handleSelectYourPlatform(event, platform) {
149 | this.setState({
150 | platform: this.state.platform === "polaris" ? "cdm" : "polaris",
151 | loginErrorMessage: null,
152 | // usingCdmApiToken: false,
153 | });
154 | }
155 |
156 | handleDefaultUpdate(platform, cdmApiToken, polarisDevMode) {
157 | if (this.state.platform !== platform) {
158 | this.setState({
159 | platform: platform === "none" ? null : platform,
160 | });
161 | }
162 |
163 | if (this.state.usingCdmApiToken !== cdmApiToken) {
164 | this.setState({
165 | usingCdmApiToken: cdmApiToken,
166 | });
167 | }
168 |
169 | this.setState({
170 | polarisDomain:
171 | polarisDevMode === true ? polarisDevDomain : polarisUserDomain,
172 | });
173 | }
174 |
175 | handleModeButton() {
176 | this.setState({
177 | polarisDomain:
178 | this.state.polarisDomain === polarisUserDomain
179 | ? polarisDevDomain
180 | : polarisUserDomain,
181 | });
182 | }
183 |
184 | onFormChange(event) {
185 | // This function handles the input from the form fields and sets the
186 | // appropriate state.
187 |
188 | if (event.target.id !== "useApiTokenCheckBox") {
189 | this.setState({ [event.target.id]: event.target.value });
190 | } else {
191 | this.setState({
192 | usingCdmApiToken: event.target.checked,
193 | });
194 | }
195 | }
196 |
197 | createFullLandingPageUi() {
198 | return (
199 |
200 |
201 |
206 |
207 | );
208 | }
209 |
210 | // Creates the "Welcome to the Rubrik GraphQL Playground" UI
211 | createWelcome() {
212 | return (
213 |
214 |
215 |
216 |
217 | Welcome to the
218 |
219 | Rubrik GraphQL Playground
220 |
221 |
222 |
223 |
224 |
225 | Don't Backup.
226 |
227 | Go Forward.
228 |
229 |
237 |
238 |
239 | {this.createLoginLogo()}
240 | {this.createLoginHeader()}
241 | {this.state.platform === null && this.createLoginPlatformButtons()}
242 | {this.state.platform != null && this.createLoginForm()}
243 | {this.createRwpLink()}
244 | {this.createDevModeIcon()}
245 |
246 |
247 |
254 |
255 |
262 |
263 | {this.state.formHeader}
264 |
265 | {this.state.platform != null && this.createLoginErrorMessage()}
266 |
267 | );
268 | }
269 |
270 | createLoginErrorMessage() {
271 | return (
272 |
273 | {this.state.loginErrorMessage}
274 |
275 | );
276 | }
277 |
278 | createLoginPlatformButtons() {
279 | return (
280 |
281 |
282 |
287 | Polaris
288 |
289 |
290 |
291 |
296 | CDM
297 |
298 |
299 |
329 |
332 |
333 | {this.state.polarisDomain === polarisUserDomain
334 | ? "Set the Polaris Domain to development. Internal Rubrik use only."
335 | : "Set the Polaris Domain to production."}
336 |
337 |
338 | }
339 | >
340 |
341 | {this.state.polarisDomain === polarisUserDomain ? (
342 |
347 |
348 |
6 |
7 |
8 |
14 |
17 |
23 |
26 |
32 |
35 |
41 |
44 |
50 |
53 |
59 |
62 |
68 |
71 |
77 |
80 |
86 |
89 |
95 |
98 |
104 |
107 |
113 |
116 |
122 |
125 |
131 |
134 |
140 |
143 |
149 |
152 |
153 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | #root {
2 | height: 100vh;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | padding: 0;
8 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
9 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
10 | sans-serif;
11 | -webkit-font-smoothing: antialiased;
12 | -moz-osx-font-smoothing: grayscale;
13 | min-height: 100vh;
14 | }
15 |
16 | code {
17 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
18 | monospace;
19 | }
20 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render( 
8 |
9 | 
10 |
11 |
12 |
13 | ## :muscle: How You Can Help
14 |
15 | We glady welcome contributions from the community. From updating the documentation to adding more functions for Python, all ideas are welcome. Thank you in advance for all of your issues, pull requests, and comments! :star:
16 |
17 | - [Contributing Guide](CONTRIBUTING.md)
18 | - [Code of Conduct](CODE_OF_CONDUCT.md)
19 |
20 | ## :pushpin: License
21 |
22 | - [MIT License](LICENSE)
23 |
24 | ## :point_right: About Rubrik Build
25 |
26 | We encourage all contributors to become members. We aim to grow an active, healthy community of contributors, reviewers, and code owners. Learn more in our [Welcome to the Rubrik Build Community](https://github.com/rubrikinc/welcome-to-rubrik-build) page.
27 |
28 | We'd love to hear from you! Email us: build@rubrik.com :love_letter:
29 |
--------------------------------------------------------------------------------
/assets/entitlements.mac.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
\n