+
+ );
+ }
+
+ return null;
+ };
+
+ return (
+ {`Total: ${toCurrency(total, currency)}`}
+ {reverse(payload).map((item, i) => ( +{`${item.name}: ${toCurrency(item.value, currency)}`}
+ ))} +
+
+
+
+
+
+ );
+};
+
+export default React.memo(AllocationReport);
diff --git a/plugins/opencost/src/components/Controls/Download.jsx b/plugins/opencost/src/components/Controls/Download.jsx
new file mode 100644
index 0000000000..727188e5c1
--- /dev/null
+++ b/plugins/opencost/src/components/Controls/Download.jsx
@@ -0,0 +1,110 @@
+/*
+ * 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';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const columns = [
+ {
+ head: 'Name',
+ prop: 'name',
+ currency: false,
+ },
+ {
+ head: 'CPU',
+ prop: 'cpuCost',
+ currency: true,
+ },
+ {
+ head: 'GPU',
+ prop: 'gpuCost',
+ currency: true,
+ },
+ {
+ head: 'RAM',
+ prop: 'ramCost',
+ currency: true,
+ },
+ {
+ head: 'PV',
+ prop: 'pvCost',
+ currency: true,
+ },
+ {
+ head: 'Network',
+ prop: 'networkCost',
+ currency: true,
+ },
+ {
+ head: 'Shared',
+ prop: 'sharedCost',
+ currency: true,
+ },
+ {
+ head: 'Total',
+ prop: 'totalCost',
+ currency: true,
+ },
+];
+
+const toCSVLine = datum => {
+ const cols = [];
+
+ forEach(columns, c => {
+ if (c.currency) {
+ cols.push(round(get(datum, c.prop, 0.0), 2));
+ } else {
+ cols.push(`"${get(datum, c.prop, '')}"`);
+ }
+ });
+
+ return cols.join(',');
+};
+
+const DownloadControl = ({ cumulativeData, title }) => {
+ // downloadReport downloads a CSV of the cumulative allocation data
+ function downloadReport() {
+ // Build CSV
+ const head = columns.map(c => c.head).join(',');
+ const body = reverse(sortBy(cumulativeData, 'totalCost'))
+ .map(toCSVLine)
+ .join('\r\n');
+ const csv = `${head}\r\n${body}`;
+
+ // Create download link
+ const a = document.createElement('a');
+ a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+ const filename = title.toLocaleLowerCase('en-US').replace(/\s/gi, '-');
+ a.setAttribute('download', `${filename}-${Date.now()}.csv`);
+
+ // Click the link
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ }
+
+ return (
+
+
+ Breakdown
+
+
+
+ Resolution
+
+
+
+ Currency
+
+
+
+ );
+}
+
+export default React.memo(EditControl);
diff --git a/plugins/opencost/src/components/Controls/index.jsx b/plugins/opencost/src/components/Controls/index.jsx
new file mode 100644
index 0000000000..c63833a6ab
--- /dev/null
+++ b/plugins/opencost/src/components/Controls/index.jsx
@@ -0,0 +1,57 @@
+/*
+ * 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';
+
+const Controls = ({
+ windowOptions,
+ window,
+ setWindow,
+ aggregationOptions,
+ aggregateBy,
+ setAggregateBy,
+ accumulateOptions,
+ accumulate,
+ setAccumulate,
+ title,
+ cumulativeData,
+ currency,
+ currencyOptions,
+ setCurrency,
+}) => {
+ return (
+
+
+ );
+};
+
+export default React.memo(Controls);
diff --git a/plugins/opencost/src/components/Details.js b/plugins/opencost/src/components/Details.js
new file mode 100644
index 0000000000..5245c9e9fa
--- /dev/null
+++ b/plugins/opencost/src/components/Details.js
@@ -0,0 +1,287 @@
+/*
+ * 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';
+import ClusterIcon from '@material-ui/icons/GroupWork';
+import NodeIcon from '@material-ui/icons/Memory';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Warnings from './Warnings';
+import AllocationService from '../services/allocation';
+import { bytesToString, toCurrency } from '../util';
+
+const Details = ({
+ window,
+ namespace,
+ controllerKind,
+ controller,
+ pod,
+ currency,
+}) => {
+ const [cluster, setCluster] = useState('');
+ const [node, setNode] = useState('');
+
+ const [fetch, setFetch] = useState(true);
+ const [loading, setLoading] = useState(false);
+ const [errors, setErrors] = useState([]);
+ const [rows, setRows] = useState([]);
+
+ useEffect(() => {
+ if (fetch) {
+ setCluster('');
+ setNode('');
+ fetchData();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [fetch]);
+
+ async function fetchData() {
+ setLoading(true);
+ setErrors([]);
+
+ try {
+ const filters = [];
+
+ if (cluster) {
+ filters.push({
+ property: 'cluster',
+ value: cluster,
+ });
+ }
+
+ if (node) {
+ filters.push({
+ property: 'node',
+ value: node,
+ });
+ }
+
+ if (namespace) {
+ filters.push({
+ property: 'namespace',
+ value: namespace,
+ });
+ }
+
+ if (controllerKind) {
+ filters.push({
+ property: 'controllerKind',
+ value: controllerKind,
+ });
+ }
+
+ if (controller) {
+ filters.push({
+ property: 'controller',
+ value: controller,
+ });
+ }
+
+ if (pod) {
+ filters.push({
+ property: 'pod',
+ value: pod,
+ });
+ }
+
+ const resp = await AllocationService.fetchAllocation(window, '', {
+ accumulate: true,
+ });
+
+ let data = [];
+ forEach(resp.data[0], datum => {
+ if (datum.name === '__idle__') {
+ return;
+ }
+
+ if (!cluster) {
+ setCluster(get(datum, 'properties.cluster', ''));
+ }
+
+ if (!node) {
+ setNode(get(datum, 'properties.node', ''));
+ }
+
+ // TODO can we get pod, container back in properties?
+ const names = datum.name.split('/');
+ datum.pod = names[names.length - 2];
+ datum.container = names[names.length - 1];
+
+ datum.hours = round(get(datum, 'minutes', 0.0) / 60.0, 2);
+
+ if (datum.hours > 0) {
+ datum.cpu = round(get(datum, 'cpuCoreHours', 0.0) / datum.hours, 2);
+ datum.cpuCostPerCoreHr = datum.cpuCost / (datum.cpu * datum.hours);
+ if (datum.cpu === 0) {
+ datum.cpuCostPerCoreHr = 0.0;
+ }
+
+ datum.ram = round(get(datum, 'ramByteHours', 0.0) / datum.hours, 2);
+ const ramGiB = datum.ram / 1024 / 1024 / 1024;
+ datum.ramCostPerGiBHr = datum.ramCost / (ramGiB * datum.hours);
+ if (ramGiB === 0) {
+ datum.ramCostPerGiBHr = 0.0;
+ }
+ } else {
+ datum.cpu = 0.0;
+ datum.cpuCostPerCoreHr = 0.0;
+ datum.ram = 0.0;
+ datum.ramCostPerGiBHr = 0.0;
+ }
+
+ data.push(datum);
+ });
+
+ data = reverse(sortBy(data, 'totalCost'));
+
+ setRows(data);
+ } catch (e) {
+ /* eslint no-console: ["error", { allow: ["warn"] }] */
+ console.warn(
+ `Error fetching details for (${controllerKind}, ${controller}):`,
+ e,
+ );
+ setErrors([
+ {
+ primary: 'Error fetching details',
+ secondary: `Tried fetching details for: ${namespace}, ${controllerKind}, ${controller}, ${pod}`,
+ },
+ ]);
+ }
+
+ setLoading(false);
+ setFetch(false);
+ }
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ {!loading && errors.length > 0 && (
+
+
+
+
+
+ );
+};
+
+export default memo(Details);
diff --git a/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
new file mode 100644
index 0000000000..bd60fa0c35
--- /dev/null
+++ b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { Grid } from '@material-ui/core';
+import { Header, Page, Content } from '@backstage/core-components';
+import { OpenCostReport } from '../OpenCostReport';
+
+export const OpenCostPage = () => (
+
+
+ )}
+
+ -
+ {cluster && (
+
})
+
+
+
+ )}
+ {init && (
+
+ setFetch(true)}>
+
+
+ {
+ searchParams.set('window', win);
+ routerNavigate({
+ search: `?${searchParams.toString()}`,
+ });
+ }}
+ aggregationOptions={aggregationOptions}
+ aggregateBy={aggregateBy}
+ // @ts-ignore: implicitly has an 'any' type
+ setAggregateBy={agg => {
+ searchParams.set('agg', agg);
+ routerNavigate({
+ search: `?${searchParams.toString()}`,
+ });
+ }}
+ accumulateOptions={accumulateOptions}
+ accumulate={accumulate}
+ // @ts-ignore: implicitly has an 'any' type
+ setAccumulate={acc => {
+ searchParams.set('acc', acc);
+ routerNavigate({
+ search: `?${searchParams.toString()}`,
+ });
+ }}
+ title={title}
+ cumulativeData={cumulativeData}
+ currency={currency}
+ currencyOptions={currencyCodes}
+ // @ts-ignore: implicitly has an 'any' type
+ setCurrency={curr => {
+ searchParams.set('currency', curr);
+ routerNavigate({
+ search: `?${searchParams.toString()}`,
+ });
+ }}
+ />
+
+
+ {loading && (
+
+ {title}
+
+
+
+
+ )}
+ {!loading && (
+
+
+
+
+ );
+};
+
+export default Page;
diff --git a/plugins/opencost/src/components/SelectWindow.jsx b/plugins/opencost/src/components/SelectWindow.jsx
new file mode 100644
index 0000000000..e374571c00
--- /dev/null
+++ b/plugins/opencost/src/components/SelectWindow.jsx
@@ -0,0 +1,214 @@
+/*
+ * 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-io/luxon';
+import {
+ MuiPickersUtilsProvider,
+ KeyboardDatePicker,
+} from '@material-ui/pickers';
+import Button from '@material-ui/core/Button';
+import LuxonUtils from '@date-io/luxon';
+import FormControl from '@material-ui/core/FormControl';
+import Link from '@material-ui/core/Link';
+import Popover from '@material-ui/core/Popover';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import { isValid } from 'date-fns';
+import { find, get } from 'lodash';
+
+const useStyles = makeStyles({
+ dateContainer: {
+ paddingLeft: 18,
+ paddingRight: 18,
+ paddingTop: 6,
+ paddingBottom: 18,
+ display: 'flex',
+ flexFlow: 'row',
+ },
+ dateContainerColumn: {
+ display: 'flex',
+ flexFlow: 'column',
+ },
+ formControl: {
+ margin: 8,
+ width: 120,
+ },
+});
+
+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
+ const adjustedStartDate = new Date(
+ startDate - startDate.getTimezoneOffset() * 60000,
+ );
+ const adjustedEndDate = new Date(
+ endDate - endDate.getTimezoneOffset() * 60000,
+ );
+ setIntervalString(
+ `${adjustedStartDate.toISOString().split('.')[0]}Z` +
+ `,${adjustedEndDate.toISOString().split('.')[0]}Z`,
+ );
+ }
+ }, [startDate, endDate]);
+
+ const open = Boolean(anchorEl);
+ const id = open ? 'date-range-popover' : undefined;
+
+ return (
+ <>
+
+
+ {props.children}
+
+
+
+
+
+
+
+
+
+
+ {windowOptions.map(opt => (
+
+ handleSubmitPresetDates(opt.value)}
+ >
+ {opt.name}
+
+
+ ))}
+
+
+
+ {toVerboseTimeRange(window)} by {upperFirst(aggregateBy)}
+
+ ) : (
+ {toVerboseTimeRange(window)}
+ )}
+
+
+ );
+};
+
+export default React.memo(Subtitle);
diff --git a/plugins/opencost/src/components/Warnings.jsx b/plugins/opencost/src/components/Warnings.jsx
new file mode 100644
index 0000000000..ae1047ebc2
--- /dev/null
+++ b/plugins/opencost/src/components/Warnings.jsx
@@ -0,0 +1,53 @@
+/*
+ * 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';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Paper from '@material-ui/core/Paper';
+import WarningIcon from '@material-ui/icons/Warning';
+
+const useStyles = makeStyles({
+ root: {},
+});
+
+const Warnings = ({ warnings }) => {
+ const classes = useStyles();
+
+ if (!warnings || warnings.length === 0) {
+ return null;
+ }
+
+ return (
+ -
+ {warnings.map((warn, i) => (
+