SirixDB Community Forum / Discussions

SirixDB front-end / first steps

#1

I think the best would be to have a tree-view (of databases and as children the resources thereof). This should show the databases for which a user has permissions. But to simplify we currently have a kind of super administrator, who can view, update, create and delete all databases.

So… initially this tree-view will be empty. We then need to have a possibility to create one node, a database, and which type (based on XML or JSON currently supported).

I think then we’ll be able to provide a kind of file Upload component, which can upload multiple JSON or XML files (depending on the type of database) to create binary resources of these files in SirixDB and an initial revision :slight_smile:

For sure we should be able to use any XML documents or JSON files. For now, we can for instance use test data from bundles/sirix-core/src/test/resources.

I think that would be a good first step.

What do you think?

#2

Sounds good. I may start working on it today, in which case I will post an update.

1 Like
#3

Wow, very cool :slight_smile:

For the file upload, you can have a look into this issue

1 Like
#4

By the way, do you think it makes sense to develop the request functions separate from the frontend, so they could be distributed as their own javascript sdk for sirix?

#5

Hm, I don’t know. I’d prefer TypeScript :slight_smile: But for this we can use the new Vue.js Composition API I guess (already usable in Vue.js 2). I think then the components have all the related functions and stuff together :slight_smile:

#6

Oh and have a look into the REST-API.

Note, that we don’t have to get the token anymore, it’s already stored in Nuxt.js (we are using the OAuth2 Authentication Flow (Browser based) instead of the OAuth2 Password Credentials Flow). We just have to make sure that the axios plugin always sends the required token in the Authentication Header.

1 Like
#7

I have no problem with TypeScript, only that having an SDK (whether typescript or javascript) would allow others to more easily access the database as part of an application.

1 Like
SirixDB Client SDKs
#8

I think you’re right :slight_smile: and I think it’s easy to load the functions we need via the Composition API for instance.

1 Like
#9

For now I’ll just work within Vue, once you set up a repository for the SDK, we can extract the logic.

#10

Sounds great. So I think the first thing is to create a database “page” in Nuxt.js, which includes a tree-component for displaying and adding databases :slight_smile:

#11

Thinking of this:
https://element.eleme.io/#/en-US/component/tree#tree

1 Like
#12

Yes, that’s what I thought :slight_smile:

1 Like
#13

I probably won’t be able to continue until sunday, so here is what I have:

<template>
  <div class="databases">
    <h3>Databases</h3>
    <el-tree :data="databases" :props="defaultProps"></el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TreeView extends Vue {
  created() {
    console.log("begin");
    this.getDatabases().then(databases => {
      this.databases = databases;
    });
    this.databases.forEach(element => {
      for (let database in element.keys) {
        this.getResources(database);
      }
    });
  };

  private databases: Array<Map<string, string>> = [];
  private defaultProps = this.databases;

  private getDatabases(): Promise<Array<Map<string, string>>> {
    return this.$axios
      .$get("/")
      .then((res: any) => {
        return Promise.resolve(res.data);
      })
      .catch(() => {
        return 0;
      });
  }

  private getResources(database: string) {
    this.$axios
      .$get(`sirix/${database}`)
      .then((res: any) => {
        console.log(res.data);
      })
      .catch(() => {
        return 0;
      });
  }
}
</script>

Since routing to the server is done directly (without proxy) I seem to be running into CORS, I can’t continue dealing with this now, so I leave this to you.

1 Like
#14

I think I got rid of the CORS error. You may have to update your sirix sources, as well as from the frontend and do a sudo docker-compose build server to rebuild your SirixDB HTTP-Server docker image.

However, this mocking bug seems to appear :frowning:

#15

Sorry, still doesn’t seem to work. Even if I add the following in my sirix.conf:

“cors.allowedOriginPattern”: “http://localhost:3005”,
“cors.allowCredentials”: true

It seems that the SirixDB HTTP-Server somehow responds with an “Access-Control-Allow-Origin: *” header, but it must be restricted to for instance “http://localhost:3005” to work.

That said, I want to get the proxy stuff working as well. I think the full URL path needs to be specified:

  axios: {
    baseURL: 'https://localhost:9443',
    browserBaseURL: 'https://localhost:9443',
    proxyHeaders: true,
    proxy: true,
    debug: true,
    credentials: true
  },
  auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: '/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: '/token',
	response_type: 'code',
	token_type: 'Bearer',
	token_key: 'access_token',
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/user/authorize': {
      target: 'https://localhost:9443'
    },
    '/token': {
      target: 'https://localhost:9443'
    },
  }

This, however does not work because of my self signed certificate. I posted in the Vue.js Forum. Maybe someone knows why. Must have something to do with the proxy I guess and not with Axios itself :frowning:

#16

Hmm. I’m not at my computer at the moment, but the proxy is meant to route connections from :3005 to :8080. I’m surprised that the auth and proxy config here (ignore the env config) doesn’t work for you. In fact, yestersay (I couldn’t resist trying again) I got the proxy to contact the database, I’ll post the config when I have a chance.

#17

I’m using the following config:

auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: 'https://192.168.99.101:9443/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: 'https://192.168.99.101:9443/token',
	response_type: 'code',
  token_type: 'Bearer',
  token_key: 'access_token',
  client_id: 'sirix',
  client_secret: '3ae9dfd6-cca4-49a9-b0be-0c74d9daba15',
  redirect_uri: 'http://localhost:3005/callback',
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/auth/': {
      target: 'http://192.168.99.101:8080',
      pathRewrite: {'^/api/': ''}
    },
    '/sirix': {
      // target: 'https://localhost:9443/',
      target: 'https://192.168.99.101:9443/',
      pathRewrite: {'^/api/sirix/': ''}
    }
  }
}
1 Like
#18

By the way, you should alter the plugins config to plugins: ['@/plugins/element-ui', '@/plugins/dependencyContainer.ts', '@/plugins/axios'],, otherwise the axios plugin doesn’t seem to be invoked. Unfortunately, the $axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false }) in the axios plugin doesn’t seem to be helping with the self signed certificate.

1 Like
#19

Thanks, I’ve updated the nuxt config and the axios plugin. However, you’re right, that it doesn’t help.

#20

Is the proxy working, at least?