This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/druid.git
The following commit(s) were added to refs/heads/master by this push:
new 32cd47b Fix home view styling (#9444)
32cd47b is described below
commit 32cd47bc8eeb0d2b79390a70ba98c687a528dc64
Author: Clint Wylie <[email protected]>
AuthorDate: Wed Mar 4 19:39:36 2020 -0800
Fix home view styling (#9444)
---
.../plural-pair-if-needed.spec.tsx.snap | 27 ++++++++
.../plural-pair-if-needed.spec.tsx | 80 ++++++++++++++++++++++
.../plural-pair-if-needed.tsx} | 29 +++++---
.../datasources-card/datasources-card.tsx | 2 +-
.../home-view/home-view-card/home-view-card.scss | 13 ++++
web-console/src/views/home-view/home-view.scss | 6 +-
.../home-view/services-card/services-card.tsx | 55 +++++++--------
.../src/views/home-view/tasks-card/tasks-card.tsx | 9 ++-
8 files changed, 175 insertions(+), 46 deletions(-)
diff --git
a/web-console/src/components/plural-pair-if-needed/__snapshots__/plural-pair-if-needed.spec.tsx.snap
b/web-console/src/components/plural-pair-if-needed/__snapshots__/plural-pair-if-needed.spec.tsx.snap
new file mode 100644
index 0000000..1258b5d
--- /dev/null
+++
b/web-console/src/components/plural-pair-if-needed/__snapshots__/plural-pair-if-needed.spec.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plural pair if needed works when both counts exist 1`] = `
+<p
+ class="plural-pair-if-needed"
+>
+ 2 running tasks, 1 pending task
+</p>
+`;
+
+exports[`plural pair if needed works when no counts exist 1`] = `null`;
+
+exports[`plural pair if needed works when only first count exists 1`] = `
+<p
+ class="plural-pair-if-needed"
+>
+ 2 running tasks
+</p>
+`;
+
+exports[`plural pair if needed works when only second count exists 1`] = `
+<p
+ class="plural-pair-if-needed"
+>
+ 1 pending task
+</p>
+`;
diff --git
a/web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.spec.tsx
b/web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.spec.tsx
new file mode 100644
index 0000000..6087c7e
--- /dev/null
+++
b/web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.spec.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { PluralPairIfNeeded } from './plural-pair-if-needed';
+
+describe('plural pair if needed', () => {
+ it('works when both counts exist', () => {
+ const pluralPairIfNeeded = (
+ <PluralPairIfNeeded
+ firstCount={2}
+ firstSingular="running task"
+ secondCount={1}
+ secondSingular="pending task"
+ />
+ );
+
+ const { container } = render(pluralPairIfNeeded);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it('works when only first count exists', () => {
+ const pluralPairIfNeeded = (
+ <PluralPairIfNeeded
+ firstCount={2}
+ firstSingular="running task"
+ secondCount={0}
+ secondSingular="pending task"
+ />
+ );
+
+ const { container } = render(pluralPairIfNeeded);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it('works when only second count exists', () => {
+ const pluralPairIfNeeded = (
+ <PluralPairIfNeeded
+ firstCount={0}
+ firstSingular="running task"
+ secondCount={1}
+ secondSingular="pending task"
+ />
+ );
+
+ const { container } = render(pluralPairIfNeeded);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it('works when no counts exist', () => {
+ const pluralPairIfNeeded = (
+ <PluralPairIfNeeded
+ firstCount={0}
+ firstSingular="running task"
+ secondCount={0}
+ secondSingular="pending task"
+ />
+ );
+
+ const { container } = render(pluralPairIfNeeded);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/web-console/src/views/home-view/home-view.scss
b/web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.tsx
similarity index 54%
copy from web-console/src/views/home-view/home-view.scss
copy to
web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.tsx
index e568750..c26c633 100644
--- a/web-console/src/views/home-view/home-view.scss
+++ b/web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.tsx
@@ -16,15 +16,26 @@
* limitations under the License.
*/
-@import '../../variables';
+import React from 'react';
-.home-view {
- display: grid;
- gap: $standard-padding;
- grid-template-columns: 1fr 1fr 1fr 1fr;
+import { compact, pluralIfNeeded } from '../../utils';
- & > a {
- text-decoration: inherit;
- color: inherit;
- }
+export interface PluralPairIfNeededProps {
+ firstCount: number;
+ firstSingular: string;
+ secondCount: number;
+ secondSingular: string;
}
+
+export const PluralPairIfNeeded = React.memo(function PluralPairIfNeeded(
+ props: PluralPairIfNeededProps,
+) {
+ const { firstCount, firstSingular, secondCount, secondSingular } = props;
+
+ const text = compact([
+ firstCount ? pluralIfNeeded(firstCount, firstSingular) : undefined,
+ secondCount ? pluralIfNeeded(secondCount, secondSingular) : undefined,
+ ]).join(', ');
+ if (!text) return null;
+ return <p className="plural-pair-if-needed">{text}</p>;
+});
diff --git
a/web-console/src/views/home-view/datasources-card/datasources-card.tsx
b/web-console/src/views/home-view/datasources-card/datasources-card.tsx
index bed26d7..f36bd18c 100644
--- a/web-console/src/views/home-view/datasources-card/datasources-card.tsx
+++ b/web-console/src/views/home-view/datasources-card/datasources-card.tsx
@@ -94,7 +94,7 @@ export class DatasourcesCard extends React.PureComponent<
loading={datasourceCountLoading}
error={datasourceCountError}
>
- {pluralIfNeeded(datasourceCount, 'datasource')}
+ <p>{pluralIfNeeded(datasourceCount, 'datasource')}</p>
</HomeViewCard>
);
}
diff --git a/web-console/src/views/home-view/home-view-card/home-view-card.scss
b/web-console/src/views/home-view/home-view-card/home-view-card.scss
index 82b4b93..3c63840 100644
--- a/web-console/src/views/home-view/home-view-card/home-view-card.scss
+++ b/web-console/src/views/home-view/home-view-card/home-view-card.scss
@@ -20,4 +20,17 @@
.bp3-card {
height: 170px;
}
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ p {
+ padding-left: 20px;
+ }
+}
+
+.bp3-dark a.home-view-card,
+.bp3-dark a.home-view-card:hover {
+ color: inherit;
}
diff --git a/web-console/src/views/home-view/home-view.scss
b/web-console/src/views/home-view/home-view.scss
index e568750..9f892c4 100644
--- a/web-console/src/views/home-view/home-view.scss
+++ b/web-console/src/views/home-view/home-view.scss
@@ -22,9 +22,5 @@
display: grid;
gap: $standard-padding;
grid-template-columns: 1fr 1fr 1fr 1fr;
-
- & > a {
- text-decoration: inherit;
- color: inherit;
- }
+ padding: 0 60px;
}
diff --git a/web-console/src/views/home-view/services-card/services-card.tsx
b/web-console/src/views/home-view/services-card/services-card.tsx
index ec39585..09d5cf0 100644
--- a/web-console/src/views/home-view/services-card/services-card.tsx
+++ b/web-console/src/views/home-view/services-card/services-card.tsx
@@ -20,7 +20,8 @@ import { IconNames } from '@blueprintjs/icons';
import axios from 'axios';
import React from 'react';
-import { compact, lookupBy, pluralIfNeeded, queryDruidSql, QueryManager } from
'../../../utils';
+import { PluralPairIfNeeded } from
'../../../components/plural-pair-if-needed/plural-pair-if-needed';
+import { lookupBy, queryDruidSql, QueryManager } from '../../../utils';
import { Capabilities } from '../../../utils/capabilities';
import { HomeViewCard } from '../home-view-card/home-view-card';
@@ -42,20 +43,6 @@ export interface ServicesCardState {
}
export class ServicesCard extends React.PureComponent<ServicesCardProps,
ServicesCardState> {
- static renderPluralIfNeededPair(
- count1: number,
- singular1: string,
- count2: number,
- singular2: string,
- ): JSX.Element | undefined {
- const text = compact([
- count1 ? pluralIfNeeded(count1, singular1) : undefined,
- count2 ? pluralIfNeeded(count2, singular2) : undefined,
- ]).join(', ');
- if (!text) return;
- return <p>{text}</p>;
- }
-
private serviceQueryManager: QueryManager<Capabilities, any>;
constructor(props: ServicesCardProps, context: any) {
@@ -147,20 +134,30 @@ export class ServicesCard extends
React.PureComponent<ServicesCardProps, Service
loading={serviceCountLoading}
error={serviceCountError}
>
- {ServicesCard.renderPluralIfNeededPair(
- overlordCount,
- 'overlord',
- coordinatorCount,
- 'coordinator',
- )}
- {ServicesCard.renderPluralIfNeededPair(routerCount, 'router',
brokerCount, 'broker')}
- {ServicesCard.renderPluralIfNeededPair(
- historicalCount,
- 'historical',
- middleManagerCount,
- 'middle manager',
- )}
- {ServicesCard.renderPluralIfNeededPair(peonCount, 'peon',
indexerCount, 'indexer')}
+ <PluralPairIfNeeded
+ firstCount={overlordCount}
+ firstSingular="overlord"
+ secondCount={coordinatorCount}
+ secondSingular="coordinator"
+ />
+ <PluralPairIfNeeded
+ firstCount={routerCount}
+ firstSingular="router"
+ secondCount={brokerCount}
+ secondSingular="broker"
+ />
+ <PluralPairIfNeeded
+ firstCount={historicalCount}
+ firstSingular="historical"
+ secondCount={middleManagerCount}
+ secondSingular="middle manager"
+ />
+ <PluralPairIfNeeded
+ firstCount={peonCount}
+ firstSingular="peon"
+ secondCount={indexerCount}
+ secondSingular="indexer"
+ />
</HomeViewCard>
);
}
diff --git a/web-console/src/views/home-view/tasks-card/tasks-card.tsx
b/web-console/src/views/home-view/tasks-card/tasks-card.tsx
index d8e2a49..b0efe6a 100644
--- a/web-console/src/views/home-view/tasks-card/tasks-card.tsx
+++ b/web-console/src/views/home-view/tasks-card/tasks-card.tsx
@@ -20,6 +20,7 @@ import { IconNames } from '@blueprintjs/icons';
import axios from 'axios';
import React from 'react';
+import { PluralPairIfNeeded } from
'../../../components/plural-pair-if-needed/plural-pair-if-needed';
import { lookupBy, pluralIfNeeded, queryDruidSql, QueryManager } from
'../../../utils';
import { Capabilities } from '../../../utils/capabilities';
import { HomeViewCard } from '../home-view-card/home-view-card';
@@ -124,8 +125,12 @@ GROUP BY 1`,
loading={taskCountLoading}
error={taskCountError}
>
- {Boolean(runningTaskCount) && <p>{pluralIfNeeded(runningTaskCount,
'running task')}</p>}
- {Boolean(pendingTaskCount) && <p>{pluralIfNeeded(pendingTaskCount,
'pending task')}</p>}
+ <PluralPairIfNeeded
+ firstCount={runningTaskCount}
+ firstSingular="running task"
+ secondCount={pendingTaskCount}
+ secondSingular="pending task"
+ />
{Boolean(successTaskCount) && <p>{pluralIfNeeded(successTaskCount,
'successful task')}</p>}
{Boolean(waitingTaskCount) && <p>{pluralIfNeeded(waitingTaskCount,
'waiting task')}</p>}
{Boolean(failedTaskCount) && <p>{pluralIfNeeded(failedTaskCount,
'failed task')}</p>}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
