Web console: fix compaction status when no compaction config, and small cleanup (#10483)

* move timed button to icons

* cleanup redundant logic

* fix compaction status text

* remove extra style
This commit is contained in:
Vadim Ogievetsky 2020-10-07 14:54:08 -07:00 committed by GitHub
parent 0ab8b6e0a9
commit 2e50ada407
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 93 additions and 101 deletions

View File

@ -42,7 +42,7 @@ export const RefreshButton = React.memo(function RefreshButton(props: RefreshBut
return (
<TimedButton
defaultDelay={30000}
label="Auto refresh every:"
label="Auto refresh every"
delays={DELAYS}
icon={IconNames.REFRESH}
text="Refresh"

View File

@ -1,44 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Timed button matches snapshot 1`] = `
<div
class="bp3-button-group"
exports[`TimedButton matches snapshot 1`] = `
<Blueprint3.ButtonGroup
className="timed-button"
>
<button
class="bp3-button"
type="button"
<Blueprint3.Button
onClick={[Function]}
/>
<span
class="bp3-popover-wrapper"
<Blueprint3.Popover
boundary="scrollParent"
captureDismiss={false}
content={
<Blueprint3.Menu>
<Blueprint3.MenuDivider
title="Select delay"
/>
<Blueprint3.MenuItem
disabled={false}
icon="selection"
multiline={false}
onClick={[Function]}
popoverProps={Object {}}
shouldDismissPopover={true}
text="timeValue"
/>
</Blueprint3.Menu>
}
defaultIsOpen={false}
disabled={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={300}
hoverOpenDelay={150}
inheritDarkTheme={true}
interactionKind="click"
minimal={false}
modifiers={Object {}}
openOnTargetFocus={true}
position="auto"
targetTagName="span"
transitionDuration={300}
usePortal={true}
wrapperTagName="span"
>
<span
class="bp3-popover-target"
>
<button
class="bp3-button"
type="button"
>
<span
class="bp3-icon bp3-icon-caret-down"
icon="caret-down"
>
<svg
data-icon="caret-down"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
caret-down
</desc>
<path
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</span>
</span>
</div>
<Blueprint3.Button
rightIcon="caret-down"
/>
</Blueprint3.Popover>
</Blueprint3.ButtonGroup>
`;

View File

@ -1,21 +0,0 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.timed-button {
padding: 10px 10px 5px 10px;
}

View File

@ -16,22 +16,22 @@
* limitations under the License.
*/
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';
import React from 'react';
import { TimedButton } from './timed-button';
describe('Timed button', () => {
describe('TimedButton', () => {
it('matches snapshot', () => {
const timedButton = (
const timedButton = shallow(
<TimedButton
delays={[{ label: 'timeValue', delay: 1000 }]}
onRefresh={() => null}
label={'label'}
label={'Select delay'}
defaultDelay={1000}
/>
/>,
);
const { container } = render(timedButton);
expect(container.firstChild).toMatchSnapshot();
expect(timedButton).toMatchSnapshot();
});
});

View File

@ -16,15 +16,21 @@
* limitations under the License.
*/
import { Button, ButtonGroup, IButtonProps, Popover, Radio, RadioGroup } from '@blueprintjs/core';
import {
Button,
ButtonGroup,
IButtonProps,
Menu,
MenuDivider,
MenuItem,
Popover,
} from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import React, { useState } from 'react';
import { useInterval } from '../../hooks';
import { localStorageGet, LocalStorageKeys, localStorageSet } from '../../utils';
import './timed-button.scss';
export interface DelayLabel {
label: string;
delay: number;
@ -51,7 +57,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
...other
} = props;
const [delay, setDelay] = useState(
const [selectedDelay, setSelectedDelay] = useState(
localStorageKey && localStorageGet(localStorageKey)
? Number(localStorageGet(localStorageKey))
: defaultDelay,
@ -59,31 +65,31 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
useInterval(() => {
onRefresh(true);
}, delay);
}, selectedDelay);
function handleSelection(e: any) {
const selectedDelay = Number(e.currentTarget.value);
setDelay(selectedDelay);
function handleSelection(delay: number) {
setSelectedDelay(delay);
if (localStorageKey) {
localStorageSet(localStorageKey, String(selectedDelay));
localStorageSet(localStorageKey, String(delay));
}
}
return (
<ButtonGroup>
<ButtonGroup className="timed-button">
<Button {...other} text={text} icon={icon} onClick={() => onRefresh(false)} />
<Popover
content={
<RadioGroup
label={label}
className="timed-button"
onChange={handleSelection}
selectedValue={delay}
>
{delays.map(({ label, delay }) => (
<Radio label={label} value={delay} key={label} />
<Menu>
<MenuDivider title={label} />
{delays.map(({ label, delay }, i) => (
<MenuItem
key={i}
icon={selectedDelay === delay ? IconNames.SELECTION : IconNames.CIRCLE}
text={label}
onClick={() => handleSelection(delay)}
/>
))}
</RadioGroup>
</Menu>
}
>
<Button {...other} rightIcon={IconNames.CARET_DOWN} />

View File

@ -100,14 +100,9 @@ export function isLookupSubmitDisabled(
!lookupVersion ||
!lookupTier ||
!lookupSpec ||
!lookupName ||
lookupName === '' ||
lookupVersion === '' ||
lookupTier === '' ||
lookupSpec.type === '' ||
lookupSpec.type === undefined ||
(lookupSpec.type === 'map' && lookupSpec.map === undefined) ||
(lookupSpec.type === 'cachedNamespace' && lookupSpec.extractionNamespace === undefined);
!lookupSpec.type ||
(lookupSpec.type === 'map' && !lookupSpec.map) ||
(lookupSpec.type === 'cachedNamespace' && !lookupSpec.extractionNamespace);
if (
!disableSubmit &&

View File

@ -64,7 +64,7 @@ describe('compaction', () => {
expect(formatCompactionConfigAndStatus(BASIC_CONFIG, undefined)).toEqual('Awaiting first run');
expect(formatCompactionConfigAndStatus(undefined, ZERO_STATUS)).toEqual('Running');
expect(formatCompactionConfigAndStatus(undefined, ZERO_STATUS)).toEqual('Not enabled');
expect(formatCompactionConfigAndStatus(BASIC_CONFIG, ZERO_STATUS)).toEqual('Running');

View File

@ -54,14 +54,19 @@ export function formatCompactionConfigAndStatus(
compactionConfig: CompactionConfig | undefined,
compactionStatus: CompactionStatus | undefined,
) {
if (compactionStatus) {
if (compactionStatus.bytesAwaitingCompaction === 0 && !zeroCompactionStatus(compactionStatus)) {
return 'Fully compacted';
if (compactionConfig) {
if (compactionStatus) {
if (
compactionStatus.bytesAwaitingCompaction === 0 &&
!zeroCompactionStatus(compactionStatus)
) {
return 'Fully compacted';
} else {
return capitalizeFirst(compactionStatus.scheduleStatus);
}
} else {
return capitalizeFirst(compactionStatus.scheduleStatus);
return 'Awaiting first run';
}
} else if (compactionConfig) {
return 'Awaiting first run';
} else {
return 'Not enabled';
}