-
+ return (
+
+ )
+
+}
+
+ConfigurationCard.propTypes = {
+ name: PropTypes.string.isRequired,
+ file: PropTypes.string.isRequired,
+ setConfiguration: PropTypes.func.isRequired
}
-export default configurationCard;
+export default ConfigurationCard
\ No newline at end of file
diff --git a/frontend/src/components/PackageGeneration/Editor.js b/frontend/src/components/PackageGeneration/Editor.js
index 54bea1e..9c5735c 100644
--- a/frontend/src/components/PackageGeneration/Editor.js
+++ b/frontend/src/components/PackageGeneration/Editor.js
@@ -1,135 +1,90 @@
import React from 'react'
-import Editor from 'react-simple-code-editor';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import './Editor.scss';
+import PropTypes from 'prop-types'
+import { safeDump as yamlDump, safeLoad as yamlRead } from 'js-yaml'
+import ReactSimpleCodeEditor from 'react-simple-code-editor'
+import { highlight, languages } from 'prismjs/components/prism-core'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
import {
- Card, CardText, CardBody,
- CardTitle , Button
-} from 'reactstrap';
-
-const code = `a {
- margin:10px;
-}`;
+ Card,
+ CardText,
+ CardBody,
+ CardTitle,
+ Button
+} from 'reactstrap'
+import './Editor.scss'
+import {API_URL} from '../../config'
// Creates a href element and allows the blob that is passed as data to be saved to the local disk
function saveData(blob, fileName) {
- var a = document.createElement("a");
- document.body.appendChild(a);
- a.style = "display: none";
- var url = window.URL.createObjectURL(blob);
- a.href = url;
- a.download = fileName;
- a.click();
- window.URL.revokeObjectURL(url);
+ let a = document.createElement('a')
+ document.body.appendChild(a)
+ a.style = 'display: none'
+ let url = window.URL.createObjectURL(blob)
+ a.href = url
+ a.download = fileName
+ a.click()
+ window.URL.revokeObjectURL(url)
}
-function getAPIURL () {
- // Use the default API_URL
- console.log("We are calling this function")
- let API_URL = "http://localhost:8080/"
-
- // If environment variable has been set it will override the default
- if (process.env.REACT_APP_API_URL) {
- console.log("Environment variable has been set")
- API_URL = process.env.REACT_APP_API_URL
- }
- console.log(process.env.REACT_APP_API_URL)
- console.log(API_URL)
- return API_URL
-}
-
-class editor extends React.Component {
-
- state = {
- code:'',
- title: '',
- description: '',
- isLoading: true
- }
-
- componentDidMount() {
- this.setTitle()
- this.setDescription()
- }
-
- setTitle() {
- try {
- this.setState({title: JSON.parse(localStorage.getItem("packageConfigJSON"))["bundle"]["title"]})
- } catch (e) {
- this.setState({title: "No title Specified"})
- }
- }
-
- setDescription() {
- try {
- this.setState({description: JSON.parse(localStorage.getItem("packageConfigJSON"))["bundle"]["description"]})
- } catch (e) {
- this.setState({description: "No description specified"})
- }
- }
-
- downloadWarfile() {
- var xhr = new XMLHttpRequest();
- xhr.open("POST", getAPIURL() + 'api/package/downloadWarPackage', true);
- xhr.responseType = "blob";
+const downloadWarfile = (config) => {
+ let xhr = new XMLHttpRequest()
+ xhr.open('POST', `${API_URL}api/package/downloadWarPackage`, true)
+ xhr.responseType = 'blob'
xhr.onload = function () {
- if(xhr.status == 404) {
- alert("This is something wrong with your configuration file. Please fix and try again")
- } else {
- saveData(this.response, 'jenkins.war');
- }
- };
- xhr.send(localStorage.getItem("packageConfigYAML"));
- }
+ if (xhr.status !== 200) {
+ alert('This is something wrong with your configuration file. Please fix and try again')
+ return
+ }
+ saveData(this.response, 'jenkins.war')
+
+ }
+ xhr.send(yamlDump(config))
+}
- downloadPackagerConfig() {
- var xhr = new XMLHttpRequest();
- xhr.open("POST", getAPIURL() + 'api/package/downloadPackageConfiguration', true);
- xhr.responseType = "blob";
+const downloadPackagerConfig = (config) => {
+ let xhr = new XMLHttpRequest()
+ xhr.open('POST', `${API_URL}api/package/downloadPackageConfiguration`, true)
+ xhr.responseType = 'blob'
xhr.onload = function () {
- saveData(this.response, 'casc.yml');
- };
- xhr.send(localStorage.getItem("packageConfigYAML"));
- }
-
-
-
- render() {
- const packageJSON = JSON.parse(localStorage.getItem("packageConfigJSON"))
+ if (xhr.status !== 200) {
+ alert('This is something wrong with your configuration file. Please fix and try again')
+ return
+ }
+ saveData(this.response, 'casc.yml')
+ }
+ xhr.send(yamlDump(config))
+}
- return(
-
+
+
+ Configuration Name: {name}
+
-
-
- )
- }
+
+
+
+
-
- {
- this.setState({code: code})
- localStorage.setItem("packageConfigYAML", code)
- }}
- highlight={code => highlight(code, languages.js)}
- padding={10}
- style={{
- fontFamily: '"Fira code", "Fira Mono", monospace',
- fontSize: 20,
- color: "white"
- }}
- />
-
+export const Editor = ({ config, setConfiguration }) => {
+ return (
+
-
-
-
-
- Packager Details
- Title: {this.state.title}
- Description : {this.state.description}
-
-
-
-
+ {
+ setConfiguration(yamlRead(code))
+ } }
+ highlight={ code => highlight(code, languages.js) }
+ padding={ 10 }
+ />
+
)
+}
- }
+Editor.propTypes = {
+ setConfiguration: PropTypes.func.isRequired,
+ config: PropTypes.object.isRequired
}
-export default editor;
\ No newline at end of file
+export default Editor
\ No newline at end of file
diff --git a/frontend/src/components/PackageGeneration/Editor.scss b/frontend/src/components/PackageGeneration/Editor.scss
index 541916e..31d415c 100644
--- a/frontend/src/components/PackageGeneration/Editor.scss
+++ b/frontend/src/components/PackageGeneration/Editor.scss
@@ -1,17 +1,32 @@
+.Editor {
+ padding: 10px;
+ border-radius: 10px;
+ margin: 0 auto;
- .Editor {
- padding: 20px;
- width: 50%;
- border-radius: 5px;
- color: white;
- background-color: white;
- text-align: center;
-}
+ .EditorEditor {
+ padding: 20px;
+ width: 50%;
+ border-radius: 5px;
+ color: white;
+ background-color: white;
+ text-align: center;
+ font-family: "Fira code", "Fira Mono", monospace;
+ font-size: 20;
+ }
-.column {
- float: left;
- width: 50%;
- padding: 10px;
-}
+ .column {
+ float: left;
+ width: 50%;
+ padding: 10px;
+ }
+ .btn {
+ background-color: var(--theme-button-color);
+ font-size: 25px;
+ margin: 10px;
+ }
+ .card {
+ margin: 10px;
+ }
+}
diff --git a/frontend/src/components/PluginCards/pluginCard.js b/frontend/src/components/PluginCards/pluginCard.js
index eed3734..549fdb6 100644
--- a/frontend/src/components/PluginCards/pluginCard.js
+++ b/frontend/src/components/PluginCards/pluginCard.js
@@ -1,47 +1,44 @@
import React from 'react'
-import './pluginCard.scss'
+import PropTypes from 'prop-types'
import {
Card, CardBody,
CardTitle, CardSubtitle, Button
- } from 'reactstrap';
+} from 'reactstrap'
+import './pluginCard.scss'
-let pluginArray = []
-class PluginCard extends React.Component {
-
- state = {
- backgroundColor: "#185ecc",
- buttonText: "Add to configuration"
- }
-
- constructor(props) {
- super(props)
+const PluginCard = ({ config, setConfiguration, name, version }) => {
+ const addToConfiguration = () => {
+ if (!config.plugins) {
+ config.plugins = []
+ }
+ config.plugins.push({
+ [name]: {
+ version: version
+ }
+ })
+ setConfiguration(config)
}
- addToConfiguration() {
- var version = new Object ();
- version["version"] = this.props.plugin.version;
- var pluginInfo = new Object();
- pluginInfo[this.props.plugin.name] = version;
- console.log("Pushing into plugin Array", pluginInfo[this.props.plugin.name])
- pluginArray.push(pluginInfo)
- localStorage.setItem("pluginsArray", JSON.stringify(pluginArray))
- }
-
- render() {
- return(
-
+
+
+
+
+ Packager Details
+ Title: {config.bundle.title}
+ Description : {config.bundle.description}
+
+
+
+
-
-
- Plugin Name: {this.props.plugin.name}
- Version: {this.props.plugin.version}
-
+
- {pluginCards}
-
- this.clickChild = click} />
-
-
- )
- }
+ {configurationCards}
+
+
+
+ )
+}
+
+CardLayout.defaultProps = {
+ // cardInstanceFunc: (config) =>
- 
-
-
-
-
- )
+ const [isOpen, setIsOpen] = useState(false)
+
+ const toggleNavbar = () => setIsOpen(!isOpen)
+
+ return (
+ <>
+
+
+
+
+
+
+ )
}
diff --git a/frontend/src/components/layouts/PluginsLayout.js b/frontend/src/components/layouts/PluginsLayout.js
new file mode 100644
index 0000000..29e8b94
--- /dev/null
+++ b/frontend/src/components/layouts/PluginsLayout.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import {API_URL} from '../../config'
+import PluginCard from '../PluginCards/pluginCard'
+
+import PropTypes from 'prop-types'
+
+import CardLayout from './CardLayout'
+
+export const PluginsLayout = ({ config, setConfiguration }) => {
+ return (
+
-
+ return (
+
+ )
+}
+
+PluginCard.propTypes = {
+ config: PropTypes.object.isRequired,
+ name: PropTypes.string.isRequired,
+ setConfiguration: PropTypes.func.isRequired,
+ version: PropTypes.string.isRequired,
}
-export default PluginCard;
\ No newline at end of file
+export default PluginCard
\ No newline at end of file
diff --git a/frontend/src/components/PluginCards/pluginCard.scss b/frontend/src/components/PluginCards/pluginCard.scss
index 504e2fe..d04a718 100644
--- a/frontend/src/components/PluginCards/pluginCard.scss
+++ b/frontend/src/components/PluginCards/pluginCard.scss
@@ -1,4 +1,3 @@
.pluginCard {
margin: 5px;
}
-
diff --git a/frontend/src/components/Spinner/Spinner.js b/frontend/src/components/Spinner/Spinner.js
new file mode 100644
index 0000000..cad85fe
--- /dev/null
+++ b/frontend/src/components/Spinner/Spinner.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import {Spinner as BootstrapSpinner} from 'reactstrap'
+
+export const Spinner = () => {
+ return (
+
+
+
+ Plugin Name: {name}
+ Version: {version}
+
-
-
- )
- }
+
+
+
+
-
+
+ )
+}
+export default Spinner
\ No newline at end of file
diff --git a/frontend/src/components/layouts/CardLayout.js b/frontend/src/components/layouts/CardLayout.js
index fb2f322..099647b 100644
--- a/frontend/src/components/layouts/CardLayout.js
+++ b/frontend/src/components/layouts/CardLayout.js
@@ -1,224 +1,214 @@
-import React from 'react'
-import PluginCard from '../PluginCards/pluginCard'
-import { Container, Row, Col} from 'reactstrap';
-import { InputGroup, InputGroupAddon, Button, Input, Label } from 'reactstrap';
-import ModalExample from '../modal';
-import { Pagination, PaginationItem, PaginationLink, Spinner } from 'reactstrap';
-import {RadioGroup, Radio} from 'react-radio-group';
-import querystring from 'querystring';
-
-
-class CardLayout extends React.Component {
-
-
- state = {
- search:"",
- modalShow : false,
- plugins: {},
- pluginsperPage : 10,
- current :1,
- isLoading: true
- }
-
- async componentDidMount() {
- // Use the default API_URL
- let API_URL = "http://localhost:8080/"
-
- // If environment variable has been set it will override the default
- if (process.env.REACT_APP_API_URL) {
- API_URL = process.env.REACT_APP_API_URL
- console.log("Environment variable has been set", API_URL)
+import React, {useState, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import { safeLoad as yamlRead } from 'js-yaml'
+import { Container, Row, Col} from 'reactstrap'
+import {
+ InputGroup,
+ InputGroupAddon,
+ Button,
+ Input,
+ Pagination,
+ PaginationItem,
+ PaginationLink,
+} from 'reactstrap'
+import { RadioGroup, Radio } from 'react-radio-group'
+import querystring from 'querystring'
+
+import Spinner from '../Spinner/Spinner'
+import {GITHUB_COMMUNITY_REPO} from '../../config'
+
+const DEFAULT_SORT_TYPES = [
+ ['relevance', 'Relevance'],
+ ['installed', 'Most installed'],
+ ['trend', 'Trending'],
+ ['title', 'Title'],
+ ['updated', 'Release date']
+]
+
+const DEFAULT_CARDS_PER_PAGE = 10
+
+const CardLayout = ({
+ setConfiguration,
+ sortTypes,
+ cardsPerPage,
+ url,
+ cardInstanceFunc,
+ resultsPrefilter,
+ type
+}) => {
+ const [currentPage, setCurrentPage] = useState(0)
+ const [modalShow, setModalShow] = useState(false)
+ const [isLoading, setIsLoading] = useState(false)
+ const [data, setData] = useState([])
+ const [search, setSearch] = useState('')
+ const [query, setQuery] = useState('')
+
+ useEffect(() => {
+ async function fetchData() {
+ const yamlStr = await fetch(`${url}?${query}`).then((response) => {
+ if (!response.ok) {
+ throw new Error('Something went wrong')
+ }
+ return response.text()
+ })
+ const yaml = resultsPrefilter(yamlRead(yamlStr))
+ setData(yaml)
+ setIsLoading(false)
}
- const response = await fetch(API_URL + 'api/plugin/getPluginList');
- const body = await response.json();
- const mainBody = body["plugins"]
- this.setState({ plugins: mainBody, isLoading: false});
- }
+ setIsLoading(true)
+ fetchData()
+ }, [query, url, resultsPrefilter])
- changeModalState = () => {
- console.log(this.state.modalShow)
- this.setState({modalShow: !this.state.modalShow})
+ const onSearchChange = event => {
+ setSearch(event.target.value)
}
- onchange = pluginName => {
- this.setState({search: pluginName.target.value})
- console.log("Searching Plugins")
+ const changeModalState = () => {
+ setModalShow(!modalShow)
}
-
- changeModalState = () => {
- console.log(this.state.modalShow)
- this.setState({modalShow: !this.state.modalShow})
+
+ // Get current Datas
+ const indexOfFirstData = currentPage * cardsPerPage
+ const indexOfLastData = indexOfFirstData + cardsPerPage
+ const currentData = data.slice(indexOfFirstData, indexOfLastData)
+
+ // Create index array
+ const indexArray = []
+ // Calculate first index
+ let lastIndex = indexOfFirstData / 10 + 1
+
+ let firstIndex = 0
+ if (lastIndex >= 10 ) {
+ firstIndex = lastIndex - 10
+ } else {
+ lastIndex = 9
}
- render () {
- // We need to populate the plugin Array
- let pluginArray = []
- Object.keys(this.state.plugins).map(key => {
- pluginArray.push(this.state.plugins[key])
- });
-
- const search = this.state.search
-
- // Get current plugins
- const indexOfLastPlugin = this.state.current * this.state.pluginsperPage;
- const indexOfFirstPlugin = indexOfLastPlugin - this.state.pluginsperPage;
- const currentPlugins = pluginArray.slice(indexOfFirstPlugin, indexOfLastPlugin)
-
- // Create index array
- const indexArray = []
- // Calculate first index
- let lastIndex = indexOfFirstPlugin / 10 + 1;
-
- let firstIndex = 0;
- if (lastIndex >= 10 ) {
- firstIndex = lastIndex - 10;
- } else {
- lastIndex = 9;
- }
- let counter = 0;
- for (let index = firstIndex + 1; index < lastIndex + 2; index++) {
- indexArray[counter] = index
- counter = counter + 1;
- }
+ let counter = 0
+ for (let index = firstIndex + 1; index < lastIndex + 2; index++) {
+ indexArray[counter] = index
+ counter = counter + 1
+ }
- let pluginCards;
- if (search !== "") {
- pluginCards = pluginArray.map(plugin => {
- if(!(plugin["name"].toLowerCase().indexOf( search.toLowerCase() ) === -1)) {
- return(
-
+
+
+
+
-
-
- )
+ const updatePageWrapper = (num) => {
+ return (e) => {
+ e.preventDefault()
+ setCurrentPage(num)
}
+ }
- const SORT_TYPES = [
- ['relevance', 'Relevance'],
- ['installed', 'Most installed'],
- ['trend', 'Trending'],
- ['title', 'Title'],
- ['updated', 'Release date']
- ];
+ if (isLoading) {
+ return
+ style={ {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ } } >
{/* Filter Buttons */}
- {
- let data = {
- categories: '',
- labels:'',
- page: 1,
- query: 'javascript',
- sort: key
- }
- const {categories, labels, page, query, sort} = data;
- const params = querystring.stringify({
- categories,
- labels,
- page,
- q: query,
- sort
- });
- console.log("Fetching values with key", key)
- const url = `https://plugins.jenkins.io/api/plugins?${params}`
- console.log("URL is ", url)
- const response = await fetch(url);
- const body = await response.json();
- const mainBody = body["plugins"]
- this.setState({plugins: mainBody, isLoading: false})
+ {
+ let data = {
+ categories: '',
+ labels:'',
+ page: 1,
+ query: 'javascript',
+ sort: key
+ }
+ const {categories, labels, page, query, sort} = data
+ setQuery(querystring.stringify({
+ categories,
+ labels,
+ page,
+ q: query,
+ sort
+ }))
} } >
- {SORT_TYPES.map(([key, label]) => (
-
{/* Search Bar */}
-
-
-
-
-
+
+
+
+
+
{/* Pagination Handling (Separate this into a different component later*/}
-
- {this.state.current !== 1 &&
- }
- {this.state.current > 1 &&
- }
- {currentPlugins.map((key, index) => {
- const isCurrent = this.state.current == indexArray[index];
- return (
-
-
- {indexArray[index]}
-
-
- );
- })}
- {this.state.current !== 100 &&
- }
- {this.state.current !== 100 &&
- }
+
+ {currentPage !== 1 &&
+ }
+ {currentPage > 1 &&
+ }
+ {currentData.map((key, index) => {
+ const isCurrent = currentPage === indexArray[index]
+ return (
+
+
+ {indexArray[index]}
+
+
+ )
+ })}
+ {currentPage !== 100 &&
+ }
+ {currentPage !== 100 &&
+ }
-
-
-
+
+
+
-
- Packager Configuration
-
-
-
-
- {this.state.isLoading && }
- {' '}
-
-
-
-
- )
- }
-}
-
-export default ModalExample;
\ No newline at end of file
diff --git a/frontend/src/config.js b/frontend/src/config.js
new file mode 100644
index 0000000..f42b95f
--- /dev/null
+++ b/frontend/src/config.js
@@ -0,0 +1,2 @@
+export const GITHUB_COMMUNITY_REPO = process.env.REACT_APP_GITHUB_COMMUNITY_REPO || 'halkeye/custom-distribution-service-community-configurations'
+export const API_URL = process.env.REACT_APP_API_URL || '/'
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/src/index.js
index b2d81b9..0549ca0 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import 'bootstrap/dist/css/bootstrap.min.css'
import './App.scss'
-import 'bootstrap/dist/css/bootstrap.min.css';
-ReactDOM.render(