Add labels to fetched indices

live/src/css/styles.css

@@ -1245,6 +1245,21 @@ iframe {
 	margin: 0 10px;
 }
 
+.app-label {
+	color: #fff;
+	border-radius: 3px;
+	padding: 3px;
+	margin: 0 10px;
+}
+
+.app-label--primary {
+	background: #0087ff;
+}
+
+.app-label--success {
+	background: #5cb85c;
+}
+
 .column-label-img {
 	margin-right: 10px;
 }
@@ -1531,6 +1546,10 @@ ul#setApp {
 	align-items: center;
 }
 
+.flex-justify-space-between {
+	justify-content: space-between;
+}
+
 .icon-sm {
 	width: 25px;
 }

live/src/js/AppLabel.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AppLabel = ({ children, success }) => (
+	<span className={`app-label ${success ? 'app-label--success' : 'app-label--primary'}`}>
+		{children}
+	</span>
+);
+
+AppLabel.defaultProps = {
+	success: false
+};
+
+AppLabel.propTypes = {
+	children: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number
+	]),
+	success: PropTypes.bool
+};
+
+export default AppLabel;

live/src/js/AppSelect.js

@@ -1,6 +1,7 @@
 //This contains the extra features like
 //Import data, Export Data, Add document, Pretty Json
 var React = require('react');
+import Label from './AppLabel';
 
 class AppSelect extends React.Component {
 	state = {
@@ -75,7 +76,13 @@ class AppSelect extends React.Component {
 		}
 
 		var options = optionsArr.map((app, index) => (
-			<li key={index} onClick={this.selectOption.bind(this, app.appname)}>{app.appname}</li>
+			<li key={index} onClick={this.selectOption.bind(this, app.appname)}>
+				<span className="flex flex-align-center flex-justify-space-between">{app.appname}
+					<Label success={app.fetched}>
+						{app.fetched ? 'Fetched' : 'Cached'}
+					</Label>
+				</span>
+			</li>
 		));
 
 		var searchValue = this.state.searchValue;

live/src/js/HomePage.js

@@ -800,9 +800,12 @@ var HomePage = createReactClass({
 		feed.getIndicesAliases(indexUrl)
 			.done((res) => {
 				const apps = JSON.parse(storageService.getItem('historicApps'));
-				const newApps = apps.concat(Object.keys(res).map(key => ({
-					appname: key, url: indexUrl
-				})));
+				const newApps = [
+					...(Object.keys(res).map(key => ({
+						appname: key, url: indexUrl, fetched: true
+					}))),
+					...apps
+				];
 				const appsObject = {};
 				const uniqueApps = newApps.filter(app => {
 					if(appsObject[app.appname]) {