Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improving folder structure #33

Open
wants to merge 2 commits into
base: mvp_demo
Choose a base branch
from
Open

Improving folder structure #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
677b3d5
Update the folder structure
ppadti Jul 26, 2023
1186b8f
Change folder structure and delete app.css file
ppadti Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41,754 changes: 41,754 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion src/index.html → public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@

<body>
<noscript>Enabling JavaScript is required to run this app.</noscript>
<div id="root" style="height: 100%"></div>
<div id="root" style="height: 100%">
<!-- <script type="text/javascript" src="SubmitButtonSearchInput.js"></script>
<script type="text/typescript" src="FAQs.tsx"></script> -->
</div>
</body>
</html>
5 changes: 3 additions & 2 deletions src/app/index.tsx → src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { useState } from 'react';
import '@patternfly/react-core/dist/styles/base.css';
import { BrowserRouter as Router } from 'react-router-dom';
import { AppLayout } from '@app/AppLayout/AppLayout';
import { AppRoutes } from '@app/routes';
// import './app.css';
import { AppRoutes } from './routes';
import { AppLayout } from '@app/components/layout/AppLayout/AppLayout';

const App = () => {
return (
Expand Down
0 src/app/Assets/favicon/favicon.png → src/Assets/favicon/favicon.png
View file
Open in desktop
File renamed without changes
0 ...pp/Assets/fonts/RedHatDisplay-Medium.woff → src/Assets/fonts/RedHatDisplay-Medium.woff
View file
Open in desktop
File renamed without changes.
0 ...p/Assets/fonts/RedHatDisplay-Medium.woff2 → src/Assets/fonts/RedHatDisplay-Medium.woff2
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/fonts/RedHatText-Regular.woff → src/Assets/fonts/RedHatText-Regular.woff
View file
Open in desktop
File renamed without changes.
0 ...app/Assets/fonts/RedHatText-Regular.woff2 → src/Assets/fonts/RedHatText-Regular.woff2
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/fonts/overpass-bold.woff → src/Assets/fonts/overpass-bold.woff
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/fonts/overpass-bold.woff2 → src/Assets/fonts/overpass-bold.woff2
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/fonts/overpass-light.woff → src/Assets/fonts/overpass-light.woff
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/fonts/overpass-light.woff2 → src/Assets/fonts/overpass-light.woff2
View file
Open in desktop
File renamed without changes.
0 src/app/Assets/images/Avatar_image.svg → src/Assets/images/Avatar_image.svg
View file
Open in desktop
File renamed without changes
0 ...p/Assets/images/Kubernetes_image copy.png → src/Assets/images/Kubernetes_image copy.png
View file
Open in desktop
File renamed without changes
0 src/app/Assets/images/Kubernetes_image.png → src/Assets/images/Kubernetes_image.png
View file
Open in desktop
File renamed without changes
0 src/app/Assets/images/kruize_icon.png → src/Assets/images/kruize_icon.png
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion src/app/app.test.tsx → src/app.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import App from '@app/index';
import { mount, shallow } from 'enzyme';
import { Button } from '@patternfly/react-core';
import App from './App';

describe('App tests', () => {
test('should render default App component', () => {
Expand Down
0 src/app/ContextStore/EnvState.tsx → ...mponents/common/ContextStore/EnvState.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/ContextStore/nodeContext.ts → ...onents/common/ContextStore/nodeContext.ts
View file
Open in desktop
File renamed without changes.
73 changes: 73 additions & 0 deletions src/app/components/common/KruizeDropdown/KruizeDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';
import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';

class KruizeDropdown extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.options = props.content;

this.dropdownTitle = props.title;

this.state = {
isOpen: false,
isPlain: true,
selected: null
};

this.onToggle = (isOpen) => {
this.setState({
isOpen
});
};

this.onSelect = (event, selection) => {
const { selected } = this.state;
this.setState({
selected: selection,
isOpen: false
});
console.log('selected:', selection);
};

this.clearSelection = () => {
this.setState({
selected: null,
isOpen: false
});
};

this.label = props.label;
}

render() {
const { isOpen, isPlain, selected } = this.state;
const titleId = 'plain-typeahead-select-id';

return (
<div>
<span className="kruize-yaml-form-label kruize-gradient-text-1" id={titleId}>
{this.label}
</span>
<Select
className="small-font"
variant={SelectVariant.single}
onToggle={this.onToggle}
onSelect={this.onSelect}
onClear={this.clearSelection}
selections={selected}
isOpen={isOpen}
isPlain={isPlain}
aria-labelledby={titleId}
placeholderText={this.dropdownTitle}
>
{this.options.map((option, index) => (
<SelectOption key={index} value={option.name} />
))}
</Select>
</div>
);
}
}

export default KruizeDropdown;
11 changes: 6 additions & 5 deletions src/app/AppLayout/AppLayout.tsx → ...components/layout/AppLayout/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@ import {
PageSidebar,
SkipToContent
} from '@patternfly/react-core';
import { routes, IAppRoute, IAppRouteGroup } from '@app/routes';
import HorizontalNav from '@app/HorizontalNav/HorizontalNav';
import EnvState from '@app/ContextStore/EnvState';
import Footer from '@app/Footer/Footer';
import KruizeLogo from '!!url-loader!@app/Assets/images/kruize_icon.png';
import KruizeLogo from '!!url-loader!src/Assets/images/kruize_icon.png';
import { IAppRoute, IAppRouteGroup, routes } from 'src/routes';
import Footer from '../Footer/Footer';
import HorizontalNav from '@app/components/pages/HorizontalNav/HorizontalNav';
import EnvState from '@app/components/common/ContextStore/EnvState';

interface IAppLayout {
children: React.ReactNode;
}
Expand Down
0 src/app/Footer/Footer.tsx → src/app/components/layout/Footer/Footer.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/Footer/FooterTraditional.scss → ...ents/layout/Footer/FooterTraditional.scss
View file
Open in desktop
File renamed without changes.
0 src/app/About/About.tsx → src/app/components/pages/About/About.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/AdvancedUser/LayerDefination.tsx → ...ts/pages/AdvancedUser/LayerDefination.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/AdvancedUser/ObjectiveFunction.tsx → .../pages/AdvancedUser/ObjectiveFunction.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/AdvancedUser/TrialSettings.tsx → ...ents/pages/AdvancedUser/TrialSettings.tsx
View file
Open in desktop
File renamed without changes.
0 ...alytics/SRE_Analytics/MonitoringTable.tsx → ...alytics/SRE_Analytics/MonitoringTable.tsx
View file
Open in desktop
File renamed without changes.
136 changes: 63 additions & 73 deletions ...cs/SRE_Analytics/RecommendationTables.tsx → ...cs/SRE_Analytics/RecommendationTables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
import { TextContent, TextVariants, Flex, FlexItem, FormSelect, FormSelectOption, Text } from '@patternfly/react-core';
import nodeContext from '@app/components/common/ContextStore/nodeContext';
import { duration } from '@material-ui/core';
import {
TextContent,
TextVariants,
Flex,
FlexItem,
FormSelect,
FormSelectOption,
Text,
Form,
FormGroup
} from '@patternfly/react-core';
import { end } from '@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import React, { useEffect, useState } from 'react';
import { getRecommendationsURL, getRecommendationsURLWithParams } from '@app/CentralConfig';
import React, { useContext, useEffect, useState } from 'react';

const WorkloadTable = ({ experimentData }) => {
const columnNames = {
Expand Down Expand Up @@ -62,9 +74,9 @@ const WorkloadTable = ({ experimentData }) => {
const TableShort = ({ parameter }) => {
const columnNames = {
containers: 'Containers',
short_term: 'Short Term',
medium_term: 'Medium Term',
long_term: 'Long Term',
short_term: 'Short Term Recommendations',
medium_term: 'Medium Term Recommendations',
long_term: 'Long Term Recommendations',
cpuRequestS: 'CPU Request',
mmrRequestS: 'Mem Request',
cpuRequestM: 'CPU Request',
Expand Down Expand Up @@ -119,55 +131,29 @@ const TableShort = ({ parameter }) => {
<Td dataLabel={columnNames.containers} textCenter>
{containerName}
</Td>

<Td dataLabel={columnNames.cpuRequestS} textCenter>
{parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.amount !== undefined &&
parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.format !== undefined
? parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.amount.toPrecision(2) +
parameter.dataA[index]?.duration_based?.short_term?.config.requests.cpu.format}{' '}
</Td>

<Td dataLabel={columnNames.mmrRequestS} textCenter>
{parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.amount !== undefined &&
parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.format !== undefined
? parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.amount +
parameter.dataA[index]?.duration_based?.short_term?.config?.requests?.memory.format}{' '}
</Td>
<Td dataLabel={columnNames.cpuRequestM} textCenter>
{parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.amount !== undefined &&
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.format !== undefined
? parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.amount.toPrecision(2) +
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.cpu?.format}{' '}
</Td>
<Td dataLabel={columnNames.mmrRequestM} textCenter>
{parameter.dataA[index]?.duration_based?.medium_term?.config?.requests.memory.amount !== undefined &&
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests.memory.format !== undefined
? parameter.dataA[index]?.duration_based?.medium_term?.config?.requests.memory.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.memory?.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.medium_term?.config?.requests.memory.amount +
parameter.dataA[index]?.duration_based?.medium_term?.config?.requests?.memory?.format}{' '}
</Td>
<Td dataLabel={columnNames.cpuRequestL} textCenter>
{parameter.dataA[index]?.duration_based?.long_term?.config?.requests.cpu.amount !== undefined &&
parameter.dataA[index]?.duration_based?.long_term?.config?.requests.cpu.format !== undefined
? parameter.dataA[index]?.duration_based?.long_term?.config?.requests.cpu.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.cpu?.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.long_term?.config?.requests.cpu.amount.toPrecision(2) +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.cpu?.format}{' '}
</Td>
<Td dataLabel={columnNames.mmrRequestL} textCenter>
{parameter.dataA[index]?.duration_based?.long_term?.config?.requests.memory.amount !== undefined &&
parameter.dataA[index]?.duration_based?.long_term?.config?.requests.memory.format !== undefined
? parameter.dataA[index]?.duration_based?.long_term?.config?.requests.memory.amount.toFixed(3) +
' ' +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.memory?.format
: NaN}{' '}
{parameter.dataA[index]?.duration_based?.long_term?.config?.requests.memory.amount +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.memory?.format}{' '}
</Td>
</Tr>
))}
Expand All @@ -178,30 +164,27 @@ const TableShort = ({ parameter }) => {
};

const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; setSREdata }) => {
// @ts-ignore
const list_recommendations_url: string = getRecommendationsURLWithParams(
sessionStorage.getItem('Experiment Name') || '',
'false'
);
const Context = useContext(nodeContext);
const ip = Context['cluster'];
const port = Context['autotune'];
let k_url: string;

if (ip) {
k_url = ip + ':' + port;
} else {
k_url = 'kruize';
}
const list_recommendations_url =
'http://' +
k_url +
'/listRecommendations?experiment_name=' +
sessionStorage.getItem('Experiment Name') +
'&latest=false';
const [endtime, setEndtime] = useState<any | null>('');

const [data, setdata] = useState<any | null>('');

const [data, setData] = useState([]);
const [show, setShow] = useState(false);

useEffect(() => {
if (props.endTimeArray) {
fetchRecommendationData(props.endTimeArray[0]);
}
}, [props.endTimeArray]);

const onChange = async (value: string) => {
setEndtime(value);
fetchRecommendationData(value);
};

const fetchRecommendationData = async (value) => {
const fetchData = async (value) => {
const response = await fetch(list_recommendations_url);
const data = await response.json();
const arr: any = [];
Expand All @@ -210,21 +193,24 @@ const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; s
arr.push(data[0].kubernetes_objects[0].containers[index].recommendations?.data[value]);
});

setdata(arr);
setData(arr);
};

const onChange = async (value: string) => {
setEndtime(value);
fetchData(value);
};
useEffect(() => {
// console.log('changes on changing end time');
if (props.endTimeArray === null) {
// console.log(props.endTimeArray, 'no time stamps');
if (props.endTimeArray === null || props.endTimeArray.length === 1) {
console.log(props.endTimeArray, 'no time stamps');
setShow(false);
return () => {
<TextContent>
<Text component={TextVariants.h3}>No time stamp no recommendation</Text>
</TextContent>;
};
} else {
// console.log(props.endTimeArray, 'time spant');
console.log(props.endTimeArray, 'time spant');
setShow(true);
return () => {
<TextContent>
Expand All @@ -251,7 +237,7 @@ const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; s
/>
<br />

{show && (
{show ? (
<>
<Flex>
<FlexItem>
Expand All @@ -260,10 +246,13 @@ const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; s
</TextContent>
<br />
<FormSelect value={endtime} onChange={onChange} aria-label="FormSelect Input">
{props.endTimeArray &&
{props.endTimeArray != null ? (
props.endTimeArray.map((option, index) => (
<FormSelectOption key={index} value={option} label={option} />
))}
))
) : (
<></>
)}
</FormSelect>
</FlexItem>
</Flex>
Expand All @@ -278,8 +267,9 @@ const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; s
dataA: data
}}
/>
{/* {console.log(fetchRecommendationData(props.endTimeArray[0]))} */}
</>
) : (
<></>
)}
</>
);
Expand Down
0 .../Analytics/SRE_Analytics/SREAnalytics.tsx → .../Analytics/SRE_Analytics/SREAnalytics.tsx
View file
Open in desktop
File renamed without changes.
0 src/app/Analytics/SRE_Analytics/Table.tsx → ...s/pages/Analytics/SRE_Analytics/Table.tsx
View file
Open in desktop
File renamed without changes.
Loading