Replace $http with axios

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -1,10 +1,11 @@
 import { trim } from "lodash";
 import React, { useRef, useState, useEffect } from "react";
+import axios from "axios";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import DynamicComponent from "@/components/DynamicComponent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { $location, $http } from "@/services/ng";
+import { $location } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
 
@@ -36,7 +37,7 @@ function CreateDashboardDialog({ dialog }) {
     if (name !== "") {
       setSaveInProgress(true);
 
-      $http.post("api/dashboards", { name }).then(({ data }) => {
+      axios.post("api/dashboards", { name }).then(({ data }) => {
         dialog.close();
         $location
           .path(`/dashboard/${data.slug}`)

client/app/components/items-list/classes/ItemsSource.js

@@ -1,4 +1,4 @@
-import { isFunction, identity, map, extend } from "lodash";
+import { isFunction, identity, map, extend, get } from "lodash";
 import Paginator from "./Paginator";
 import Sorter from "./Sorter";
 import PromiseRejectionError from "@/lib/promise-rejection-error";
@@ -156,8 +156,9 @@ export class ResourceItemsSource extends ItemsSource {
     super({
       ...rest,
       doRequest: (request, context) => {
-        const resource = getResource(context);
-        return resource(request).$promise;
+        const resource = getResource(context)(request);
+        // ANGULAR_REMOVE_ME just return resource when all Services are migrated
+        return get(resource, "$promise", resource);
       },
       processResults: (results, context) => {
         let processItem = getItemProcessor(context);

client/app/components/permissions-editor/PermissionsEditorDialog.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import axios from "axios";
 import PropTypes from "prop-types";
 import { each, debounce, get, find } from "lodash";
 import Button from "antd/lib/button";
@@ -8,7 +9,6 @@ import Select from "antd/lib/select";
 import Tag from "antd/lib/tag";
 import Tooltip from "antd/lib/tooltip";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { $http } from "@/services/ng";
 import { toHuman } from "@/filters";
 import HelpTrigger from "@/components/HelpTrigger";
 import { UserPreviewCard } from "@/components/PreviewCard";
@@ -23,7 +23,7 @@ const DEBOUNCE_SEARCH_DURATION = 200;
 function useGrantees(url) {
   const loadGrantees = useCallback(
     () =>
-      $http.get(url).then(({ data }) => {
+      axios.get(url).then(({ data }) => {
         const resultGrantees = [];
         each(data, (grantees, accessType) => {
           grantees.forEach(grantee => {
@@ -38,15 +38,15 @@ function useGrantees(url) {
 
   const addPermission = useCallback(
     (userId, accessType = "modify") =>
-      $http
+      axios
         .post(url, { access_type: accessType, user_id: userId })
         .catch(() => notification.error("Could not grant permission to the user")),
     [url]
   );
 
   const removePermission = useCallback(
     (userId, accessType = "modify") =>
-      $http
+      axios
         .delete(url, { data: { access_type: accessType, user_id: userId } })
         .catch(() => notification.error("Could not remove permission from the user")),
     [url]

client/app/components/queries/QueryEditor/QueryEditorComponent.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import { AceEditor, snippetsModule, updateSchemaCompleter } from "./ace";
 import resizeObserver from "@/services/resizeObserver";
-import { QuerySnippet } from "@/services/query-snippet";
+import QuerySnippet from "@/services/query-snippet";
 
 const editorProps = { $blockScrolling: Infinity };
 
@@ -91,7 +91,7 @@ const QueryEditorComponent = React.forwardRef(function(
       }
     });
 
-    QuerySnippet.query(snippets => {
+    QuerySnippet.query().then(snippets => {
       const snippetManager = snippetsModule.snippetManager;
       const m = {
         snippetText: "",

client/app/pages/admin/Jobs.jsx

@@ -1,5 +1,6 @@
 import { flatMap, values } from "lodash";
 import React from "react";
+import axios from "axios";
 import { react2angular } from "react2angular";
 
 import Alert from "antd/lib/alert";
@@ -9,7 +10,7 @@ import Layout from "@/components/admin/Layout";
 import { CounterCard } from "@/components/admin/CeleryStatus";
 import { WorkersTable, QueuesTable, OtherJobsTable } from "@/components/admin/RQStatus";
 
-import { $http, $location, $rootScope } from "@/services/ng";
+import { $location, $rootScope } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import { routesToAngularRoutes } from "@/lib/utils";
 import moment from "moment";
@@ -41,7 +42,7 @@ class Jobs extends React.Component {
   }
 
   refresh = () => {
-    $http
+    axios
       .get("/api/admin/queries/rq_status")
       .then(({ data }) => this.processQueues(data))
       .catch(error => this.handleError(error));

client/app/pages/admin/OutdatedQueries.jsx

@@ -1,5 +1,6 @@
 import { map } from "lodash";
 import React from "react";
+import axios from "axios";
 import { react2angular } from "react2angular";
 
 import Switch from "antd/lib/switch";
@@ -18,7 +19,6 @@ import LoadingState from "@/components/items-list/components/LoadingState";
 import { PageSizeSelect } from "@/components/items-list/components/Sidebar";
 import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";
 
-import { $http } from "@/services/ng";
 import { Query } from "@/services/query";
 import recordEvent from "@/services/recordEvent";
 import { routesToAngularRoutes } from "@/lib/utils";
@@ -156,7 +156,7 @@ export default function init(ngModule) {
         new ItemsSource({
           doRequest(request, context) {
             return (
-              $http
+              axios
                 .get("/api/admin/queries/outdated")
                 // eslint-disable-next-line camelcase
                 .then(({ data: { queries, updated_at } }) => {

client/app/pages/admin/SystemStatus.jsx

@@ -1,12 +1,12 @@
 import { omit } from "lodash";
 import React from "react";
+import axios from "axios";
 import PropTypes from "prop-types";
 import { react2angular } from "react2angular";
 
 import Layout from "@/components/admin/Layout";
 import * as StatusBlock from "@/components/admin/StatusBlock";
 
-import { $http } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import PromiseRejectionError from "@/lib/promise-rejection-error";
 import { routesToAngularRoutes } from "@/lib/utils";
@@ -41,7 +41,7 @@ class SystemStatus extends React.Component {
   }
 
   refresh = () => {
-    $http
+    axios
       .get("/status.json")
       .then(({ data }) => {
         this.setState({

client/app/pages/admin/Tasks.jsx

@@ -1,6 +1,7 @@
 import { values, each } from "lodash";
 import moment from "moment";
 import React from "react";
+import axios from "axios";
 import { react2angular } from "react2angular";
 
 import Alert from "antd/lib/alert";
@@ -9,7 +10,6 @@ import * as Grid from "antd/lib/grid";
 import Layout from "@/components/admin/Layout";
 import { CounterCard, QueuesTable, QueriesTable } from "@/components/admin/CeleryStatus";
 
-import { $http } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import { routesToAngularRoutes } from "@/lib/utils";
 
@@ -34,7 +34,7 @@ class Tasks extends React.Component {
 
   componentDidMount() {
     recordEvent("view", "page", "admin/tasks");
-    $http
+    axios
       .get("/api/admin/queries/tasks")
       .then(({ data }) => this.processTasks(data.tasks))
       .catch(error => this.handleError(error));

client/app/pages/alert/Alert.jsx

@@ -6,7 +6,7 @@ import { $route } from "@/services/ng";
 import { currentUser } from "@/services/auth";
 import navigateTo from "@/services/navigateTo";
 import notification from "@/services/notification";
-import { Alert as AlertService } from "@/services/alert";
+import AlertService from "@/services/alert";
 import { Query as QueryService } from "@/services/query";
 
 import LoadingState from "@/components/items-list/components/LoadingState";
@@ -51,20 +51,20 @@ class AlertPage extends React.Component {
 
     if (mode === MODES.NEW) {
       this.setState({
-        alert: new AlertService({
+        alert: {
           options: {
             op: ">",
             value: 1,
             muted: false,
           },
-        }),
+        },
         pendingRearm: 0,
         canEdit: true,
       });
     } else {
       const { alertId } = $route.current.params;
       AlertService.get({ id: alertId })
-        .$promise.then(alert => {
+        .then(alert => {
           if (this._isMounted) {
             const canEdit = currentUser.canEdit(alert);
 
@@ -100,12 +100,12 @@ class AlertPage extends React.Component {
     alert.name = trim(alert.name) || getDefaultName(alert);
     alert.rearm = pendingRearm || null;
 
-    return alert
-      .$save()
-      .then(() => {
+    const saveAlert = alert.id ? AlertService.save : AlertService.create;
+    return saveAlert(alert)
+      .then(alert => {
         notification.success("Saved.");
         navigateTo(`/alerts/${alert.id}`, true, false);
-        this.setState({ mode: MODES.VIEW });
+        this.setState({ alert, mode: MODES.VIEW });
       })
       .catch(() => {
         notification.error("Failed saving alert.");
@@ -157,15 +157,14 @@ class AlertPage extends React.Component {
 
   delete = () => {
     const { alert } = this.state;
-    return alert.$delete(
-      () => {
+    return AlertService.delete(alert)
+      .then(() => {
         notification.success("Alert deleted successfully.");
         navigateTo("/alerts");
-      },
-      () => {
+      })
+      .catch(() => {
         notification.error("Failed deleting alert.");
-      }
-    );
+      });
   };
 
   mute = () => {

client/app/pages/alert/components/AlertDestinations.jsx

@@ -5,9 +5,8 @@ import { without, find, isEmpty, includes, map } from "lodash";
 import SelectItemsDialog from "@/components/SelectItemsDialog";
 import { Destination as DestinationType, UserProfile as UserType } from "@/components/proptypes";
 
-import { Destination as DestinationService, IMG_ROOT } from "@/services/destination";
-import { AlertSubscription } from "@/services/alert-subscription";
-import { $q } from "@/services/ng";
+import DestinationService, { IMG_ROOT } from "@/services/destination";
+import AlertSubscription from "@/services/alert-subscription";
 import { clientConfig, currentUser } from "@/services/auth";
 import notification from "@/services/notification";
 import ListItemAddon from "@/components/groups/ListItemAddon";
@@ -71,9 +70,9 @@ export default class AlertDestinations extends React.Component {
 
   componentDidMount() {
     const { alertId } = this.props;
-    $q.all([
-      DestinationService.query().$promise, // get all destinations
-      AlertSubscription.query({ alertId }).$promise, // get subcriptions per alert
+    Promise.all([
+      DestinationService.query(), // get all destinations
+      AlertSubscription.query({ alertId }), // get subcriptions per alert
     ]).then(([dests, subs]) => {
       subs = subs.map(normalizeSub);
       this.setState({ dests, subs });
@@ -142,12 +141,12 @@ export default class AlertDestinations extends React.Component {
   subscribe = dest => {
     const { alertId } = this.props;
 
-    const sub = new AlertSubscription({ alert_id: alertId });
+    const sub = { alert_id: alertId };
     if (dest) {
       sub.destination_id = dest.id;
     }
 
-    return sub.$save(() => {
+    return AlertSubscription.create(sub).then(sub => {
       const { subs } = this.state;
       this.setState({
         subs: [...subs, normalizeSub(sub)],
@@ -156,18 +155,17 @@ export default class AlertDestinations extends React.Component {
   };
 
   unsubscribe = sub => {
-    sub.$delete(
-      () => {
+    AlertSubscription.delete(sub)
+      .then(() => {
         // not showing subscribe notification cause it's redundant here
         const { subs } = this.state;
         this.setState({
           subs: without(subs, sub),
         });
-      },
-      () => {
+      })
+      .catch(() => {
         notification.error("Failed unsubscribing.");
-      }
-    );
+      });
   };
 
   render() {

client/app/pages/alerts/AlertsList.jsx

@@ -13,7 +13,7 @@ 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 { Alert } from "@/services/alert";
+import Alert from "@/services/alert";
 import { routesToAngularRoutes } from "@/lib/utils";
 
 export const STATE_CLASS = {
@@ -121,7 +121,7 @@ export default function init(ngModule) {
             return Alert.query.bind(Alert);
           },
           getItemProcessor() {
-            return item => new Alert(item);
+            return item => item;
           },
         }),
         new StateStorage({ orderByField: "created_at", orderByReverse: true, itemsPerPage: 20 })

client/app/pages/dashboards/ShareDashboardDialog.jsx

@@ -1,11 +1,11 @@
 import { replace } from "lodash";
 import React from "react";
+import axios from "axios";
 import PropTypes from "prop-types";
 import Switch from "antd/lib/switch";
 import Modal from "antd/lib/modal";
 import Form from "antd/lib/form";
 import Alert from "antd/lib/alert";
-import { $http } from "@/services/ng";
 import notification from "@/services/notification";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import InputWithCopy from "@/components/InputWithCopy";
@@ -53,13 +53,13 @@ class ShareDashboardDialog extends React.Component {
     const { dashboard } = this.props;
     this.setState({ saving: true });
 
-    $http
+    axios
       .post(this.apiUrl)
-      .success(data => {
+      .then(({ data }) => {
         dashboard.publicAccessEnabled = true;
         dashboard.public_url = data.public_url;
       })
-      .error(() => {
+      .catch(() => {
         notification.error("Failed to turn on sharing for this dashboard");
       })
       .finally(() => {
@@ -71,13 +71,13 @@ class ShareDashboardDialog extends React.Component {
     const { dashboard } = this.props;
     this.setState({ saving: true });
 
-    $http
+    axios
       .delete(this.apiUrl)
-      .success(() => {
+      .then(() => {
         dashboard.publicAccessEnabled = false;
         delete dashboard.public_url;
       })
-      .error(() => {
+      .catch(() => {
         notification.error("Failed to turn off sharing for this dashboard");
       })
       .finally(() => {