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

web-console/src/components/refresh-button/refresh-button.tsx

@@ -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"

web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap

@@ -1,44 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Timed button matches snapshot 1`] = `
+exports[`TimedButton matches snapshot 1`] = `
-<div
+<Blueprint3.ButtonGroup
-  class="bp3-button-group"
+  className="timed-button"
 >
-  <button
+  <Blueprint3.Button
-    class="bp3-button"
+    onClick={[Function]}
-    type="button"
   />
-  <span
+  <Blueprint3.Popover
-    class="bp3-popover-wrapper"
+    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
+    <Blueprint3.Button
-      class="bp3-popover-target"
+      rightIcon="caret-down"
-    >
+    />
-      <button
+  </Blueprint3.Popover>
-        class="bp3-button"
+</Blueprint3.ButtonGroup>
-        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>
 `;

web-console/src/components/timed-button/timed-button.scss

@@ -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;
-}

web-console/src/components/timed-button/timed-button.spec.tsx

@@ -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();
   });
 });

web-console/src/components/timed-button/timed-button.tsx

@@ -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) {
+  function handleSelection(delay: number) {
-    const selectedDelay = Number(e.currentTarget.value);
+    setSelectedDelay(delay);
-    setDelay(selectedDelay);
     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
+          <Menu>
-            label={label}
+            <MenuDivider title={label} />
-            className="timed-button"
+            {delays.map(({ label, delay }, i) => (
-            onChange={handleSelection}
+              <MenuItem
-            selectedValue={delay}
+                key={i}
-          >
+                icon={selectedDelay === delay ? IconNames.SELECTION : IconNames.CIRCLE}
-            {delays.map(({ label, delay }) => (
+                text={label}
-              <Radio label={label} value={delay} key={label} />
+                onClick={() => handleSelection(delay)}
+              />
             ))}
-          </RadioGroup>
+          </Menu>
         }
       >
         <Button {...other} rightIcon={IconNames.CARET_DOWN} />

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

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

web-console/src/utils/compaction.spec.ts

@@ -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');
 

web-console/src/utils/compaction.ts

@@ -54,14 +54,19 @@ export function formatCompactionConfigAndStatus(
   compactionConfig: CompactionConfig | undefined,
   compactionStatus: CompactionStatus | undefined,
 ) {
-  if (compactionStatus) {
+  if (compactionConfig) {
-    if (compactionStatus.bytesAwaitingCompaction === 0 && !zeroCompactionStatus(compactionStatus)) {
+    if (compactionStatus) {
-      return 'Fully compacted';
+      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';
   }