23 | ) => {
24 | e.preventDefault();
25 | let appName = e.target.parentNode.childNodes[0].innerText;
26 | navigate('/home/manifests', { state: { query: appListRef.curr[appName] } });
27 | };
28 |
29 | //grab the app lists and display
30 | useEffect((): void => {
31 | const appsArr: any = [];
32 |
33 | //add username here not in parent
34 | fetch(
35 | '/server/api/apps?' +
36 | new URLSearchParams({
37 | user: gitUser,
38 | })
39 | )
40 | .then((data: Response) => data.json())
41 | .then((data) => {
42 | //they are objects with two elements, name and uid
43 | const stateObj: Data = {};
44 | for (const app of data) {
45 | stateObj[app.name] = app;
46 | stateObj[app.name].repo = app.source.repoURL;
47 | appsArr.push(
48 |
49 |
{`${app.name}`}
50 |
56 |
57 | );
58 | }
59 | setAppList(stateObj);
60 | setApps(appsArr);
61 | })
62 | .catch((err) => console.log('error occured fetching apps: '));
63 | }, []);
64 |
65 | useEffect(() => {
66 | appListRef.curr = appList;
67 | }, [appList]);
68 |
69 | return (
70 |
71 |
Select an app to view
72 |
75 |
76 | );
77 | }
78 |
79 | export default AppsList;
80 |
--------------------------------------------------------------------------------
/client/src/components/Login.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from "react-router";
2 |
3 | function Login(props) {
4 | let navigate = useNavigate();
5 | const handleClick = (e) => {
6 | e.preventDefault();
7 | return navigate('/home')
8 | }
9 | return (
10 |
11 |
You need to login!
12 |
13 |
14 | )
15 | }
16 |
17 | export default Login;
--------------------------------------------------------------------------------
/client/src/components/ManifestDetails.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from 'react';
2 | import { useLocation } from 'react-router';
3 | import { Octokit } from 'https://cdn.skypack.dev/@octokit/core';
4 | import { GitUserContext } from './Protected';
5 | import hljs from 'highlight.js/lib/core';
6 | import 'highlight.js/styles/default.css';
7 | import yaml from 'highlight.js/lib/languages/json';
8 | hljs.registerLanguage('yaml', yaml);
9 | import yaml2 from 'js-yaml';
10 | function ManifestDetails(props) {
11 | const [mani, setMani] = useState([]);
12 | const [branch, setBranch] = useState('');
13 | const [token, setToken] = useState('');
14 | const gitUser = useContext(GitUserContext);
15 | const { state } = useLocation();
16 | //load each manifest for display
17 | useEffect(() => {
18 | let counter = 0;
19 | getToken();
20 | const stateArr = [];
21 | // loop over passed in array to find correct manifests
22 | for (const obj of props.details) {
23 | console.log('props.details is: ', props.details);
24 | if (obj.revision === props.sha) {
25 | console.log('obj is: ', obj);
26 | const manifests = JSON.parse(obj.manifest);
27 | for (const manifest of manifests) {
28 | if (counter >= manifests.length) {
29 | setMani(stateArr);
30 | return;
31 | }
32 | const high = hljs.highlight(yaml2.dump(JSON.parse(manifest)), {
33 | language: 'yaml',
34 | }).value;
35 | console.log(
36 | 'typeof manifest is: ',
37 | typeof manifest,
38 | JSON.parse(manifest),
39 | 'of manifests is: ',
40 | typeof manifests,
41 | high
42 | );
43 | stateArr.push(
44 |
49 | );
50 | console.log('statearr is: ', stateArr);
51 | setMani(stateArr);
52 | }
53 | }
54 | }
55 | }, []);
56 | //get github token from db
57 | const getToken = () => {
58 | console.log('getting token, gitUser is: ', gitUser);
59 | fetch(
60 | '/server/api/gitToken?' +
61 | new URLSearchParams({
62 | user: gitUser,
63 | })
64 | )
65 | .then((data) => data.json())
66 | .then((data) => {
67 | console.log('Data recieved from db for token, ', data);
68 | if (data.githubToken) {
69 | setToken(data.githubToken);
70 | } else console.log('token does not exist in DB!');
71 | });
72 | };
73 | //back button
74 | const handleClick = (e) => {
75 | e.preventDefault();
76 | props.setDetail(false);
77 | };
78 | //helper function to get repo owner and name
79 | const parseGitLink = (str: String): String[] => {
80 | let temp = str.slice(19).split('/');
81 | temp[1] = temp[1].slice(0, temp[1].length - 4);
82 | return temp;
83 | };
84 | //push to git
85 | const handleGit = (e) => {
86 | e.preventDefault();
87 | const [owner, repo] = parseGitLink(state.query.repo);
88 | console.log(token);
89 | const octokit = new Octokit({
90 | auth: token,
91 | });
92 | octokit
93 | .request('PATCH /repos/{owner}/{repo}/git/refs/heads/{ref}', {
94 | owner: owner,
95 | repo: repo,
96 | ref: branch,
97 | sha: props.sha,
98 | force: true,
99 | })
100 | .then((data) => {
101 | console.log('response from GitHub is: ', data);
102 | })
103 | .catch((err) => {
104 | console.log('error occured: ', err);
105 | });
106 | };
107 | //get more manifests
108 | const moreManifests = () => {
109 | fetch('http://');
110 | };
111 | return (
112 |
113 |
119 |
120 | {/* container for input and git sha */}
121 |
122 |
123 |
Manifests for git sha:
124 |
125 | {props.sha}
126 |
127 |
128 |
129 |
130 | setBranch(e.target.value)}
135 | />
136 |
142 |
143 |
144 |
145 |
148 |
149 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default ManifestHub;
13 |
--------------------------------------------------------------------------------
/client/src/components/ManifestList.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import { useLocation, useNavigate } from 'react-router';
3 | import ManifestDetails from './ManifestDetails';
4 |
5 | function ManifestList() {
6 | const navigate = useNavigate();
7 |
8 | const handleBack = (e) => {
9 | e.preventDefault();
10 | navigate('/home');
11 | };
12 |
13 | //grab all the data from backend
14 | const [mlList, setMlList] = useState([]);
15 | const [detail, setDetail] = useState(false);
16 | const [manifests, setManifests] = useState([]);
17 | const [sha, setSha] = useState('');
18 | const { state } = useLocation();
19 |
20 | useEffect(() => {
21 | const stateArr: any = [];
22 | console.log('uid is: ', state.query.uid);
23 | fetch(
24 | '/server/api/manifests?' +
25 | new URLSearchParams({
26 | uid: state.query.uid,
27 | })
28 | )
29 | .then((data: Response) => data.json())
30 | .then((data: any) => {
31 | console.log('data for this app is: ', data);
32 | for (const el of data) {
33 | stateArr.push(
34 |
35 |
36 |
Git sha:
37 |
38 | {el.revision}
39 |
40 |
41 |
47 |
69 |
75 | {mlList}
76 |
77 | );
78 | } else {
79 | return (
80 |
81 | );
82 | }
83 | }
84 |
85 | export default ManifestList;
86 |
--------------------------------------------------------------------------------
/client/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router';
2 | import logoWhite from '../assets/logo-white.png';
3 |
4 | function Navbar({ setIsLoggedIn, setUsername }) {
5 | const navigate = useNavigate()
6 | const handleClick = (e) => {
7 | e.preventDefault();
8 | fetch('/server/logout', {
9 | credentials: 'include',
10 | headers: {
11 | 'Content-Type': 'application/json',
12 | },
13 | })
14 | .then((data) => data.json())
15 | .then((data) => {
16 | setIsLoggedIn(false);
17 | setUsername('');
18 | });
19 | navigate('/');
20 | };
21 |
22 | return (
23 |
29 | );
30 | }
31 |
32 | export default Navbar;
33 |
--------------------------------------------------------------------------------
/client/src/components/Protected.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router';
2 | import { createContext, useEffect, useState } from 'react';
3 | import App from '../App';
4 | import Navbar from './Navbar';
5 | import logoWhite from '../assets/logo-white.png';
6 |
7 | export const GitUserContext = createContext('noUser');
8 |
9 | function Protected() {
10 | const [isLoggedIn, setIsLoggedIn] = useState();
11 | const [username, setUsername] = useState('');
12 |
13 | useEffect(() => {
14 | //fetch the api
15 | fetch('/server/api/checkUser', {
16 | credentials: 'include',
17 | headers: {
18 | 'Content-Type': 'application/json',
19 | },
20 | })
21 | .then((data: Response) => data.json())
22 | .then((data) => {
23 | //if auth succeeds, we get the username back. need to make sure we get false if it fails
24 | if (data != 'failed') {
25 | setIsLoggedIn(true);
26 | setUsername(data.githubId);
27 | }
28 | });
29 | });
30 | if (isLoggedIn) {
31 | return (
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 | } else {
40 | return (
41 |
42 |
43 |
44 | );
45 | }
46 | }
47 |
48 | export default Protected;
49 |
--------------------------------------------------------------------------------
/client/src/components/TokenInput.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useState } from 'react';
2 | import { GitUserContext } from './Protected';
3 |
4 | import gitLogo from '../assets/github-mark.png';
5 | import argoLogo from '../assets/argo-icon-black.png';
6 |
7 | interface tokens {
8 | argo: boolean;
9 | git: boolean;
10 | url: boolean;
11 | }
12 |
13 | interface props {
14 | tokens: tokens;
15 | setGit(arg0: boolean): void;
16 | setArgo(arg0: boolean): void;
17 | setUrl(arg0: boolean): void;
18 | }
19 |
20 | function TokenInput(props: props) {
21 | const [argoTokenValue, setArgoTokenValue] = useState('');
22 | const [argoUrlValue, setArgoUrlValue] = useState('');
23 | const [gitTokenValue, setGitTokenValue] = useState('');
24 | const gitUser = useContext(GitUserContext);
25 |
26 | const handleArgoSubmit = (e: React.FormEvent) => {
27 | e.preventDefault();
28 |
29 | const req = {
30 | api_key: argoTokenValue,
31 | url: argoUrlValue,
32 | githubId: gitUser,
33 | };
34 |
35 | fetch('server/api/userApiKey', {
36 | method: 'POST',
37 | headers: {
38 | 'Content-Type': 'application/json',
39 | },
40 | body: JSON.stringify(req),
41 | })
42 | .then((data: Response) => data.json())
43 | .then((data) => {
44 | if (data == 'success') {
45 | props.setArgo(true); //need to check what data we will get back
46 | props.setUrl(true);
47 | }
48 | // window.location.reload();
49 | });
50 | };
51 |
52 | //waiting for BE to finish gittoken logic
53 | const handleGitSubmit = (e: React.FormEvent) => {
54 | e.preventDefault();
55 |
56 | const req = { gitToken: gitTokenValue, githubId: gitUser };
57 |
58 | fetch('server/api/gitToken', {
59 | method: 'POST',
60 | headers: {
61 | 'Content-Type': 'application/json',
62 | },
63 | body: JSON.stringify(req),
64 | })
65 | .then((data: Response) => data.json())
66 | .then((data) => {
67 | console.log('set git data: ', data);
68 | if (data) {
69 | props.setGit(true);
70 | }
71 | // window.location.reload();
72 | });
73 | };
74 |
75 | return (
76 |
77 |
78 |
79 |
80 |
Argo
81 |
82 |
83 |
119 |
120 |
121 | {/*
122 |
127 |
*/}
128 |
31 | 
41 | 
45 | 
55 | Make sure that nginx url is same as github callback url.
56 | Since the nginx is only point of entry
57 | ### After you are done with steps above
58 | run these lines of command to build and start your docker-container
59 |
60 | npm run Aionic-build-dev
61 | this command will build Aionic container images
62 |
63 | npm run Aionic-up-dev
64 | this will start Aionic container
65 |
66 | To Stop the container ctrl + C
67 |
68 | npm run Aionic-down-dev
69 |
70 | this will completely stop the container
71 |
72 | 
78 | 
82 | 
](https://www.linkedin.com/in/nmlui/) [
](https://github.com/nathanmlui) | [