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

Add simple filtering by name to CustomTable #656

Merged
merged 6 commits into from
Jan 10, 2019
Merged

Add simple filtering by name to CustomTable #656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1c3793a
Adds simple filtering by 'name' to CustomTable
rileyjbauer Jan 4, 2019
f472bd0
Update tests
rileyjbauer Jan 4, 2019
2a60ef9
Adds new tests for filtering the CustomTable
rileyjbauer Jan 7, 2019
c7ce5b9
Filter using 'is_substring' rather than 'equal'
rileyjbauer Jan 8, 2019
b67827c
Clean up and some comments
rileyjbauer Jan 10, 2019
2e99ce8
Add snapshot to handleFilterChange test
rileyjbauer Jan 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 64 additions & 39 deletions frontend/mock-backend/mock-api-middleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@
import * as express from 'express';
import * as fs from 'fs';
import * as _path from 'path';
import proxyMiddleware from '../server/proxy-middleware';
import { ExperimentSortKeys, RunSortKeys, PipelineSortKeys } from '../src/lib/Apis';

import RunUtils from '../src/lib/RunUtils';
import helloWorldRuntime from './integration-test-runtime';
import { data as fixedData, namedPipelines } from './fixed-data';
import { ApiPipeline, ApiListPipelinesResponse } from '../src/apis/pipeline';
import { ApiListJobsResponse, ApiJob } from '../src/apis/job';
import { ApiRun, ApiListRunsResponse, ApiResourceType } from '../src/apis/run';
import proxyMiddleware from '../server/proxy-middleware';
import { ApiFilter, PredicateOp } from '../src/apis/filter/api';
import { ApiListExperimentsResponse, ApiExperiment } from '../src/apis/experiment';
import RunUtils from '../src/lib/RunUtils';
import { ApiListJobsResponse, ApiJob } from '../src/apis/job';
import { ApiListPipelinesResponse, ApiPipeline } from '../src/apis/pipeline';
import { ApiListRunsResponse, ApiResourceType, ApiRun } from '../src/apis/run';
import { ExperimentSortKeys, PipelineSortKeys, RunSortKeys } from '../src/lib/Apis';
import { Response } from 'express-serve-static-core';
import { data as fixedData, namedPipelines } from './fixed-data';

const rocMetadataJsonPath = './eval-output/metadata.json';
const rocMetadataJsonPath2 = './eval-output/metadata2.json';
Expand All @@ -42,6 +42,15 @@ const v1beta1Prefix = '/apis/v1beta1';

let tensorboardPod = '';

// This is a copy of the BaseResource defined within src/pages/ResourceSelector
interface BaseResource {
id?: string;
created_at?: Date;
description?: string;
name?: string;
error?: string;
}

// tslint:disable-next-line:no-default-export
export default (app: express.Application) => {

Expand Down Expand Up @@ -92,13 +101,8 @@ export default (app: express.Application) => {
};

let jobs: ApiJob[] = fixedData.jobs;
if (req.query.filter_by) {
// NOTE: We do not mock fuzzy matching. E.g. 'jb' doesn't match 'job'
// This may need to be updated when the backend implements filtering.
jobs = fixedData.jobs.filter((j) =>
j.name!.toLocaleLowerCase().indexOf(
decodeURIComponent(req.query.filter_by).toLocaleLowerCase()) > -1);

if (req.query.filter) {
jobs = filterResources(fixedData.jobs, req.query.filter);
}

const { desc, key } = getSortKeyAndOrder(ExperimentSortKeys.CREATED_AT, req.query.sort_by);
Expand Down Expand Up @@ -134,12 +138,8 @@ export default (app: express.Application) => {
};

let experiments: ApiExperiment[] = fixedData.experiments;
if (req.query.filterBy) {
// NOTE: We do not mock fuzzy matching. E.g. 'ep' doesn't match 'experiment'
experiments = fixedData.experiments.filter((exp) =>
exp.name!.toLocaleLowerCase().indexOf(
decodeURIComponent(req.query.filterBy).toLocaleLowerCase()) > -1);

if (req.query.filter) {
experiments = filterResources(fixedData.experiments, req.query.filter);
}

const { desc, key } = getSortKeyAndOrder(ExperimentSortKeys.NAME, req.query.sortBy);
Expand Down Expand Up @@ -272,11 +272,8 @@ export default (app: express.Application) => {
return;
}

if (req.query.filter_by) {
// NOTE: We do not mock fuzzy matching. E.g. 'jb' doesn't match 'job'
// This may need to be updated when the backend implements filtering.
runs = runs.filter((r) => r.name!.toLocaleLowerCase().indexOf(
decodeURIComponent(req.query.filter_by).toLocaleLowerCase()) > -1);
if (req.query.filter) {
runs = filterResources(runs, req.query.filter);
}

const { desc, key } = getSortKeyAndOrder(RunSortKeys.CREATED_AT, req.query.sort_by);
Expand Down Expand Up @@ -313,11 +310,8 @@ export default (app: express.Application) => {

let runs: ApiRun[] = fixedData.runs.map((r) => r.run!);

if (req.query.filter_by) {
// NOTE: We do not mock fuzzy matching. E.g. 'rn' doesn't match 'run'
// This may need to be updated when the backend implements filtering.
runs = runs.filter((r) => r.name!.toLocaleLowerCase().indexOf(
decodeURIComponent(req.query.filter_by).toLocaleLowerCase()) > -1);
if (req.query.filter) {
runs = filterResources(runs, req.query.filter);
}

if (req.query['resource_reference_key.type'] === ApiResourceType.EXPERIMENT) {
Expand Down Expand Up @@ -409,6 +403,43 @@ export default (app: express.Application) => {
}, 1000);
});

function filterResources(resources: BaseResource[], filterString?: string): BaseResource[] {
if (!filterString) {
return resources;
}
const filter: ApiFilter = JSON.parse(decodeURIComponent(filterString));
((filter && filter.predicates) || []).forEach(p => {
resources = resources.filter(r => {
switch(p.op) {
case PredicateOp.EQUALS:
if (p.key !== 'name') {
throw new Error(`Key: ${p.key} is not yet supported by the mock API server`);
}
return r.name && r.name.toLocaleLowerCase() === (p.string_value || '').toLocaleLowerCase();
case PredicateOp.ISSUBSTRING:
if (p.key !== 'name') {
throw new Error(`Key: ${p.key} is not yet supported by the mock API server`);
}
return r.name && r.name.toLocaleLowerCase().includes((p.string_value || '').toLocaleLowerCase());
case PredicateOp.NOTEQUALS:
// Fall through
case PredicateOp.GREATERTHAN:
// Fall through
case PredicateOp.GREATERTHANEQUALS:
// Fall through
case PredicateOp.LESSTHAN:
// Fall through
case PredicateOp.LESSTHANEQUALS:
// Fall through
throw new Error(`Op: ${p.op} is not yet supported by the mock API server`);
default:
throw new Error(`Unknown Predicate op: ${p.op}`);
}
});
});
return resources;
}

app.get(v1beta1Prefix + '/pipelines', (req, res) => {
res.header('Content-Type', 'application/json');
const response: ApiListPipelinesResponse = {
Expand All @@ -417,18 +448,12 @@ export default (app: express.Application) => {
};

let pipelines: ApiPipeline[] = fixedData.pipelines;
if (req.query.filter_by) {
// NOTE: We do not mock fuzzy matching. E.g. 'jb' doesn't match 'job'
// This may need to be updated depending on how the backend implements filtering.
pipelines = fixedData.pipelines.filter((p) =>
p.name!.toLocaleLowerCase().indexOf(
decodeURIComponent(req.query.filter_by).toLocaleLowerCase()) > -1);

if (req.query.filter) {
pipelines = filterResources(fixedData.pipelines, req.query.filter);
}

const { desc, key } = getSortKeyAndOrder(PipelineSortKeys.CREATED_AT, req.query.sort_by);


pipelines.sort((a, b) => {
let result = 1;
if (a[key]! < b[key]!) {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/apis/filter/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,8 @@ export enum PredicateOp {
GREATERTHANEQUALS = <any> 'GREATER_THAN_EQUALS',
LESSTHAN = <any> 'LESS_THAN',
LESSTHANEQUALS = <any> 'LESS_THAN_EQUALS',
IN = <any> 'IN'
IN = <any> 'IN',
ISSUBSTRING = <any> 'IS_SUBSTRING'
}


Expand Down
5 changes: 3 additions & 2 deletions frontend/src/atoms/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,17 @@ import { commonCss } from '../Css';

interface InputProps extends OutlinedTextFieldProps {
height?: number | string;
maxWidth?: number | string;
width?: number;
}

export default (props: InputProps) => {
const { height, variant, width, ...rest } = props;
const { height, maxWidth, variant, width, ...rest } = props;
return (
<TextField variant={variant} className={commonCss.textField} spellCheck={false}
style={{
height: !!props.multiline ? 'auto' : (height || 40),
maxWidth: 600,
maxWidth: maxWidth || 600,
width: width || '100%' }}
{...rest}>
{props.children}
Expand Down
Loading