diff --git a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
index 471c4c6c5e..5de7383ef9 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
@@ -18,7 +18,7 @@ const Description = ({ pack }) => {
return (
Description
-
{pack.description}
+
{pack.description || No description available}
);
};
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
index 80732ebf69..0b74dcb8d2 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
@@ -1,5 +1,6 @@
import React, { Component, PropTypes } from 'react';
import { take } from 'lodash';
+import { Link } from 'react-router';
import Button from 'components/buttons/Button';
import Icon from 'components/icons/Icon';
@@ -61,7 +62,7 @@ class ScheduledQueriesSection extends Component {
return (
- {scheduledQuery.name}
+ {scheduledQuery.name}
);
})}
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
index 76ab353db5..fd6035a37c 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
@@ -64,8 +64,12 @@
&__query-name {
@include ellipsis(240px);
- color: $text-medium;
- font-size: 16px;
- vertical-align: bottom;
+ font-size: 14px;
+ vertical-align: middle;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
}
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
index 8a3e6a36a2..592823e439 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
@@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
import Button from 'components/buttons/Button';
import Icon from 'components/icons/Icon';
@@ -30,16 +31,16 @@ class QueryDetailsSidePanel extends Component {
}
return (
-
+
{packs.map((pack) => {
return (
-
+
-
- {pack.name}
-
+ {pack.name}
+
);
})}
-
+
);
}
@@ -62,7 +63,7 @@ class QueryDetailsSidePanel extends Component {
wrapEnabled
/>
Description
- {description}
+ {description || No description available}
Packs
{renderPacks()}
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
index a762107e2b..bafc5b01a4 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@@ -41,4 +41,28 @@
.button {
width: 100%;
}
+
+ &__packs {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ &__pack-item {
+ .kolidecon {
+ margin-right: 12px;
+ color: $text-medium;
+ }
+ }
+
+ &__pack-name {
+ @include ellipsis(240px);
+ text-decoration: none;
+ font-size: 14px;
+ vertical-align: middle;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}