diff --git a/plugins/opencost/README.md b/plugins/opencost/README.md index fbc923f37d..4c9d721efb 100644 --- a/plugins/opencost/README.md +++ b/plugins/opencost/README.md @@ -4,6 +4,8 @@ Welcome to the [OpenCost](https://opencost.io) plugin! Currently this is a port of the [OpenCost UI](https://github.com/opencost/opencost/tree/develop/ui), but we will continue to expand it to expose any relevant data or pre-configured views that may be preferred. +All of the code was originally ported from https://github.com/opencost/opencost/blob/develop/ui/ which is under by the Apache v2 License and also managed by the CNCF. + ## Installation 1. Add the OpenCost dependency to the `packages/app/package.json`: diff --git a/plugins/opencost/src/components/AllocationChart/RangeChart.js b/plugins/opencost/src/components/AllocationChart/RangeChart.js index 3410ad24ad..bacb255daa 100644 --- a/plugins/opencost/src/components/AllocationChart/RangeChart.js +++ b/plugins/opencost/src/components/AllocationChart/RangeChart.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; import { makeStyles } from '@material-ui/styles'; diff --git a/plugins/opencost/src/components/AllocationChart/SummaryChart.js b/plugins/opencost/src/components/AllocationChart/SummaryChart.js index 61625e151e..e73359e857 100644 --- a/plugins/opencost/src/components/AllocationChart/SummaryChart.js +++ b/plugins/opencost/src/components/AllocationChart/SummaryChart.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts' import { primary, greyscale, browns } from '../../constants/colors'; @@ -9,8 +25,8 @@ function toPieData(top, other, idle) { for (const i in top) { const allocation = top[i] const fill = allocation.name === "__unallocated__" - ? "#212121" - : primary[i % primary.length] + ? "#212121" + : primary[i % primary.length] slices.push({ name: allocation.name, @@ -78,19 +94,19 @@ const SummaryChart = ({ top, other, idle, currency, height }) => { label={renderLabel} labelLine // niko: if tooltips error, try disabling animation - // isAnimationActive={false} - animationDuration={400} - cy="90%" - outerRadius="140%" - innerRadius="60%" - startAngle={180} - endAngle={0} + // isAnimationActive={false} + animationDuration={400} + cy="90%" + outerRadius="140%" + innerRadius="60%" + startAngle={180} + endAngle={0} > - {pieData.map((datum, i) => )} + {pieData.map((datum, i) => )} - ) -} + ) + } -export default SummaryChart + export default SummaryChart diff --git a/plugins/opencost/src/components/AllocationChart/index.js b/plugins/opencost/src/components/AllocationChart/index.js index a54cea13ec..8c6f5350f6 100644 --- a/plugins/opencost/src/components/AllocationChart/index.js +++ b/plugins/opencost/src/components/AllocationChart/index.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import { isArray, filter, map, reduce, reverse, sortBy } from 'lodash' diff --git a/plugins/opencost/src/components/AllocationReport.js b/plugins/opencost/src/components/AllocationReport.js index 7447c05b35..9aad66c901 100644 --- a/plugins/opencost/src/components/AllocationReport.js +++ b/plugins/opencost/src/components/AllocationReport.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React, { useEffect, useState } from 'react' import { get, round } from 'lodash' import { makeStyles } from '@material-ui/styles'; diff --git a/plugins/opencost/src/components/Controls/Download.js b/plugins/opencost/src/components/Controls/Download.js index ae111376f6..35493b927b 100644 --- a/plugins/opencost/src/components/Controls/Download.js +++ b/plugins/opencost/src/components/Controls/Download.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import { get, forEach, reverse, round, sortBy } from 'lodash' import ExportIcon from '@material-ui/icons/GetApp' diff --git a/plugins/opencost/src/components/Controls/Edit.js b/plugins/opencost/src/components/Controls/Edit.js index 2054672518..9dcd664e50 100644 --- a/plugins/opencost/src/components/Controls/Edit.js +++ b/plugins/opencost/src/components/Controls/Edit.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { makeStyles } from '@material-ui/styles'; import FormControl from '@material-ui/core/FormControl' import InputLabel from '@material-ui/core/InputLabel' diff --git a/plugins/opencost/src/components/Controls/index.js b/plugins/opencost/src/components/Controls/index.js index fe687e51be..f5ea994e33 100644 --- a/plugins/opencost/src/components/Controls/index.js +++ b/plugins/opencost/src/components/Controls/index.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import DownloadControl from './Download' import EditControl from './Edit' diff --git a/plugins/opencost/src/components/Details.js b/plugins/opencost/src/components/Details.js index 9cc45d0913..ff09336f97 100644 --- a/plugins/opencost/src/components/Details.js +++ b/plugins/opencost/src/components/Details.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React, { memo, useEffect, useState } from 'react'; import { forEach, get, reverse, round, sortBy } from 'lodash'; import CircularProgress from '@material-ui/core/CircularProgress'; diff --git a/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx b/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx index 0f25d72f3d..e85c2ccae6 100644 --- a/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx +++ b/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + // code ported from https://github.com/opencost/opencost/blob/develop/ui/src/Reports.js import React, { useEffect, useState } from 'react' diff --git a/plugins/opencost/src/components/Page.js b/plugins/opencost/src/components/Page.js index 6dfe640ac4..9d5af515d0 100644 --- a/plugins/opencost/src/components/Page.js +++ b/plugins/opencost/src/components/Page.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { makeStyles } from '@material-ui/styles' import React from 'react' diff --git a/plugins/opencost/src/components/SelectWindow.js b/plugins/opencost/src/components/SelectWindow.js index 32957838c1..3fd2ec8fca 100644 --- a/plugins/opencost/src/components/SelectWindow.js +++ b/plugins/opencost/src/components/SelectWindow.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React, { useEffect, useState } from 'react' import { makeStyles } from '@material-ui/styles' import { endOfDay, startOfDay } from 'date-fns' @@ -34,61 +50,61 @@ const useStyles = makeStyles({ const SelectWindow = ({ windowOptions, window, setWindow }) => { const classes = useStyles() const [anchorEl, setAnchorEl] = useState(null) - + const [startDate, setStartDate] = useState(null) const [endDate, setEndDate] = useState(null) const [intervalString, setIntervalString] = useState(null) - + const handleClick = (event) => { setAnchorEl(event.currentTarget) } - + const handleClose = () => { setAnchorEl(null) } - + const handleStartDateChange = (date) => { if (isValid(date)) { setStartDate(startOfDay(date)) } } - + const handleEndDateChange = (date) => { if (isValid(date)) { setEndDate(endOfDay(date)) } } - + const handleSubmitPresetDates = (dateString) => { setWindow(dateString) setStartDate(null) setEndDate(null) handleClose() } - + const handleSubmitCustomDates = () => { if (intervalString !== null) { setWindow(intervalString) handleClose() } } - + useEffect(() => { if (startDate !== null && endDate !== null) { // Note: getTimezoneOffset() is calculated based on current system locale, NOT date object let adjustedStartDate = new Date(startDate - startDate.getTimezoneOffset() * 60000) let adjustedEndDate = new Date(endDate - endDate.getTimezoneOffset() * 60000) setIntervalString( - adjustedStartDate.toISOString().split('.')[0] + "Z" - + "," + adjustedStartDate.toISOString().split('.')[0] + "Z" + + "," + adjustedEndDate.toISOString().split('.')[0] + "Z" ) } }, [startDate, endDate]) - + const open = Boolean(anchorEl) const id = open ? 'date-range-popover' : undefined - + return ( <> @@ -156,9 +172,9 @@ const SelectWindow = ({ windowOptions, window, setWindow }) => { />
-
- {windowOptions.map(opt => + {windowOptions.map(opt => { ) } - export default React.memo(SelectWindow) \ No newline at end of file + export default React.memo(SelectWindow) diff --git a/plugins/opencost/src/components/Subtitle.js b/plugins/opencost/src/components/Subtitle.js index 44a26f3a75..1c7affb8b7 100644 --- a/plugins/opencost/src/components/Subtitle.js +++ b/plugins/opencost/src/components/Subtitle.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import { makeStyles } from '@material-ui/styles' import { upperFirst } from 'lodash' diff --git a/plugins/opencost/src/components/Warnings.js b/plugins/opencost/src/components/Warnings.js index 967fc6fde8..5cb3ccfdd6 100644 --- a/plugins/opencost/src/components/Warnings.js +++ b/plugins/opencost/src/components/Warnings.js @@ -1,3 +1,19 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react' import { makeStyles } from '@material-ui/styles' import List from '@material-ui/core/List'