mirror of https://github.com/kubeflow/examples.git
Search UI Components (#168)
* Initialize search UI. Needs connection to search service * Fix page title * Add component for code search results, dummy values for now * Fix title and manifest * Add mock loading UI. Need to fill in real API results * Wrap application into Dockerfile
This commit is contained in:
Sanyam Kapoor
k8s-ci-robot
parent
c5f13464b4
commit
d692db36e8
|
|
@ -0,0 +1,21 @@
|
|||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
FROM node:10.6
|
||||
|
||||
EXPOSE 5000
|
||||
|
||||
RUN npm i -g serve
|
||||
|
||||
ADD ./build /webapp
|
||||
|
||||
ENTRYPOINT ["serve"]
|
||||
|
||||
CMD ["-l", "5000", "-n", "/webapp"]
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^1.3.1",
|
||||
"@material-ui/icons": "^1.1.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "1.1.4",
|
||||
"react-syntax-highlighter": "^8.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#4279f4">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Code Search Demo on Kubeflow</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"short_name": "Code Search Demo",
|
||||
"name": "Code Search Demo on Kubeflow",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#4279f4",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.App {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5em;
|
||||
padding: 1em;
|
||||
height: 6em;
|
||||
background: white;
|
||||
border: solid #4279f4 1px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #4279f4;
|
||||
padding: 1em;
|
||||
margin-bottom: 4em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-title {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
|
||||
.Search-Wrapper {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#Search-Bar {
|
||||
position: relative;
|
||||
width: 30em;
|
||||
padding: 1em;
|
||||
border: solid #eee 1px;
|
||||
}
|
||||
|
||||
#Search-Button {
|
||||
border-radius: 0.1em;
|
||||
font-weight: normal;
|
||||
padding: 0.5em 1em;
|
||||
background: #4279f4;
|
||||
}
|
||||
|
||||
.Search-Results {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.Search-Results-Title {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.Code-Url {
|
||||
display: flex;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Code-Url .Code-Icon {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.Code-Url p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React, { Component } from 'react';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
import { MuiThemeProvider } from '@material-ui/core/styles';
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
|
||||
import blueTheme from './theme';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import CodeSample from './CodeSample';
|
||||
import code_search_api from './CodeSearchApi';
|
||||
|
||||
class App extends Component {
|
||||
state = {
|
||||
codeResults: [],
|
||||
queryStr: '',
|
||||
loading: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
const {codeResults, loading} = this.state;
|
||||
return (
|
||||
<MuiThemeProvider theme={blueTheme}>
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<h1 className="App-title">Code Search Demo</h1>
|
||||
</header>
|
||||
<div className="Search-Wrapper">
|
||||
<TextField
|
||||
id="Search-Bar"
|
||||
placeholder="Enter Search Query Here"
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
}}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="Search-Wrapper">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
id="Search-Button"
|
||||
onClick={this.onSearchClick}
|
||||
disabled={loading}
|
||||
>
|
||||
<SearchIcon/> Search Code
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
loading ?
|
||||
<LinearProgress color="primary" /> :
|
||||
<div className="Search-Results">
|
||||
<h2 className="Search-Results-Title">Search Results</h2>
|
||||
{
|
||||
codeResults.map((attrs) => <CodeSample {...attrs}/>)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
onSearchQueryChange = (e) => {
|
||||
const {value} = e.target;
|
||||
this.setState({queryStr: value});
|
||||
};
|
||||
|
||||
onSearchClick = () => {
|
||||
const {queryStr} = this.state;
|
||||
if (queryStr) {
|
||||
this.setState({loading: true});
|
||||
code_search_api(queryStr, (response) => {
|
||||
const {status, results} = response;
|
||||
if (status === 200) {
|
||||
this.setState({codeResults: results, loading: false});
|
||||
} else {
|
||||
this.setState({loading: false});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { docco } from 'react-syntax-highlighter/styles/hljs';
|
||||
import CodeIcon from '@material-ui/icons/Code';
|
||||
|
||||
class CodeSample extends Component {
|
||||
render() {
|
||||
const {nwo, path, function_string, lineno} = this.props;
|
||||
|
||||
const codeUrl = `${nwo}/blob/master/${path}#L${lineno}`;
|
||||
|
||||
return (
|
||||
<div className="Code-Sample">
|
||||
<div className="Code-Url">
|
||||
<a
|
||||
href={`//github.com/${codeUrl}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
<CodeIcon className="Code-Icon" />
|
||||
</a>
|
||||
<p><b>{nwo}/{path}#L{lineno}</b></p>
|
||||
</div>
|
||||
|
||||
<SyntaxHighlighter style={docco}>
|
||||
{function_string}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CodeSample.propTypes = {
|
||||
nwo: PropTypes.string.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
function_string: PropTypes.string.isRequired,
|
||||
lineno: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default CodeSample;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
const results = [
|
||||
{
|
||||
nwo: 'activatedgeek/torchrl',
|
||||
path: 'torchrl/agents/random_gym_agent.py',
|
||||
lineno: 19,
|
||||
function_string: `
|
||||
def act(self, obs):
|
||||
return [[self.action_space.sample()] for _ in range(len(obs))]
|
||||
`,
|
||||
},
|
||||
{
|
||||
nwo: 'activatedgeek/torchrl',
|
||||
path: 'torchrl/policies/epsilon_greedy.py',
|
||||
lineno: 4,
|
||||
function_string: `
|
||||
distribution = np.ones((len(choices), action_size),
|
||||
dtype=np.float32) * eps / action_size
|
||||
distribution[np.arange(len(choices)), choices] += 1.0 - eps
|
||||
actions = np.array([
|
||||
np.random.choice(np.arange(action_size), p=dist)
|
||||
for dist in distribution
|
||||
])
|
||||
return np.expand_dims(actions, axis=1)
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
function code_search_api(str, callback) {
|
||||
// TODO: make a real request, this is simulated
|
||||
window.setTimeout(() => {
|
||||
callback({status: 200, results: results});
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
export default code_search_api;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.93 274.55"><g data-name="Layer 2"><g data-name="Layer 1"><path d="M95.9 62.15l4.1 102.1 73.75-94.12a6.79 6.79 0 0 1 9.6-1.11l46 36.92-15-65.61z" fill="#4279f4"/><path fill="#0028aa" d="M102.55 182.98h65.42l-40.17-32.23-25.25 32.23z"/><path fill="#014bd1" d="M180.18 83.92l-44 56.14 46.88 37.61 44.47-55.76-47.35-37.99z"/><path fill="#bedcff" d="M83.56 52.3l.01-.01 38.69-48.52-62.39 30.05-15.41 67.51 39.1-49.03z"/><path fill="#6ca1ff" d="M45.32 122.05l41.44 51.96-3.95-98.98-37.49 47.02z"/><path fill="#a1c3ff" d="M202.31 28.73L142.65 0l-37.13 46.56 96.79-17.83z"/><path d="M1.6 272v-44.78h5.74v23.41l20.48-23.41h6.4l-17.39 19.7 19 25.07H29.1l-15.92-20.8-5.84 6.65V272zm40.02-9.79V240h5.43v22.39a4.67 4.67 0 0 0 2.35 4.19 11 11 0 0 0 11 0 4.69 4.69 0 0 0 2.33-4.19V240h5.43v22.19a9.08 9.08 0 0 1-4.1 7.87 16.2 16.2 0 0 1-18.37 0 9.07 9.07 0 0 1-4.07-7.85zM77.46 272v-48h5.43v16.81a29.29 29.29 0 0 1 9.32-1.73 13.1 13.1 0 0 1 6.2 1.41 10.71 10.71 0 0 1 4.18 3.74 18.07 18.07 0 0 1 2.23 5.06 21.26 21.26 0 0 1 .73 5.58q0 8.43-4.38 12.79T87.35 272zm5.43-4.87h4.55q6.77 0 9.72-2.95t3-9.51a14.21 14.21 0 0 0-2-7.52 6.55 6.55 0 0 0-6-3.22 24.73 24.73 0 0 0-9.25 1.54zm29.47-11.19q0-7.71 4.09-12.3a13.75 13.75 0 0 1 10.8-4.59q13.35 0 13.36 18.86h-22.82a12.3 12.3 0 0 0 2.9 7.07q2.59 3.11 7.9 3.1a24.92 24.92 0 0 0 10.55-2v5a27.74 27.74 0 0 1-9.86 1.87 19.83 19.83 0 0 1-7.7-1.37 13.31 13.31 0 0 1-5.28-3.76 16.21 16.21 0 0 1-3-5.38 20.84 20.84 0 0 1-.94-6.5zm5.62-2.12h17.26a14.91 14.91 0 0 0-2.37-7.12 6.44 6.44 0 0 0-5.62-2.78 8.2 8.2 0 0 0-6.21 2.72 12.07 12.07 0 0 0-3.04 7.18z" fill="#4279f4" stroke="#4279f4" stroke-miterlimit="10" stroke-width="3.2"/><path d="M147.32 244.89V240h5v-7.59a8.14 8.14 0 0 1 2.31-6.05 7.79 7.79 0 0 1 5.69-2.28h7.86V229h-5c-2.21 0-3.67.45-4.37 1.34s-1.06 2.55-1.06 5V240h8.46v4.87h-8.46V272h-5.44v-27.1zM175.26 272v-48h5.43v48zm19.15-3.95a17.86 17.86 0 1 1 12.33 4.9 16.57 16.57 0 0 1-12.33-4.9zm3.84-20.65a13.16 13.16 0 0 0 0 17.2 12.07 12.07 0 0 0 17 0 13.09 13.09 0 0 0 0-17.2 12.07 12.07 0 0 0-17 0zm30.2-7.4h5.75l7.3 25.32 7.43-25.32h5.36l7.34 25.34L269 240h5.74l-10.04 32h-6.12l-6.83-24.58L245 272h-6.47z" fill="#0028aa" stroke="#0028aa" stroke-miterlimit="10" stroke-width="3.2"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,117 @@
|
|||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { createMuiTheme } from '@material-ui/core/styles';
|
||||
import blue from '@material-ui/core/colors/blue';
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: blue,
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
Loading…
Reference in New Issue