Apache
/
druid
mirror of https://github.com/apache/druid.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix home view styling (#9444)

This commit is contained in:
Clint Wylie 2020-03-04 19:39:36 -08:00 committed by GitHub
parent 3016057178
commit 32cd47bc8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 196 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web-console/src/components/plural-pair-if-needed/__snapshots__/plural-pair-if-needed.spec.tsx.snap Normal file
View File

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

80
web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.spec.tsx Normal file
View File

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

41
web-console/src/components/plural-pair-if-needed/plural-pair-if-needed.tsx Normal file
View File

@ -0,0 +1,41 @@
/*
* 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 React from 'react';
import { compact, pluralIfNeeded } from '../../utils';
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>;
});

2
web-console/src/views/home-view/datasources-card/datasources-card.tsx
View File

@ -94,7 +94,7 @@ export class DatasourcesCard extends React.PureComponent<
loading={datasourceCountLoading}
error={datasourceCountError}
>
{pluralIfNeeded(datasourceCount, 'datasource')}
<p>{pluralIfNeeded(datasourceCount, 'datasource')}</p>
</HomeViewCard>
);
}

13
web-console/src/views/home-view/home-view-card/home-view-card.scss
View File

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

6
web-console/src/views/home-view/home-view.scss
View File

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

55
web-console/src/views/home-view/services-card/services-card.tsx
View File

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

9
web-console/src/views/home-view/tasks-card/tasks-card.tsx
View File

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