@red-hat-developer-hub/plugin-cost-management 2.0.3-rc.4

package/dist/pages/optimizations/OptimizationsPage.esm.js

@@ -0,0 +1,205 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import snakeCase from 'lodash/snakeCase';
+import { Link, ResponseErrorPanel, Table } from '@backstage/core-components';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { PageLayout } from '../../components/PageLayout.esm.js';
+import { TableToolbar } from './components/TableToolbar.esm.js';
+import { Filters } from './components/Filters.esm.js';
+import { BasePage } from '../../components/BasePage.esm.js';
+import { optimizationsBreakdownRouteRef } from '../../routes.esm.js';
+import { getTimeFromNow } from '../../utils/dates.esm.js';
+import { optimizationsApiRef } from '../../apis.esm.js';
+
+const DEFAULT_DEBOUNCE_INTERVAL = 700;
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const DEFAULT_SORTING_DIRECTION = "desc";
+const DEFAULT_SORTING_COLUMN = "last_reported";
+const DEFAULT_PADDING = "dense";
+const initialQueryState = {
+  limit: DEFAULT_PAGE_SIZE_OPTIONS[0],
+  offset: 0,
+  orderBy: DEFAULT_SORTING_COLUMN,
+  orderHow: DEFAULT_SORTING_DIRECTION
+};
+const availableFilteringOptionsInitialState = {
+  cluster: [],
+  project: [],
+  workload: [],
+  workloadType: []
+};
+function OptimizationsPage() {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [queryState, setQueryState] = useState(initialQueryState);
+  const api = useApi(optimizationsApiRef);
+  const { value, error, loading } = useAsync(async () => {
+    const response = await api.getRecommendationList({ query: queryState });
+    return response.json();
+  }, [queryState]);
+  const columns = useMemo(
+    () => [
+      {
+        title: "Container",
+        field: "container",
+        render: (data2) => {
+          const link = useRouteRef(optimizationsBreakdownRouteRef);
+          return React.createElement(Link, {
+            to: link({ id: data2.id }),
+            children: data2.container
+          });
+        }
+      },
+      {
+        title: "Project",
+        field: "project"
+      },
+      {
+        title: "Workload",
+        field: "workload"
+      },
+      {
+        title: "Type",
+        field: "workloadType"
+      },
+      {
+        title: "Cluster",
+        field: "clusterAlias"
+      },
+      {
+        title: "Last reported",
+        field: "lastReported",
+        render(data2, _type) {
+          return getTimeFromNow(data2.lastReported?.toString());
+        }
+      }
+    ],
+    []
+  );
+  const optimizableContainersCount = useMemo(
+    () => value?.meta?.count ?? 0,
+    [value?.meta?.count]
+  );
+  const data = useMemo(() => value?.data ?? [], [value?.data]);
+  const handlePageChange = useCallback(
+    (pageNumber, pageSize) => {
+      setCurrentPage(pageNumber);
+      setQueryState((lastQueryState) => ({
+        ...lastQueryState,
+        offset: pageNumber * pageSize,
+        limit: pageSize
+      }));
+    },
+    []
+  );
+  const handleRowsPerPageChange = useCallback((pageSize) => {
+    setQueryState((lastState) => ({
+      ...lastState,
+      offset: (lastState.offset ?? 0) * pageSize,
+      limit: pageSize
+    }));
+  }, []);
+  const handleOrderChange = useCallback(
+    (orderBy, orderDirection) => {
+      const { field } = columns[orderBy];
+      setQueryState((lastState) => ({
+        ...lastState,
+        orderBy: field === "clusterAlias" ? "cluster" : snakeCase(field),
+        orderHow: orderDirection
+      }));
+    },
+    [columns]
+  );
+  const handleFiltersChange = useCallback(
+    (fieldId, values) => {
+      setQueryState((lastQueryState) => ({
+        ...lastQueryState,
+        offset: 0,
+        [fieldId]: values
+      }));
+      setCurrentPage(0);
+    },
+    []
+  );
+  const handleFiltersReset = useCallback(() => {
+    if (queryState.cluster?.length === 0 && queryState.project?.length === 0 && queryState.workload?.length === 0 && queryState.workloadType?.length === 0) {
+      return;
+    }
+    setQueryState((lastQueryState) => ({
+      ...lastQueryState,
+      ...availableFilteringOptionsInitialState
+    }));
+  }, [
+    queryState.cluster?.length,
+    queryState.project?.length,
+    queryState.workload?.length,
+    queryState.workloadType?.length
+  ]);
+  const handleSearchChange = useCallback((searchText) => {
+    setQueryState((lastState) => ({
+      ...lastState,
+      container: Array.from(new Set(searchText.split(",").filter(Boolean)))
+    }));
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
+  return /* @__PURE__ */ React.createElement(BasePage, { pageTitle: "Resource Optimization", withContentPadding: true }, /* @__PURE__ */ React.createElement(PageLayout, null, /* @__PURE__ */ React.createElement(PageLayout.Filters, null, /* @__PURE__ */ React.createElement(
+    Filters,
+    {
+      cluster: {
+        options: [],
+        label: "CLUSTERS"
+      },
+      project: {
+        options: [],
+        label: "PROJECTS"
+      },
+      workload: {
+        options: [],
+        label: "WORKLOADS"
+      },
+      workloadType: {
+        options: [],
+        label: "TYPES"
+      },
+      onFiltersChange: handleFiltersChange,
+      onFiltersReset: handleFiltersReset
+    }
+  )), /* @__PURE__ */ React.createElement(PageLayout.Table, null, /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      components: {
+        Toolbar: TableToolbar
+      },
+      title: `Optimizable containers (${optimizableContainersCount ?? "N/A"})`,
+      options: {
+        debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,
+        padding: DEFAULT_PADDING,
+        pageSize: queryState.limit,
+        pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+        paging: true,
+        search: true,
+        sorting: true,
+        thirdSortClick: false
+      },
+      localization: {
+        toolbar: {
+          searchPlaceholder: "Search container name"
+        }
+      },
+      data,
+      columns,
+      isLoading: loading,
+      totalCount: optimizableContainersCount,
+      page: currentPage,
+      onPageChange: handlePageChange,
+      onRowsPerPageChange: handleRowsPerPageChange,
+      onOrderChange: handleOrderChange,
+      onSearchChange: handleSearchChange
+    }
+  ))));
+}
+OptimizationsPage.displayName = "OptimizationsPage";
+
+export { DEFAULT_DEBOUNCE_INTERVAL, DEFAULT_PADDING, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SORTING_COLUMN, DEFAULT_SORTING_DIRECTION, OptimizationsPage };
+//# sourceMappingURL=OptimizationsPage.esm.js.map

package/dist/pages/optimizations/OptimizationsPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptimizationsPage.esm.js","sources":["../../../src/pages/optimizations/OptimizationsPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport snakeCase from 'lodash/snakeCase';\nimport {\n  Link,\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport type { Recommendations } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport type { GetRecommendationListRequest } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TableToolbar } from './components/TableToolbar';\nimport { Filters } from './components/Filters';\nimport { BasePage } from '../../components/BasePage';\nimport { optimizationsBreakdownRouteRef } from '../../routes';\nimport { getTimeFromNow } from '../../utils/dates';\nimport { optimizationsApiRef } from '../../apis';\n\nexport const DEFAULT_DEBOUNCE_INTERVAL: number = 700;\nexport const DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 20, 50, 100];\nexport const DEFAULT_SORTING_DIRECTION: GetRecommendationListRequest['query']['orderHow'] =\n  'desc';\nexport const DEFAULT_SORTING_COLUMN: GetRecommendationListRequest['query']['orderBy'] =\n  'last_reported';\nexport const DEFAULT_PADDING: 'dense' | 'default' = 'dense';\n\n/** This type actually represents what's going to be sent to the back-end. */\ntype QueryState = Omit<\n  GetRecommendationListRequest['query'],\n  'startDate' | 'endDate'\n>;\n\ntype AvailableFilteringOptions = Pick<\n  QueryState,\n  'cluster' | 'project' | 'workload' | 'workloadType'\n>;\n\nconst initialQueryState: QueryState = {\n  limit: DEFAULT_PAGE_SIZE_OPTIONS[0],\n  offset: 0,\n  orderBy: DEFAULT_SORTING_COLUMN,\n  orderHow: DEFAULT_SORTING_DIRECTION,\n};\n\nconst availableFilteringOptionsInitialState: AvailableFilteringOptions = {\n  cluster: [],\n  project: [],\n  workload: [],\n  workloadType: [],\n};\n\n/** @public */\nexport function OptimizationsPage() {\n  const [currentPage, setCurrentPage] = useState<number>(0); // First page starts from 0\n  const [queryState, setQueryState] = useState<QueryState>(initialQueryState);\n  const api = useApi(optimizationsApiRef);\n  const { value, error, loading } = useAsync(async () => {\n    const response = await api.getRecommendationList({ query: queryState });\n    return response.json();\n  }, [queryState]);\n\n  const columns = useMemo<TableColumn<Recommendations>[]>(\n    () => [\n      {\n        title: 'Container',\n        field: 'container',\n        render: data => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          const link = useRouteRef(optimizationsBreakdownRouteRef);\n          return React.createElement(Link, {\n            to: link({ id: data.id! }),\n            children: data.container,\n          });\n        },\n      },\n      {\n        title: 'Project',\n        field: 'project',\n      },\n      {\n        title: 'Workload',\n        field: 'workload',\n      },\n      {\n        title: 'Type',\n        field: 'workloadType',\n      },\n      {\n        title: 'Cluster',\n        field: 'clusterAlias',\n      },\n      {\n        title: 'Last reported',\n        field: 'lastReported',\n        render(data, _type) {\n          return getTimeFromNow(data.lastReported?.toString());\n        },\n      },\n    ],\n    [],\n  );\n  const optimizableContainersCount = useMemo(\n    () => value?.meta?.count ?? 0,\n    [value?.meta?.count],\n  );\n  const data = useMemo(() => value?.data ?? [], [value?.data]);\n\n  const handlePageChange = useCallback(\n    (pageNumber: number, pageSize: number): void => {\n      setCurrentPage(pageNumber);\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: pageNumber * pageSize,\n        limit: pageSize,\n      }));\n    },\n    [],\n  );\n\n  const handleRowsPerPageChange = useCallback((pageSize: number): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      offset: (lastState.offset ?? 0) * pageSize,\n      limit: pageSize,\n    }));\n  }, []);\n\n  const handleOrderChange = useCallback(\n    (orderBy: number, orderDirection: 'desc' | 'asc'): void => {\n      const { field } = columns[orderBy];\n      setQueryState(lastState => ({\n        ...lastState,\n        orderBy:\n          field === 'clusterAlias'\n            ? 'cluster'\n            : (snakeCase(field as string) as NonNullable<\n                typeof lastState.orderBy\n              >),\n        orderHow: orderDirection as NonNullable<typeof lastState.orderHow>,\n      }));\n    },\n    [columns],\n  );\n\n  const handleFiltersChange = useCallback(\n    (\n      fieldId: 'cluster' | 'workloadType' | 'workload' | 'project',\n      values: string[],\n    ): void => {\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: 0,\n        [fieldId]: values,\n      }));\n      setCurrentPage(0);\n    },\n    [],\n  );\n\n  const handleFiltersReset = useCallback((): void => {\n    if (\n      queryState.cluster?.length === 0 &&\n      queryState.project?.length === 0 &&\n      queryState.workload?.length === 0 &&\n      queryState.workloadType?.length === 0\n    ) {\n      return;\n    }\n\n    setQueryState(lastQueryState => ({\n      ...lastQueryState,\n      ...availableFilteringOptionsInitialState,\n    }));\n  }, [\n    queryState.cluster?.length,\n    queryState.project?.length,\n    queryState.workload?.length,\n    queryState.workloadType?.length,\n  ]);\n\n  const handleSearchChange = useCallback((searchText: string): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      container: Array.from(new Set(searchText.split(',').filter(Boolean))),\n    }));\n  }, []);\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <BasePage pageTitle=\"Resource Optimization\" withContentPadding>\n      <PageLayout>\n        <PageLayout.Filters>\n          <Filters\n            cluster={{\n              options: [],\n              label: 'CLUSTERS',\n            }}\n            project={{\n              options: [],\n              label: 'PROJECTS',\n            }}\n            workload={{\n              options: [],\n              label: 'WORKLOADS',\n            }}\n            workloadType={{\n              options: [],\n              label: 'TYPES',\n            }}\n            onFiltersChange={handleFiltersChange}\n            onFiltersReset={handleFiltersReset}\n          />\n        </PageLayout.Filters>\n        <PageLayout.Table>\n          <Table<Recommendations>\n            components={{\n              Toolbar: TableToolbar,\n            }}\n            title={`Optimizable containers (${\n              optimizableContainersCount ?? 'N/A'\n            })`}\n            options={{\n              debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,\n              padding: DEFAULT_PADDING,\n              pageSize: queryState.limit,\n              pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,\n              paging: true,\n              search: true,\n              sorting: true,\n              thirdSortClick: false,\n            }}\n            localization={{\n              toolbar: {\n                searchPlaceholder: 'Search container name',\n              },\n            }}\n            data={data}\n            columns={columns}\n            isLoading={loading}\n            totalCount={optimizableContainersCount}\n            page={currentPage}\n            onPageChange={handlePageChange}\n            onRowsPerPageChange={handleRowsPerPageChange}\n            onOrderChange={handleOrderChange}\n            onSearchChange={handleSearchChange}\n          />\n        </PageLayout.Table>\n      </PageLayout>\n    </BasePage>\n  );\n}\nOptimizationsPage.displayName = 'OptimizationsPage';\n"],"names":["data"],"mappings":"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"}

package/dist/pages/optimizations/components/ComboBox.esm.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Box from '@material-ui/core/Box';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Autocomplete } from '@material-ui/lab';
+
+const FixedWidthFormControlLabel = withStyles(
+  (_theme) => ({
+    label: {
+      width: "100%"
+    },
+    root: {
+      width: "90%"
+    }
+  }),
+  { name: "FixedWidthFormControlLabel" }
+)(FormControlLabel);
+const useComboBoxStyles = makeStyles(
+  {
+    root: {},
+    label: {},
+    input: {},
+    fullWidth: { width: "100%" },
+    boxLabel: {
+      width: "100%",
+      textOverflow: "ellipsis",
+      overflow: "hidden"
+    }
+  },
+  {
+    name: "ComboBox"
+  }
+);
+function ComboBox(props) {
+  const classes = useComboBoxStyles();
+  const [_text, setText] = useState("");
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, props.label), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      ...props,
+      disableCloseOnSelect: props.multiple,
+      includeInputInList: true,
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "expand-icon" }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          className: classes.input,
+          onChange: (e) => {
+            setText(e.currentTarget.value);
+          },
+          variant: "outlined"
+        }
+      ),
+      renderOption: (option, { selected }) => !props.freeSolo ? /* @__PURE__ */ React.createElement(Box, { className: classes.fullWidth }, /* @__PURE__ */ React.createElement(
+        FixedWidthFormControlLabel,
+        {
+          className: classes.fullWidth,
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
+              checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
+              checked: selected
+            }
+          ),
+          onClick: (event) => event.preventDefault(),
+          label: /* @__PURE__ */ React.createElement(Tooltip, { title: option }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(Box, { className: classes.boxLabel }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, props.title))))
+        }
+      )) : option,
+      size: "small"
+    }
+  ));
+}
+
+export { ComboBox };
+//# sourceMappingURL=ComboBox.esm.js.map

package/dist/pages/optimizations/components/ComboBox.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.esm.js","sources":["../../../../src/pages/optimizations/components/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Box from '@material-ui/core/Box';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete, AutocompleteProps } from '@material-ui/lab';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst useComboBoxStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  {\n    name: 'ComboBox',\n  },\n);\n\ntype ExcludedAutocompleteProps =\n  | 'clearOnEscape'\n  | 'disableCloseOnSelect'\n  | 'includeInputInList'\n  | 'size'\n  | 'popupIcon'\n  | 'renderInput'\n  | 'renderOption';\n\ntype ComboBoxProps<\n  T,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n> = Omit<\n  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,\n  ExcludedAutocompleteProps\n> & {\n  label: string;\n};\n\n/** @public */\nexport function ComboBox<\n  T extends string,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n>(props: ComboBoxProps<T, Multiple, DisableClearable, FreeSolo>) {\n  const classes = useComboBoxStyles();\n  const [_text, setText] = useState('');\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {props.label}\n      </Typography>\n      <Autocomplete<T, Multiple, DisableClearable, FreeSolo>\n        {...props}\n        disableCloseOnSelect={props.multiple}\n        includeInputInList\n        popupIcon={<ExpandMoreIcon data-testid=\"expand-icon\" />}\n        renderInput={params => (\n          <TextField\n            {...params}\n            className={classes.input}\n            onChange={e => {\n              setText(e.currentTarget.value);\n            }}\n            variant=\"outlined\"\n          />\n        )}\n        renderOption={(option, { selected }) =>\n          !props.freeSolo ? (\n            <Box className={classes.fullWidth}>\n              <FixedWidthFormControlLabel\n                className={classes.fullWidth}\n                control={\n                  <Checkbox\n                    icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                    checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                    checked={selected}\n                  />\n                }\n                onClick={event => event.preventDefault()}\n                label={\n                  <Tooltip title={option}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      <Box className={classes.boxLabel}>\n                        <Typography noWrap>{props.title}</Typography>\n                      </Box>\n                    </Box>\n                  </Tooltip>\n                }\n              />\n            </Box>\n          ) : (\n            option\n          )\n        }\n        size=\"small\"\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/pages/optimizations/components/Filters.esm.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
+import { useBaseFiltersStyles } from '../../../components/filtersStyles.esm.js';
+import { ComboBox } from './ComboBox.esm.js';
+
+const useFiltersStyles = makeStyles(
+  (theme) => ({
+    filters: {
+      "& > *": {
+        marginTop: theme.spacing(2)
+      }
+    }
+  }),
+  { name: "BackstageTableFilters" }
+);
+const filterFieldIds = [
+  "cluster",
+  "project",
+  "workload",
+  "workloadType"
+];
+function Filters(props) {
+  const { onFiltersChange, onFiltersReset, ...filters } = props;
+  const baseClasses = useBaseFiltersStyles();
+  const classes = useFiltersStyles();
+  const [globalKeyId, setGlobalKeyId] = useState(0);
+  return /* @__PURE__ */ React.createElement(Box, { className: baseClasses.root }, /* @__PURE__ */ React.createElement(Box, { className: baseClasses.header }, /* @__PURE__ */ React.createElement(Box, { className: baseClasses.value }, "Filters"), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      onClick: (_) => {
+        onFiltersReset();
+        setGlobalKeyId(globalKeyId + 1);
+      }
+    },
+    "Reset"
+  )), /* @__PURE__ */ React.createElement(Box, { className: `${baseClasses.filters} ${classes.filters}` }, filterFieldIds.map((ffid) => /* @__PURE__ */ React.createElement(
+    ComboBox,
+    {
+      multiple: true,
+      freeSolo: true,
+      selectOnFocus: true,
+      clearOnBlur: true,
+      handleHomeEndKeys: true,
+      filterSelectedOptions: true,
+      key: `${ffid}-${globalKeyId}`,
+      label: filters[ffid].label,
+      options: filters[ffid].options,
+      onChange: (_, values) => {
+        onFiltersChange(ffid, values);
+      }
+    }
+  ))));
+}
+
+export { Filters };
+//# sourceMappingURL=Filters.esm.js.map

package/dist/pages/optimizations/components/Filters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.esm.js","sources":["../../../../src/pages/optimizations/components/Filters.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useBaseFiltersStyles } from '../../../components/filtersStyles';\nimport { ComboBox } from './ComboBox';\n\nconst useFiltersStyles = makeStyles(\n  theme => ({\n    filters: {\n      '& > *': {\n        marginTop: theme.spacing(2),\n      },\n    },\n  }),\n  { name: 'BackstageTableFilters' },\n);\n\nconst filterFieldIds = [\n  'cluster',\n  'project',\n  'workload',\n  'workloadType',\n] as const;\n\n/** @public */\nexport type FiltersProps = {\n  cluster: { label: string; options: string[] };\n  project: { label: string; options: string[] };\n  workload: { label: string; options: string[] };\n  workloadType: { label: string; options: string[] };\n  onFiltersChange: (\n    fieldId: 'cluster' | 'project' | 'workload' | 'workloadType',\n    values: string[],\n  ) => void;\n  onFiltersReset: () => void;\n};\n\n/** @public */\nexport function Filters(props: FiltersProps) {\n  const { onFiltersChange, onFiltersReset, ...filters } = props;\n  const baseClasses = useBaseFiltersStyles();\n  const classes = useFiltersStyles();\n  const [globalKeyId, setGlobalKeyId] = useState(0); // Used for reseting the ComboBoxes internal state\n\n  return (\n    <Box className={baseClasses.root}>\n      <Box className={baseClasses.header}>\n        <Box className={baseClasses.value}>Filters</Box>\n        <Button\n          color=\"primary\"\n          onClick={(_): void => {\n            onFiltersReset();\n            setGlobalKeyId(globalKeyId + 1);\n          }}\n        >\n          Reset\n        </Button>\n      </Box>\n      <Box className={`${baseClasses.filters} ${classes.filters}`}>\n        {filterFieldIds.map(ffid => (\n          <ComboBox\n            multiple\n            freeSolo\n            selectOnFocus\n            clearOnBlur\n            handleHomeEndKeys\n            filterSelectedOptions\n            key={`${ffid}-${globalKeyId}`}\n            label={filters[ffid].label}\n            options={filters[ffid].options}\n            onChange={(_, values): void => {\n              onFiltersChange(ffid, values);\n            }}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAU,KAAA,MAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC5B;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,uBAAwB;AAClC,CAAA;AAEA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA;AAgBO,SAAS,QAAQ,KAAqB,EAAA;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAgB,EAAA,GAAG,SAAY,GAAA,KAAA;AACxD,EAAA,MAAM,cAAc,oBAAqB,EAAA;AACzC,EAAA,MAAM,UAAU,gBAAiB,EAAA;AACjC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,2CACG,GAAI,EAAA,EAAA,SAAA,EAAW,WAAY,CAAA,IAAA,EAAA,sCACzB,GAAI,EAAA,EAAA,SAAA,EAAW,WAAY,CAAA,MAAA,EAAA,sCACzB,GAAI,EAAA,EAAA,SAAA,EAAW,WAAY,CAAA,KAAA,EAAA,EAAO,SAAO,CAC1C,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAA,EAAS,CAAC,CAAY,KAAA;AACpB,QAAe,cAAA,EAAA;AACf,QAAA,cAAA,CAAe,cAAc,CAAC,CAAA;AAAA;AAChC,KAAA;AAAA,IACD;AAAA,GAGH,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,WAAW,CAAG,EAAA,WAAA,CAAY,OAAO,CAAA,CAAA,EAAI,OAAQ,CAAA,OAAO,CACtD,CAAA,EAAA,EAAA,cAAA,CAAe,IAAI,CAClB,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,QAAQ,EAAA,IAAA;AAAA,MACR,aAAa,EAAA,IAAA;AAAA,MACb,WAAW,EAAA,IAAA;AAAA,MACX,iBAAiB,EAAA,IAAA;AAAA,MACjB,qBAAqB,EAAA,IAAA;AAAA,MACrB,GAAK,EAAA,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,WAAW,CAAA,CAAA;AAAA,MAC3B,KAAA,EAAO,OAAQ,CAAA,IAAI,CAAE,CAAA,KAAA;AAAA,MACrB,OAAA,EAAS,OAAQ,CAAA,IAAI,CAAE,CAAA,OAAA;AAAA,MACvB,QAAA,EAAU,CAAC,CAAA,EAAG,MAAiB,KAAA;AAC7B,QAAA,eAAA,CAAgB,MAAM,MAAM,CAAA;AAAA;AAC9B;AAAA,GAEH,CACH,CACF,CAAA;AAEJ;;;;"}

package/dist/pages/optimizations/components/TableToolbar.esm.js

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { MTableToolbar } from '@material-table/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const StyledMTableToolbar = withStyles(
+  (theme) => ({
+    root: {
+      padding: theme.spacing(3, 0, 2.5, 2.5)
+    },
+    title: {
+      "& > h6": {
+        fontWeight: theme.typography.fontWeightBold
+      }
+    },
+    searchField: {
+      paddingRight: theme.spacing(2)
+    }
+  }),
+  { name: "ResourceOptimizationTableToolbar" }
+)(MTableToolbar);
+function TableToolbar(toolbarProps) {
+  const { toolbarRef, onSearchChanged } = toolbarProps;
+  const handleSearchChanged = useCallback(
+    (searchText) => {
+      onSearchChanged(searchText);
+    },
+    [onSearchChanged]
+  );
+  return /* @__PURE__ */ React.createElement(
+    StyledMTableToolbar,
+    {
+      ...toolbarProps,
+      ref: toolbarRef,
+      onSearchChanged: handleSearchChanged
+    }
+  );
+}
+
+export { TableToolbar };
+//# sourceMappingURL=TableToolbar.esm.js.map

package/dist/pages/optimizations/components/TableToolbar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.esm.js","sources":["../../../../src/pages/optimizations/components/TableToolbar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { MutableRefObject, useCallback } from 'react';\nimport { MTableToolbar } from '@material-table/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst StyledMTableToolbar = withStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(3, 0, 2.5, 2.5),\n    },\n    title: {\n      '& > h6': {\n        fontWeight: theme.typography.fontWeightBold,\n      },\n    },\n    searchField: {\n      paddingRight: theme.spacing(2),\n    },\n  }),\n  { name: 'ResourceOptimizationTableToolbar' },\n)(MTableToolbar);\n\n/**\n * Props for {@link TableToolbar}.\n *\n * @public\n */\nexport interface TableToolbarProps {\n  toolbarRef: MutableRefObject<any>;\n  setSearch: (value: string) => void;\n  onSearchChanged: (value: string) => void;\n  toggleFilters: () => void;\n  selectedFiltersLength: number;\n  showFiltersButton: boolean;\n}\n\n/**\n * Used to override `@backstage/core-components` Table's toolbar.\n *\n * @remarks\n *\n * The Table's built-in toolbar displays a \"Filters\" button to show or hide the table's filters.\n * This button becomes redundant when the table's initial state is set to\n * `{ filtersOpen: true }` which indicates the filters should always be visible.\n *\n * @public\n */\nexport function TableToolbar(toolbarProps: TableToolbarProps) {\n  const { toolbarRef, onSearchChanged } = toolbarProps;\n  const handleSearchChanged = useCallback(\n    (searchText: string) => {\n      onSearchChanged(searchText);\n    },\n    [onSearchChanged],\n  );\n\n  return (\n    <StyledMTableToolbar\n      {...toolbarProps}\n      ref={toolbarRef}\n      onSearchChanged={handleSearchChanged}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAoBA,MAAM,mBAAsB,GAAA,UAAA;AAAA,EAC1B,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,KAAK,GAAG;AAAA,KACvC;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA;AAAA,QACR,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA;AAC/B,KACF;AAAA,IACA,WAAa,EAAA;AAAA,MACX,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC/B,GACF,CAAA;AAAA,EACA,EAAE,MAAM,kCAAmC;AAC7C,CAAA,CAAE,aAAa,CAAA;AA2BR,SAAS,aAAa,YAAiC,EAAA;AAC5D,EAAM,MAAA,EAAE,UAAY,EAAA,eAAA,EAAoB,GAAA,YAAA;AACxC,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,UAAuB,KAAA;AACtB,MAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,eAAiB,EAAA;AAAA;AAAA,GACnB;AAEJ;;;;"}

package/dist/pages/optimizations-breakdown/OptimizationsBreakdownPage.esm.js

@@ -0,0 +1,211 @@
+import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import useAsync from 'react-use/esm/useAsync';
+import { Progress, ResponseErrorPanel, TabbedLayout } from '@backstage/core-components';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { getTimeFromNow } from '../../utils/dates.esm.js';
+import { BasePage } from '../../components/BasePage.esm.js';
+import { OptimizationType } from './models/ChartEnums.esm.js';
+import { OptimizationEngineTab } from './components/optimization-engine-tab/OptimizationEngineTab.esm.js';
+import { getRecommendedYAMLCodeData, getCurrentYAMLCodeData } from './models/YamlCodeData.esm.js';
+import { orchestratorSlimApiRef, optimizationsApiRef } from '../../apis.esm.js';
+
+const getContainerData = (value) => [
+  { key: "Cluster", value: value?.clusterAlias },
+  { key: "Project", value: value?.project },
+  { key: "Workload", value: value?.workload },
+  { key: "Type", value: value?.workloadType },
+  {
+    key: "Last reported",
+    value: getTimeFromNow(value?.lastReported?.toString())
+  }
+];
+const adaptRecommendationsDataToWorkflowInputData = (recommendationData, timeRange, optimizationType) => {
+  if (!recommendationData.clusterAlias || !recommendationData.project || !recommendationData.workloadType || !recommendationData.workload || !recommendationData.container) {
+    throw new Error("Invalid recommendation data");
+  }
+  const workflowInputData = {
+    clusterName: recommendationData.clusterAlias,
+    resourceType: recommendationData.workloadType.toLocaleLowerCase(
+      "en-US"
+    ),
+    resourceNamespace: recommendationData.project,
+    resourceName: recommendationData.workload,
+    containerName: recommendationData.container,
+    containerResources: {}
+  };
+  const config = recommendationData.recommendations?.recommendationTerms?.[timeRange]?.recommendationEngines?.[optimizationType]?.config;
+  if (config && config.limits) {
+    workflowInputData.containerResources.limits = {};
+    if (config.limits.cpu) {
+      workflowInputData.containerResources.limits.cpu = config.limits.cpu.amount;
+    }
+    if (config.limits.memory && typeof config.limits.memory.amount === "number") {
+      workflowInputData.containerResources.limits.memory = Math.round(
+        config.limits.memory.amount * 1024 * 1024
+      );
+    }
+  }
+  if (config && config.requests) {
+    workflowInputData.containerResources.requests = {};
+    if (config.requests.cpu) {
+      workflowInputData.containerResources.requests.cpu = config.requests.cpu.amount;
+    }
+    if (config.requests.memory && typeof config.requests.memory.amount === "number") {
+      workflowInputData.containerResources.requests.memory = Math.round(
+        config.requests.memory.amount * 1024 * 1024
+      );
+    }
+  }
+  return workflowInputData;
+};
+const OptimizationsBreakdownPage = () => {
+  const [recommendationTerm, setRecommendationTerm] = useState("shortTerm");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const configApi = useApi(configApiRef);
+  const workflowIdRef = useRef(
+    configApi.getOptionalString("costManagement.optimizationWorkflowId") ?? ""
+  );
+  const workflowUnavailableReasonRef = useRef(void 0);
+  const workflowErrorMessageRef = useRef(void 0);
+  const orchestratorSlimApi = useApi(orchestratorSlimApiRef);
+  const optimizationsApi = useApi(optimizationsApiRef);
+  const {
+    value: recommendationsData,
+    loading,
+    error
+  } = useAsync(async () => {
+    const availabilityResult = await orchestratorSlimApi.checkWorkflowAvailability(
+      workflowIdRef.current
+    );
+    if (availabilityResult.available) {
+      workflowUnavailableReasonRef.current = void 0;
+      workflowErrorMessageRef.current = void 0;
+    } else {
+      workflowIdRef.current = "";
+      workflowUnavailableReasonRef.current = availabilityResult.reason;
+      workflowErrorMessageRef.current = availabilityResult.errorMessage;
+    }
+    const apiQuery = {
+      path: {
+        recommendationId: id
+      },
+      query: {}
+    };
+    const response = await optimizationsApi.getRecommendationById(apiQuery);
+    return await response.json();
+  }, []);
+  const optimizationType = useMemo(() => {
+    return location.pathname.endsWith("performance") ? OptimizationType.performance : OptimizationType.cost;
+  }, [location.pathname]);
+  const recommendedConfiguration = useMemo(
+    () => getRecommendedYAMLCodeData(
+      recommendationsData,
+      recommendationTerm,
+      optimizationType
+    ),
+    [recommendationsData, recommendationTerm, optimizationType]
+  );
+  const currentConfiguration = useMemo(
+    () => getCurrentYAMLCodeData(recommendationsData),
+    [recommendationsData]
+  );
+  const [applyError, setApplyError] = useState(void 0);
+  const handleApplyRecommendation = useCallback(() => {
+    if (!recommendationsData) {
+      return;
+    }
+    setApplyError(void 0);
+    try {
+      const workflowId = workflowIdRef.current;
+      const data = adaptRecommendationsDataToWorkflowInputData(
+        recommendationsData,
+        recommendationTerm,
+        optimizationType
+      );
+      orchestratorSlimApi.executeWorkflow(workflowId, { inputData: data }).then((response) => {
+        navigate(`/orchestrator/instances/${response.id}`);
+      }).catch((err) => {
+        setApplyError(err instanceof Error ? err : new Error(String(err)));
+      });
+    } catch {
+      return;
+    }
+  }, [
+    navigate,
+    optimizationType,
+    orchestratorSlimApi,
+    recommendationTerm,
+    recommendationsData
+  ]);
+  const handleRecommendationTermChange = useCallback(
+    (event) => {
+      setRecommendationTerm(event.target.value);
+    },
+    []
+  );
+  const containerData = useMemo(
+    () => getContainerData(recommendationsData),
+    [recommendationsData]
+  );
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
+  return /* @__PURE__ */ React.createElement(
+    BasePage,
+    {
+      pageThemeId: "tool",
+      pageTitle: recommendationsData.container,
+      pageType: "Optimizations",
+      pageTypeLink: "/cost-management/optimizations"
+    },
+    applyError && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error: applyError }),
+    /* @__PURE__ */ React.createElement(TabbedLayout, null, /* @__PURE__ */ React.createElement(TabbedLayout.Route, { path: "/cost?", title: "Cost optimizations" }, /* @__PURE__ */ React.createElement(
+      OptimizationEngineTab,
+      {
+        optimizationType: OptimizationType.cost,
+        chartData: recommendationsData,
+        containerData,
+        recommendationTerm,
+        currentConfiguration,
+        recommendedConfiguration,
+        onRecommendationTermChange: handleRecommendationTermChange,
+        onApplyRecommendation: handleApplyRecommendation,
+        workflowId: workflowIdRef.current,
+        workflowUnavailableReason: workflowUnavailableReasonRef.current,
+        workflowErrorMessage: workflowErrorMessageRef.current
+      }
+    )), /* @__PURE__ */ React.createElement(
+      TabbedLayout.Route,
+      {
+        path: "/performance",
+        title: "Performance optimizations"
+      },
+      /* @__PURE__ */ React.createElement(
+        OptimizationEngineTab,
+        {
+          optimizationType: OptimizationType.performance,
+          chartData: recommendationsData,
+          containerData,
+          recommendationTerm,
+          currentConfiguration,
+          recommendedConfiguration,
+          onRecommendationTermChange: handleRecommendationTermChange,
+          onApplyRecommendation: handleApplyRecommendation,
+          workflowId: workflowIdRef.current,
+          workflowUnavailableReason: workflowUnavailableReasonRef.current,
+          workflowErrorMessage: workflowErrorMessageRef.current
+        }
+      )
+    ))
+  );
+};
+OptimizationsBreakdownPage.displayName = "OptimizationsBreakdownPage";
+
+export { OptimizationsBreakdownPage };
+//# sourceMappingURL=OptimizationsBreakdownPage.esm.js.map