|
|
@@ -1,7 +1,6 @@
|
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
|
import styled from "styled-components";
|
|
|
|
|
|
-import settings from "assets/settings.svg";
|
|
|
import api from "shared/api";
|
|
|
import { Context } from "shared/Context";
|
|
|
import { ChartTypeWithExtendedConfig } from "shared/types";
|
|
|
@@ -9,7 +8,6 @@ import { ChartTypeWithExtendedConfig } from "shared/types";
|
|
|
import TabSelector from "components/TabSelector";
|
|
|
import SelectRow from "components/form-components/SelectRow";
|
|
|
import MetricsChart from "./metrics/MetricsChart";
|
|
|
-import { MetricNormalizer } from "../../cluster-dashboard/expanded-chart/metrics/MetricNormalizer";
|
|
|
type PropsType = {
|
|
|
currentChart: ChartTypeWithExtendedConfig;
|
|
|
};
|
|
|
@@ -38,7 +36,6 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
|
|
|
const [selectedIngress, setSelectedIngress] = useState(null);
|
|
|
const [selectedRange, setSelectedRange] = useState("1H");
|
|
|
const [selectedMetric, setSelectedMetric] = useState("cpu");
|
|
|
- const [showMetricsSettings, setShowMetricsSettings] = useState(false);
|
|
|
const [isLoading, setIsLoading] = useState(0);
|
|
|
|
|
|
const { currentCluster, currentProject, setCurrentError } = useContext(
|
|
|
@@ -276,38 +273,10 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
|
|
|
|
|
|
export default MetricsSection;
|
|
|
|
|
|
-const Label = styled.div`
|
|
|
- font-weight: bold;
|
|
|
-`;
|
|
|
-
|
|
|
const Relative = styled.div`
|
|
|
position: relative;
|
|
|
`;
|
|
|
|
|
|
-const IconWrapper = styled.div`
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 2px;
|
|
|
- border-radius: 30px;
|
|
|
- height: 25px;
|
|
|
- width: 25px;
|
|
|
- margin-left: 8px;
|
|
|
- cursor: pointer;
|
|
|
- :hover {
|
|
|
- background: #ffffff22;
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
-const SettingsIcon = styled.img`
|
|
|
- opacity: 0.4;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-left: -1px;
|
|
|
- margin-bottom: -2px;
|
|
|
-`;
|
|
|
-
|
|
|
const Flex = styled.div`
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -321,61 +290,6 @@ const MetricsHeader = styled.div`
|
|
|
justify-content: space-between;
|
|
|
`;
|
|
|
|
|
|
-const DropdownOverlay = styled.div`
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 10;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- cursor: default;
|
|
|
-`;
|
|
|
-
|
|
|
-const Option = styled.div`
|
|
|
- width: 100%;
|
|
|
- border-top: 1px solid #00000000;
|
|
|
- border-bottom: 1px solid
|
|
|
- ${(props: { selected: boolean; lastItem: boolean }) =>
|
|
|
- props.lastItem ? "#ffffff00" : "#ffffff15"};
|
|
|
- height: 37px;
|
|
|
- font-size: 13px;
|
|
|
- padding-top: 9px;
|
|
|
- align-items: center;
|
|
|
- padding-left: 15px;
|
|
|
- cursor: pointer;
|
|
|
- padding-right: 10px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- background: ${(props: { selected: boolean; lastItem: boolean }) =>
|
|
|
- props.selected ? "#ffffff11" : ""};
|
|
|
-
|
|
|
- :hover {
|
|
|
- background: #ffffff22;
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
-const Dropdown = styled.div`
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: calc(100% + 10px);
|
|
|
- background: #26282f;
|
|
|
- width: ${(props: { dropdownWidth: string; dropdownMaxHeight: string }) =>
|
|
|
- props.dropdownWidth};
|
|
|
- max-height: ${(props: { dropdownWidth: string; dropdownMaxHeight: string }) =>
|
|
|
- props.dropdownMaxHeight || "300px"};
|
|
|
- border-radius: 3px;
|
|
|
- z-index: 999;
|
|
|
- overflow-y: auto;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0px 4px 10px 0px #00000088;
|
|
|
-`;
|
|
|
-
|
|
|
-const DropdownAlt = styled(Dropdown)`
|
|
|
- padding: 20px 20px 7px;
|
|
|
- overflow: visible;
|
|
|
-`;
|
|
|
-
|
|
|
const RangeWrapper = styled.div`
|
|
|
float: right;
|
|
|
font-weight: bold;
|
Jose Diaz-Gonzalez