Commit b7c96bdf authored by StreatCodes's avatar StreatCodes
Browse files

Move all fetch calls into their own API file

parent 322313ba
......@@ -4,6 +4,7 @@ import { useState, useEffect } from 'preact/hooks';
import { CardOptionFields } from './elements/card';
import { routeParam, removeParam } from './util';
import { route } from 'preact-router';
import * as meerkat from './meerkat';
function sortHost(a, b) {
return a.displayName.toLowerCase() > b.displayName.toLowerCase() ? 1 : 0;
......@@ -18,19 +19,15 @@ function IcingaCheckList({check, updateCheckID}) {
const [services, setServices] = useState(null);
useEffect(() => {
fetch(`/icinga/hosts`)
.then(res => res.json())
.then(h => {
h.sort(sortHost);
setHosts(h);
});
fetch(`/icinga/services`)
.then(res => res.json())
.then(s => {
s.sort(sortService);
setServices(s)
});
meerkat.getIcingaHosts().then(h => {
h.sort(sortHost);
setHosts(h);
});
meerkat.getIcingaServices().then(s => {
s.sort(sortService);
setServices(s)
});
}, [])
if(hosts === null || services === null) {
......
......@@ -2,11 +2,11 @@ import { h, Fragment } from 'preact';
import { route } from 'preact-router';
import { useEffect, useReducer } from 'preact/hooks';
import * as meerkat from './meerkat'
import { SidePanelChecks, CheckSettings } from './check-settings';
import { SidePanelStatics, StaticSettings } from './static-settings';
import { CardElement } from './elements/card';
import { removeParam } from './util';
import { StaticText } from './statics/text';
import { StaticSVG } from './statics/svg';
import { StaticImage } from './statics/image';
......@@ -71,12 +71,9 @@ export function Editor({slug, selectedCheckId, selectedStaticId}) {
const [dashboard, dashboardDispatch] = useReducer(dashboardReducer, null);
useEffect(() => {
//TODO error handling
fetch(`/dashboard/${slug}`)
.then(async res => dashboardDispatch({
type: 'setDashboard',
dashboard: await res.json()
}));
meerkat.getDashboard(slug).then(async d => {
dashboardDispatch({ type: 'setDashboard', dashboard: d });
});
}, [slug]);
if(dashboard === null) {
......@@ -283,11 +280,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedS
const saveDashboard = async e => {
console.log(dashboard);
try {
const data = await fetch(`/dashboard/${slug}`, {
method: 'POST',
body: JSON.stringify(dashboard)
}).then(res => res.json());
const data = await meerkat.saveDashboard(slug, dashboard);
route(`/edit/${data.slug}${window.location.search}`)
//TODO show success
} catch (e) {
......@@ -316,17 +309,11 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedS
function SidePanelSettings({dashboardDispatch, dashboard}) {
const handleBackgroundImg = async e => {
try {
const data = await fetch('/upload', {
headers: {
"filename": e.target.files[0].name
},
method: 'POST',
body: e.target.files[0]
}).then(res => res.json());
const res = await meerkat.uploadFile(e.target.files[0]);
dashboardDispatch({
type: 'setBackground',
background: '/' + data.url
background: '/' + res.url
});
} catch (e) {
//TODO improve
......
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import * as meerkat from '../meerkat';
// Value Host State Service State
// 0 Up OK
// 1 Up Warning
......@@ -34,12 +36,10 @@ export function CardElement({check}) {
const id = check.checkID;
const t = checkType(id);
fetch(`/icinga/${t}s/${encodeURIComponent(id)}`)
.then(res => res.json())
.then(res => {
const state = states[t][res[0].state];
setCheckState(state);
});
meerkat.getIcingaCheckState(id, t).then(res => {
const state = states[t][res[0].state];
setCheckState(state);
});
}
//Setup check refresher
......
......@@ -2,6 +2,8 @@ import { h, Fragment, createRef } from 'preact';
import { route } from 'preact-router';
import { useState, useEffect } from 'preact/hooks';
import * as meerkat from './meerkat';
function CopyTextBox({text}) {
const ref = createRef();
......@@ -36,7 +38,6 @@ function CreateDashboardModal({hide}) {
const createDashboard = async e => {
try {
//TODO validate SERVER SIDE titleToSlug(title).length > 0
const newDashboard = {
title: title,
background: null,
......@@ -44,12 +45,8 @@ function CreateDashboardModal({hide}) {
statics: []
}
const data = await fetch(`/dashboard`, {
method: 'POST',
body: JSON.stringify(newDashboard)
}).then(res => res.json());
route(`/edit/${data.slug}`);
const res = await meerkat.createDashboard(newDashboard);
route(`/edit/${res.slug}`);
} catch(e) {
//TODO
console.log("Failed to create modal")
......@@ -76,11 +73,7 @@ function CreateDashboardModal({hide}) {
}
function DashboardList({dashboards, loadDashboards, filter}) {
const deleteDashboard = (slug) => {
fetch(`/dashboard/${slug}`, {
method: 'DELETE'
}).then(loadDashboards)
}
const deleteDashboard = slug => meerkat.deleteDashboard(slug).then(loadDashboards);
if(dashboards === null) {
return <div class="subtle loading">Loading Dashboards</div>
......@@ -119,11 +112,7 @@ export function Home() {
const [dashboards, setDashboards] = useState(null);
const [filter, setFilter] = useState('');
const loadDashboards = () => {
fetch('/dashboard')
.then(res => res.json())
.then(dbs => setDashboards(dbs));
}
const loadDashboards = () => meerkat.getAllDashboards().then(dbs => setDashboards(dbs));
useEffect(loadDashboards, []);
......
//TODO error handling in here
export async function getIcingaHosts() {
const res = await fetch(`/icinga/hosts`)
return res.json();
}
export async function getIcingaServices() {
const res = await fetch(`/icinga/services`)
return res.json();
}
export async function getIcingaCheckState(checkId, checkType) {
const res = await fetch(`/icinga/${checkType}s/${encodeURIComponent(checkId)}`);
return res.json();
}
export async function getAllDashboards() {
const res = await fetch('/dashboard')
return res.json();
}
export async function getDashboard(slug) {
const res = await fetch(`/dashboard/${slug}`);
return res.json();
}
export async function createDashboard(dashboard) {
const res = await fetch(`/dashboard`, {
method: 'POST',
body: JSON.stringify(dashboard)
})
return res.json();
}
export async function saveDashboard(slug, dashboard) {
const res = await fetch(`/dashboard/${slug}`, {
method: 'POST',
body: JSON.stringify(dashboard)
})
return res.json();
}
export async function deleteDashboard(slug) {
const res = await fetch(`/dashboard/${slug}`, {
method: 'DELETE'
})
return res;
}
export async function uploadFile(file) {
const res = await fetch('/upload', {
headers: {
"filename": file.name
},
method: 'POST',
body: file
});
return res.json();
}
......@@ -2,6 +2,7 @@ import { h } from 'preact';
import { route } from 'preact-router';
import { useState, useEffect } from 'preact/hooks';
import * as meerkat from './meerkat';
import { CardElement } from './elements/card';
//Read only page
......@@ -9,9 +10,7 @@ export function Viewer({slug}) {
const [dashboard, setDashboard] = useState(null);
useEffect(() => {
fetch(`/dashboard/${slug}`)
.then(res => res.json())
.then(res => setDashboard(res));
meerkat.getDashboard(slug).then(board => setDashboard(board));
}, [slug]);
if(dashboard === null) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment