SirixDB Community Forum / Discussions

SirixDB front-end / first steps

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

1 Like

Wow, very cool :slight_smile:

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

1 Like

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?

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:

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

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

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

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

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:

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

1 Like

Yes, that’s what I thought :slight_smile:

1 Like

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

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:

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:

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.

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

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

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

Is the proxy working, at least?

Yes, I mean it’s trying to proxy :wink:

the error is:

ERROR [HPM] Error occurred while trying to proxy request /user/authorize?protocol=oauth2&response_type=code&access_type=offline&redirect_uri=http%3A%2F%2Flocalhost%3A3005%2Fcallback&state=Z7y9ab2KKQVj1H2YPaoDw from localhost:3005 to https://localhost:9443 (DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

1 Like