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

Jump to bottom

Costs integration #20

Open
wants to merge 8 commits into
base: v0.2
Choose a base branch
from
Open

Costs integration #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dadfed6
chore: Modified application name on index.html
r2dedios Jul 22, 2024
04b2184
chore: Added parsing functions for timestamps format and currencies
r2dedios Jul 22, 2024
a9f2fea
chrore: Modified Accounts pages including timestamp formating values …
r2dedios Jul 22, 2024
46da405
chore: Removed Labels from AccountDetails page
r2dedios Jul 22, 2024
6b98610
chore: Modified cluster details and costs values; Added funciton for …
r2dedios Jul 22, 2024
3508f6c
fix: Modified Account details texts
r2dedios Jul 22, 2024
f2b1317
fix: Replaced 'state' by 'status' on instances
r2dedios Jul 23, 2024
dbb0549
chore: Improved Servers and ServerDetails pages
r2dedios Jul 23, 2024
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
29 changes: 11 additions & 18 deletions src/app/AccountDetails/AccountDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { parseScanTimestamp, parseNumberToCurrency, } from 'src/app/utils/parseFuncs';
import { renderStatusLabel } from "src/app/utils/renderStatusLabel";
import React, { useEffect, useState } from "react";
import { useParams } from 'react-router-dom';
import {
Expand All @@ -18,9 +20,7 @@ import {
FlexItem,
Page,
Spinner,
LabelGroup,
} from "@patternfly/react-core";
import InfoCircleIcon from "@patternfly/react-icons/dist/js/icons/info-circle-icon";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { getAccountByName, getAccountClusters } from "../services/api";
import { Link } from "react-router-dom";
Expand All @@ -32,15 +32,6 @@ interface LabelGroupOverflowProps {
}[];
}

const LabelGroupOverflow: React.FunctionComponent<LabelGroupOverflowProps> = ({
labels,
}) => (
<LabelGroup>
{labels.map((label, index) => (
<Label key={index}>{label.text}</Label>
))}
</LabelGroup>
);

const AggregateClustersPerAccount: React.FunctionComponent = () => {
const [data, setData] = useState<Cluster[] | []>([]);
Expand Down Expand Up @@ -87,6 +78,7 @@ const AggregateClustersPerAccount: React.FunctionComponent = () => {
<Tr>
<Th>ID</Th>
<Th>Name</Th>
<Th>Status</Th>
<Th>Provider</Th>
<Th>Instance Count</Th>
</Tr>
Expand All @@ -102,6 +94,9 @@ const AggregateClustersPerAccount: React.FunctionComponent = () => {
</Link>
</Td>
<Td>{cluster.name}</Td>
<Td dataLabel={cluster.status}>
{renderStatusLabel(cluster.status)}
</Td>
<Td>{cluster.provider}</Td>
<Td>{cluster.instanceCount}</Td>
</Tr>
Expand All @@ -122,7 +117,6 @@ const AccountDetails: React.FunctionComponent = () => {
});
const [loading, setLoading] = useState(true);
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
useEffect(() => {
const fetchData = async () => {
try {
Expand Down Expand Up @@ -192,21 +186,20 @@ const AccountDetails: React.FunctionComponent = () => {
<DescriptionListDescription>
{accountData.accounts[0].provider}
</DescriptionListDescription>
<DescriptionListTerm>Account Total Cost (Estimated)</DescriptionListTerm>
<DescriptionListDescription>
{parseNumberToCurrency(accountData.accounts[0].totalCost)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Last scanned at</DescriptionListTerm>
<DescriptionListDescription>
<time>Oct 15, 1:51 pm</time>
{parseScanTimestamp(accountData.accounts[0].lastScanTimestamp)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Created at</DescriptionListTerm>
<DescriptionListDescription>
<time>Oct 15, 1:51 pm</time>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</FlexItem>
Expand Down
73 changes: 32 additions & 41 deletions src/app/ClusterDetails/ClusterDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { useEffect, useState } from "react";
import { useParams } from 'react-router-dom';
import { renderStatusLabel } from "src/app/utils/renderStatusLabel";
import { parseScanTimestamp, parseNumberToCurrency, } from 'src/app/utils/parseFuncs';
import {
PageSection,
PageSectionVariants,
Expand All @@ -20,7 +22,6 @@ import {
Spinner,
LabelGroup,
} from "@patternfly/react-core";
import InfoCircleIcon from "@patternfly/react-icons/dist/js/icons/info-circle-icon";
import { Table, Tbody, Td, Th, Thead, Tr, ThProps } from "@patternfly/react-table";
import { getCluster, getClusterInstances, getClusterTags } from "../services/api";
import { ClusterData, Instance, Tag, TagData } from "@app/types/types";
Expand All @@ -29,17 +30,6 @@ interface LabelGroupOverflowProps {
labels: Array<Tag>;
}

const renderLabel = (labelText: string | null | undefined) => {
switch (labelText) {
case "Running":
return <Label color="green">{labelText}</Label>;
case "Stopped":
return <Label color="red">{labelText}</Label>;
default:
return <Label color="gold">{labelText}</Label>;
}
};

const LabelGroupOverflow: React.FunctionComponent<LabelGroupOverflowProps> = ({
labels,
}) => (
Expand Down Expand Up @@ -84,8 +74,8 @@ const AggregateInstancesPerCluster: React.FunctionComponent = () => {
const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>('asc');
// sort dropdown expansion
const getSortableRowValues = (instance: Instance): (string | number | null)[] => {
const { id, name, availabilityZone, instanceType, state, clusterID, provider } = instance;
return [id, name, availabilityZone, instanceType, state, clusterID, provider];
const { id, name, availabilityZone, instanceType, status, clusterID, provider } = instance;
return [id, name, availabilityZone, instanceType, status, clusterID, provider];
};

// Sorting
Expand Down Expand Up @@ -145,8 +135,8 @@ const AggregateInstancesPerCluster: React.FunctionComponent = () => {
<Th sort={getSortParams(0)}>ID</Th>
<Th sort={getSortParams(1)}>Name</Th>
<Th sort={getSortParams(3)}>Type</Th>
<Th sort={getSortParams(4)}>Status</Th>
<Th sort={getSortParams(2)}>AvailabilityZone</Th>
<Th sort={getSortParams(4)}>State</Th>
</Tr>
</Thead>
<Tbody>
Expand All @@ -161,10 +151,10 @@ const AggregateInstancesPerCluster: React.FunctionComponent = () => {
</Td>
<Td>{instance.name}</Td>
<Td>{instance.instanceType}</Td>
<Td>{instance.availabilityZone}</Td>
<Td dataLabel={instance.state}>
{renderLabel(instance.state)}
<Td dataLabel={instance.status}>
{renderStatusLabel(instance.status)}
</Td>
<Td>{instance.availabilityZone}</Td>
</Tr>
))}
</Tbody>
Expand All @@ -188,7 +178,6 @@ const ClusterDetails: React.FunctionComponent = () => {
const [loading, setLoading] = useState(true);
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const clusterStatus = queryParams.get('status');
useEffect(() => {
const fetchData = async () => {
try {
Expand Down Expand Up @@ -259,58 +248,60 @@ const ClusterDetails: React.FunctionComponent = () => {
<DescriptionListDescription>
{clusterID}
</DescriptionListDescription>
<DescriptionListTerm>Status</DescriptionListTerm>
<DescriptionListDescription>
{renderStatusLabel(cluster.clusters[0].status)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>Web console</DescriptionListTerm>
<DescriptionListDescription>
<a href={cluster.clusters[0].consoleLink} target="_blank" rel="noopener noreferrer">Console</a>
</DescriptionListDescription>
<DescriptionListTerm>Cluster Total Cost (Estimated)</DescriptionListTerm>
<DescriptionListDescription>
{parseNumberToCurrency(cluster.clusters[0].totalCost)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>

<DescriptionListGroup name="Cloud Properties">
<DescriptionListTerm>Cloud Provider</DescriptionListTerm>
<DescriptionListDescription>
{cluster.clusters[0].provider}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
<LabelGroupOverflow labels={tags.tags} />
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Account</DescriptionListTerm>
<DescriptionListDescription>
{cluster.clusters[0].accountName || "unknown"}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Last scanned at</DescriptionListTerm>
<DescriptionListDescription>
{cluster.clusters[0].lastScanTimestamp || "unknown"}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Region</DescriptionListTerm>
<DescriptionListDescription>
{cluster.clusters[0].region || "unknown"}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>

<DescriptionListGroup name="Timestamps">
<DescriptionListTerm>Created at</DescriptionListTerm>
<DescriptionListDescription>
<time>Oct 15, 1:51 pm</time>
{parseScanTimestamp(cluster.clusters[0].creationTimestamp)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Owner</DescriptionListTerm>
<DescriptionListTerm>Last scanned at</DescriptionListTerm>
<DescriptionListDescription>
{ownerTag}
{parseScanTimestamp(cluster.clusters[0].lastScanTimestamp)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>

<DescriptionListGroup name="Extra metadata">
<DescriptionListTerm>Labels</DescriptionListTerm>
<LabelGroupOverflow labels={tags.tags} />
<DescriptionListTerm>Partner</DescriptionListTerm>
<DescriptionListDescription>
{partnerTag}
</DescriptionListDescription>
<DescriptionListTerm>Owner</DescriptionListTerm>
<DescriptionListDescription>
{ownerTag}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</FlexItem>
Expand Down
42 changes: 2 additions & 40 deletions src/app/Clusters/Clusters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,20 @@
import {

PageSection,
PageSectionVariants,
Pagination,
Panel,
ToolbarItem,
Toolbar,
ToolbarContent,
TextContent,
Text,
SearchInput,
MenuToggle,
MenuToggleElement,
Label,
Select,
SelectList,
SelectGroup,
SelectOption,
OverflowMenu,
OverflowMenuGroup,
OverflowMenuContent,
OverflowMenuControl,
OverflowMenuItem,
OverflowMenuDropdownItem,
Button,
Dropdown,
ToolbarGroup,
DropdownList,
Spinner,
} from "@patternfly/react-core";
import { renderStatusLabel } from "src/app/utils/renderStatusLabel";
import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from "@patternfly/react-table";
import React, { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { getClusters } from "../services/api";
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { Cluster } from "@app/types/types";


Expand Down Expand Up @@ -115,17 +88,6 @@ const ClusterTable: React.FunctionComponent<{ searchValue: string, statusFilter:
setFilteredData(filtered);
}, [searchValue, clusterData, statusFilter, cloudProviderFilter]);

const renderLabel = (labelText: string | null | undefined) => {
switch (labelText) {
case "Running":
return <Label color="green">{labelText}</Label>;
case "Stopped":
return <Label color="red">{labelText}</Label>;
default:
return <Label color="gold">{labelText}</Label>;
}
};

const columnNames = {
id: "ID",
name: "Name",
Expand Down Expand Up @@ -226,7 +188,7 @@ const ClusterTable: React.FunctionComponent<{ searchValue: string, statusFilter:
{cluster.name}
</Td>
<Td dataLabel={columnNames.status}>
{renderLabel(cluster.status)}
{renderStatusLabel(cluster.status)}
</Td>
<Td dataLabel={columnNames.account}>{cluster.accountName}</Td>
<Td dataLabel={columnNames.cloudProvider}>
Expand Down
38 changes: 26 additions & 12 deletions src/app/ServerDetails/ServerDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import { renderStatusLabel } from "src/app/utils/renderStatusLabel";
import { parseScanTimestamp, parseNumberToCurrency, } from 'src/app/utils/parseFuncs';
import { useParams } from 'react-router-dom';
import {
PageSection,
Expand All @@ -24,7 +26,7 @@ import InfoCircleIcon from "@patternfly/react-icons/dist/js/icons/info-circle-ic
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { getInstances, getInstanceByID } from "../services/api";
import { Link } from "react-router-dom";
import { Instance, Instances, Tag } from "@app/types/types";
import { Instances, Tag } from "@app/types/types";
import { useLocation } from "react-router-dom";
interface LabelGroupOverflowProps {
labels: Array<Tag>;
Expand Down Expand Up @@ -110,6 +112,10 @@ const ServerDetails: React.FunctionComponent = () => {
<DescriptionListDescription>
{instanceID}
</DescriptionListDescription>
<DescriptionListTerm>Status</DescriptionListTerm>
<DescriptionListDescription>
{renderStatusLabel(instanceData.instances[0].status)}
</DescriptionListDescription>
<DescriptionListTerm>Cluster ID</DescriptionListTerm>
<DescriptionListDescription>
<Link
Expand All @@ -118,32 +124,40 @@ const ServerDetails: React.FunctionComponent = () => {
{instanceData.instances[0].clusterID}
</Link>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Cloud Provider</DescriptionListTerm>
<DescriptionListDescription>
{instanceData.instances[0].provider}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
<LabelGroupOverflow labels={instanceData.instances[0].tags} />
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Last scanned at</DescriptionListTerm>
<DescriptionListDescription>
{instanceData.instances[0].tags.filter(label => label.key == "LaunchTime").map(label => (
<Label key={label.key}>{label.value}</Label>
))}
{parseScanTimestamp(instanceData.instances[0].creationTimestamp)}
</DescriptionListDescription>
<DescriptionListTerm>Created at</DescriptionListTerm>
<DescriptionListDescription>
{parseScanTimestamp(instanceData.instances[0].creationTimestamp)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>Created at</DescriptionListTerm>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>Daily Cost (aprox)</DescriptionListTerm>
<DescriptionListDescription>
{instanceData.instances[0].tags.filter(label => label.key == "LaunchTime").map(label => (
<Label key={label.key}>{label.value}</Label>
))}
{parseNumberToCurrency(instanceData.instances[0].dailyCost)}
</DescriptionListDescription>
<DescriptionListTerm>Total Cost (aprox)</DescriptionListTerm>
<DescriptionListDescription>
{parseNumberToCurrency(instanceData.instances[0].totalCost)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
</DescriptionListGroup>
</DescriptionList>
</FlexItem>
Expand Down
Loading