Skip to content

Code refactoring #41

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

Draft
wants to merge 1 commit into
base: mvp_demo
Choose a base branch
from
Draft

Code refactoring #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40,993 changes: 40,856 additions & 137 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"test:coverage": "jest --coverage",
"eslint": "eslint --ext .tsx,.js ./src/",
"lint": "npm run eslint",
"format": "prettier --check --write ./src --config ./.prettierrc",
"format": "prettier --write .",
"format:check": "prettier --check --write ./src --config ./.prettierrc",
"type-check": "tsc --noEmit",
"ci-checks": "npm run type-check && npm run lint && npm run test:coverage",
"build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
Expand Down
30 changes: 13 additions & 17 deletions src/app/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,24 @@ import {
Title
} from '@patternfly/react-core';
import { RunExperiment } from '@app/RunExperiment/RunExperiment';

const About = () => (
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component={TextVariants.h1} className="pf-m-redhat-font">
About Kruize
<Text component={TextVariants.h1}>About Kruize</Text>
<Text component={TextVariants.p}>
Autotune is an Autonomous Performance Tuning Tool for Kubernetes. Autotune accepts a user provided Service Level
Objective or "slo" goal to optimize application performance. It uses Prometheus to identify "layers" of an
application that it is monitoring and matches tunables from those layers to the user provided slo. It then runs
experiments with the help of a hyperparameter optimization framework to arrive at the most optimal values for
the identifed tunables to get a better result for the user provided slo.
</Text>
<Text component={TextVariants.p}>
Autotune can take an arbitrarily large set of tunables and run experiments to continually optimize the user
provided slo in incremental steps. For this reason, it does not necessarily have a "best" value for a set of
tunables, only a "better" one than what is currently deployed.
</Text>
</TextContent>

<br />
<Text component={TextVariants.h5} className="pf-m-redhat-font">
Autotune is an Autonomous Performance Tuning Tool for Kubernetes. Autotune accepts a user provided Service Level
Objective or "slo" goal to optimize application performance. It uses Prometheus to identify "layers" of an
application that it is monitoring and matches tunables from those layers to the user provided slo. It then runs
experiments with the help of a hyperparameter optimization framework to arrive at the most optimal values for the
identifed tunables to get a better result for the user provided slo.
<br />
<br />
Autotune can take an arbitrarily large set of tunables and run experiments to continually optimize the user
provided slo in incremental steps. For this reason, it does not necessarily have a "best" value for a set of
tunables, only a "better" one than what is currently deployed.
</Text>
<br />
{/* <Link to="/newexperiment">
<Button variant="primary">Start an Autotune Experiment</Button>
</Link>
Expand Down
131 changes: 84 additions & 47 deletions src/app/Analytics/SRE_Analytics/RecommendationTables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ import {
FormSelectOption,
Text,
Form,
FormGroup
FormGroup,
PageSection,
PageSectionVariants,
Stack,
StackItem
} 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';
Expand Down Expand Up @@ -64,6 +68,18 @@ const WorkloadTable = ({ experimentData }) => {
<Td dataLabel={columnNames.type} textCenter>
{experimentData.type}
</Td>
<Td dataLabel={columnNames.exp_name} textCenter>
{experimentData.experiment_name}
</Td>
<Td dataLabel={columnNames.namespace} textCenter>
{experimentData.namespace}
</Td>
<Td dataLabel={columnNames.name} textCenter>
{experimentData.name}
</Td>
<Td dataLabel={columnNames.type} textCenter>
{experimentData.type}
</Td>
</Tr>
</Tbody>
</TableComposable>
Expand Down Expand Up @@ -155,6 +171,33 @@ const TableShort = ({ parameter }) => {
{parameter.dataA[index]?.duration_based?.long_term?.config?.requests.memory.amount +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.memory?.format}{' '}
</Td>
<Td dataLabel={columnNames.containers} textCenter>
{containerName}
</Td>
<Td dataLabel={columnNames.cpuRequestS} textCenter>
{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 +
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.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 +
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.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 +
parameter.dataA[index]?.duration_based?.long_term?.config?.requests?.memory?.format}{' '}
</Td>
</Tr>
))}
</Tbody>
Expand Down Expand Up @@ -222,55 +265,49 @@ const RecommendationTables = (props: { endTimeArray; setEndTimeArray; SREdata; s

return (
<>
<br />
<TextContent>
<Text component={TextVariants.h1}>Recommendations</Text>
</TextContent>
<br />
<WorkloadTable
experimentData={{
experiment_name: props.SREdata.experiment_name,
namespace: props.SREdata.namespace,
name: props.SREdata.name,
type: props.SREdata.type
}}
/>
<br />

{show ? (
<>
<Flex>
<FlexItem>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component={TextVariants.h1}>Recommendations</Text>
</TextContent>
<WorkloadTable
experimentData={{
experiment_name: props.SREdata.experiment_name,
namespace: props.SREdata.namespace,
name: props.SREdata.name,
type: props.SREdata.type
}}
/>
</PageSection>
<PageSection variant={PageSectionVariants.light}>
<Stack hasGutter>
{show && (
<>
<TextContent>
<Text component={TextVariants.h3}>Monitoring End Time</Text>
</TextContent>
<br />
<FormSelect value={endtime} onChange={onChange} aria-label="FormSelect Input">
{props.endTimeArray != null ? (
props.endTimeArray.map((option, index) => (
<FormSelectOption key={index} value={option} label={option} />
))
) : (
<></>
)}
</FormSelect>
</FlexItem>
</Flex>
<br /> <br />
<TextContent>
<Text component={TextVariants.h3}>Duration Based Recommendations</Text>
</TextContent>
<br />
<TableShort
parameter={{
containerArray: props.SREdata.containerArray,
dataA: data
}}
/>
</>
) : (
<></>
)}
<StackItem>
<FormSelect value={endtime} onChange={onChange} aria-label="FormSelect Input" style={{ width: '20%' }}>
{props.endTimeArray != null &&
props.endTimeArray.map((option, index) => (
<FormSelectOption key={index} value={option} label={option} />
))}
</FormSelect>
</StackItem>
<StackItem isFilled>
<TextContent>
<Text component={TextVariants.h3}>Duration Based Recommendations</Text>
</TextContent>
<TableShort
parameter={{
containerArray: props.SREdata.containerArray,
dataA: data
}}
/>
</StackItem>
</>
)}
</Stack>
</PageSection>
</>
);
};
Expand Down
106 changes: 53 additions & 53 deletions src/app/Analytics/SRE_Analytics/UsecaseSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ import {
Button,
Text,
Grid,
GridItem
GridItem,
PageSection,
ActionGroup,
PageSectionVariants
} from '@patternfly/react-core';
import React, { useContext, useState } from 'react';

const UsecaseSelection = (props: { endTimeArray; setEndTimeArray; SREdata; setSREdata }) => {
export const UsecaseSelection = (props: { endTimeArray; setEndTimeArray; SREdata; setSREdata }) => {
const Context = useContext(nodeContext);
const ip = Context['cluster'];
const port = Context['autotune'];
Expand Down Expand Up @@ -111,35 +114,35 @@ const UsecaseSelection = (props: { endTimeArray; setEndTimeArray; SREdata; setSR
};

return (
<>
<br />
<Flex direction={{ default: 'column' }}>
<PageSection variant={PageSectionVariants.light} isFilled>
<Grid hasGutter component="ul">
<TextContent>
<Text component={TextVariants.h3}>UseCase Selection</Text>
</TextContent>
<Grid hasGutter component="ul">
<GridItem span={3} component="li">
<FormSelect value={usecase} onChange={onChange} aria-label="FormSelect Input">
{options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
<GridItem span={6} component="li">
<FormSelect value={usecase} onChange={onChange} aria-label="FormSelect Input" style={{ width: '40%' }}>
{options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
</GridItem>
<GridItem span={6} component="li">
{usecase === 'Monitoring' && (
<FormSelect
value={nestedUsecase}
onChange={onNestedChange}
aria-label="FormSelect Input"
style={{ width: '40%' }}
>
{options2.map((option, index) => (
<FormSelectOption key={index} value={option.value} label={option.label} />
))}
</FormSelect>
</GridItem>
<GridItem span={3}></GridItem>
<GridItem span={3} component="li">
{usecase === 'Monitoring' ? (
<FormSelect value={nestedUsecase} onChange={onNestedChange} aria-label="FormSelect Input">
{options2.map((option, index) => (
<FormSelectOption key={index} value={option.value} label={option.label} />
))}
</FormSelect>
) : (
<></>
)}
</GridItem>
{usecase === 'Monitoring' && nestedUsecase === 'Remote' ? (
<>
{/* <TextContent>
)}
</GridItem>
{usecase === 'Monitoring' && nestedUsecase === 'Remote' && (
<>
{/* <TextContent>
<Text component={TextVariants.h3}>Container Selection</Text>
</TextContent>
<FormGroup label="Cluster Name" isRequired fieldId="simple-form-email-01">
Expand All @@ -153,32 +156,29 @@ const UsecaseSelection = (props: { endTimeArray; setEndTimeArray; SREdata; setSR
<AnalyticsNamespace />

</FormGroup> */}
<TextContent>
<Text component={TextVariants.h3}>Experiment Name</Text>
</TextContent>
<GridItem span={4} component="li">
<FormSelect value={expName} onChange={onChangeExpName} aria-label="FormSelect Input">
{expData != null ? (
expData.map((option, index) => <FormSelectOption key={index} value={option} label={option} />)
) : (
<></>
)}
</FormSelect>
</GridItem>
<GridItem span={10}></GridItem>
<GridItem span={3} component="li">
<Button variant="primary" onClick={handleClick}>
Get Recommendations
</Button>
</GridItem>
</>
) : (
<></>
)}
</Grid>
</Flex>
</>

<TextContent>
<Text component={TextVariants.h3}>Experiment Name</Text>
</TextContent>
<GridItem span={6} component="li">
<FormSelect
value={expName}
onChange={onChangeExpName}
aria-label="FormSelect Input"
style={{ width: '60%' }}
>
{expData &&
expData.map((option, index) => <FormSelectOption key={index} value={option} label={option} />)}
</FormSelect>
</GridItem>
<ActionGroup>
<Button variant="primary" onClick={handleClick}>
Get Recommendations
</Button>
</ActionGroup>
</>
)}
</Grid>
</PageSection>
);
};

export { UsecaseSelection };
3 changes: 1 addition & 2 deletions src/app/Documentation/FAQs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ const FAQs = () => {
displaySize="large"
isWidthLimited
>
{faq.answer
}
{faq.answer}
</ExpandableSection>
</FlexItem>
))}
Expand Down
1 change: 0 additions & 1 deletion src/app/HorizontalNav/HorizontalNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ const HorizontalNav = () => {
<b>Cluster Information </b>
<br />
<label>Minikube URL : http://{ip}</label>

<div>
<br />
<label>Kruize URL : http://{k_url}</label>
Expand Down
Loading