Migrate Query Snippets to React

client/app/components/items-list/components/ItemsTable.jsx

@@ -6,7 +6,7 @@ import Table from 'antd/lib/table';
 import { FavoritesControl } from '@/components/FavoritesControl';
 import { TimeAgo } from '@/components/TimeAgo';
 import { durationHumanize } from '@/filters';
-import { formatDateTime } from '@/filters/datetime';
+import { formatDate, formatDateTime } from '@/filters/datetime';
 
 // `this` refers to previous function in the chain (`Columns.***`).
 // Adds `sorter: true` field to column definition
@@ -35,6 +35,11 @@ export const Columns = {
       ),
     }, overrides);
   },
+  date(overrides) {
+    return extend({
+      render: text => formatDate(text),
+    }, overrides);
+  },
   dateTime(overrides) {
     return extend({
       render: text => formatDateTime(text),
@@ -59,6 +64,7 @@ export const Columns = {
   },
 };
 
+Columns.date.sortable = sortable;
 Columns.dateTime.sortable = sortable;
 Columns.duration.sortable = sortable;
 Columns.timeAgo.sortable = sortable;

client/app/filters/datetime.js

@@ -1,6 +1,19 @@
 import moment from 'moment';
 import { clientConfig } from '@/services/auth';
 
+export function formatDate(value) {
+  if (!value) {
+    return '';
+  }
+
+  const parsed = moment(value);
+  if (!parsed.isValid()) {
+    return '-';
+  }
+
+  return parsed.format(clientConfig.dateFormat);
+}
+
 export function formatDateTime(value) {
   if (!value) {
     return '';

client/app/pages/query-snippets/QuerySnippetsList.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+import Button from 'antd/lib/button';
+import { Paginator } from '@/components/Paginator';
+
+import { wrap as liveItemsList, ControllerType } from '@/components/items-list/ItemsList';
+import { ResourceItemsSource } from '@/components/items-list/classes/ItemsSource';
+import { StateStorage } from '@/components/items-list/classes/StateStorage';
+
+import LoadingState from '@/components/items-list/components/LoadingState';
+import ItemsTable, { Columns } from '@/components/items-list/components/ItemsTable';
+
+import { QuerySnippet } from '@/services/query-snippet';
+import settingsMenu from '@/services/settingsMenu';
+import { policy } from '@/services/policy';
+import { routesToAngularRoutes } from '@/lib/utils';
+import './QuerySnippetsList.less';
+
+class QuerySnippetsList extends React.Component {
+  static propTypes = {
+    controller: ControllerType.isRequired,
+  };
+
+  listColumns = [
+    Columns.custom.sortable((text, querySnippet) => (
+      <div>
+        <a className="table-main-title" href={'query_snippets/' + querySnippet.id}>{querySnippet.trigger}</a>
+      </div>
+    ), {
+      title: 'Trigger',
+      field: 'trigger',
+      className: 'text-nowrap',
+    }),
+    Columns.custom.sortable(text => text, {
+      title: 'Description',
+      field: 'description',
+      className: 'text-nowrap',
+    }),
+    Columns.custom(snippet => (
+      <code className="snippet-content">
+        {snippet}
+      </code>
+    ), {
+      title: 'Snippet',
+      field: 'snippet',
+    }),
+    Columns.avatar({ field: 'user', className: 'p-l-0 p-r-0' }, name => `Created by ${name}`),
+    Columns.date.sortable({
+      title: 'Created At',
+      field: 'created_at',
+      className: 'text-nowrap',
+      width: '1%',
+    }),
+  ];
+
+  render() {
+    const { controller } = this.props;
+
+    return (
+      <div>
+        <div className="m-b-15">
+          <Button type="primary" href="/query_snippets/new" disabled={!policy.isCreateQuerySnippetEnabled()}>
+            <i className="fa fa-plus m-r-5" />
+            New Query Snippet
+          </Button>
+        </div>
+
+        {!controller.isLoaded && <LoadingState className="" />}
+        {controller.isLoaded && controller.isEmpty && (
+          <div className="text-center">
+          There are no query snippets yet.
+            {policy.isCreateQuerySnippetEnabled() && (
+              <div className="m-t-5">
+                <a href="/query_snippets/new">Click here</a> to add one.
+              </div>
+            )}
+          </div>
+        )}
+        {
+          controller.isLoaded && !controller.isEmpty && (
+            <div className="table-responsive">
+              <ItemsTable
+                items={controller.pageItems}
+                columns={this.listColumns}
+                context={this.actions}
+                orderByField={controller.orderByField}
+                orderByReverse={controller.orderByReverse}
+                toggleSorting={controller.toggleSorting}
+              />
+              <Paginator
+                totalCount={controller.totalItemsCount}
+                itemsPerPage={controller.itemsPerPage}
+                page={controller.page}
+                onChange={page => controller.updatePagination({ page })}
+              />
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  settingsMenu.add({
+    permission: 'create_query',
+    title: 'Query Snippets',
+    path: 'query_snippets',
+    order: 5,
+  });
+
+  ngModule.component('pageQuerySnippetsList', react2angular(liveItemsList(
+    QuerySnippetsList,
+    new ResourceItemsSource({
+      isPlainList: true,
+      getRequest() {
+        return {};
+      },
+      getResource() {
+        return QuerySnippet.query.bind(QuerySnippet);
+      },
+      getItemProcessor() {
+        return (item => new QuerySnippet(item));
+      },
+    }),
+    new StateStorage({ orderByField: 'trigger', itemsPerPage: 10 }),
+  )));
+
+  return routesToAngularRoutes([
+    {
+      path: '/query_snippets',
+      title: 'Query Snippets',
+      key: 'query_snippets',
+    },
+  ], {
+    reloadOnSearch: false,
+    template: '<settings-screen><page-query-snippets-list on-error="handleError"></page-query-snippets-list></settings-screen>',
+    controller($scope, $exceptionHandler) {
+      'ngInject';
+
+      $scope.handleError = $exceptionHandler;
+    },
+  });
+}
+
+init.init = true;

client/app/pages/query-snippets/QuerySnippetsList.less

@@ -0,0 +1,9 @@
+.snippet-content {
+  max-width: 500px;
+  max-height: 56px;
+  overflow: hidden;
+  /* autoprefixer: off */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

client/app/services/policy/DefaultPolicy.js

@@ -37,6 +37,10 @@ export default class DefaultPolicy {
     return currentUser.isAdmin;
   }
 
+  isCreateQuerySnippetEnabled() {
+    return true;
+  }
+
   getDashboardRefreshIntervals() {
     const result = clientConfig.dashboardRefreshIntervals;
     return isArray(result) ? result : null;