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

Query Browser: Remove unused namespace props #6173

Merged
merged 1 commit into from
Aug 1, 2020
Merged

Query Browser: Remove unused namespace props #6173

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 16 additions & 65 deletions frontend/public/components/monitoring/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import * as _ from 'lodash-es';
import { List as ImmutableList } from 'immutable';
import {
ActionGroup,
Alert,
AlertActionCloseButton,
Button,
EmptyState,
EmptyStateBody,
Expand Down Expand Up @@ -224,34 +222,21 @@ export const ToggleGraph = connect(graphStateToProps, { toggle: UIActions.monito
ToggleGraph_,
);

const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({
insertText,
namespace,
setMetrics,
}) => {
const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({ insertText, setMetrics }) => {
const [items, setItems] = React.useState<MetricsDropdownItems>();
const [isError, setIsError] = React.useState(false);

const safeFetch = React.useCallback(useSafeFetch(), []);

React.useEffect(() => {
const url = namespace
? getPrometheusURL({
endpoint: PrometheusEndpoint.QUERY,
namespace,
query: `count({namespace="${namespace}"}) by (__name__)`,
})
: `${PROMETHEUS_BASE_PATH}/${PrometheusEndpoint.LABEL}/__name__/values`;
safeFetch(url)
safeFetch(`${PROMETHEUS_BASE_PATH}/${PrometheusEndpoint.LABEL}/__name__/values`)
.then((response) => {
const metrics = namespace
? _.map(_.get(response, 'data.result'), 'metric.__name__').sort()
: _.get(response, 'data');
const metrics = response?.data;
setItems(_.zipObject(metrics, metrics));
setMetrics(metrics);
})
.catch(() => setIsError(true));
}, [namespace, safeFetch, setMetrics]);
}, [safeFetch, setMetrics]);

const onChange = (metric: string) => {
// Replace the currently selected text with the metric
Expand Down Expand Up @@ -295,7 +280,7 @@ const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({
/>
);
};
const MetricsDropdown: React.ComponentType<{ namespace?: string }> = connect(null, {
const MetricsDropdown = connect(null, {
insertText: UIActions.queryBrowserInsertText,
setMetrics: UIActions.queryBrowserSetMetrics,
})(MetricsDropdown_);
Expand Down Expand Up @@ -807,30 +792,11 @@ const QueryTable_: React.FC<QueryTableProps> = ({
};
export const QueryTable = connect(queryTableStateToProps, queryDispatchToProps)(QueryTable_);

const NamespaceAlert_: React.FC<{ dismiss: () => undefined; isDismissed: boolean }> = ({
dismiss,
isDismissed,
}) =>
isDismissed ? null : (
<Alert
actionClose={<AlertActionCloseButton onClose={dismiss} />}
isInline
className="co-alert"
title="Queries entered here are limited to the data available in the currently selected project."
variant="info"
/>
);
const NamespaceAlert: React.ComponentType<{}> = connect(
({ UI }: RootState) => ({ isDismissed: !!UI.getIn(['queryBrowser', 'dismissNamespaceAlert']) }),
{ dismiss: UIActions.queryBrowserDismissNamespaceAlert },
)(NamespaceAlert_);

const Query_: React.FC<QueryProps> = ({
id,
index,
isExpanded,
isEnabled,
namespace,
patchQuery,
toggleIsEnabled,
}) => {
Expand All @@ -847,7 +813,7 @@ const Query_: React.FC<QueryProps> = ({
>
<div className="query-browser__query-controls">
<ExpandButton isExpanded={isExpanded} onClick={toggleIsExpanded} />
<QueryInput index={index} namespace={namespace} />
<QueryInput index={index} />
<div title={switchLabel}>
<Switch
aria-label={switchLabel}
Expand All @@ -861,7 +827,7 @@ const Query_: React.FC<QueryProps> = ({
<QueryKebab index={index} />
</div>
</div>
<QueryTable index={index} namespace={namespace} />
<QueryTable index={index} />
</div>
);
};
Expand All @@ -874,11 +840,7 @@ const Query = connect(
queryDispatchToProps,
)(Query_);

const QueryBrowserWrapper_: React.FC<QueryBrowserWrapperProps> = ({
namespace,
patchQuery,
queriesList,
}) => {
const QueryBrowserWrapper_: React.FC<QueryBrowserWrapperProps> = ({ patchQuery, queriesList }) => {
const queries = queriesList.toJS();

// Initialize queries from URL parameters
Expand Down Expand Up @@ -913,12 +875,7 @@ const QueryBrowserWrapper_: React.FC<QueryBrowserWrapperProps> = ({
const insertExampleQuery = () => {
const focusedIndex = focusedQuery?.index ?? 0;
const index = queries[focusedIndex] ? focusedIndex : 0;

// Pick a suitable example query based on whether we are limiting results to a single namespace
const text = namespace
? 'sum(rate(container_cpu_usage_seconds_total{image!="", container!="POD"}[5m])) by (pod)'
: 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))';

const text = 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))';
patchQuery(index, { isEnabled: true, query: text, text });
};

Expand All @@ -941,7 +898,6 @@ const QueryBrowserWrapper_: React.FC<QueryBrowserWrapperProps> = ({
<QueryBrowser
defaultTimespan={30 * 60 * 1000}
disabledSeries={disabledSeries}
namespace={namespace}
queries={queryStrings}
/>
);
Expand Down Expand Up @@ -972,10 +928,10 @@ const RunQueriesButton = connect(null, { runQueries: UIActions.queryBrowserRunQu
RunQueriesButton_,
);

const QueriesList_ = ({ count, namespace }) => (
const QueriesList_ = ({ count }) => (
<>
{_.range(count).map((i) => (
<Query index={i} key={i} namespace={namespace} />
<Query index={i} key={i} />
))}
</>
);
Expand All @@ -992,7 +948,7 @@ const PollIntervalDropdown = connect(
},
)(IntervalDropdown);

const QueryBrowserPage_: React.FC<QueryBrowserPageProps> = ({ deleteAll, namespace }) => {
const QueryBrowserPage_: React.FC<QueryBrowserPageProps> = ({ deleteAll }) => {
// Clear queries on unmount
React.useEffect(() => deleteAll, [deleteAll]);

Expand All @@ -1014,18 +970,17 @@ const QueryBrowserPage_: React.FC<QueryBrowserPageProps> = ({ deleteAll, namespa
</h1>
</div>
<div className="co-m-pane__body">
{namespace && <NamespaceAlert />}
<div className="row">
<div className="col-xs-12">
<ToggleGraph />
</div>
</div>
<div className="row">
<div className="col-xs-12">
<QueryBrowserWrapper namespace={namespace} />
<QueryBrowserWrapper />
<div className="query-browser__controls">
<div className="query-browser__controls--left">
<MetricsDropdown namespace={namespace} />
<MetricsDropdown />
</div>
<div className="query-browser__controls--right">
<ActionGroup className="pf-c-form pf-c-form__group--no-top-margin">
Expand All @@ -1034,14 +989,14 @@ const QueryBrowserPage_: React.FC<QueryBrowserPageProps> = ({ deleteAll, namespa
</ActionGroup>
</div>
</div>
<QueriesList namespace={namespace} />
<QueriesList />
</div>
</div>
</div>
</>
);
};
export const QueryBrowserPage: React.ComponentType<{ namespace?: string }> = withFallback(
export const QueryBrowserPage = withFallback(
connect(null, { deleteAll: UIActions.queryBrowserDeleteAllQueries })(QueryBrowserPage_),
);

Expand All @@ -1058,17 +1013,14 @@ type MetricsDropdownItems = {

type MetricsDropdownProps = {
insertText: (index: number, newText: string, replaceFrom: number, replaceTo: number) => never;
namespace?: string;
setMetrics: (metrics: string[]) => never;
};

type QueryBrowserPageProps = {
deleteAll: () => never;
namespace?: string;
};

type QueryBrowserWrapperProps = {
namespace?: string;
patchQuery: (index: number, patch: QueryObj) => any;
queriesList: ImmutableList<QueryObj>;
};
Expand All @@ -1095,7 +1047,6 @@ type QueryProps = {
index: number;
isEnabled: boolean;
isExpanded: boolean;
namespace?: string;
patchQuery: (patch: QueryObj) => void;
toggleIsEnabled: () => never;
};
Expand Down